シンプルな暮らし。

仕事でiPhone(Android)サイトを構築する機会があったので、実装方法についてメモしておきます。

構築条件としては「横幅固定レイアウトのPC向けサイトをスマートフォン用に最適化する」つまり「PC画面と同じHTMLを共有する」こと。

大まかな処理としては、以下になります。

• スマートフォンサイトの作り方(1/8)  - 見出し・概要
• スマートフォンサイトの作り方(2/8) - UserAgentの判定
• スマートフォンサイトの作り方(3/8) - 横幅の最適化
• スマートフォンサイトの作り方(4/8) - フォントサイズの最適化
• スマートフォンサイトの作り方(5/8) - メニューデザインの最適化
• スマートフォンサイトの作り方(6/8) - Viewportの設定
• スマートフォンサイトの作り方(7/8) - アドレスバーを隠す処理
• スマートフォンサイトの作り方(8/8) - 入力フォームの最適化

スマートフォン専用のサイトを構築することも可能でしたが、開発コストのメリットに見合わない(携帯サイトを新しく構築するくらいの費用が掛かる)のと、今後スマートフォン以外のリッチデバイスに対応するごとに専用サイトを構築するのも構築・保守共にコストメリットに見合わない。という点を考慮して今回はPC画面をスマートフォンで見やすくする対応を行いました。

スマートフォン向けの開発フレームワークとして有名な「jQuery Mobile(サポートなし)」や「Sencha Touch(有償サポートあり)」を利用することも検討しましたが、「jQuery Mobile」についてはそもそもサポートなど存在せず、「Sencha Touch」の場合はサポートからの返信に最大で48時間を要するのと日本語サイトの実績が不明ということから今回は、必要なJSを手書きで対応しました。この辺はサイトオーナーの判断によるところだと思います。