携帯サイト制作の効率を高める「ケータイキット for Smarty」－アイデアマンズアイデア（特別編）│株式会社イー・エージェンシー

2007年11月12日

携帯サイト制作の効率を高める「ケータイキット for Smarty」－アイデアマンズアイデア（特別編）

寺嶋芳延
アイデアマンズ株式会社

　ECや求人といった一般ユーザー向けのWebサイト・サービスは、PCと携帯の両方に対応することが一般的になってきました。特に若い年齢層に向けたサービスや、女性向け商材を扱ったサイトでは、今や携帯への対応は必須の要件になっていると言えるでしょう。

　携帯向けのWebページ自体はシンプルなHTMLで記述されているので、むしろPC向けのWebページの制作よりも簡単なくらいなのですが、3 キャリアに対応したり、旧機種への対応を考え出すと、とたんに面倒な問題がどんどんと噴出します。一度、携帯サイトの制作を行ったことのある人であれば、きっと骨身に染みているはずです。

・絵文字はどのように使うか
・半角カタカナはどのように扱うか
・1ページのデータサイズはどの機種に合わせるか
　などなど・・

　これらのハードルを乗り越え、携帯サイト構築にどのように立ち向かっていくか？
今回はPHPを題材に、PCと携帯の両方に対応するようなサイト構築を効率よく行う方法をご紹介します。

携帯向けサイト開発の問題点

　携帯向けサイトを開発する際の問題点は大きく3つ挙げられます。

（1）携帯サイト固有の制約
　　　画面サイズが小さい、1ページあたりのデータサイズに制限がある、FlashやJavaScriptが利用できないなど、PC環境とは異なる制約条件が多くあります。逆に、絵文字など、携帯独特の表現方法も考慮すべき課題です。

（2）機種依存性
　　　現在、日本の市場には500種類を越える携帯端末が普及しています。しかしこれらの端末のスペックは多種多様であり、キャリア（ドコモ、 softbank、au）によってが異なるばかりでなく、機種の新旧によっても大きく異なります。それら各機種によって画面サイズ、利用可能なHTMLタグ、利用可能な画像フォーマットなどがそれぞれ異なります。実機テストはどこまでやればいいのか、悩ましいところです。

（3）新機種への対応
　　　携帯電話は次々と新機種が登場するため、メンテナンスコストは増大する一方です。動作検証を実施する負担は大きくなるのに、クライアントはそれほど予算を割いてくれません。新機種が出る度に、プログラマーやデザイナーのモチベーションを削っていきます。

　これらの問題をスマートに解決しつつ、且つPC向けにも対応したサイトを開発するためには、システム的にはどのような構造を有すればいいでしょうか。

「MVCモデル」という考え方

　Webサイトの規模が拡大する中で開発手法も大きく進歩しました。そして現在主流となっているのが「MVCモデル」という考え方です。WebサイトをPC・携帯両方に対応させるために、この「MVCモデル」が非常に適しています。

　MVCモデルでは、システム全体をモデル（M）、ビュー（V）、コントローラー（C）の3パートに分けます。モデル（M）はデータベースなどにアクセスして処理を行う部分、ビュー（V）はHTMLを表示する部分、コントローラー（C）はユーザーの操作に応じて、モデル（M）に処理を依頼し、ビュー（V）に結果の表示を依頼する部分です。

　このMVCモデルでは、HTMLによる見栄えの部分がビュー（V）として分離されているので、従来難しかったデザイナーとの分業が可能になります。また、PCと携帯の両方にサイトを対応させるときは、携帯に向けたHTMLを表示するためのビュー（V）をもうひとつ増やすだけでよく、モデル（M）とコントローラー（C）を共通化できるのがMVCモデルの優れた点です。

MVCを実現するライブラリ「Smarty」

　さて、PHPでのWebシステム開発で、このMVCモデルのビュー（V）の部分によく使われているライブラリがあります。それが「Smarty」です。

・Smarty（英語）
http://smarty.php.net/
・Smarty（暫定和訳マニュアル）
http://sky.freespace.jp/smarty/

　Smartyを使う場合、デザイナーは「テンプレート」と呼ばれるHTMLに似たコードを記述します。テンプレート内ではコントローラー（C）から渡されたデータを独自の表記ルールに従ってHTMLの中に埋め込んでいく作業を行います。プログラミングに詳しくないデザイナーでも、すぐに慣れて使いこなすことができ、プログラマーとデザイナーの効率のいい分業を実現します。

　PC向けテンプレートと携帯向けテンプレートを別々に作成し、プログラムで利用するテンプレートをスイッチすることで、Smartyで簡単にPC・携帯両対応サイトを制作することがができるわけです。

　ところがまだ問題は残っています。それは携帯の機種依存性です。現在市場に出回る500種類以上の機種に対応するにはどうすればよいのでしょうか？
500種類のテンプレートを作成するという手段も一つの手ですが、もう少し楽な方法があります。それが以下に説明する「ケータイキット for Smarty」です。

機種依存性を解決する「ケータイキット for Smarty」

　Smartyには標準でも多くの機能がありますが、プラグインを導入することでさらに機能を拡張できます。そこで、弊社アイデアマンズが開発した「ケータイキット for Smarty」（以下、ケータイキット）というプラグインを導入することで、Smartyに携帯の機種依存性を吸収させる機能を追加することが出来るのです。

・ケータイキット for Smarty
http://smarty.keitaikit.jp/

　ケータイキットはSmartyと親和的に動作し、文字コードや絵文字・画像フォーマットの変換などの最適化処理を行います。これにより、プログラマやデザイナーは携帯に固有の作業の大部分をケータイキットに任せることが出来るようになります。

ケータイキットを導入するメリットをまとめてみました。

・メリット（1）ライブラリ関数を用いて携帯固有の問題をクリアできる
　　絵文字を出力する関数や、キャッシュサイズに収まるように自動的にページを分割する関数など、携帯固有の問題をライブラリ関数を用いて解決することが出来ます。開発者が面倒で不毛な勉強をする必要がありません。

・メリット（２）機種別のコードを書かなくてよい
　　ケータイキットは、今市場に出回っている携帯機種のデータベースを内部に持ち、絵文字や画像フォーマットなどをそれぞれの機種に合った形式へ自動で変換します。プログラマーが書くのは、基本設定に関するコードのみとなり、膨大な数のif文を書く必要がなくなります。

・メリット（３）メンテナンスコストも削減できる
　　最新機種が出てもケータイキット内部のデータベースを最新化するだけで対応できます。データベースは設定画面などからボタンひとつで簡単にアップデートすることができますので、開発コストだけでなく、メンテナンスコストの大幅削減につながります。

　これらのメリットによって、最終的にプログラマーやデザイナーが携帯サイト開発に伴う煩雑な作業から解放され、クリエイティブな作業に打ち込むことが出来ます。

　また、クライアントとの交渉の際に「携帯機種依存や新機種対応をどのように解決するか」という問題に対して「（ケータイキットという）外部のパッケージ製品を使ってしまう」という方法はわかりやすい交渉材料になるのではないでしょうか。

まとめ

　プログラミングの歴史は、開発者がより業務に近い高次なロジックに没頭できるように、言語がハードウェアやプラットフォーム固有の問題を吸収していく過程でした。
今、携帯サイト開発の現場ではそれらの問題が過去の怨霊よろしく跋扈していますが、ケータイキットで現代的で効率の良い開発を進められます。

携帯サイト制作の効率を高める「ケータイキット for Smarty」 － アイデアマンズアイデア（特別編）

2007年11月12日