JavaScript

Web開発において、要素に設定されたHTML属性の値を取得したり、特定の属性が存在するかどうかを確認したりする場面はよくあります。この記事では、jQueryのattr()メソッドと、JavaScript標準のhasAttribute()メソッドを使った方法を紹介します。 attr()メソッドで属性の値を取得する HTML属性の値を取得したい場合は、以下のようにattr()メソッドを使用します。 $(#demo).attr(tabindex) attr()メソッドは、マッチした要素のうち最初の要素から属性の値を取得するだけでなく、マッチしたすべての要素に対して属性値を設定することもできる、非常に

```html HTML5のapplicationCache(アプリケーションキャッシュ)とはapplicationCacheとは、Webアプリケーションをローカル環境にキャッシュし、インターネットに接続していなくてもアクセスできるようにするHTML5の仕組みです。具体的には、あらかじめ指定されたリソース(HTML、CSS、JavaScript、画像など)をブラウザが事前にダウンロードして保存しておき、オフライン状態でもそのコピーを読み込んでアプリケーションを動作させることができます。applicationCacheの主なメリットオフラインでも利用可能: ネットワーク未接続の状態でも、キャッシ

HTML5 Canvasでフレームごとのアニメーションを作成するHTML5のCanvas要素を利用すると、複数の画像ファイルを一定間隔で順番に切り替えて描画するだけで、手軽にコマ送り（フレームごと）のアニメーションを実現できます。Flashなどのプラグインに頼らず、JavaScriptだけでも滑らかなアニメーションが作れるのが魅力です。以下は、Canvas上で連番の画像を読み込み、パラパラ漫画のようにアニメーションを再生するシンプルなサンプルコードです。var myImageNum = 1; // 現在表示中の画像番号 var lastImage = 5; // 最後の画像番号 v

既存のWebページをモバイル対応にするにはすでに公開しているWebページをモバイル対応に改良する（リトロフィットする）には、CSSメディアクエリを活用するのが効果的です。メディアクエリを使えば、ブラウザやデバイスの機能・画面サイズに応じて、異なるスタイルシートを柔軟に適用できます。サーバーサイドのコードが不要この方法の大きなメリットは、サーバーサイドのコードを一切書く必要がないことです。メディアクエリを使わない場合、デバイスを種類ごとに分類するための検出コードをスクリプトに追加する必要があり、実装の手間や保守コストが増えてしまいます。さらに、メディアクエリは標準仕様に基づいているため、自分が聞

スマートフォンのブラウザで位置情報を取得する際、その精度はブラウザの種類によって大きく異なります。せっかくGPS機能を搭載した端末を使っていても、ブラウザの仕様によっては思ったほど正確な位置情報が得られないことがあります。Android標準ブラウザの制限Androidの標準ブラウザは、セキュリティ上の理由により、正確なGPS位置情報を提供しない仕様になっています。そのため、標準ブラウザ経由で取得した位置情報は、実際の場所から大きくずれる可能性があります。高精度な位置情報を取得したい場合は、インストール時に位置情報へのアクセス権限を求めるサードパーティ製ブラウザ(Google ChromeやFi

HTML5 Canvasで動画の最終フレームを保持するHTML5の<video>要素は、再生が終了するとデフォルトでは指定したポスター画像や真っ黒な画面に戻ってしまいます。そこで、Canvasに動画のフレームを描画し続けることで、再生終了後も最後のフレーム（静止画）をそのまま表示させることができます。実装コード以下のコードを実行して、動画をCanvas上で再生し、最後のフレームを保持してみてください。var c = $(canvas)[0]; var context = c.getContext(2d); c.width = 640; c.height = 480; $(#my

フォーム入力を快適にするには、ブラウザが備えるオートコンプリート（自動入力）機能に正しく対応させることが重要です。本記事では、HTML5の仕様に基づくautocomplete属性の考え方と、主要なフィールド名の指定方法を解説します。 HTML5仕様におけるオートフィルの仕組み HTML5の公式仕様では、オートフィルに関する動作が次のように定められています。 オートフィルのフィールド名が「on」である場合、ユーザーエージェント（ブラウザ）は、要素のname属性の値や、文書のDOMにおける要素の位置などに基づくヒューリスティクスを用いて、ユーザーに提示すべき最も適切な値を判断しようとする。 つまり

Webアプリケーションでファイルをアップロードする際、従来の「ファイル選択」ボタンだけでなく、ページ全体にファイルをドラッグ＆ドロップできるUIを実装すると、ユーザー体験が大きく向上します。 この記事では、HTMLとJavaScript（バニラJS）のみを使って、画面全体をドロップゾーンとして扱う方法を解説します。ライブラリに依存しないため、軽量でカスタマイズしやすいのが特徴です。 実装のポイント ページ全体でのドラッグ＆ドロップを実現するには、以下の3つの要素が重要になります。 dragenter / dragover イベントの制御： ブラウザのデフォルト動作（ファイルを開く）を防ぐた

toDataURLでUncaught SecurityError例外が発生する原因とは？ JavaScriptでCanvasのtoDataURL()メソッドを呼び出した際、「Uncaught SecurityError」例外がスローされることがあります。このエラーは、別ドメイン（クロスオリジン）から読み込んだ画像をCanvasに描画した場合に発生する、典型的なセキュリティ関連の問題です。 エラーが発生する仕組み ブラウザには「同一オリジンポリシー」というセキュリティ機構が備わっています。外部ドメインの画像をそのままCanvasに描画すると、そのCanvasは「汚染（tainted）」された状

AngularアプリケーションやHTMLページでDragEvent（ドラッグイベント）をプログラム的に作成したい場合は、ProtractorのAPIを利用するのが最も簡単な方法です。この記事では、公式ドキュメントに基づいた実装方法を解説します。Protractorの仕様：browser.getメソッドについてProtractorの公式ドキュメントには、次のように記載されています。The browser.get method loads a page. Protractor expects Angular to be present on a page, so it will throw an

はじめに HTML5の <input type=date> は、ユーザーのブラウザやOSのロケール設定に応じて、日付が自動的にローカル形式で表示されます。例えば、日本語環境では「2024/01/15」のように表示され、米国の英語環境では「01/15/2024」といった形式になります。 一方で、input要素の value プロパティが返す値は、常にISO 8601形式（YYYY-MM-DD）に固定されています。そのため、「画面に表示されている形式と同じ日付文字列」を取得したい場合には、少し工夫が必要です。 valueAsDate を使った方法 input要素には valueAsDa

HTML5オーディオが再生されない原因と解決策PhoneGapアプリでHTML5のオーディオが再生されない場合、属性やオーディオソースの設定がすべて正しいにもかかわらず問題が解決しないときは、セキュリティに関する設定が原因となっている可能性があります。以下の2つの設定を見直すことで、多くの場合この問題を解決できます。1. index.htmlにCSP（Content Security Policy）を追加するまず、index.htmlに次のメタタグを追加してください。media-srcディレクティブで、オーディオファイルの読み込み元ドメインを明示的に許可することがポイントです。<meta

dragstartイベントをプログラムで発火できない理由 HTML5のドラッグ&ドロップAPIにおいて、dragstartイベントはセキュリティ上の制約により、dispatchEvent()などを使ったプログラムからの発火(合成イベント)では実際にドラッグ操作を開始できません。ブラウザは合成されたドラッグイベントを無視する仕様になっており、ドラッグ操作は必ずユーザー自身の操作(マウスやタッチによるジェスチャー)を起点として開始される必要があります。 そのため、「mousemoveイベントの後にdragstartを発火したい」という要件をそのまま実装することはできません。以下に、実用的な解決策を

IE8でフィルターを使用する際の重要なポイント Internet Explorer 8で複数のフィルター効果（グレースケール変換やグラデーションなど）を同時に適用したい場合、各フィルターを個別のプロパティとして指定すると正常に動作しないことがあります。すべてのフィルターは、1つのfilter呼び出しの中にまとめて記述する必要があります。 基本的なフィルターの記述方法 画像や要素をグレースケール表示にするには、以下のようにBasicImageフィルターのgrayscaleプロパティを「1」に設定します。 progid:DXImageTransform.Microsoft.BasicImage(

HTML5動画ソースへの信頼設定が必要な理由AngularJSアプリケーションでは、セキュリティ機構「SCE（Strict Contextual Escaping）」によって、信頼されていない外部リソースの読み込みが自動的にブロックされます。そのため、HTML5のvideo要素で外部ドメインの動画を再生したい場合は、事前にそのURLをホワイトリストへ登録しておく必要があります。configでホワイトリストを設定する方法もっとも効率的なのは、$sceDelegateProviderのresourceUrlWhitelistに許可したいドメインを追加する構成を組み合わせることです。これにより、動画

HTML5の<mark>タグとはHTML5で新しく追加された<mark>タグは、文書内の該当するテキスト部分をハイライト表示（蛍光ペンで塗ったような強調）するための要素です。ただし、古いブラウザの中にはこのタグに対応していないものもあり、実際にスタイルが適用されるかどうかを事前に確認したいケースがあります。jQueryで互換性をチェックするコード以下のコードを使用すると、ブラウザが<mark>タグに対応しているかどうかを動的に判定できます。var $myEL = $(<mark>); $myEL.appendTo(body); var bgCol

HTML5のフォームで、ダッシュ（ハイフン）やカンマを含む数値を入力フィールドで受け付けたい場合、pattern属性に正規表現を指定することで簡単に実現できます。本記事では、具体的なコード例とあわせてその手順をわかりやすく解説します。 pattern属性に正規表現を指定する HTML5では、input要素のpattern属性に正規表現を記述することで、ユーザーが入力できる値の形式を制限できます。ダッシュやカンマを含む数値を受け入れたい場合は、以下のような正規表現を使用します。 [0-9]+([-\][0-9]+)? この正規表現の各部分の意味は次のとおりです。 [0-9]+：1桁以上の数字を

HTML5におけるクライアントサイドXSLT処理クライアント側で動作するXSLTProcessor APIは、HTML5のスクリプティング仕様の一部として定義されています。これにより、サーバーに依存することなく、ブラウザ上でXMLデータをXSLTスタイルシートによって変換し、結果をDOMとして操作できるようになります。仕様で定められたスクリプトの扱いHTML5仕様では、XSLT変換に関連するscript要素の動作について以下のように規定されています。処理命令（processing instruction）によってXSLT変換が起動され、ブラウザがDOMへの直接変換を実装している場合、XSLTプ

HTML5でテーブルを入れ子にしても問題ないのか「table要素の中にさらにtable要素を入れても、HTML5として妥当（valid）なのか？」という疑問を持つ開発者は少なくありません。結論から言うと、適切な構造で記述されていれば、ネストされたテーブルはHTML5として完全に有効です。実際、W3Cの公式バリデーター（Markup Validation Service）でも、以下のようなコードはエラーなく通過します。バリデーターが有効と判定するコード例<!DOCTYPE html> <html> <head> <meta charset =

HTML5オーディオに停止ボタンを追加する方法HTML5のaudio要素には標準で再生・一時停止のコントロールが用意されていますが、「停止（ストップ）」ボタンはデフォルトでは提供されていません。ここでは、JavaScriptを使って停止ボタンを実装する方法を紹介します。JavaScriptを使った実装方法以下のコードを使用すると、オーディオの再生を停止し、再生位置を先頭に戻すことができます。function displayStopBtn() { var myPlayer = document.getElementsByTagName(audio)[0]; myPlayer.pa