JavaScript

はじめにHTML5 Canvasを使って多数のパーティクルを跳ね返らせるアニメーションは、パーティクル数が増えるにつれて処理が重くなりやすい傾向があります。本記事では、描画のフレームレートを維持しながらパフォーマンスを最大化するための、実践的な最適化手法を6つ紹介します。1. 計算処理と描画処理を分離する物理演算（位置の更新や衝突判定など）とCanvasへの描画処理を混在させないことが重要です。計算ロジックを描画コードから独立させることで、それぞれの処理を個別に最適化でき、コードの見通しも良くなります。2. 計算の更新後に再描画を要求するすべてのパーティクルの状態を更新し終えてから、まとめて一

URLから画像を読み込んでHTML5 Canvasに描画する方法 JavaScriptでURLから画像を読み込み、Canvasに描画するには、まずImageオブジェクトを作成し、そのsrcプロパティに画像のURLを設定します。 ここで重要なのは、画像の読み込みが完了してから描画処理を行うという点です。onloadイベント（loadイベント）が発生するまで待ってからdrawImage()メソッドを呼び出さないと、まだ読み込まれていない空の画像を描画しようとしてしまい、意図した結果になりません。 実装の流れ document.getElementById()で対象のcanvas要素を取得する g

Ionicフレームワークとは Ionicは、モバイルアプリケーション開発に使用されるオープンソースのフレームワークです。ネイティブアプリのような見た目と操作感を持つモバイルUIを構築するための、豊富なツールやサービスを提供しています。 リストはアプリ開発に欠かせないUI要素 リスト（一覧表示）は、Webやモバイルアプリケーションにおいて最もよく使われる要素の一つです。連絡先一覧や設定項目など、さまざまな情報を表示する場面で活用されています。また、他のHTML要素と組み合わせることで、メニューやタブの作成、あるいはテキストだけの単調なページに変化を加えることなども可能です。 Ionicフレーム

はじめにHTML5には、リアルタイム通信を実現するための技術として「WebSocket」と「MessageChannel」が用意されています。どちらも双方向通信を扱う仕組みですが、目的や使い方が大きく異なります。本記事では、それぞれの特徴と違いについてわかりやすく解説します。WebSocketとはWebSocket(ウェブソケット)は、Webアプリケーション向けの次世代双方向通信技術です。単一のソケット上で動作し、HTML5に対応したブラウザではJavaScriptインターフェースを通じて利用できます。WebサーバーとのWebSocket接続が確立されると、send()メソッドを呼び出すことで

Polymer 1.0 の dom-repeat でインデックスを 1 から表示する方法Polymer.js は Google が開発した JavaScript ライブラリで、HTML 要素をコンポーネントとして再利用できるようにし、アプリケーション開発を効率化します。dom-repeat で生成されるインデックスはデフォルトで 0 から始まります。これを 1 から表示したい場合は、インデックスを変換する関数を用意します。手順 1：テンプレート内で関数を呼び出す<span>{{displayIndex(index)}}</span>手順 2：displayIndex 関

画面幅を狭めたとき、Flexboxで構築したレイアウトの各アイテムの比率が崩れてしまう――これはWeb制作でよく遭遇する問題のひとつです。このトラブルを回避するには、以下のCSSを追加しましょう。* { flex-shrink: 0; min-width: 0; min-height: 0; }各プロパティの役割flex-shrinkフレックスアイテムが縮小できるかどうかを制御するプロパティです。初期値は「1」で、この場合はスペースが不足した際にアイテムが縮小されます。「0」を指定するとアイテムは縮まなくなり、指定した比率やサイズが維持されます。min-width「0」

