JavaScript

AndroidアプリのWebView内でHTML5の<video>タグを使ってMP4動画を再生する場合、単にファイルパスを指定するだけでは再生できません。WebViewからローカルファイルへ安全にアクセスできるよう、Content Provider（コンテンツプロバイダ）の宣言と実装が必要になります。以下、その手順を解説します。手順1：マニフェストでContent Providerを宣言するまず、AndroidManifest.xml内にContent Providerを宣言します。これにより、WebViewがアプリ内のファイルにアクセスできるようになります。<provide

テキスト入力フィールドでEnterキーが押されたタイミングで特定の処理を実行したいケースは、Web開発において非常によくあります。検索ボックスやフォーム送信などが代表例です。jQueryを使えば、keyupイベントとキーコードの判定を組み合わせることで、Enterキーの押下を簡単に検出できます。 実装のポイント Enterキーは keyCode の値「13」として認識されます。キーが離されたときに発生する keyup イベントを受け取り、そのキーコードが13であれば、独自に定義したカスタムイベント（ここでは enterKey）をトリガーする仕組みを作ります。 サンプルコード <!DOCT

Webサイトにおいて、フォームはユーザーから情報を入力してもらうための重要な要素です。この記事では、HTMLだけでの基本的なフォーム作成方法と、jQueryを組み合わせてフォームを動的に操作する方法を解説します。 HTMLでフォームを作成する基本 HTMLでフォームを作成するには、<form>タグを使用します。action属性にデータの送信先URLを、method属性に送信方法（getまたはpost）を指定します。基本的なフォームの記述例は以下の通りです。 <form action= method=get>\n 詳細：<br><br>\n 学

HTML5のCanvas（キャンバス）には、変換行列（トランスフォーメーションマトリクス）を直接操作できるメソッドが用意されています。変換行列は、描画される図形の位置・回転・拡大縮小などを数学的に制御するための仕組みで、Canvasの描画状態に大きく影響します。変換行列は、初期状態では必ず「単位変換（アイデンティティ変換）」、つまり何も変形を加えていない状態から始まります。その後、各種の変換メソッドを使って行列を調整していくことで、自由な座標変換が可能になります。主な変換メソッドtranslate(x, y)：原点を指定した座標へ移動させますrotate(angle)：指定した角度だけ回転させ

HTML5のCanvasには、キャンバスのグリッド上の単位を拡大または縮小するための scale(x, y) メソッドが用意されています。このメソッドを活用することで、図形やビットマップを縮小・拡大した状態で描画できます。scale()メソッドの基本scale() メソッドは2つの引数を受け取ります。x: 水平方向の倍率y: 垂直方向の倍率どちらの引数も正の数である必要があります。1より大きい値を指定すると拡大、0〜1の間の値を指定すると縮小されます。サンプルコード以下の例では、スピログラフ(サイクロイド曲線)をさまざまな倍率で描画しています。均等なスケーリングだけでなく、縦横それぞれ異なる倍

HTML5のCanvasには、すべての描画操作に影響を与えるglobalCompositeOperationという合成（コンポジット）属性が用意されています。この属性を活用することで、既存の図形の背後に新しい図形を描画したり、特定の領域をマスクしたり、キャンバスの一部を消去したりといった高度なグラフィック表現が可能になります。 主な合成モードの種類と特徴 globalCompositeOperationには、以下のような値を設定できます。それぞれのモードによって、新しい図形（ソース）と既存の図形（デスティネーション）の重なり方が変化します。 source-over：デフォルト設定。新しい図

エラーの概要音声や動画などのメディアリソースを読み込む際に発生する「DOMException: Failed to load because no supported source was found（サポートされているソースが見つからなかったため、ロードに失敗しました）」というエラー。このエラーの主な原因の一つは、オリジン間リソース共有（CORS：Cross-Origin Resource Sharing）に関する問題です。原因：CORSによる制限異なるドメインからメディアファイルを読み込もうとすると、ブラウザのセキュリティ機能によってアクセスがブロックされ、このDOMExceptionが発

FirefoxとChromeでのmin属性の違いHTML5で導入された入力タイプ「number」では、min属性やmax属性を使って入力可能な数値の範囲を指定できます。しかし、ブラウザによってこれらの属性の扱いには差異があり、特にFirefoxではmin属性が正しく反映されないケースがある一方で、Google Chromeでは正しく機能します。このようなブラウザ間の差異により、同じHTMLコードでもユーザーが使うブラウザによって入力チェックの結果が異なる可能性があるため、注意が必要です。サンプルコード以下は、「1から10までの間の数値を入力してください」という条件を指定したフォームの例です。&

オーバーレイ要素のクリックを透過させる必要性 Web開発では、装飾やガイド表示のために他の要素の上に重ねたオーバーレイ要素が、下にあるボタンやリンクのクリックを妨げてしまうことがあります。このような場合、クリックイベントを下層の要素へ渡すことで問題を解決できます。 クリックイベントでマウス座標を取得する まず、clickイベントのハンドラ内でマウスの座標（clientX・clientY）を取得します。 次に、一時的にオーバーレイを非表示状態にしてから、以下のメソッドを使って指定座標上にある要素を取得します。要素の取得が完了したら、忘れずにオーバーレイを再表示しましょう。 document

HTML5のCanvasでは、translate(x, y)メソッドを使うことで、キャンバスの描画起点（原点）をグリッド上の別の位置へ移動できます。図形を複数の位置に効率よく描画したい場合に非常に便利な機能です。 translate()メソッドの基本 translate()メソッドは2つの引数を受け取ります。 x：キャンバスを左右に移動する量（正の値で右、負の値で左） y：キャンバスを上下に移動する量（正の値で下、負の値で上） このメソッドを実行すると、その後の描画処理はすべて移動後の新しい原点を基準に行われます。なお、移動前の状態に戻したい場合は、save()で状態を保存し、restor

