info

category : JavaScript
[HTML5]Web Storage  @ JavaScript , HTML5 2010年5月13日

HTML5 Web Storageであそびました。

HTML5.JPより抜粋
Web Storage とは、データをブラウザ側に蓄積する仕組みです。
クッキーとよく似ていますが、多くの点で異なります。
Web Storage は大きなデータを蓄積できますので、ユーザーエクスペリエンスの向上や
サーバー負荷の低減に役立てることができます。
現在はW3CのHTML5仕様から分離されてしまいましたが、
次世代のウェブアプリケーションの中核を担うテクノロジーとして期待されています。

WindowsXPの下記のブラウザで動作を確認しました。
Firefox 3.6.3
Safari 4.0.4
Google Chrome 4.1.249.1064

HTML5 Web Storage

key,valueを入力して「保存」をクリックすると

WebStorageにキー、値が保存される。キャッシュをクリアしても消えません。
保存した内容は同じpcで同じブラウザじゃないと閲覧できません。

削除をクリックすると

削除される

参照したサイト一覧(順不同)

HTML5.JP – APIチェッカー – Web Storage
http://www.html5.jp/tutorial/apicheck/webstorage.html

HTML5.JP – W3C – 『Web Storage』日本語訳
http://www.html5.jp/trans/w3c_webstorage.html

[HTML5]Web Messaging  @ JavaScript , HTML5 2010年5月12日

HTML5 Web Messagingで遊んでみました。
イケてるブラウザなら使えるはず。

Web Messaging
フォームにテキストを入力して「送信」を押す

するとiframeでロードしたhtmlに入力したテキストを送信できる

んー?この機能何に使えばいいんだ?・・・よくわからんから保留。

参照したサイト一覧(順不同)

HTML5.JP – HTML5 チュートリアル – HTML5 API チェッカー – HTML5 Web Messaging
http://www.html5.jp/tutorial/apicheck/postmsg.html

W3C – HTML5 Web Messaging
http://dev.w3.org/html5/postmsg/

[HTML5]File API #03  @ JavaScript , HTML5 2010年5月11日

と、言うことは音楽ファイルも再生出来るのではないか。・・・できた。

各ブラウザのコーデック対応状況

Ogg Vorbis mp3 wav
FireFox 3.5 ×
Safari 4 ×
Chrome 3 (beta) ×
Opera 10 (beta) × ×

pcにあるogg音声ファイルをドラッグ&ドロップで再生する。
※Firefox3.6でしか動きません。
File API #03

参照したサイト一覧(順不同)

HTML5.jp – ブラウザーのネイティブなオーディオ
http://www.html5.jp/html5doctor/native-audio-in-the-browser.html

W3C – DOM-Level-2-Events
http://www.w3.org/TR/DOM-Level-2-Events/events.html

[HTML5]File API #01  @ JavaScript , HTML5 2010年5月7日

W3Cで色々策定しているみたいです。色々と。
で、HTML5であそんでみたクエストというものを見つけて
私もFileAPIであそんでみました。

pcにある画像ファイルをドラッグ&ドロップでブラウザに表示する。
※Firefox3.6でしか動きません。
File API #01


と、言うことは・・・。

参照したサイト一覧(順不同)

HTML5であそんでみたクエスト
http://dot3.jp/html5quest/

W3C – FileAPI
http://dev.w3.org/2006/webapi/FileAPI/

株式会社あゆた – HTML5サンプル集
http://ayuta.co.jp/html5-samples/

しばそんノート – W3C File APIを使ってJavaScriptでファイル加工
http://d.hatena.ne.jp/shibason/20100111/1263191021

[HTML5]Drag&Drop API  @ JavaScript , HTML5 2010年5月6日

W3Cで色々策定しているみたいです。色々と。
ブラウザがネイティブのDnDをサポートしているそうなので遊んでみました。

HTML5 – DnD

WindowsXPの以下のブラウザで動作を確認しました。
Firefox3.6
Google Chrome 4.1.249.1064

参照したサイト一覧(順不同)

HTML5.JP – ネイティブのドラッグ & ドロップ
http://www.html5.jp/html5doctor/native-drag-and-drop.html

本の虫 – QuirksBlog: HTML5のドラッグ&ドロップはクソだ
http://cpplover.blogspot.com/2009/09/quirksblog-html5.html

Diaspar Journal – Drag & Drop – HTML5 版
http://diaspar.jp/node/200

[twitter]friends visualizer on GoogleMap AJAX version  @ Twitter , JavaScript , ajax 2010年4月26日

前々回のエントリーで
flashが重いとのご意見を頂いたのでAJAXで作ってみました。
・・・AJAXでも重い。線引くと。

地図ドラッグ:全体移動
サムネクリック:対象のtwitterページを開く
マウスホイール:ズームインアウト

friends visualizer on GoogleMap AJAX version

さて、次のは何を作ろうか。

[twitter]dokoitter どこいったー?  @ Twitter , PHP , JavaScript , ajax 2010年4月19日

おつかれさまです。

追記
※このコンテンツは2010年6月30日のTwitterのBASIC認証廃止と同時に使用不可になります。
TwitterのBASIC認証廃止、企業ユーザーが知っておくべきこと

