JavaScript

HTML5の<video>要素を扱う際、再生中にバッファリングで止まらないように、動画データをあらかじめ完全に読み込んでおきたいケースがあります。そんなときに役立つのがoncanplaythroughイベントです。 oncanplaythroughイベントとは oncanplaythroughは、ブラウザが「現状のダウンロード速度でも、途中でバッファリングのために一時停止することなく、最後まで再生できる」と判断した時点で発生するイベントです。このイベントが発火したタイミングで処理を実行すれば、動画が完全にプリロードされた状態であることを検出できます。 例えば、動画の読み込み完了後に

HTML5で同じサウンドを同時に複数回再生するには？HTML5の<audio>要素は、1つの要素につき同時に1つの再生しか行えません。そのため、同じサウンドを同時に複数回再生したい場合は、<audio>要素をクローン（複製）して使用する必要があります。以下の方法はGoogle Chromeで動作します。実装コード例var sound = document.getElementById("incomingMessageSound")var sound2 = sound.cloneNode();sound.play()sound2.play()clone

問題の概要Internet Explorer 8(IE8)は、HTML5で新たに追加された要素(section、article、header、footerなど)を標準状態では認識しません。そのため、画面上の表示だけでなく、印刷用のスタイルシート(印刷スタイルシート)もHTML5タグに対して正しく適用されないという問題が発生します。解決策1:html5shivを利用する最も手軽で確実な解決方法は、「html5shiv」というJavaScriptライブラリを読み込むことです。html5shivは、旧式のInternet ExplorerでもHTML5のセクショニング要素を使用できるようにするポリフ

HTML5キャンバスを切り抜いて特定のサイズでエクスポートする方法 HTML5のCanvasを、指定した幅と高さに切り抜いて画像として書き出したい場合には、「一時的なキャンバス（temporary canvas）」を作成するのが定番のテクニックです。元のキャンバスから必要な領域だけを一時キャンバスへ描画し、その一時キャンバスに対して toDataURL() メソッドを呼び出すことで、切り抜いた画像データを取得できます。 実装の手順 処理の流れは以下の通りです。 getImageData() で元のキャンバスのピクセル情報を取得します。 globalCompositeOperation を

はじめにオフライン環境でも動作するWebアプリケーションにおいて、ユーザーのログイン機能を実装するには、オンライン認証とローカル認証の両方を適切に組み合わせる必要があります。本記事では、その基本的な仕組みと実装のポイントをわかりやすく解説します。オンライン時の認証フローユーザーがログインする際、つまりオンライン状態のときは、まずサーバーに対して認証を行います。サーバー側での認証が成功したら、ユーザー名とハッシュ化されたパスワードをローカルデータベースに保存します。この保存された認証情報が、後のオフラインログインの基盤となります。パスワードハッシュの効率的な管理ローカルデータベース内にアカウント

HTML5のWeb Workerを使用する際、ワーカー内で発生したエラーを適切に処理することは、安定したアプリケーションを構築するために非常に重要です。この記事では、Web Workerでエラーを捕捉するための基本的な方法を、実際のコード例とともに解説します。 Web Workerのエラー処理の基本 Web Worker内でエラーが発生した場合、メインスレッド側でonerrorイベントハンドラを使用することで、そのエラーを捕捉できます。エラーイベントオブジェクトには、以下のような有用なプロパティが含まれています。 message：エラーメッセージの内容 filename：エラーが発生した

