JavaScript

HTML5のバリデーションは役に立つのか？結論から言うと、はい、HTML5の検証（バリデーション）は非常に役立ちます。フォームの入力チェックにも十分に活用できる機能です。以前は、空のテキストボックスが送信されるのを防ぐといったクライアント側の入力チェックを行うには、JavaScriptを記述する必要がありました。しかし、HTML5ではrequiredという新しい属性が導入されたことで、JavaScriptを使わずに、ブラウザだけでこうした検証を実現できるようになりました。required属性とはrequired属性をinput要素に付与すると、その入力欄が必須項目として扱われます。ユーザーが何

HTML5のローカルストレージ（localStorage）を活用しよう クライアント側のブラウザにデータを保存したい場合、HTML5で標準搭載されているローカルストレージ（localStorage）を利用するのが最も手軽な方法です。 ローカルストレージは、複数のウィンドウやタブ間でデータを共有でき、ブラウザを閉じてもデータが失われない永続的なストレージとして設計されています。特に、ユーザーが作成したドキュメントやメールボックスのように数メガバイト規模になるユーザーデータを、サーバーとの通信を減らしてパフォーマンスを向上させる目的でクライアント側に保存したいケースに適しています。 localS

getBBox()を使ったSVGテキストの自動折り返し SVGのテキストボックス内で自動的に折り返し（ワードラップ）を実現するには、getBBox()関数を活用します。基本的な仕組みはシンプルで、テキストオブジェクトに単語を1つずつ追加していき、幅が最大値を超えた時点で改行コードを挿入するというものです。 実装の流れ テキストをスペースで分割し、単語の配列を作成する 単語を1つずつテキストに追加し、その都度getBBox()で幅を測定する 幅がmaxWidthを超えたら改行文字\nを挿入する サンプルコード（Raphael.js） var a = Raphael(500, 500); va

IE8でHTML5要素を有効にするにはhtml5shivが必要Internet Explorer（特にIE6〜IE9）は、sectionやarticle、navといったHTML5の新しいセクショニング要素を認識できません。そのため、これらの要素をマークアップに使ってもCSSが正しく適用されず、レイアウトが崩れる原因となります。この問題を解決するのが「html5shiv」というJavaScriptライブラリです。html5shivを読み込むことで、レガシーなInternet ExplorerでもHTML5のセクショニング要素が使用可能になり、IE6〜IE9向けの基本的なスタイリングも行えるように

SiteNavigationElementとはschema.orgのSiteNavigationElementは、WebPageElementを拡張したスキーマ型の一つです。主にサイトのナビゲーション（グローバルメニューなど）に含まれるリンクをマークアップするために使用され、検索エンジンに対して「このリンクはサイト全体の構造を示す重要な文脈リンクである」ことを明確に伝えることができます。適切に実装することで、クローラーがサイト構造をより正確に理解しやすくなり、SEOの観点からもメリットが期待できます。基本的なマークアップ例以下は、nav要素に対してSiteNavigationElementを適

AngularJSのテンプレート内でencodeURIComponentを呼び出したい場合、カスタムフィルターを作成するのが最もシンプルで効果的な方法です。AngularJSのテンプレート式からは、windowオブジェクトなどのJavaScriptのグローバル関数に直接アクセスできないため、フィルターとしてラップして利用する必要があります。HTML側の実装例以下は、作成したフィルターをHTMLテンプレート内で使用する例です。<div ng-app=app> <a href=/foo/{{ bar&baz | encodeURIComponent }}>Demo

WebBrowserコントロールをIE9標準モードに設定するにはWebBrowserコントロールは、既定では古い互換モード（IE7相当）でページを描画するため、最新のCSSやJavaScriptが正しく動作しない場合があります。これを回避し、IE9の標準モードでページを表示させるには、HTMLページのheadセクション内に以下のmetaタグを追加します。<meta http-equiv=X-UA-Compatible content=IE=9 />この1行を記述するだけで、WebBrowserコントロールはInternet Explorer 9の標準モードでコンテンツをレンダリング

pushStateのステートオブジェクトとは history.pushState()は、HTML5 History APIに含まれるメソッドで、ページを再読み込みすることなくURLを変更し、新しい履歴エントリを作成できます。その第1引数として渡すのが「ステートオブジェクト（状態オブジェクト）」です。ここには、その履歴エントリに関連付けておきたい任意のデータを保存でき、ユーザーが「戻る」ボタンで履歴を遡った際に、保存したデータを取り出してページの表示状態を復元するために活用されます。 pushStateで履歴エントリを作成する例 以下の例では、ユーザーが選択した色をステートオブジェクトに格納し

HTML5は、HTML 4.01、XHTML 1.0、XHTML 1.1に代わるHTML標準の次期メジャーリビジョンです。World Wide Web上でコンテンツを構造化し、表示するための標準規格として位置づけられています。HTML5とは何かHTML5は、W3C（World Wide Web Consortium）とWHATWG（Web Hypertext Application Technology Working Group）という2つの団体が協力して策定を進めている規格です。従来のHTMLと比べ、動画や音声の再生、グラフィックス描画、オフライン動作など、以前はプラグインに頼っていた機能

フォーム外でも<button>タグは有効結論から言えば、<button>タグはドキュメントのbody内のどこに配置しても有効です。ただし、設置できるのはテキストレベルのマークアップ（フレージングコンテンツ）が許可されている場所に限られます。段落の中や見出しの下など、インライン要素を記述できる位置であれば問題なく使用できます。<input type="button">との違いHTMLフォーム内にボタンを作成する場合には、<input type="button" />がよく使われます。<button>

