1. /
  2. HTML5

HTML5

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

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

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

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

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

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

[JavaScript] Bowser 2.xでOSやブラウザを判定する

Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんｗ そこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事情が無い限りはメンテナンスされているライブラリを使うべきです。

つい最近もiPadが「iOS」から「iPadOS」に変更になったと同時にSafariのUAが劇的に変化して痛い目をみましたｗ

今回はこの手の判定用のライブラリとしてはメジャーな「Bowser」の使い方をメモしておきます。ちなみにBowserって「スーパーマリオ」の「クッパ」のことなんですね。Bowserでググると意図せずクッパとの戦いになって困ってましたｗ

lancedikson/bowser
https://github.com/lancedikson/bowser
a browser detector. Contribute to lancedikson/bowser development by creating an account on GitHub.
GitHub

※このページの内容はいずれも執筆時点の物です。ドキュメントに無い情報はv2.10.0のソースコードを参考にしています。
続きを読む

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

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

単純にサーバ上にあるファイルをキャッシュしておくだけの用途であれば最近はWebWorkerとCache 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の基本的な利用方法についてまとめます。
続きを読む

[初心者] 最近のJavaScriptの文法をおさらいする

※この記事は専門学校の講義用に書いたものです

JavaScriptはもともとWebブラウザの上で動作するちょっとした処理を行うために登場しました。その後JavaScritの重要性が高まるにつれ、最近の言語に搭載されている機能が無いことに開発者の不満が募ります。そこで満を持して登場したのが新しいJavaScriptの仕様であるES6(ES2015)です。

今回はこのES6(ES2015)から登場した機能の一部をご紹介します。

続きを読む

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

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

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

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

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

続きを読む

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

以前取り上げた通り、音声ファイルを再生したり止めるだけであれば<audio>タグとJavaScriptの組み合わせで簡単に実現できるのですが、一歩踏み込んだことをしようと思うと様々な罠が襲いかかりもだえ苦しむことになりますｗ 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を採用していますが、他の言語でも似たような処理になります。
続きを読む