HTML

SVGとは？HTMLの<svg>要素は、SVGグラフィックを格納するためのコンテナです。SVGは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称で、ボックスや円、テキストなどの図形を定義するのに適しています。SVGは、XMLを使用して2Dグラフィックスやグラフィカルなアプリケーションを記述するための言語であり、記述されたXMLはSVGビューアによって描画されます。現在では、主要なWebブラウザのほとんどが、PNGやGIF、JPGといった画像形式と同じようにSVGを表示できます。HTML5 Canvasとは？HTMLの<can

HTML5をスタンドアロンのAndroidアプリに変換する手順HTML5で作成したWebコンテンツを、単体で動作するスタンドアロンのAndroidアプリとして公開したい場合、WebViewを活用するのが最も手軽な方法です。以下の手順に従って、HTML5アプリをAndroidアプリへ変換しましょう。1. EclipseでAndroidプロジェクトを作成するまず、Eclipseを使用して新しいAndroidアプリケーションプロジェクトを作成します。これがHTML5コンテンツを格納する土台となるアプリの雛形になります。2. HTMLコードをassetsフォルダに移動する作成したプロジェクト内の「/a

three.jsでは、WebGLRendererの設定を変えるだけで、キャンバスの背景を簡単にコントロールできます。この記事では、背景を透明にする方法と好きな色を指定する方法の2つを解説します。three.jsで背景を透明にするHTML要素やCSSで設定したページの背景を透かして表示したい場合は、WebGLRendererのコンストラクタにalpha: trueオプションを渡します。これにより、レンダラーがアルファチャンネル（透明度）を持つようになります。var renderer = new THREE.WebGLRenderer( { alpha: true } ); // クリアカラーはデ

HTML5ローカルストレージのサイズ制限とはHTML5のlocalStorageデータベースにはサイズ制限が設けられています。標準的な制限値はドメインごとに5MBまたは10MBとされており、仕様上はオリジン（スキーム＋ホスト＋ポート）ごとに5MBが推奨されています。これはブラウザごとに多少差があるものの、多くの主要ブラウザがこの目安に従って実装しています。サブドメインを利用した制限回避への対策単純にドメイン単位で制限を設けると、同一運営者が複数のサブドメインを利用してストレージ容量を実質的に無限に確保できてしまいます。これを防ぐため、HTML5の仕様では次のように定められています。ユーザーエー

AJAXとjQueryを組み合わせることで、ページを再読み込みすることなくHTML5のFile APIを活用したファイルアップロードを実装できます。フォームが送信されたタイミングで送信処理をインターセプトし、以下のコードスニペットを実行することでファイルをアップロードできます。クライアント側の実装（JavaScript / jQuery）まず、input要素からファイルを取得し、FileReader APIを使ってテキストとして読み込みます。その後、jQueryの$.post()メソッドでサーバーにデータを送信します。// ファイルの取得 var myFile = document.getEl

Webアプリケーションを開発していると、オーディオが現在再生中かどうかを判定したい場面があります。HTML5では、<audio>要素が持つプロパティを活用することで、簡単にこの状態を確認できます。isPlaying関数で再生状態を判定する以下の関数を使用すると、オーディオが再生中かどうかをチェックできます。function isPlaying(audelem) { return !audelem.paused; }pausedプロパティの仕組み上記のコードは、オーディオの再生状況を判定するために利用できます。<audio>タグにはpausedプロパティが用意され

Canvas要素内に描画された図形は、DOM上に個別の要素として存在しません。Canvasに描かれたものは、ピクセルとその色情報だけで構成されており、描画は即時モード（イミディエートモード）でビットマップとして行われます。そのため、Canvas上の特定の図形に対してクリックイベントを取得したい場合は、CanvasというHTML要素自体のクリックイベントを捕捉し、その座標から「どの図形がクリックされたのか」を自分で判定する必要があります。この判定を行うには、各図形の幅（width）と高さ（height）の情報をあらかじめ保持しておくことがポイントです。Canvasにクリックイベントを追加する基本

HTML5の<canvas>要素に描画した内容を画像として保存したい場合は、toDataURL()メソッドを使用します。このメソッドは、キャンバス上の描画内容をBase64エンコードされたPNG形式のデータURL文字列に変換して返します。取得したURLは、<img>タグのsrc属性に設定したり、ダウンロードリンクとして活用したりすることも可能です。 toDataURL()メソッドの構文 var dataURL = canvas.toDataURL(type, encoderOptions); type：出力する画像形式を指定します（省略時は「image/png」）。「

HTML5以前と現在のファイルサイズチェックの違い HTML5が登場する以前は、ファイルサイズの確認にはFlashが使われていました。しかし、現在のWebアプリケーション開発では、セキュリティやパフォーマンス、モバイル対応などの観点からFlashの使用は避けられています。 とはいえ、HTML5のFile APIを利用すれば、Flashに頼ることなくクライアント側だけでファイルサイズを簡単に取得できます。以下のように、イベントリスナーの中にコードを記述するだけで実装可能です。 if (typeof FileReader !== undefined) { // files[0] は1つ目

Bootstrapドロップダウンがクリックで閉じてしまう問題Bootstrapのドロップダウンは、デフォルトでは開いた状態でドロップダウン以外の場所をクリックすると、自動的に閉じる仕様になっています。この挙動は通常便利ですが、メニュー内でチェックボックスやボタンなどを操作したい場合には、閉じずに開いたまま維持したいケースもあります。hide.bs.dropdownイベントで閉じる動作を防ぐドロップダウンをクリック後も開いたままにしたい場合は、以下のコードを使用します。hide.bs.dropdownイベントを捕捉し、falseを返すことで、ドロップダウンが閉じる処理そのものをキャンセルできます

はじめにWebデザインでは、背景色が明るいときには黒い文字、暗いときには白い文字を表示することで、常に読みやすいテキストを保ちたいケースがよくあります。この記事では、要素の背景色から平均輝度を計算し、その結果に応じてテキストの色を自動的に切り替える方法を、jQueryを使ったサンプルコードとともに解説します。輝度の計算方法（YIQ方式）RGB値から輝度を求めるには、「YIQ方式」と呼ばれる計算式を使うのが一般的です。これは、人間の目の色ごとの感度の違いに基づいて、各チャンネルに重みを掛けて輝度を算出するものです。輝度 = (R × 299 + G × 587 + B × 114) / 1000

fillText()メソッドは、キャンバス上に塗りつぶしテキストを描画するためのAPIです。しかし、このメソッドには改行文字（\n）を自動的に処理する機能がなく、改行を含む文字列をそのまま渡すと、すべてが1行のテキストとして描画されてしまいます。 fillText()で改行を実現する基本手法 改行されたテキストを描画したい場合は、文字列を改行文字の位置で分割し、fillText()を複数回呼び出して各行を個別に描画する必要があります。具体的には、split(\n)で文字列を行ごとの配列に変換し、ループ処理の中でY座標を行間分だけずらしながら1行ずつ描いていきます。 以下のコード例で実際の動作を

h1は「見出し」であり「タイトル」ではないHTML5における<h1>は、ページ全体のタイトルではなく「見出し」を表す要素です。HTML5では、<section>や<article>などのセクショニング要素ごとに、それぞれ独立した見出し構造を持たせることができます。つまり、ページ内の各セクションや各記事が、それぞれ固有の<h1>を持つことが可能です。<h1>はその文書内で最も重要な階層の見出しを定義します。そして、最初に現れる<h1>要素は、文書全体のラベル（表題）として扱われるという点が重要です。h1を使用する際の基本ルー

Webページ上の画像は、デフォルトではマウスでドラッグしたり、ダブルクリックで選択（ハイライト表示）したりできてしまいます。これらの操作を防ぎたい場合は、CSSのuser-selectプロパティやベンダープレフィックス付きのプロパティを使うことで、JavaScriptに頼らず簡単に実現できます。画像のドラッグ・選択を無効化するCSSコード以下のコードスニペットをスタイルシートに追加するだけで、画像がドラッグされたり選択されたりするのを防げます。img { user-drag: none; user-select: none; -moz-user-select: none

UIWebViewのallowsInlineMediaPlaybackプロパティとはネイティブアプリ内のiOSウェブブラウザ（UIWebView）には、allowsInlineMediaPlaybackというプロパティが用意されています。このプロパティは、動画をページ内でインライン再生するかどうかを有効・無効に切り替える役割を持っています。デフォルト設定では、iPhoneではNO（無効）、iPadではYES（有効）になっています。そのため、iPhoneでは動画再生時にネイティブのフルスクリーンプレーヤーが画面全体を占有してしまい、動画と同時に他の動的なコンテンツを表示することができません。HT

HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;

すべてのWebブラウザには、<canvas>要素に設定できる幅・高さ・面積(総ピクセル数)の上限が定められています。この制限値を超えるキャンバスを作成すると、描画が正しく行われない、または真っ白な画面になるなどの問題が発生するため、開発時には各ブラウザの仕様を把握しておくことが重要です。Google Chromeの場合Google Chromeでは、canvas要素に設定できる最大幅と最大高さは 32,767ピクセル、最大面積は 268,435,456ピクセル(16,384 × 16,384相当)です。Firefoxの場合Firefoxでは、最大幅と最大高さは Chrome と同じ

問題：Canvasに描画したテキストが意図したフォントにならない HTML5の<canvas>で、@font-faceによって読み込んだWebフォントを使ってテキストを描画すると、最初はそのフォントで表示されないことがあります。 これは、ブラウザがまだネットワークからのフォントのダウンロードを完了していないためです。Canvasへの描画はスクリプト実行時点で即座に行われるため、ブラウザはその瞬間に利用可能な別のフォント（フォールバックフォント）を使用してしまいます。 つまり、フォントは完全に読み込まれてから使用される必要があります。以下に代表的な解決策を紹介します。 解決策1：d

HTML5のlocalStorageでキーが存在するかどうかを確認する方法Webアプリケーションを開発していると、ブラウザのlocalStorageに特定のキーが保存されているかどうかを事前に確認したい場面が多くあります。この記事では、JavaScriptでlocalStorage内のキー存在を判定する代表的な2つの方法を、コード例とともにわかりやすく解説します。方法1：getItem()メソッドでnullチェックを行うgetItem(key)メソッドは、引数としてキー名を1つ受け取り、そのキーに関連付けられた値を返します。指定したキーがストレージ内に存在していれば対応する値が取得でき、存在し

HTML5のaudioタグのスタイリングは可能HTML5の<audio>タグは、スタイルをカスタマイズすることが可能です。controls属性を使用した場合、ブラウザ標準のプレイヤーが表示されますが、この標準UIを使わずに独自のデザインを実装することもできます。controls属性を外して独自UIを作るデフォルトのブラウザプレイヤーには、ChromeやFirefox、Safariなど各ブラウザごとに異なる見た目があり、細かいデザイン調整が難しいという課題があります。そこで、controls属性を削除すると、ブラウザ組み込みのユーザーインターフェースを非表示にできます。その上で、Ja