[&] Web Directions East 2010 (John Resig)

John Resig (ジョン・レシグ)
『モバイルJavaScriptとjQuery Mobile について』
------------------------------------------------------------------------------
@jeresig
http://ejohn.org/



jQuery Mobile
今日は新しい JQuery Mobile について話ます。
個人的にこの研究を始めたのが2年前の話です。
モバイルはどんどん面白い環境になってきています。
いろんな研究調査をやっています。
JQuery ライブラリの中で学んできました。
Mobile Web 開発はクレイジーな環境。
さまざまな環境がある。
が、以前よりはよくなっている。
モバイル Web 開発の黄金時代にはいってきている。

JQuery Mbobile のシンプルな目標。
最も人気に対応できるライブラリを作る。
大きな課題でもあった。
何が一番人気なモバイル端末なのか、定量的に見るのが難しかったから。
さまざまな取り組みを行った。

どのプラットフォームがもっとも普及しているのか？
どのブラウザなら最近のスクリプティングをサポートできるのか？
どのデバイス、シミュレータをダウンロードすれば、優れたテストができるのか？

優れたデータの収集が必要になった。
使えるデータが分散していて、質のいいデータが揃わなかった。
国際的なモバイルユーザ？
StatCounter の統計や Gartner の販売情報
面白いことが分かった。
どういうプラットフォームが使われているのか？
　ほとんどが一般的な端末。
　iPad/iPhone もグローバルでもると、それほど人気があるわけではない。

グローバルでみて最も人気があるのは Nokia の Symbian
iPHone が次に人気があり、次に Blackbery.
これは面白い現象。
こういったデバイスの売り上げを見たとき、
Symbian の方が増加率が早い。iPHone の 3倍の増加率。
iPHone がプラットフォームとして主流ではない。
Android は Nokia の半分以下でしかない。
グローバルの統計数値は、期待する数値と違う数値がでてくる。
各プラットフォームのどのバージョンが人気があるのか、どこにも情報は無い。
Windows OS とかなら、分かりやすい。

特定のブラウザに目を向けて、プラットフォームの観点から見ると、
Opera がモバイルユーザーとして圧倒的。
Blackbery は堅調にのびている、2位の地位。
その後、iPHone, Android, Nokia というブラウザの順番。
Android はグローバルのシェアをのばしてきている。
ほとんど Android は 1年でのびてきている。
現状ではブラウザのどのバージョンが使われているのか？
という情報が無い。
存在していないということは、的をしぼるバージョンを
直感的に決めなければいけない。

戦略。
Yahoo が始めた、Yahoo!s Graded Browser
どのブラウザが最も良い経験を得られるのか線引きをする。
ブラウザのグレードを分ける作業をする。
　デスクトップのばあいは、数種類のブラウザ。
　モバイルの場合は、たくさんのプラットフォームとたくさんのブラウザ
　品質レベルもいくつかに分かれている。

モバイルのWebサイトを構築しようとするとき、
多くのプラットフォームをサポートすることを考えなければいけない。

■ブラウザテスト

シミュレータが、ブラウザの開発もとから入手する必要があり、
実機も入手する必要がある。
なぜ？
シミュレータのできはたいていよくない。
実機でおこることに相関関係が無い場合が多い。
タッチデバイスではシミュレータで完全にテストすることはできない。
実際のデバイスを使うことが必要。
もちろんコストもかかる。決して安くは無い。
シミュレータは試験を自動化するには適している。
自動化して短期間でテストすることができる。
インタラクションテストは実際のデバイス。
シミュレータのほとんどは Windows で走る。
VMware などを Mac 上で使っている。

■テストの自動化。
TestSwarm というツールがあって、試験を自動化することができる。
現実的な開発が行える。
http://www.testswarm.com/

●Symbian (s60)
Nokia のプラットフォーム。最も日記があるのは S60 v5
v3 は古めのもの。WebKit ベース。
ほとんどのモバイルブラウザの構造。納得のいく体験が得られる。
Safari 2.0 だと古くなるので、サポートの課題がある。
Nokia は Symbian 3 をリリースし、その後全くことなるプラットフォームをリリース。

●Symbian UIQ
人気が失われているもの。
Nokia が数年前に買収したもの。もうサポートされていない。
Opera Moblie (8.6 or 8.65)

●iPhone
最も人気のあるもの。最新の WebKit が使われている。
非常に速く。標準サポートも優れている。
現状 Safari 4
問題はなかなかおこらない。
利点は、CSS の fix postion サポートが無い。
なぜ無いのか？　ブラウザの実装に依存するから。
iPhone では TouchScroll library を使うのがおすすめ。
iPHone のいい点は、全てのブラウザの最新版にアップグレードされること。
Apple が OSのコントロールをしているから。
他のモバイルデバイスと異なる点。
全ての iPhone, iPad ユーザーはブラウザは常に最新版がつける。
シミュレータのできが良い。

●Blackberry OS
6.0 は WebKit ベース。それ以前のものは良くない。
古いものは JavaScript の実行が実質できない。

●Android
様々なメーカが Android を選択している。
問題は、様々なデバイスメーカーがどのデバイスで Android を実行するか、
各メーカーが決めている。
OS 1.6, 2.1, 2.2 など、古いバージョンもまだまだ人気がある。
現行の携帯電話がアップグレードするのはまだまだ時間がかかる。
ユーザーによっては 1.6 のまま更新しない人もいる。
Android もすばらしいエミュレータがある。
これから 2年間で主流になってくると思われる。

●Windows Mobile
Windows Mobile 6.5
IE6 のレンダリングエンジン

●WebOS (Palm)
WebKit ベース。

●Maemo / Meego (Nokia)
Linux ベースで高速。
ポピュラーではない。
Gecko レンダリングエンジン。
現在 WebKit に移行中？

●Opera Mobile and Opera Mini
複数のプラットフォームで動作している。
Opera Mini は proxy ブラウザなので、Opera サーバと通信し、
Web ページの削減版を見る。

●Fennec
Firefox のモバイル版。
Android 用も出ている。Maemo と Android をターゲットとしている。
非常に高速。

●Phonegap
WebKit レンダリングエンジンを利用。
HTML/CSS/JS で開発っでえきる。

●その他
Netfront (SONY)
Ozone
Openware
.....

サマリ
Opera 9.5, 10
IE 6,7
Firefox 3.5+
Safari 2,3,4
... Blackberry

モバイルブラウザとデスクトップは違うもの。
最終的にはモバイル実機でテストしなければいけないこと。
Blackberry は全く違うブラウザなので、きをつけなければいけない。

jQuery mobile のために何千ドルもの携帯電話の実機を買った。

●jQuery
複数のプラットフォームで動作するように整えていった。
モバイルデバイス用の機能をサポートいった。
最も重要なのはクロスプラットフォームへの対応。
今我々がやっているのは、改良、進化をやっている。
大きな影響なく、ダウングレードできるということ。
　例えば、JavaScript に対応していない実機の場合、
　HTML で表現するなど、少なくとも基本的なものを見えるようにしている。
ある意味では JQtouch とよくにている。
違いはある。
ページの構築の方法に違いがある。
類似点もたくさんある。
JQtouch は JQuery Mobile のインスピレーションになっている。

簡単にテーマを組み合わせることができる。
JQuery でテーマの変更を扱うことができる。
それぞれアプリケーションにあわせていける。
ページモデル、リストビューなど。
面白い概念がヘッダーとフッター。
　上下で固定されている。スクロールすると消えてしまう。
　スクロール中はできるだけたくさんの情報を見れるようにし、
　ページのスクロールが止まると、ヘッダーとフッターが表れる。
いわゆる Nav Bar 。アイコンも扱える。
デバイスの大きさにもよる。
携帯端末だといくつかしか表示できないが、タブレットだと
たくさん表示でき、スムーズに拡張できる。

通常のマークアップを取り出して、複数ページに分けて利用することができる。
本当にうまくいった。
通常のマークアップでもっと使える形に進化させている。
リアルタイムの検索フィルタリング機能もある。
すべて共通で重要になってくる。

提供するにあたって、コストがかからないようにするのも重要だと思った。
携帯デバイスではできるだけ帯域幅を節約したい。
現在では 16k byte しか使わない。
これからもできるだけ小型にしていきたい。

Q&A
Q: データをひとつのページから複数のページにするのはどのような処理をしているのか？
A: 次のページへのローディングをする時に、最初のページをローディングした後に、
　リンクをクリックした時に、すでにローディングしているのかチェックし、
　ページがリクエストを数回した時、同じ動作をしないようにしている。
　最初のページがローディングされ、スクリプトが実行され、その中のデータにアクセスできる。
　そこでシームレスな動作が行われている。

Q: 昨日のワークショップでの質問。
JQtouch と JQuery mobile との関連は？
A: プログレッシブエンハンスメントとしての関係が深い。
違っている点は、より多くのプラットフォームをサポートしている。
作業をたくさんしている。これだけ大掛かりなプラットフォームで利用できるのは重要。
同時にサイズを小さく保つのも重要。

Q: JQuery mobile はキャッシングは？最初のページにたくさん情報を入れておいた方がいいのか？
A: それはアプリケーションによる。ユースケースによる。
　シングルファイルでたくさんの情報をいれたり、イメージを削減することもできる。
　イメージを使わず CSS3 で表現することでサイズの削減に貢献することができる。

Q: 様々な端末をサポートする時に、画面サイズが違ったものがある場合、どう対応するのか？
CSSのメディアクエリのような対応。
A: メディアクエリは役立つツール。メディアクエリの体験を様々なプラットフォームで利用できる。
自動的にそのモードにあるかどうか、クラスを適応することができる。
スタイリングは全てスタイルシートで行い、
ロジックは全てフレームワークで行い。
大型のデバイスを使う場合、グリッドシステムで自動的にレイアウトをスケールする。
小型のデバイスから、大型のデバイスにあわせることができる。

Q: カスタムデータタイプ属性を使っている。jQuery mobile はグローバルなものを使ってしまっているが？
data-role と data-theme がグローバルなのは、なぜ？
A: ここでのバリデータを遅らせること無く入れることができる。
　このフレームワークを作るときには特定のフレームワークを使う。ここでの対立は出てこない。
　複数のフレームワークを同時に使うことは無いので、現実的な対応。

Testing Mobile JavaScript (Fall 2010

View more presentations from jeresig.