position: absoluteとFlexboxは競合しない 結論から言うと、position: absolute（絶対配置）はフレックスコンテナ（display: flex）と競合しません。両者は問題なく併用できます。 ただし、絶対配置を使う場合は、親要素の幅（width）などの値も一緒に指定する必要があります。幅を指定しないと、絶対配置された要素は中身のサイズに合わせて縮んでしまうため、意図した通りのレイアウトになりません。 CSSの記述例 .parent {    display: flex;    justify-content: cente

HTML5の文字エンティティ（実体参照）とはHTML5では、一部の文字が「予約文字」として扱われます。たとえば、半角の不等号「<」（小なり）や「>」（大なり）をテキスト中にそのまま記述すると、ブラウザがこれらをタグ（マークアップ）の一部と誤認識してしまい、意図したとおりに表示されません。こうした特殊な文字を安全に表示するために用いられるのが「文字エンティティ（実体参照）」です。HTML5の仕様では、処理系（ブラウザなど）は次の表に示す5つの特殊文字に対応するエンティティを必ずサポートしなければならないと定められています。HTML5でサポート必須の5つの特殊文字一覧記号説明エンティテ

ModernizrとはModernizrは、次世代のWeb技術がブラウザ上でネイティブに実装されているかどうかを検出するための、軽量なJavaScriptライブラリです。機能検出の仕組みModernizrを利用すると、新しい機能への対応状況を簡単に判定し、その結果に応じた処理を実行できます。たとえば、ブラウザが動画（video）機能をサポートしていない場合に、シンプルな代替ページを表示するといった制御が可能になります。基本的な導入方法Modernizrを使い始める前に、まずHTMLページのヘッダー部分でJavaScriptライブラリを読み込む必要があります。記述方法は以下のとおりです。<

HTML5 WebメッセージングとはWebメッセージング（Web Messaging）とは、DOMを直接操作することなく、互いに分離されたブラウジングコンテキスト間でデータを共有するための仕組みです。これにより、異なるドメイン、プロトコル、ポート間で発生するクロスドメイン通信の問題を解決できます。なぜWebメッセージングが必要なのか例えば、ページからiframe内に配置された広告コンテナへデータを送信したい場合、あるいはその逆のケースを考えてみましょう。通常、このような操作を行うと、ブラウザの同一生成元ポリシーによってセキュリティ例外がスローされます。しかし、Webメッセージングを利用すれば、

HTML5のGeolocation APIを利用する際、位置情報の取得に失敗すると、PositionErrorオブジェクトを通じてエラーの詳細を受け取ることができます。次の表は、PositionErrorオブジェクトが返す可能性のあるエラーコードの一覧です。 エラーコードの一覧 コード定数説明0UNKNOWN_ERROR不明なエラーが発生したため、デバイスの位置情報を取得できませんでした。1PERMISSION_DENIEDアプリケーションに位置情報サービスの利用権限がないため、デバイスの位置情報を取得できませんでした。2POSITION_UNAVAILABLEデバイスの現在位置を特定できませ

clearWatchメソッドとは HTML5のGeolocation APIには、clearWatchというメソッドが用意されています。このメソッドを使用すると、watchPosition()で開始した位置情報の継続的な監視処理をキャンセルできます。キャンセルが実行されると、デバイスの現在の地理的位置に関する更新情報の取得が停止されます。 watchPosition()は、呼び出されるたびに一意の監視ID（watchID）を返します。このIDをclearWatchメソッドに引数として渡すことで、対応する監視処理を停止させることができます。 実装サンプルコード 以下は、位置情報の監視を開始し、ボ

getContextメソッドとはHTML5の<canvas>要素には、getContextというDOMメソッドが用意されています。このメソッドは、キャンバスに図形や画像を描画するための「レンダリングコンテキスト」と、そこに含まれる各種描画機能を取得するために使用します。getContextメソッドは引数を1つ受け取ります。現在もっとも広く使われているのは、2D描画用のコンテキストタイプである2dです。これにより、矩形や円弧、テキスト、グラデーションなどを描画できるようになります。基本的な使い方とブラウザ対応チェック以下のコードは、目的のコンテキストを取得すると同時に、ブラウザが&l

HTML5のCanvasでベジェ曲線を描画するには、bezierCurveTo()メソッドを使用します。このメソッドは、2つの制御点と1つの終点を指定することで、なめらかで複雑な曲線を自由に表現できる強力な描画機能です。 bezierCurveTo()メソッドとは bezierCurveTo()は3次ベジェ曲線（キュービックベジェ）を描くためのメソッドで、以下の6つの引数を受け取ります。 cp1x, cp1y：最初の制御点の座標 cp2x, cp2y：2番目の制御点の座標 x, y：曲線の終点の座標 制御点の位置によって曲線の膨らみや方向が変化するため、ハートマークのような複雑な図形も、複

HTML5のCanvas（キャンバス）には、描画した図形やテキストの周囲に美しい影（シャドウ）を作成する機能が備わっています。影の見た目は、以下の4つのグローバル属性によって制御され、これらの設定はすべての描画操作に反映されます。 番号プロパティと説明 1shadowColor [ = value ]現在の影の色を返すプロパティです。値を設定することで、影の色を変更できます。 2shadowOffsetX [ = value ]現在の影のX方向（横方向）のオフセット量を返すプロパティです。値を設定することで、影の横へのずれを調整できます。 3shadowOffsetY [ = val

AngularJSアプリケーションで、ng-repeatによって生成されたリスト内のテキスト入力テキスト入力欄へ自動的にフォーカスを設定したいケースはよくあります。たとえば、新しい項目を追加した際に、その入力欄へすぐに入力できるようにしたい場合などです。本記事では、カスタムディレクティブを使ってこの課題を解決する方法を紹介します。 カスタムディレクティブの実装 まず、フォーカスを制御するためのカスタムディレクティブ「focus」を定義します。以下のコードをご覧ください。 newApp.directive(focus, function () {     

HTML5のaudioタグがAndroid WebViewで動作しない原因と対策 Android WebView上でHTML5の<audio>タグが正しく機能しないケースでは、代わりにAndroid標準のMediaPlayerを使って音声を再生する方法が有効です。具体的には、HTMLファイル内に記述したJavaScriptから、Androidネイティブ側で実装した関数を呼び出す仕組みを構築します。 Android側の実装：JavaScriptインターフェースの登録 まず、WebViewにJavaScriptインターフェースを追加し、ネイティブ側のメソッドをJavaScriptから

Web Workerとは Web Workerは、クリックなどのユーザー操作に応答するスクリプトの妨げを受けることなく、長時間実行されるスクリプトをバックグラウンドで処理できる仕組みです。これにより、重い処理を実行しながらも、ページの応答性を維持することが可能になります。 terminate()メソッドでWorkerを停止する Web Workerは、自分自身で自動的に停止することはありません。しかし、そのWorkerを起動したページ側からterminate()メソッドを呼び出すことで、いつでも強制的に停止させることができます。 worker.terminate(); 停止後の挙動と注意点 t

CORS（オリジン間リソース共有）とはCORS（Cross-Origin Resource Sharing：オリジン間リソース共有）は、Webブラウザ上で、別のドメイン（オリジン）が持つ制限されたリソースへのアクセスを許可するための仕組みです。通常、ブラウザはセキュリティ上の理由から「同一オリジンポリシー」によって、異なるドメイン間のリソースのやり取りを制限しています。CORSは、HTTPヘッダーを利用してこの制約を安全に緩和するための標準規格です。カメラアクセス許可の具体例たとえば、HTML5デモセクションにある動画プレーヤーをクリックすると、カメラの使用許可を求められます。ユーザーが許可を

WebRTCの概要WebRTC（Web Real-Time Communication）は、World Wide Web Consortium（W3C）によって策定されたオープン標準技術です。プラグインや追加アプリをインストールすることなく、ブラウザ同士で直接音声通話、ビデオチャット、P2Pファイル共有などのリアルタイム通信を実現できる点が最大の特徴です。現在、Google Chrome、Firefox、Safari、Microsoft Edgeなど主要なブラウザのほとんどがWebRTCに対応しており、オンライン会議ツールやライブ配信サービスなど、幅広い分野で活用されています。WebRTCを構