スマートフォンとJavaScriptの悩ましい関係
フロントエンド・エンジニア 渡邉 卓現在、多くのPC向けWebサイトでJavaScriptを利用するようになりました。スマートフォン向けWebサイトでも、同様もしくはそれ以上にJavaScriptが欠かせない存在となりつつあります。
- ※ 本稿における「スマートフォン」の意味する範囲は、iOSないしAndroid OSを採用した、タッチパネルを主な入力インタフェイスとする携帯電話端末に限定しています。
たとえばスマートフォン向けWebブラウザ上では、画面遷移をせずに別のページ(ないしコンテンツの一部)を様々なアニメーションを用いて読み込んだり、端末の位置情報を扱ったり、iTunesのCover Flowのような機能を実現したり——といった諸々を、JavaScriptを経由することで実現しています。
スマートフォン向けWebブラウザで利用することを前提としたJavaScriptライブラリやフレームワークも登場しつつあります。jQuery Mobile、Sencha Touch、iUIはスマートフォン向けとして開発が進められていますし、YUI3はPCのWebブラウザ向けに実現した機能をスマートフォンのWebブラウザでも利用できるようになっています。
しかし、そのどれもが発展途中・開発途中です。そして、この傾向はもうしばらく続くことになるでしょう。
デバイスの性質
スマートフォン向けWebブラウザでJavaScriptを使ったプログラミングを行うときは、意外なほどさまざまな影響を受けます。その中でも、デバイスの性質が与える影響は思いのほか大きなものがあります。デバイスのクセ、メーカーによるOSのカスタマイズが生んだ非互換性、CPU・GPU性能、搭載メモリ……項目は多岐に亘ります。
その中でも影響が如実に現れるのは、GPUとタッチスクリーンまわりでしょう。GPU性能が十分でない場合やWebブラウザ側からGPUの恩恵を受けられない場合、主としてアニメーションに影響が出てきます。タッチスクリーンのドライバにバグがあれば、JavaScript側で取得できるタッチ関連イベントの現れ方がおかしくなることもあります。
タッチスクリーンを主な入力インタフェイスとするタイプのスマートフォンは、マウスやトラックボールといった入力デバイスを介するものと比べ、より直接的にUIに対する操作が行われるという特徴があります。利用者の指の動きがダイレクトに伝わるということです。
そうした直接性と関連して、PC以上にUIの応答速度や快適さといった側面が重要になってきています。アニメーションがガクガクになっていたり、指の動きにコンテンツが連動してくれなかったりすれば、利用者がストレスを感じることになるでしょう。前述した、デバイスの性質がJavaScriptに与える影響が悪いものかつ大きいものほど、JavaScript側で吸収しにくくなってきます。
不確定な仕様と実装の差異
PC向けWebブラウザでは、以前から不確定な仕様や差異のある実装が問題視されてきました。現在では多くの方々の尽力により、状況が改善されつつあります。
では、スマートフォン向けWebブラウザの状況はどうなっているのでしょうか?残念ながら、スマートフォン向けWebブラウザにおいても、不確定な仕様や差異のある実装——OSごとの致命的な違い、機能不足、未実装の機能など——がJavaScriptに大きな影響を与えているのが現状です。
特に悩ましい問題のひとつが、タッチスクリーンに関連したイベントまわりです。W3Cでの策定が進んではいますが、実際はiOSとAndroidで実装が異なっています。また、各OSのバージョンやデバイスの種類によって使えない機能があります。
ネイティブアプリでは様々なUIコンポーネントが用意されていたり、タッチ関連イベントを処理するための機能があったりしますが、JavaScript側からはそれらを利用する術がありません。少し根本的な話をすると、現状のスマートフォン向けWebブラウザには「スワイプ」や「フリック」といった特殊な操作が行われたかどうかを判定する機能がありません。たとえばネイティブアプリでは「スワイプ」や「フリック」といった特殊な操作が行われたかどうかを確かめる手段が元々用意されていたり、比較的簡単な方法でつけ加えることができます。しかしJavaScript側では、そうした方法が用意されているわけではありません。これらはすべて開発者が作りあげなければならないのです。
現状、JavaScript側で得ることができる情報は「この時間、この位置に触れた」「触れてからこの距離だけ移動した」「この時間、この位置で離れた」といった基本的なものだけです。先にとりあげたライブラリは、これらの情報から加速度などを計算し、どういった操作が行われたかを判定する機能を実装しています。
ただし、ここで問題になるのはネイティブアプリとの差異です。ネイティブアプリと操作感が違えば、当然利用者は違和感を覚えます。OSが違えば操作性も変わりますし、デバイスの性質も影響することがあります。このあたりは調整と妥協のトレードオフになってきます。
すべてはこれから
前述した点以外にも、様々な要因がスマートフォン向けWebブラウザ用JavaScriptライブラリの見通しを悪くしています。よりベターな設計思想、実装、テクニック、hackの発見も、まだまだこれからです。
スマートフォン向けWebブラウザ用のJavaScriptライブラリ群は、まだ開発が始まったばかりだといえます。そして、これまで以上に「どのように足りないものを補い、自然にみせるか」が重要になってくるでしょう。
【訂正 2011-08-02】
記事初出時、ネイティブアプリならばスワイプおよびフリックをイベントとして明示的に取得可能であるかのような表現がありました。お詫びさせていただくとともに、該当箇所を加筆訂正いたしました。
関連情報
Newsletter
メールニュースでは、本サイトの更新情報や業界動向などをお伝えしています。ぜひご購読ください。