HTML5

[HTML5] WebWorkerで並列処理を行う – 共有ワーカー編

前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について取り上げます。

ページが違えど処理は共通と言った場合に利用すれば、クライアントのリソースの消費を抑えることが可能です。
続きを読む

[HTML5] WebWorkerで並列処理を行う – 専用ワーカー編

JavaScriptは非同期処理だから、複数同時に処理してるんでしょ?……と思っていた時期がありましたw JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことです。つまり並列処理とは異なる物。

本来の意味での並列処理を実装するための機能はWebWorkerで実装することができます。シンプルな仕様にまとめられているため簡単にJavaScriptでも並列処理を実現できます。WebWorkerにはいくつか種類があるのですが、今回は「専用ワーカー(Dedicated Workers)」について取り上げます。
続きを読む

[HTML5] IndexedDBに画像ファイルを保存する – Dexie.js

IndexedDBは様々なデータ型に対応しておりblobも例外ではありません。つまり画像ファイルなどバイナリ形式の保存が可能というわけです。IndexedDBへ格納しておけば例えオフライン状態であっても好きなときに取り出して利用することができます。

単純にサーバ上にあるファイルをキャッシュしておくだけの用途であれば最近はWebWorkerCache APIを組み合わせた方が一般的ではありますが、これはデータに対してURLが存在することが前提です。例えばCanvasなどに描画した内容を保存しておきたいといった場合には今回の方法が重宝するかもしれません。
続きを読む

[HTML5] IndexedDBでデータの保存や読み込みを行う – Dexie.js編

JavaScriptがブラウザ内にデータを保存する場合、ちょっとした物であればWebStorageが簡単に使えて便利なのですが、この子は5〜10Mbyte程度の容量しかありません。また純粋なKVSであるがためにそれ以上のことはもちろんできません。

そんな時に利用するのがIndexedDB。WebStorageと比べ非常に大容量で、RDBで言うインデックスやテーブルなど様々な機能が搭載されています。今回はIndexedDBのお話……をしようかと思ったのですが、直接IndexedDBを触るコードは書いていて正直ダルいので、便利ライブラリを通して触ることにしますw
続きを読む

[HTML5] WebStorageにデータの保存や読み込みを行う

ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。

今回はこのWebStorageの基本的な利用方法についてまとめます。
続きを読む

[HTML5] Fetch API でファイルをアップロードする

正直、ファイルのアップロードは考慮すべきことが多すぎてあまり関わりたくないのですが、そうも行かないのが世の定めw 今回はFetchAPIを利用してサクッとファイルをアップする手法についてまとめます。

サーバ側はPHPで実装しますが、考え方は他の言語でも流用できるのではないかと思います。
続きを読む

[HTML5] Fetch API で GET/POST で通信する

Ajaxによる通信は長きに渡りXMLHttpRequest(XHR)で書かれていましたが、HTML5からFetchAPIが実装されずいぶんとシンプルに記述することが可能になりました。今回は基本的な使い方についてまとめておきたいと思います。

続きを読む

[HTML5] 音声ファイルをJSで再生/停止する – howler.js編

以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますw WebAudioAPIを使えばあらゆることが自由自在に出来ますがこいつは学習コストが半端なく使い始めるにはそれ相応の覚悟がいります。

というわけで、若干凝ったことをしたいがWebAudioAPIは避けて通りたい場合には迷うことなく便利ライブラリを使うのがオススメ。今回はこの手の用途ではお約束な「howler.js」を利用します。
続きを読む

[HTML5] 音声をフェードイン・フェードアウトする – audioタグ編

今回は音声ファイルを音量が徐々に上がっていく「フェードイン」する形で再生を開始、逆に音量が徐々に下がっていく「フェードアウト」し再生を終了することに挑戦してみます。

通常は以下のようにplay()で開始するわけですが、これだと音量MAXで始まってしまうため唐突感が生まれてしまう場合があります。停止する際にpause()を実行する場合も同様です。それぞれ「カットイン」「カットアウト」と呼ばれますが、意図したものであればもちろんこれで問題はありません。

<audio id="bgm" src="xxx.mp3" preload></audio>

<script>
  document.querySelector("#bgm").play():   // 唐突に再生される(カットイン)
  document.querySelector("#bgm").pause():  // 唐突に止まる(カットアウト)
</script>

SE(効果音)やジングルなんかはカットインがほとんどですが、しんみりした雰囲気をBGMで出したい場合はフェードイン/フェードアウトを多用することになりますね。

※ご注意※
この方法はiPhoneやiPadなどiOSのWebブラウザでは利用できません。もし対応する場合にはWebAudioAPIを採用する必要があります。

続きを読む

[HTML5] Canvasを画像に変換しサーバへ送信する

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。

今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。

サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。
続きを読む

[HTML5] 音声ファイルの事前ダウンロード – audioタグ編

前回はaudioタグをJavaScriptで操作しましたが、事前にダウンロードが完了した状態で再生を開始することができませんでした。例えばボタンをクリックした瞬間に鳴らす場合にラグが発生したり、再生途中で停止(ダウンロード待ち)する恐れがあります。今回はダウンロードが完了しないと音声が再生できないような処理を追加します。

この手の処理はWebAudioAPIを用いたサンプルがネット上には転がっていますが、単にダウンロードされたことを検知したいだけで利用するには気が重いというか正直などころ面倒なので、前回同様audioタグを活かす方向で作成します。
続きを読む