はじめにEmber.jsアプリケーションをオフライン環境でも動作させ、ネットワークが復帰した際に自動的にサーバーと同期させたいケースは多くあります。これを実現するには、クライアント側ストレージ向けのアダプターをData Storeに組み込むのが基本のアプローチです。ember-localstorageアダプターを使う最も簡単な方法手軽にオフライン対応を行うなら、「ember-localstorage」アダプターの利用がおすすめです。データをブラウザーのlocalStorageに保存するため、追加のバックエンドなしで永続化が可能になります。App.store = DS.Store.create(

HTML5 Canvasで大きなフォントサイズのテキストを描画する方法 HTML5のCanvas要素で大きなサイズのフォントを正しく描画したい場合には、fontプロパティでフォントのサイズと種類を指定し、lineWidthでストローク（輪郭線）の太さを設定します。 次のサンプルコードでは、180ptのGeorgiaフォントを使って「Demo!」というテキストを描画しています。fillStyleで塗りつぶしの色、strokeStyleで輪郭線の色を指定し、fillText()メソッドとstrokeText()メソッドを組み合わせることで、白い文字に赤い縁取りが付いた、見栄えの良い大きなテキストを

PhoneGapとはPhoneGapは、Adobe Systemsが提供するソフトウェア開発フレームワークで、モバイルアプリケーションの開発を効率化するためのツールです。iOS、Android、BlackBerry、Windows Mobileなど、主要なモバイルOS向けのアプリを、単一のコードベースから構築できる点が大きな特徴となっています。HTML5オーディオ再生の課題HTML5のaudio要素による音声再生は、コーデックのライセンス問題やOSごとの実装の違いにより、デバイス間で挙動が統一されていません。そのため、Android端末を含むさまざまな環境で同じように音声を再生するのは容易では

HTML5のAppCache（アプリケーションキャッシュ）は、ブラウザが現在表示しているページに関連するファイルをサイト上に明示するために使われる仕組みです。しかし、Safariでは他のブラウザと異なる挙動により、外部ドメインのCSSなどが正しく読み込まれないケースがあります。なぜSafariでクロスサイトCSSが読み込めないのかSafariはAppCacheの標準仕様をより厳密に解釈します。そのため、マニフェスト（キャッシュ対象リスト）に記載されていないWebアドレスへのリクエストを検出すると、そのリクエストをブロックしてしまうのです。結果として、別ドメインから読み込んでいるCSSやその他の

HTML5のCanvasで描画したベジェパス形状がクリックされたかどうかを判定したい場面は少なくありません。本記事では、getImageData()を使ったピクセル単位のヒットテスト手法を、実際のコード例とともにわかりやすく解説します。 基本的な考え方：ピクセルのアルファ値で当たり判定を行う ベジェ曲線のような複雑な形状は、数学的に交点を計算して当たり判定を行うのが難しい場合があります。そこで有効なのが「ピクセルを読み取る方式」です。具体的には、次の手順で判定します。 マウス座標（mx, my）に対応する1×1ピクセルの画像データを取得する そのピクセルのアルファ値（透明度）を確認する アル

ダブルクリックによるテキスト選択の問題とはHTML5のキャンバス（canvas）要素をページに配置した場合、キャンバス上をダブルクリックすると、意図せず周囲のテキストが選択されてしまうことがあります。これは、ブラウザのデフォルトのテキスト選択動作が原因です。特にインタラクティブな描画アプリやゲームを作成している場合、この挙動はユーザー体験を損なう要因となります。解決策：onselectstartイベントを無効化するこの問題を回避するには、キャンバス要素に対して onselectstart イベントハンドラを設定し、false を返すようにします。これにより、ダブルクリック時のテキスト選択が無効

HTML5の<video>タグを使って動画を特定の時刻から再生したいのに、currentTimeを設定しても反映されない——この問題に悩まされている方は少なくありません。特にGoogle Chromeでは、Webサーバー側の設定が原因でシーク機能そのものが無効化されるケースがあります。本記事では、その原因と具体的な対処法を解説します。currentTimeが無視される主な原因：バイトレンジ非対応最も多い原因は、WebサーバーがHTTPのバイトレンジ（Rangeリクエスト）に対応していないことです。Chromeをはじめとするモダンブラウザは、動画をシーク再生する際に、ファイル全体では

チェックボックスをネイティブスタイルに戻せない理由 一部のWebブラウザでは、一度CSSでカスタマイズしたチェックボックスの見た目を、デフォルトのネイティブスタイルへ完全に戻す（リセットする）ことができません。これは、ブラウザごとにフォーム部品の内部実装が異なるために生じる制限です。 解決策：スタイルを適用するinputタイプを個別に指定する チェックボックスに不要なスタイルが適用されるのを防ぐには、スタイルを当てたいinputタイプをすべて明示的に列挙するのが確実な方法です。例えば、テキストボックスとパスワード入力欄だけに枠線を付けたい場合は、次のように記述します。 input[type=t

クロスブラウザ対応のファイルアップロードの課題Webアプリケーションにファイルアップロード機能を実装する際、ブラウザごとの挙動の違いに悩まされることは少なくありません。特にドラッグ＆ドロップによるアップロードは、HTML5対応ブラウザとレガシーブラウザで実装方法が異なるため、すべての環境で一貫して動作させるのは容易ではありません。FileDropとはそんな課題を解決するのが、JavaScriptライブラリ「FileDrop」です。FileDropは自己完結型（self-contained）のクロスブラウザ対応アップローダーで、ほぼすべてのモダンなWebブラウザ上で動作します。公式の仕様によると

複数ファイルアップロードでプログレスバーを個別に動かすには HTML5のXMLHttpRequest（XHR）を使って複数のファイルをアップロードする場合、ファイルごとに進捗状況を示すプログレスバーを表示したいことがよくあります。しかし、この機能を正しく動作させるには、少し工夫が必要です。 問題の原因は、xhr の progress イベントが、すべてのリスト項目（li要素）の作成が完了した後に発火するという点にあります。そのため、イベント発生時にどのプログレスバーを更新すべきかを、XHR側が把握できるようにする必要があります。 解決策：XHRに対応するリスト項目を紐付ける 具体的には、アップ

HTML5のFile APIを使ってreadAsBinaryStringでファイルを読み込むと、ディスク上の実際のファイルよりもサイズが大きくなったり、内容が変わってしまうことがあります。発生する原因この問題は、ファイルをバイナリ文字列として読み込み、そのデータをもとにmultipart/form-dataリクエストを手動で組み立てている場合によく発生します。バイナリ文字列として扱う過程でエンコードの変換が起こり、元のバイナリデータが正確に保持されないためです。解決策このような場合は、xhr.send(File)を使ってFileオブジェクトを直接送信する方法を試してください。アップロードの進捗

HTML5のGeolocation APIには、位置情報の取得精度を指定するためのオプション「enableHighAccuracy」が用意されています。この値をどちらに設定すべきか迷う開発者も多いですが、実践的な使い方はとてもシンプルです。まずはtrueを指定してみる高精度な位置情報（GPSなど）が必要な場合は、まず以下のようにtrueを設定しましょう。enableHighAccuracy: truetrueを指定すると、端末はGPSなどを活用して、より正確な位置情報を取得しようとします。ただし、その分だけ取得に時間がかかったり、バッテリー消費が増えたりする点には注意が必要です。タイムアウトエ

HTMLの<audio>要素を複数配置し、前の音声が終わったタイミングで次の音声を自動的に再生したいケースはよくあります。ユーザーにいちいちクリックさせたり、ポップアップを表示したりせずに連続再生を実現するには、JavaScriptのonendedイベントを活用するのが最もシンプルです。 手順1：audio要素を用意する まず、再生したい音声ファイルごとに<audio>ブロックを記述します。以下のように、識別用のidを付けて複数の音声を定義しましょう。 <audio id=one> <source src=new1.mp3 type=audio

かつてcreateObjectURL()は、WebKit系ブラウザ（旧版のChromeやSafariなど）ではwindow.webkitURL.createObjectURL()というベンダープレフィックス付きの実装が提供されていました。一方、標準仕様に準拠したブラウザではwindow.URL.createObjectURL()が利用できます。 このようなブラウザ間の差異を吸収するには、機能検出（フィーチャーディテクション）を行うラッパー関数を定義するのが確実な方法です。以下のように実装します。 function display(file) { if (window.webkitURL