twitterの設定で「ツイートに位置情報を入れる」にチェックしても
位置情報を一緒に送信してくれるものが手元に無かったので作りました。
モバツイのイマココでは出来ませんでした。
未確認ですがiPhoneを持ってる人は、GPSTwitあたりを使えば位置情報を
送信、確認できると思います。
dokoitterPCバージョンならGoogleMapで位置を指定して送信できます。
とりあえずどんなものか見たいって人は、ユーザ名に「frasio_report」と入れて、
パスワードは何も入れずにログインをクリックしてみてください。



今回JSONデータ形式とか、モバイルサイトの作り方とか、GoogleMapVersion3とか、
PHPの暗号化、復号化とか、OAuth認証とか
やってたら工数が倍になり、制作に2週間もかかってしまいました。
得るものはたくさんあってなかなか楽しかったです。

モバイルサイトのほうは下記の機種で動作を確認しました。
新しめの携帯なら使えると思いますが、よくわかりません。

au : W53CAで動作を確認しました。
docomo : iモードHTMLシミュレータIIで動作を確認しました。(あてになるのかなこれ)
 ※追記 うまく動かなかったのを修正しました。P906で動作を確認しました。
SoftBank : 820SHで動作を確認しました。
willcom : 確認してません。情報求む。

使い方は下記を参照してください。




今回参照したサイト一覧(順不同)

PHP: PHP マニュアル
http://www.php.net/manual/ja/

Raizlabs – GPS Twit
http://www.raizlabs.com/software/apps/gpstwit

The Google Maps API V3 – Google Maps JavaScript API V3 – Google Code
http://code.google.com/intl/ja/apis/maps/documentation/v3/

Google Code – Google Maps API
http://code.google.com/intl/ja/apis/maps/

SDN Project – PHP+OAuthでTwitter
http://www.sdn-project.net/labo/oauth.html

そふぃのphp入門
http://nyx.pu1.net/

Twitlogo
http://www.twitlogo.com/

[観] Twitter API 仕様書 (勝手に日本語訳シリーズ)
http://watcher.moe-nifty.com/memo/2007/04/twitter_api.html

りょーちの駄文と書評 – Twitter APIをphpで使う方法(サンプル)
http://ryouchi.seesaa.net/article/40073217.html

Knowledge Database IT – 3キャリアごとのXHTML用ドキュメントタイプ
http://it.kndb.jp/entry/show/id/2393

携帯GPS機能が扱えるPEAR::Net_UserAgent_Mobile_GPSを使ってみました | 携帯サイトをつくろう。
http://www.plusmb.jp/2008/12/19/1816.html

ウノウラボ Unoh Labs: PHPで暗号化・復号あれこれ
http://labs.unoh.net/2007/11/php_de_crypt.html

Net_UserAgent_Mobile
http://pear.php.net/package/Net_UserAgent_Mobile

GPS携帯 位置情報 基礎知識
http://www.yaskey.cside.tv/mapserver/note/gps.html

PHP TIPS:ITpro – 96. 携帯電話でGPSデータを取得してみよう
http://itpro.nikkeibp.co.jp/article/COLUMN/20080703/310053/

QRコード(二次元バーコード)作成【無料】
http://www.cman.jp/QRcode/

3キャリア対応サイトを作る 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
http://dspt.blog59.fc2.com/blog-category-5.html

CSS Lecture – CSSで中央配置(センターリング)する方法
http://www.css-lecture.com/log/css-beginner/026.html

加藤貴之Wiki – howto/RSA
http://katotakayuki.jp/wiki/index.php?howto/RSA

Schwarz Lanzenreiter – 暗号化アルゴリズム Blowfish を JavaScriptで
http://user1.matsumoto.ne.jp/~goma/js/blowfish.html

【HTMLタグの簡単検索】TAG index – ホームページ作成情報
http://www.tagindex.com/index.html

Load Info – gif generator
http://loadinfo.net/

NTTドコモ – iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/browser/html/tool2/

さて、次もtwitter関連で行こうと思います。

[CSS3]interface4 on CSS3  @ JavaScript , CSS3 + CSS 2010年3月24日

ええ、そうです。お察しの通りネタ切れです。

WindowsXPの下記のブラウザで動作を確認しました。
これら以外のブラウザは正しく動作しない可能性が高いです。
Safari 4.0.4
Google Chrome 4.0.249.89
SRWare Iron 4.0.280

右リング上でマウスホイール:リング回転
右リング以外でマウスホイール:リング前後

interface4 on CSS3


さて、次は何を作ろうか。

[JavaScript]painting on canvas  @ PHP , JavaScript , HTML5 , ajax 2010年3月22日

マウスで絵を描く→pngで保存 というものです。
jsとphpで出来ています。
「保存」を押したときのリアクションはtwitterっぽくしてあります。
canvasタグの使い方はこちらが詳しいです。HTML5.jp – Canvas
「みんなの絵を見る」機能無しのflashバージョンはこちら[Flashからjpg]

HTML5.jpによると下記の環境で動きます。IEは論外。
Firefox 2以降
Safari 4以降
Google Chrome 2以降
Opera 9.2以降

キャンバスドラッグ:線を引く
「太」の数字変更:線の太さ変更
カラーパレットクリック:色選択
「保存」クリック:pngで保存
「消去」クリック:キャンバスを真っ白に
「みんなの絵を見る」:みんなの絵一覧
サムネイルクリック:pngオリジナルサイズを別ウィンドウで開く

painting on canvas


さて、次は何を作ろうか。