このページの本文へ

DESIGN 西畑一馬のjQuery Mobileデザイン入門 ― 第1回

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

2011年05月11日 11時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。

jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラーWeb制作の現場で使う jQueryデザイン入門(Web Professional Books)の著者・西畑一馬さんが解説します。(編集部)


 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の閲覧に加えて、電子マネーやワンセグテレビ、防水機能といったさまざまな機能を備える。「ガラケー」とも呼ばれる

2011年6月27日追記:jQuery Mobileのアルファ版にはクロスサイトスクリプティングの可能性が指摘されています。修正済みのベータ版が6月20日にリリースされていますので、詳細は筆者のブログを参照のうえ対応してください。(編集部)

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング