javascript でテキストをローカルに保存する方法

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

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

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

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

Read More

HTML5 File API を使ってファイル読み込み

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

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

Read More

HTML5 Audio ピアノ制作 : Step2 – アニメーションさせよう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

Read More

HTML5 Audio ピアノ制作 : Step1 – クリックで音を鳴らそう!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

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

Read More