HTML5で<canvas>要素を使った際、描画した図形や画像が「伸びていたり」「潰れていたり」と歪んで表示されることがあります。この問題は、CSSでサイズを指定していることや、width属性・height属性の指定が不適切であることが主な原因です。この記事では、canvasが歪む原因と、その解決方法を実例付きでわかりやすく解説します。canvasが歪むときはwidth属性とheight属性を見直そうcanvasが歪んで表示される場合は、まずwidth属性とheight属性を明示的に指定してみてください。<canvas id=canvas1 width=400 height=

ChromeなどのWebKit系ブラウザでは、input type=number の右側に表示されるスピナー（上下矢印ボタン）は、デフォルトのCSSでは直接スタイリングできません。そこで活用するのが、WebKit独自の疑似要素 ::-webkit-inner-spin-button です。 スピナーを非表示にする方法 数値入力フィールドからスピナーを完全に取り除きたい場合は、以下のように -webkit-appearance: none; を指定します。 input[type=number]::-webkit-inner-spin-button {    &n

クリックトゥコール（Click-to-Call）とは、Webページ上の電話番号リンクをタップするだけで、そのまま通話を開始できる便利な機能です。この機能を実現するのが「tel:」プロトコルであり、モバイルサイトやレスポンシブデザインのサイトでは欠かせない要素となっています。tel:プロトコルのサポート状況現在、「tel:」プロトコルはほぼすべてのモバイルデバイスでサポートされています。具体的には、以下のようなブラウザ・環境が該当します。iOS の SafariAndroid 標準ブラウザ / ChromeOpera MiniSymbian ブラウザなどのレガシー環境つまり、現代の主要なスマート

TimeRangesオブジェクトとはHTML5のvideo要素やaudio要素では、TimeRangesオブジェクトを使用することで、メディアのバッファリング（読み込み済み）状態を表す、互いに重複しない一連の時間範囲を扱えます。各範囲には開始時刻と終了時刻が設定されており、長時間の動画でもどの部分がバッファ済みかを正確に把握できます。シークバーに読み込み状況を表示したい場合などに特に役立ちます。TimeRangesオブジェクトの主なプロパティとメソッドlength − バッファリングされた時間範囲の数start(index) − 指定したインデックスの範囲の開始時刻（秒単位）end(index

iframeが絶対配置でうまく伸縮しない理由iframeは「置換要素（replaced element）」に分類される特殊な要素であり、通常の要素とは扱いが異なります。一方で、<div>要素は「非置換要素（non-replaced element）」です。この違いが重要になります。非置換要素である<div>に対してposition: absoluteを指定し、top / left / right / bottom の4方向すべてを設定すると、要素は親要素の領域いっぱいに自動的に引き伸ばされます。しかし、iframeのような置換要素は内在的なサイズを持つため、left /

HTML5 Canvasでドラッグ操作やクリック操作を実装するには、mousedown（マウスボタンを押した瞬間）とmouseup（マウスボタンを離した瞬間）の2つのイベントを組み合わせて扱うのが基本です。基本的な実装方法ポイントは、マウスボタンが押されているかどうかを記録するフラグ変数を用意することです。mousedownでフラグを立て、mouseupでフラグを下ろすことで、「押してから離すまで」の一連の操作を正しく判定できます。var mouseDown = false; // mousedownイベントの処理 canvas1.onmousedown = function(event)

HTML5 Canvasでテキストの高さを測定する方法 HTML5のcanvas要素で描画するテキストの高さ（フォントサイズ）を取得したい場合は、まずフォントを「pt」単位で設定します。 context.font = 15pt Calibri; 続いて、以下のようにしてテキストの高さを取得します。 var height = parseInt(context.font.match(/\d+/), 10); コードの仕組み 上記のコードでは、match()メソッドと正規表現/\d+/を組み合わせて使用しています。この正規表現は文字列内の連続した数字にマッチするため、「15pt Calibri」とい

HTML5ジオロケーションの精度をGoogleマップで可視化するには？ HTML5のGeolocation APIで取得した現在地をGoogleマップに表示する場合、位置座標だけでなく精度（accuracy）もあわせて可視化すると、より実用的で信頼性の高いアプリになります。精度はメートル単位で返されるため、この値を半径とする円形オーバーレイをマップ上に描画するのが一般的な手法です。 基本的な実装コード 以下のコードでは、現在地を示すマーカーと、精度の範囲を表す半透明の円を組み合わせて表示しています。 var lat = position.coords.latitude; var longit

HTML5のBlob.slice()メソッドの役割 HTML5で利用できる Blob.slice() メソッドは、元のBlobオブジェクト（ファイル）のうち、指定したバイト範囲に含まれるデータだけを抜き出し、新しいBlobオブジェクトとして生成するためのメソッドです。 このメソッドを使うと、巨大なファイルの一部だけを扱いたい場合に非常に便利です。例えば、大容量ファイルを複数の小さな塊（チャンク）に分けて送信する「分割アップロード」などで広く活用されています。 slice()メソッドの基本構文 blob.slice(start, end, contentType) start：抽出を開始する

HTML5 Canvasで3D球体を描く基本の考え方 HTML5ではCanvas要素とJavaScriptを組み合わせることで、ブラウザ上に3Dの球体を描画できます。基本的なアプローチは、3D空間上の点（頂点）を三角関数で計算し、それらを順に描画していくというものです。 以下は、指定した半径をもとに球体を構成する点群を生成する関数の例です。 function display(r) { this.point = new Array(); this.color = blue; this.r = (typeof(r) == undefined) ? 20.0 : r;