SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CoffeeScriptによるモダンなWebアプリケーション開発

CoffeeScriptベストプラクティス集
ブラウザ向けJavaScript編(1)

CoffeeScriptによるモダンなWebアプリケーション開発 第7回

  • X ポスト
  • このエントリーをはてなブックマークに追加

jQuery

 jQueryは非常に多くのWebサイトで使われているJavaScriptライブラリです。DOM操作やAjaxなどはブラウザごとに実装が異なるため従来はそれぞれ個別にコードを書く必要がありましたが、jQueryはその違いを吸収し、1つの共通したAPIを提供してくれます。また、多くの複雑な操作を手軽なAPIで行え、大幅に工数を減らすことができます。

 jQueryはIE6以上など現在使われているほとんどのブラウザで動作します。詳しい使い方については多くの書籍やWeb上の資料が存在していますので、そちらを参照してください(日本語のリファレンスサイト)。

[リスト6]jQueryを使ってAjaxでPOSTする
$.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のファイル構成
図1 HTML5 Boilerplate 3.0.2のファイル構成

Google Chrome Frame

 HTML5 Boilerplateのindex.htmlでは、IE6でアクセスしているユーザーに対してGoogle Chrome Frameのインストールを促すメッセージを表示するようになっています。このGoogle Chrome Frameとは一体何でしょうか?

[リスト7]IE6向けのHTML
<!--[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]-->
図2 IE6での表示
図2 IE6での表示

 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をインストールしてもらう必要はありません。

次のページ
HTML5やCSS3のサポート状況を判別する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CoffeeScriptによるモダンなWebアプリケーション開発連載記事一覧

もっと読む

この記事の著者

飯塚 直(イイヅカ ナオ)

1984年東京都生まれ。 高校時代に趣味でPerlやJavaを使ってプログラミングを始める。 慶応大学湘南藤沢キャンパス卒業後、共同通信社にてニュースサイトの開発などを担当。 その後、面白法人カヤックにてソーシャルゲームの開発などを手がける。 2012年現在、カヤックを退社し個人として活動し...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6533 2012/05/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング