JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ）

　こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。

　今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄積したノウハウから、JavaScriptに関するハマリどころを紹介します。

スマホ向けWebサイトにおけるJavaScriptの4つの主な役割

　まず、スマートフォン向けWebサイトを構築するうえでのJavaScriptの主な役割をまとめてみましょう。

【1】HTML5API

　HTML5はWebアプリケーションプラットフォームの側面があります。アプリケーションとしての実装言語はJavaScriptが使われており、スマートフォン向けWebサイトをWebアプリとして提供するような場合は、HTML5APIを利用することもあるでしょう。

　ただ、前回も紹介した通り、HTML5に対する各ブラウザベンダのサポートは、まちまちなのが現状です。

【2】DOM操作

　今日のWebサイトでは、Ajaxなどを利用して動的にコンテンツを制御・表示することが多くなっています。後述するjQueryに代表されるようなライブラリの登場もあって、スマートフォン向けWebサイトでは、狭い画面をうまく使って表示させるために、JavaScriptを使ってCSSをユーザーインタラクションに合わせて変更したり、Ajaxで得た結果をノードとして挿入するなど、DOM操作は重要な役割となっています。

【3】タッチ・画面方向制御

　スマートフォンの特徴に、「タッチですべてを操作する」ことがありますが、この制御はPCとは異なります。

　PCはマウス中心のインタラクションなので、利用するイベントはonClickやonDblClick、onMouseOverなどです。スマートフォンでは、これらのイベントの利用に注意が必要です。

　スマートフォンの場合は、onTouchStartやonTouchMove、onTouchEndなどのイベントを利用しますが、PCではこれらのイベントを利用できません。また、スマートフォンでは画面の縦横状態が利用できます。このような実装もJavaScriptの大事な役割です。

【4】アニメーション

　スマートフォンでFlashが使えないことから、スマートフォン向けWebサイトでのアニメーションは、JavaScriptかCSS3で行う手法が一般的となりました。どちらの方法を使うにしても、JavaScriptはアニメーション実装では大きな役割を果たしています。

JavaScript実装上の3つの注意点

【1】タッチUIはイベントプログラミングに手間が掛かる

　スマートフォンのネイティブアプリ開発では、タッチUIのイベントを取得するためのAPIがあらかじめ用意されています。そのため、ダブルタップ・ロングタップ・フリック・スワイプのようなタッチイベントを簡単に取得できます。

　しかしJavaScriptでは、もう少し低レベルの「タッチした」「触ったまま移動した」「画面から離れた」などのイベントしか取得できないのが現状です。

　従って、フリックやロングタップなどは、そういったイベントの組み合わせを取得し、そのイベントがどのくらいの時間連続して発生したかを判断して実装するしかありません。

　また、前述した通り、タッチ操作は、サイト上のタッチとOSとしてのタッチ（単純なスクロールなど）が混在しやすいため、実装に気を使う必要があります。

【2】デバイスの影響を受けやすい

　特にAndroidでは、JavaScript実行性能の点で、デバイスのCPU・GPU・メモリの影響を受けやすい傾向があります。同じJavaScript実装であっても、搭載メモリが少なかったり、CPUスペックが低かったりすると、描画に時間がかかりユーザーをイライラさせてしまったり、イベント処理の検出レートが下がってしまって、ユーザーのタッチ操作をイベントとして受け取れなくなるようなことも起こります。

　JavaScriptの実装方法もさまざまですので、スクリプトの組み方によっても大きな差が生じます。

【3】機種依存の存在

　OSやデバイスごとにJavaScriptの挙動に機種依存が存在します。実装を効率的に行うために、後述する海外製ライブラリなどを利用される方も多いでしょう。OSS中心のライブラリには、iOS／Androidなどでテストが行われているものがありますが、ベンダごとのOSカスタマイズに対して、すべて対応できているわけではありません。

　特に日本国内ベンダのスマートフォンは、海外でほとんど展開されていないので、ライブラリの使用で機種依存が解消される保証はなく、より幅広い機種対応が必要となるサイトの場合は、実機での検証が不可欠といっていいでしょう。