libro
www.tuyano.com
jQuery Mobileによるスマートフォン用Webサイト作成入門

jQuery Mobileを使ってみよう! (1/5)

作成:2011-05-23 08:16
更新:2011-05-23 08:16

■スマートフォンにおけるWebページの問題とは?

このところのスマートフォンの勢いには眼を見張るものがあります。2010年の時点で、既に新規携帯販売数の4割をスマートフォンが占めるようになっており、そのパーセンテージは日々上がりつつあります。

Webサイトを運営している人も、こうした「スマートフォン」への対応をそろそろ考えないと……と思っていることでしょう。が、これが実際にやってみると、意外に大変なことに気づくはずです。スマートフォン向けWebサイトは、普通のパソコンからのアクセスを前提としたサイトとは違います。何が違うのか、ちょっと整理してみましょう。

1. 表示される画面サイズ
なにより、一番の違いがこれです。スマートフォンは、携帯としてはかなり大画面ですが、パソコンとは比較になりません。大きな画面を前提としてサイトを作ってしまうと、スマートフォンでは表示しきれなかったり、小さく表示されてしまったりします。

2. 勝手に拡大縮小
表示で面倒なのは、「iPhoneとAndroidで、画面に収まりきれない場合の表示処理が違う」という点でしょう。iPhoneは、HTMLに用意されている特別なタグにより表示の倍率が調整されます。そして拡大すると、画面全体が単純に拡大されます。従って、横に長い文章は、横に画面を動かしながら読むことになります。

これに対してAndroidは、画面を拡大しても画面サイズにあわせてでテキストが折り返し表示されるようになります。つまり大きくしてもテキストは縦にスクロールしていくだけですべて読めるわけですね。このため、Androidで表示を確認して「適当な大きさで読めるな」と思っていると、iPhoneでは縦横にあちこちスクロールしないと読めない表示になってしまっていたりするのです。

3. HTMLのGUIは使いにくい
スマートフォンで困るのが、GUIの操作です。HTMLでは、ボタンなどのGUIはフォーム用の部品タグとして用意されていますが、指先でタッチして操作するスマートフォンではこれが非常に使いにくいのです。特にチェックボックスやラジオボタンの表示が小さく押しにくいのですね。パソコンなら、<label>タグを使ってテキスト部分をクリックしてON/OFFできますが、現在のiPhoneなどは<label>タグを認識しておらず使えません。小さいチェックボックスを拡大するなりして表示し操作しないといけません。

4. ごちゃごちゃしたレイアウトに向かない
多くのWebサイトは、「1カラム・レイアウト」ではありません。ただ単に右から左までみっちりとテキストが書いてある、というようなスタイルはパソコンでは見づらくなります。このため、左側にメニュー、右側にコンテンツとは別のコラムなどを用意し、多くは2~3コラムのレイアウトになっています。が、スマートフォンは、縦向きに使うことが多いため、1コラムのシンプルなレイアウトでないと見づらくなってしまいます。横にスクロールしないと全体が表示されないようなデザインは、スマートフォンではNGなのです。

――この他にも、表示されるイメージのサイズを小さくしたり、表示する広告をスマートフォン用に変更したりと、考えなければならないことはたくさんあります。これらを一つ一つ考えながらWebページを作成していくのは、意外に大変でしょう。

こういうときこそ、フレームワークの出番です。フレームワークというのは、特定の用途にあわせたシステムを提供するプログラムです。スマートフォン用のWebページ作成のためのライブラリやフレームワークというのも既に幾つか出ていますが、その中で本命ともいえるのが、「jQuery Mobile」です。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

※関連コンテンツ

「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る