第1回 jQuery Mobileとは――スマホ時代の到来とWeb制作

2010年6月に発売されたiPhone 4は爆発的なヒット商品になり、2010年後半には携帯電話各社がAndroid OSを搭載したスマートフォンを一斉に発売しました。2011年の上半期の携帯電話販売ランキングの上位はこれらのスマートフォンにほぼ独占され、スマートフォンのシェアはものすごい勢いで増加しています。

　スマートフォンのシェアが急増するなか、Web制作の現場にも変化が起こりました。「スマートフォン対応」案件の増加です。これまでのフィーチャフォン（Feature Phone）※1用のサイトをスマートフォンにも対応させたり、PC用のサイトをスマートフォン向けに最適化したりといったニーズが高まっています。

スマートフォン時代のWeb制作

　スマートフォン対応の難しさは、デバイスの多様性にあります。iPhoneだけでもこれまでに「iPhone 3G」「iPhone 3GS」「iPhone 4」の3機種が発売されているうえに（国内発売分のみ）、iPhoneで使われている「iOS」は定期的にアップデートされ、そのたびに新機能が追加されたりバグが修正されたりしています。

　Android端末の場合はさらにやっかいです。国内外のさまざまなメーカーからすでに数十種類の端末が発売されており、搭載されているOSのバージョンや画面のサイズはバラバラ。Android OSはオープンソースソフトウェアなので、メーカーが独自に手を加えることもあり、多種多様なブラウザーを搭載した端末が市場に出回っています。

　さらに、国内ではそれほどシェアが高くはない、リサーチ・イン・モーションの「BlackBerry」やマイクロソフトの「Windows Phone」といったスマートフォンもあります。

　「スマートフォン対応」が、必ずしも携帯電話に対応することだとは限りません。iPhoneと同じiOSを搭載した音楽プレーヤー「iPod touch」やタブレットデバイスの「iPad」、Androidもタブレット型やPC型のデバイスなどさまざまな端末が販売されています。スマートフォン対応ではこれらの“非携帯電話”への対応を求められることも珍しくありません。

　スマートフォン時代のWeb制作では多種多様なOS、画面サイズへ対応しなければならないのです。


※1　日本でこれまで主流だった、一般的な携帯電話のこと。通話とメール、Webの閲覧に加えて、電子マネーやワンセグテレビ、防水機能といったさまざまな機能を備える。「ガラケー」とも呼ばれる

スマートフォン向けフレームワークの登場

　そうした中、注目を浴びているのが「スマートフォン向けフレームワーク」です。スマートフォン向けフレームワークを使うと、わずかなHTMLやJavaScriptの記述でスマートフォンに最適化したサイトデザインを制作できます。デバイスの特性の違いも吸収してくれるので、制作者はデバイスの違いを気にすることなく、スマートフォンサイトを作成できます。代表的なスマートフォンフレームワークには次のようなものがあります。


iUi

■iUi（http://code.google.com/p/iui/）

　Firefoxのアドオン「Firebug」の開発者、Joe Hewitt氏 （@joehewitt）が作成したスマートフォンフレームワークです。iPhone向けサイトに特化しており、iOSのメニューとよく似たデザインのサイトを作成できます。スマートフォン向けフレームワークの先駆けですが、ここ数年バージョンアップされていません。


jQTouch

■jQTouch（http://jqtouch.com/）

　jQueryをベースに開発されたスマートフォン向けフレームワークです。iPhoneやAndroidなどのWebKit(※2)ベースのスマートフォンに特化しており、HTMLにさまざまなclass属性を追加することでスマートフォンサイトを作成できます。ページ遷移のアニメーションに優れており、後に登場する多くのスマートフォンフレームワークに大きな影響を与えました。David Kaneda氏（@davidkaneda）により開発されましたが、氏は次に紹介する「Sencha Touch」の開発元である米Sencha Inc.に合流しており、現在はJonathan Stark氏（@jonathanstark）によってメンテナンスされています。


Sencha Touch

■Sencha Touch（http://www.extjs.co.jp/products/touch/）

　米Sencha Inc.（日本ではExt Japan）が開発・販売するJavaScriptライブラリー「Ext JS」のスマートフォン版です。ベータ版の時点では有料とされていましたが、2010年11月の正式版公開時に完全無料に変更されました。JavaScriptベースの記述方法を採用しており、利用にあたってはJavaScriptの知識が必須です。jQTouchと同じくWebKitベースのスマートフォンに対応しています。

iOSヒューマンインターフェイスガイドライン

　多くのスマートフォン向けフレームワークが登場する1つの要因としてあげられるのが、アップルが公開している「iOSヒューマンインターフェイスガイドライン」の存在です。iOSヒューマンインターフェイスガイドラインでは、ユーザーがiPhoneなどのiOSデバイスを操作するときに最適なデザインについてまとめられており、「タップ可能なUI要素の快適な最小サイズは、44×44ポイント」といった具体的な記述から、「インターフェイスの一貫性を保つ」といったデザインの基本ルールまで、広範なガイドラインが提示されています。スマートフォンに限らず、デザインを仕事にする人は一度目を通しておくと参考になるでしょう。


アップルが公開している「iOSヒューマンインターフェイスガイドライン」

　スマートフォン向けフレームワークの多くは、iOSヒューマンインターフェイスガイドラインを参考に作られています。言い換えれば、iOSヒューマンインターフェイスガイドラインに準じたUIを手軽に実現するのが、スマートフォン向けフレームワークだと言ってもいいでしょう。スマートフォンを対象としたモバイルWebデザインはまだ黎明期ですが、すでに強力なデザインガイドラインとガイドラインに準じたフレームワークが存在するので、完成度の高いスマートフォンサイトが多く存在しているのです。

スマートフォン向けフレームワークの本命「jQuery Mobile」

　本連載で取り上げる「jQuery Mobile」も、iOSヒューマンインターフェイスガイドラインの流れを組むスマートフォン向けフレームワークです。jQueryの開発者で米モジラのJavaScriptエバンジェリストであるJohn Resig氏 （@jeresig）が中心となって開発されています。本稿執筆時点（2010年4月）ではアルファ版が公開されており、5月中にもベータ版、正式版がリリースされる予定です。

　jQuery Mobileが他のスマートフォンフレームと大きく異なるのは、対応デバイスの幅広さです。iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応しており、さまざまな環境に自動的に最適化してくれるのがメリットです。

jQuery Mobileの公式サイト(http://jquerymobile.com/)

　jQuery Mobileにはこのほかにも以下のような特徴があります。

高いアクセシビリティ性

　jQuery Mobileは多くのスマートフォンに対応しているだけではなく、Web標準によるセマンティックなHTMLの記述を前提に設計されており、高いアクセシビリティを確保できます。W3CのWAI-ARIA(※3)で定められているフォーマットに対応しているので、スクリーンリーダーや音声ブラウザーなどの支援デバイスを利用するユーザーにとっても快適な体験を提供できます。

Write Less , Do More.

　jQuery Mobileの大きな特徴の1つに、jQueryのコンセプト「Write Less , Do More.（少ない記述で、よりたくさんのことができる）」を受け継いでいる点があります。詳しくは本連載で解説していきますが、HTML文書にカスタムデータ属性を追加することで簡単にスマートフォン向けの機能を追加できます。


※2 　アップルが中心になって開発するオープンソースのレンダリングエンジン。PC向けのSafariやGoogle Chrome、iPhoneなどのiOS向けのMobile Safari、Androidのブラウザなどで採用されている

※3　Web Accessibility Initiative-Accessible Rich Internet Applicationsの略でJavaScriptやAjaxで作成されたコンテンツをスクリーンリーダーでの読み上げやキーボード操作に対応させるための技術仕様

サンプルコードに見るjQuery Mobileの手軽さ

　jQuery Mobileがどれくらい簡単か、実際にサンプルページを作ってみましょう。テキストエディターに以下のHTMLを入力してください。


<!DOCTYPE html> 
<html> 
  <head> 
  <meta charset="UTF-8">
  <title>jQuery Mobile Sample</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
  <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
  <div data-role="page" data-theme="b">
    <div data-role="header">
      <h1>jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true">
        <li data-role="list-divider">Menu</li>
        <li><a href="#page">
          <h3>jQuery Mobile とは?</h3>
          <p>jQuery Mobileについて解説します</p>
        </a></li>
        <li><a href="#page">
          <h3>jQuery Mobileの基本</h3>
          <p>jQuery Mobileの使い方について解説します</p>
        </a></li>
        <li><a href="#page">
          <h3>jQuery Mobileのサンプル</h3>
          <p>jQuery Mobileを利用したサンプルを紹介します</p>
        </a></li>
      </ul>
    </div>
    <div data-role="footer">
      <h4><small>Copyright &copy; 2011 to-R All Rights Reserved.</small></h4>
    </div>
  </div>
  <div data-role="page" id="page" data-theme="b">
    <div data-role="header">
      <h1>jQuery Mobile</h1>
    </div>
    <div data-role="content">
      <h2>jQuery Mobile とは?</h2>
      <p>本連載で紹介する「jQuery Mobile」もそういった流れを組むスマートフォンフレームワークです。</p>
      <p>jQuery ( http://jquery.com/ ) の開発者でMozillaのJavaScriptエバンジェリストであるJohn Resig氏 ( @jeresig ) により開発されています。執筆時点(2010年4月)の段階ではアルファバージョンが公開されており、5月中にもベータ、正式版がリリースされる予定です。</p>
    </div>
    <div data-role="footer">
      <h4><small>Copyright &copy; 2011 to-R All Rights Reserved.</small></h4>
    </div>
  </div>
</body>
</html>

　これで基本的な設定は完了です。JavaScriptやCSSは1行も記述していません。HTMLの中に「data-role="footer"」や「data-inset="true"」といった見慣れない記述がありますが、これはHTML5で新たに定義された「カスタムデータ属性」と呼ばれる機能です。カスタムデータ属性を利用するとHTML内に独自の属性を記述できます。カスタムデータ属性を除けば、普段HTMLを書いている人ならまったく難しくないでしょう。

　jQuery Mobileでは、HTML中にカスタムデータ属性を記述することでスマートフォン向けのサイトを自動で生成してくれます。それぞれのカスタムデータ属性がどのような意味を持つかは次回からの連載で紹介していくとして、まずはこのページをスマートフォンで見てみましょう。スマートフォンがない場合はPCのSafariからも確認できます。SafariはMacにはデフォルトでインストールされていますし、WindowsはアップルのWebサイトからダウンロードできます。

　先ほど入力したHTMLは、以下のURLから確認できます。


サンプルページをiPhoneで見るとこのように表示されます

サンプルページをAndroid（Xpreia）で見るとこのように表示されます

　ご覧のように、HTMLで記述しただけのコンテンツが、スマートフォンらしい見た目で表示されています。メニューをタップすると、スライドしてページが切り替わるのも確認できるでしょう。このように、jQuery Mobileを利用することで、スマートフォンに特化したWebサイトを非常に簡単に作成できるのです。

　本連載ではjQuery Mobileの基本的な使い方から、実務で利用するための効率的な利用方法まで解説していきます。jQuery Mobileを利用したスマートフォンサイト作成の魅力を知っていただけたらと思います。



Comments