このページの本文へ

モバイルフレームワークの大本命が来た!

jQuery作者が明かす「jQuery Mobile」の魅力

2010年11月11日 14時31分更新

ジョン・レッシグ(John Resig)

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

 JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。世界中の有名サイトで使われている人気フレームワークの作者=ジョン・レッシグ(John Resig)氏が次に注目したのが「モバイル」です。2010年10月に最初のアルファ版がリリースされたjQuery Mobileは、モバイルWebアプリケーションフレームワークの本命として、多くの開発者の関心を集めています。

 本稿では、11月13日に開幕するWeb Directions East 2010に合わせて来日予定のジョン・レッシグ氏が、jQuery Mobileの魅力(の一部)を紹介します。(編集部)


アルファ版がリリースされた「jQuery Mobile」。iPhone、Androidをはじめとするさまざまなモバイルデバイスに対応するフレームワークだ

 クロスブラウザーやブラウザー固有の問題を避け、高いインタラクションを手軽に組み込むには jQueryのようなJavaScriptライブラリーの利用が欠かせません。jQueryはDOMへアクセスしたり、イベントを付け足したり、Ajaxを実行したりといったWebアプリケーションの開発に欠かせない重要な機能を備えています。数えきれないほどの便利な機能を持つjQueryは、どのようなWebアプリケーションの構築においても最適なツールとなりました。

 jQuery Mobileは、jQueryで培われたノウハウを生かして開発したフレームワークです。jQuery MobileはjQueryをベースに作り上げられていますが、優れたモバイルアプリケーションの作成に欠かせないウィジェットやレイアウトの仕組みをすべて備えています。jQuery Mobileで作成したページは、iPhoneやAndroidといったスマートフォンのモバイルブラウザーではもちろん、タブレット上でもデスクトップ・コンピューター上でも、機能が限られているモバイルデバイス上でもうまく動作します。

 jQuery Mobileには便利な要素がたくさん組み込まれていますが、1つにはHTML5とCSS3を組み合わせた機能があります。たとえば、jQuery MobileではHTML5のdata-*属性を活用してさまざまなGUIを簡単に生成できます。一例を挙げると、あるテキストリンクをボタンにしたいときは、

<a href="index.html" data-role="button">削除</a>

のように、a要素にdata-role="button"を加えるだけで完成します。

 アイコンを追加するときも、data-icon="delete"などのdata-*属性を使って

<a href="index.html" data-role="button" data-icon="delete">削除</a>

のような表現を書き加えるだけ。

 ラッパーでdata-role="controlgroup"を使えば、複数のボタンを簡単にグループ化できます。

<div data-role="controlgroup" data-type="horizontal">
   <a href="index.html" data-role="button"data-icon="arrow-u">上へ</a>
   <a href="index.html" data-role="button"data-icon="arrow-d">下へ</a>
   <a href="index.html" data-role="button"data-icon="delete">削除</a>
</div>


 さらに、jQuery MobileはCSS3の機能を活用することで画像の使用を減らし、モバイル端末に送るファイルサイズを小さくしていいます。通信回線が速くなってきているとはいえ、モバイル向けに可能な限りファイルサイズを抑えられれば、ユーザーの使い勝手を向上できます。

 jQueryとQuery Mobileについてさらに知りたい方はぜひ、14日に東京で開催される私のワークショップに参加してください。会場でお会いできることを楽しみにしています。

日本で最初にjQuery Mobileを学ぶ!
作者本人が直接指導するワークショップの開催迫る!!

 11月14日に都内で開催されるWeb Directions East 2010では、jQuery/jQuery Mobileの作者であるジョン・レッシグ氏本人が直接指導するワークショップが開催されます。ワークショップでは、jQueryの基本から、コーディングのベストプラクティス、jQuery UIのカスタマイズやプラグインの作成などのTips、jQueryを使ったWebアプリ開発のツボを解説します。

 また、後半ではWDEが作成したオリジナルの日本語版仕様書を使って、jQuery Mobileの概要と基本的な使い方も紹介する予定です。日本で一番早く、正しくjQuery Mobileをマスターする絶好のチャンスです。ぜひご参加ください。

お申し込み


著者:John Resig(ジョン・レッシグ)

著者近影

米モジラ・コーポレーションのJavaScriptツールデベロッパー。ボストン在住。 Webデザイナー・デベロッパーから圧倒的な支持を集めるJavaScriptフレームワーク「jQuery」 の開発者として世界的に知られる。2010年、「Pro JavaScript Techniques」に続く2冊目の著書「Secrets of the JavaScript Ninja」を上梓予定。Twitter(@jeresig)でも積極的に発言中。

カテゴリートップへ

ソーシャルランキング
  1. IoTを手軽に体験!Web開発者におすすめのチュートリアルまとめ 47
  2. モダンでスマートなフロントエンド開発のための便利ツール使い方まとめ 17
  3. 『MITテクノロジーレビュー』先行読者登録を開始 10
  4. ポケモンGOにユーザーを奪われないためのUX改善9つのヒント 6
  5. 【週末まとめ読み】デザインのクオリティが驚くほど上がる「余白恐怖症」の治し方 5
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング