【まとめ】JavaScriptでできる事【音・データ保存・ファイル読み書きetc】
どうも！LSSです！！
JavaScriptでできる事…つまりWebアプリで可能な事、ですが、思いのほか色々な事ができちゃいます！
「音が出せる」
「ユーザーが選択したファイルの内容を読める」
「架空のファイルを作成し、ユーザーの環境にダウンロード保存する事ができる」
などなど。
このブログでも色々と試してきましたが、自分の備忘録もかねて、これまでにやってみた事をまとめてみました。
音が出せます！
これはびっくりでした！
HTML5でFlashにとってかわろうとするなら、出来ないハズがない事ではありますが、すでにブラウザ自体に備わってるAPIで実現可能になってるとは！とｗ
【JavaScript】WebAudioAPIで音を生成してみるテスト - Little Strange Software
で、色々な音を作れるツールを作ってみたり、
【JavaScript】WebAudioAPIで１２音階を鳴らしてみます！ - Little Strange Software
12音階を表現する計算を理解したりして、
【WebAudioAPI】MMLプレイヤー、タイミング合わせに成功しました^^ - Little Strange Software
ある程度の完成度のMMLプレイヤーを作ってみたりしました^^
データ保存（WebStorage）
ブラウザにデータを保存する事ができます！
っと、これは昔からcookieというのがあって、例えばインターネット掲示板に投稿した時に投稿者名を覚えててくれたりはしましたが、cookieはセキュリティ上様々な制約があって保存可能なデータ量も限られていました。
が、WebStorageはcookieより手軽に扱えて、保存できるデータ量も多い！
うまく活用すると、面白い使い方が考えられそうですね^^
ファイル読み込み・書き出し
HTMLの<input>タグから、ファイル読み込みを呼び出す事ができ、それによってユーザーが選択したファイルをJavaScriptで取り扱う事ができます。
読み込んだファイルをとりあえずそのまま表示、に挑戦してみました。
テキストファイルの場合と、画像ファイルの場合、それぞれやってみています。
画像ファイルの読み込み、およびファイルをダウンロード保存させる方法を用いてツールを作ってみたりもしました^^
<canvas>タグで用意した描画領域の内容を、画像ファイルとしてダウンロード保存させる部分のコードは、
<p><canvas id="cv0" style="border: 1px solid black;" width="448" height="252"> </canvas></p>
<p><input id="btn" type="button" value="ダウンロードして保存" /></p>
<script>// <![CDATA[
btn.addEventListener('click',cvsave,false);
function cvsave(e){
clkd=document.createElement("a");
clkd.href=cv2.toDataURL("image/png");
clkd.download = 'download.png';
clkd.click();
}
// ]]></script>
こんな感じです。
さらには、
「テキストファイルを読み込み」→「読み込んだ内容を書き換え」→「テキストファイルをダウンロード保存」
という流れを実現してみました。
この「書き換え」の部分を色々置き換えると、様々なテキスト加工ツールになりそうですね^^
テキストファイルの書き出し（ダウンロード保存）、だけでいうと、
もっとシンプルなサンプルがありますｗ
URLでデータを渡す方法
パラレル迷路【完成版】というブラウザゲームを作りました。
これにちょっと仕掛けがあり、「読者さんが記事上で自分で迷路を作り、作った迷路をURLとして投稿、そのリンクを踏んだ他の人がその迷路で遊べる」というもの。
この「同じ記事（ページ）なのに内容が変化する」のには、「location.search」というものを利用しています。
URLの後ろに続けて「?」を入れ、その後ろに文字列を書くと、JavaScriptでその文字列を判定して処理を行う事ができる、というものです。
?以降の部分もURLの一部としてリンクに組み込めるので、はてなブログのコメント欄でも迷路データのやり取りができるんですね。
これも使い方がまだまだ考えられそうです！^^
スマホの加速度センサーのデータを読む
スマホの加速度センサーをJavaScriptで利用する事もできます。
他のセンサーも扱えそうですが、とりあえず加速度だけ試してみました。
ただ、センサー系はスマホ側でセキュリティで護られている部分で、特にiPhoneだと「ユーザーの許可を得る」部分もJavaScriptで作らないといけなかったりしますが、iPhoneを持ってないのでそのあたりが試せずにいます^^;
あとがき
色々やってきましたが、特に「ファイルの読み書き」が面白いですね^^
乱数を用いて作った模様を画像ファイルとしてダウンロードできるのが、特に面白い活用でしたｗ
と、色々できる事が見えてきたところで…あとはアイデアですねぇ。
音出し＋WebStorageで作曲ツールとかも考えてたりします^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