WebSocketに再接続する基本的な考え方WebSocketの接続を再確立する最もシンプルな方法は、ソケットオブジェクトを再作成することです。そもそもWebSocketは、一度確立した接続を長時間維持し続けることを前提に設計されたプロトコルです。しかし、ネットワークの不安定さやサーバーのメンテナンスなどにより、接続が切断されることは避けられません。oncloseイベントを活用した自動再接続実用的なのが、サーバー側から接続を閉じる方式です。この方法を使うと、クライアント側のWebSocketで onclose イベントが発生します。このイベントをフックして新しいWebSocketインスタンスを

HTML5を活用したモバイルアプリケーション開発では、適切なフレームワークを選ぶことが開発効率とアプリ品質を大きく左右します。ここでは、HTML5ベースのモバイル開発に特に適した代表的なフレームワークを4つご紹介します。Kendo UIKendo UIは、クロスプラットフォーム対応の高品質なモバイルアプリケーションを開発するためのフレームワークです。豊富なUIコンポーネントが用意されており、AndroidやiOSなど異なるプラットフォームでも一貫した操作性を実現できます。エンタープライズ向けアプリから小規模プロジェクトまで、幅広い用途で活用されています。BootstrapBootstrapは、

SVGで世界地図を作成する方法SVGを使用すれば、世界地図を作成し、Raphael.jsを活用してインタラクティブな操作を実現できます。Raphael.jsは、SVGやVMLを扱うためのJavaScriptライブラリで、ブラウザ間の互換性を保ちながらベクターグラフィックスを描画できるのが大きな特徴です。Raphael.jsの基本：円を描画してみようまずは、Raphael.jsをHTMLに読み込む方法と、基本的な図形（円）を描画する方法を学びましょう。以下のコードは、描画領域を生成して赤い円を描くシンプルな例です。var paper = Raphael(10, 50, 320, 200); /

AngularJSでは、ng-optionsディレクティブを使って生成したセレクトボックス（<select>要素）に対して、value属性が空文字列の<option>タグを追加することで、モデルにnull値を設定できます。コントローラーの実装null値を設定するためのコントローラーは以下のとおりです。function display($scope) { $scope.obj = {selected: null}; $scope.objects = [{id: 1, value: Yes}, {id: 0, value: No}]; }ここでは、$scop

HTML5 History APIは、ページを再読み込みすることなくブラウザの履歴やURLを操作できる便利な機能です。Ajaxを使ったシングルページアプリケーション（SPA）などで、URLを動的に変更しながら戻る・進むボタンにも対応できるため、多くのWebサイトで活用されています。かつての対応状況HTML5 History APIが登場した当初は、WebKit系ブラウザとFirefox 4が主な対応ブラウザでした。当時はまだ普及途上の技術だったため、利用できる環境が限られていました。現在の対応ブラウザしかし現在では、ほぼすべてのモダンブラウザがHTML5 History APIをサポートしてお

結論：HTML5だけではローカルファイルへ直接アクセスできない HTML5のみを使用して、Webブラウザ内からユーザーのローカルファイルに自由にアクセスしたり操作したりすることはできません。これは、悪意のあるWebページがユーザーのPC内のデータを勝手に読み書きすることを防ぐための、セキュリティ上の重要な制限です。 ただし、ドラッグ＆ドロップAPIやFile API、FileSystem APIといった仕組みを組み合わせれば、ユーザーが明示的に選択・許可したファイルに限って、内容を読み取るなどの操作を行うことは可能です。 ドラッグ＆ドロップの実装例 以下は、HTML5のドラッグ＆ドロップ機能を

HTML5キャンバスのデータをPNGファイルとして保存する方法 Node.js環境でHTML5キャンバス（node-canvas）の描画内容をファイルに保存するには、PNGStreamを利用するのが最も簡単な方法です。canvasオブジェクトのpngStream()メソッドを使うことで、キャンバスの内容をPNG形式のストリームとして取得し、ファイルに書き出すことができます。 以下のコードは、キャンバスの内容を「text.png」というファイルに保存する基本的な例です。 var f = require(fs) , out = f.createWriteStream(__dirname + /

Webサイトで細字（シン）フォントを使用すると、環境によっては文字がギザギザに見えたり、かすれて表示されたりすることがあります。特にmacOSやWindowsなど、OSごとのフォントレンダリングの違いにより、意図した通りの美しい表示が得られないケースは少なくありません。 この問題を解決するには、CSS3のプロパティを適切に組み合わせることが効果的です。以下に、主要なブラウザに対応した設定方法を紹介します。 細字フォントを滑らかに表示する基本のCSS クロスブラウザ対応として最も一般的なのが、次の3つのプロパティを組み合わせる方法です。 text-rendering: optimizeLegi

JavaScriptのFileReaderで選択した画像をプレビュー表示するHTML5では、<input type=file accept=image/* capture=camera> を使うことで、スマートフォンなどから直接カメラを起動して画像を撮影・選択できます。しかし、標準のままでは「ファイルを選択」という味気ないボタンが表示されるだけです。そこで、JavaScriptの FileReader APIを活用すれば、ユーザーが選択した画像をその場で読み込み、<img> 要素として画面にプレビュー表示できます。HTMLの例まずはフォームと画像を表示するための要素を用

data-*属性は常に文字列として返されるHTML5のカスタムdata-*属性に格納した値は、数値に見えていても、JavaScriptのdatasetインターフェース経由で取得すると必ず文字列型（string）になります。これはHTMLの仕様上、すべての属性値が文字列として保存されるためです。属性値の型を確認するコード例たとえば、次のようなdata-*属性が定義されているとします。<a data-value="6.0">6.0</a> <a data-value="6.5">6.5</a>これらの値の型を確