前回, HTML5 File API を使ってファイルを読み込む方法について書きました. 今回は, Data URI scheme を使ってファイルをローカルに保存する方法について書きます.

去年作った Web Editorで HTML5 から追加された localStorage を使いつつもダウンロード機能も実装しました. これは php 経由で行っているため, 実装は非常に簡単です. ですが, これだと php の動くサーバにアップしないと動かないのでローカルで遊べません.

そこで目をつけたのが Data URI scheme です!! 詳しくはこちら. ざっくり説明しますと, URL に住所だけでなくデータ自体も含めちゃおう! って感じですかね. 間違っていたらごめんなさい.

a タグの href に Data URI scheme を書けばブラウザ側で良い感じに処理してくれます. それを利用することでデータをダウンロードできます. サンプル作ったのでよかったらどぞ～

HTML5 で追加された File API. これを使えば ローカルファイルの情報, 中身を取得して JavaScript でいじることができます. 今後, HTML5 の普及とクラウド化が進むにつれて重要な機能になることは間違いありません. サンプルを作ってみたのでよかったらぜひ. ドラッグ & ドロップにも対応しているよん♪♪

Chrome でローカル上で作業する場合, セキュリティ上ドラッグ & ドロップに反応しない場合があります. その場合, Chromeの起動オプションに –allow-file-access-from-files を指定することで読み込めるようになります.

この Step で完成です! テキストエリアに入力した文字に合わせて自動再生します.

この Step ではキーボード入力でも音が鳴るようにします.

この Step は webkit つまり, Chrome と Safari 限定の Step です. 鍵盤を押すと凹んで色が変わるアニメーションを追加します.

鍵盤をクリックした際に音が鳴るようにします. この Step が今回のプログラムで最も重要です. ここをクリアすればほぼ完成です. っというより完成です.