jQuery
jQueryは非常に多くのWebサイトで使われているJavaScriptライブラリです。DOM操作やAjaxなどはブラウザごとに実装が異なるため従来はそれぞれ個別にコードを書く必要がありましたが、jQueryはその違いを吸収し、1つの共通したAPIを提供してくれます。また、多くの複雑な操作を手軽なAPIで行え、大幅に工数を減らすことができます。
jQueryはIE6以上など現在使われているほとんどのブラウザで動作します。詳しい使い方については多くの書籍やWeb上の資料が存在していますので、そちらを参照してください(日本語のリファレンスサイト)。
$.post '/api/post', name: 'John Smith' city: 'San Francisco' , (data) -> # 成功した場合のコールバック console.log "loaded: #{data}"
スマートフォン向けのjQuery代替ライブラリ
スマートフォン上での動作を主なターゲットとして、jQueryの機能を一部制限する代わりにファイルサイズを抑えたライブラリがいくつか存在します。その中の一つがjqMobi(MITライセンス)です。jqMobiで実装されているAPIはjQueryに比べて少ないものの、APIがjQueryと互換性を持つよう設計されており、場合によっては読み込むファイルをjQueryからjqMobiに変更するだけで同じように動作します。jQuery 1.7.2は圧縮後のファイルサイズが32KBありますが、jqMobi 1.02はわずか5KBです。また実行速度もjqMobiの方が速い傾向にあります。PC環境であれば差はほとんど感じられませんが、モバイル端末などで通信速度が遅い場合やデバイスのスペックが低い場合にはある程度の差を感じることができるでしょう。
jqMobiはスマートフォンのHTML5対応ブラウザをサポートしています。jqMobiのAPIだけで事足りるのであれば、スマートフォン向けのサイトではjqMobiを、デスクトップ向けのサイトではjQueryを読み込むというようにライブラリだけ切り替えて使うことも可能です。利用可能なAPIの一覧はAPIドキュメントを参照してください。
HTML5のサイトを土台を利用して作る
HTML5のサイトを新しく作る場合、土台としてHTML5 Boilerplate(外部ライブラリを除く部分はパブリックドメインとして提供、自由に利用可能)を使うと楽です。HTMLやCSS、JavaScriptライブラリなど、HTML5のWebサイトを作る上でのベストプラクティスとされる要素が詰め込まれており、これをベースにしてコンテンツを作り始めることができます。
HTML5 Boilerplateの使い方
HTML5 BoilerplateのWebサイトにアクセスし、用途に合ったファイルをダウンロードします。ダウンロードしたファイルを解凍するとcssやjsなどのディレクトリ構造が含まれているので、全体をそのままWebサイトのディレクトリにコピーしてindex.htmlなどを適宜編集していきます。
![図1 HTML5 Boilerplate 3.0.2のファイル構成](http://cz-cdn.shoeisha.jp/static/images/article/6533/6533_fig1.gif)
Google Chrome Frame
HTML5 Boilerplateのindex.htmlでは、IE6でアクセスしているユーザーに対してGoogle Chrome Frameのインストールを促すメッセージを表示するようになっています。このGoogle Chrome Frameとは一体何でしょうか?
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
Google Chrome Frameとは、Internet Explorerのウインドウの中でGoogle Chromeとほぼ同等のエンジンを動かすプラグインです。Chrome FrameをインストールしたIE6ユーザーがChrome Frameに対応したWebページを訪れると、自動的にChromeのエンジンに切り替わって描画されます。
WebページをChrome Frameに対応させるには、HTMLに次のようなタグを埋め込みます。このタグが含まれているページをロードすると、Chrome Frameがインストールされていれば自動的にChrome Frameが有効になります。
<meta http-equiv="X-UA-Compatible" content="chrome=1">
もちろん、WebページがIE6に対応していれば、ユーザーにChrome Frameをインストールしてもらう必要はありません。