PCとは違ったノウハウが必要な携帯Webアプリケーション開発

Webアプリケーション開発というとさまざまなフレームワークやJavaScript、Ajaxなどを活用したPC向けのリッチなWebアプリケーションが注目される傾向がある。携帯電話向けのWebアプリケーション開発では携帯電話の諸処の制限によってアーキテクチャ的にはシンプルな作りにせざるを得ないが、反面、キャリア/端末ごとの動作の違いなど、携帯Webならではのノウハウも必要となる。

今回は携帯Webの開発に便利な定番開発ツールをまとめて紹介する。

開発中の動作確認に大活躍!「FireMobileSimulator」

携帯Webアプリの開発に欠かせないのがFireMobileSimulatorだ。前述の通り、携帯電話にはキャリアの違いに加えて仕様の異なるさまざまな端末が存在し、キャリアや端末によってWebページの表示結果が異なる。FireMobileSimulatorは携帯電話での表示をシミュレートすることができるFirefoxエクステンションだ。

インストールするとFirefoxの[ツール]メニューに[FireMobileSimulator]という項目が追加され、任意の端末を選択することで携帯電話でアクセスしたかのようにWebページを表示してくれる。絵文字なども表示することが可能だ。

図1 端末の選択

図2 端末を選択してGoogleにアクセスしたところ

もちろん実機での表示とは異なるが、実機での表示を確認しながら開発を進めようとすると非常に手間がかかる。開発中はFireMobileSimulatorを使用し、最後に実機での動作確認を行うようにすると効率的だ。

また、FireMobileSimulatorはオプション設定で端末情報やID情報、位置情報などを変更することができる。テスト時に便利な機能だ。

絵文字の入力なら「i絵文字」

PCにはない携帯Webアプリならではの要素として絵文字の存在がある。携帯向けWebでももちろんimgタグを用いて画像を表示することが可能だが、絵文字は基本的に端末側で表示されるため、Webページの手軽な装飾手段として多用される。

i絵文字はdocomoから提供されているiモード向けのツールで、テキストエディタなどにiモードの絵文字を挿入するためのものだ。EclipseのHTMLエディタなどにも問題なく挿入することができる。

図3 i絵文字

挿入した絵文字はそのままだと対応する文字が存在しないため「・」などのように表示されるが、i絵文字と一緒に提供されているフォントをインストールすることで、エディタ上でも絵文字を表示することが可能となる。

なお、i絵文字の他にもWeb上で絵文字を入力するためのサービスも存在する。手軽に使うのであればこういったサービスを利用するのもいいだろう。

QRコードの作成に「QR Code Editor」

携帯電話ではWebサイトへのナビゲーションなどの目的でQRコードがよく利用される。QRコードを作成するためのツールにはさまざまなものがあるが、フリーソフトで手軽に利用できるがQR Code Editorだ。画面構成はシンプルなため、利用にあたって特に難しい部分はないだろう。作成したQRコードは画像として保存することができるほか、Wordなどに直接ドラッグ&ドロップすることが可能だ。

図4 QR Code Editor

QRコードを作成するだけでなく、既存のQRコード画像をドロップすることでそのQRコードに含まれている情報を参照することができる。また、絵文字の挿入と同様、Web上にもQRコードを作成することのできる様々なサービスが存在する。

まとめ

本稿で紹介したように、携帯電話向けのWebアプリケーション開発には通常のPC向けWebアプリケーション開発とは違ったツールが必要になる。携帯Web開発の必須ツールと言ってもよいFireMobileSimulatorから、絵文字の入力やQRコードの作成といった便利ツールまで様々なツールがあるが、どれも開発言語を問わず利用することができるので、携帯向けのWebアプリケーションを開発する際はぜひこれらのツールを活用してほしい。