携帯サイト、iPhoneサイト制作の苦労話
IA/UX, Web 9月 4th, 2010
これまで携帯サイトって、構築するという視点で見た事ってなくて、運用の観点だとかユーザビリティの観点だとか、どちらかというと「今あるサイトをどうしよう」っていう視点で見てきたのだが、縁あって今回携帯サイトを作ることになり、いろいろ苦労したのでメモ代わりに。
ASPを使わず、PC用のCMSで構築
携帯サイトというと、どうしても携帯サイトＡＳＰが主流で、どのＡＳＰでも必ず謳っているのが、「３キャリア対応」という機能。３キャリア、というのは言わずもがな、ドコモ、ＡＵ、Ｓｏｆｔｂａｎｋなわけで、この３キャリアに最適に表示しますよ、という機能である。
これまで、「最適に表示しますよ」というのは、絵文字のことだけだと思っていて、たとえば太陽の絵文字を、それぞれのキャリアの太陽の絵文字コードに変換して出力してくれる機能。ワンソースの登録で済むことが多いので、だいたいページはＪＳＰやＰＨＰで記述されていることが多い。
だが、「３キャリア対応」というのがいかに大変なのか、というのが今回初めてわかったんだけれども、ヘッダの記述、ＣＳＳの記述、ブラウザのバージョンなど、ホントにいろんな違いがあって、それをＡＳＰなしで吸収していくのは本当に、予想以上に大変な作業だった。なんでこんなに規格がバラバラなのよ！と叫びたくなった。
決定的だったのが、ドコモの仕様。cssをちゃんと効かせるためには、xhtml形式で書く必要があったり、phpならヘッダで
<?php header("Content-type: application/xhtml+xml;charset=Shift_JIS"); ?>
って書かなきゃいけなかったり。
mailtoのリンクのバイト数制限について、KDDIは妙に短かったり、フォントサイズの指定がキャリアごとに書き方がバラバラだったり・・・。よくもまあ、世の中のASPは吸収しながらやってるなぁと感心しますよほんとに。
おまけにiPhoneサイト最適化も実施したんだけど、iwebkitとかJQtouchとかiUIとか、もうほんとにいろんなフレームワークが出ていて、いったいどれを使ったらいいのよ？って悩みつつ、結局全部試してみたり、もっと大変なのはAndroidで、いまの3キャリア並みに機種依存があるらしくて、もうやってられません。まあ備忘録的にメモしておくけど。
iPhoneサイト構築フレームワーク
iwebkit
iUIとほぼ同じくらい人気のあるフレームワーク。デモサイトが充実しているので、そのソースを参考に作れば、ものすごくカンタンにiPhone最適化が可能。ただ、versionが5に上がってから、いろいろ機能が削られている。スライドエフェクトとか。そのへんなくしたらiPhoneぽくないじゃん～と思っちゃう人は使わないほうがいいかも。
あと、英語だけどユーザコミュニティが充実しているのも◎。あとは英語を読むだけ・・・（汗）
iUI
人気のフレームワークだけど、iwebkitとはまた性格がちょっと違うのと、ちょっと不安定。スライドエフェクトはあるけれど、変なタイミングで操作してしまうとバグるなどの症状がある。サポートはないので、自分でがんばるしかない。
JQtouch
JQueryを使ったiPhoneサイトフレームワーク。JQueryだけに、めちゃめちゃ表現力が高い。サイトがクルクル回っちゃう。ただまだリファレンスが少なかったり、もちろん日本語情報もほとんどなし。使いこなすにはちょっとスキルが必要かも。使えればカッコイイ。
とりあえず、今回はiwebkitを使って構築したけれど、まだまだ知らないことが多くて落ち着かない。WebDesigningがiPhoneサイト特集だったから読んでみたけど、皮肉にも独学でテンパリながら学んだ内容がほとんどで、あんまり新鮮な情報もなかったり。でもまだわからないことだらけ。きっとそのへんは制作会社の「ノウハウ」で、みんなそこでビジネスしているんだろうと思ったら、なんか大変な領域に足を踏み入れてしまったような気もする。楽しいからいいけど。
世の中の制作会社の皆さん、ご苦労様です。ワタシも仲間にいれていただいて、一緒に頑張らせてくださいなもし。
このへんも買ってお勉強。会社の経費で落ちないかな。。。
 |
PHP×携帯サイト 実践アプリケーション集 株式会社マイネット・ジャパン 平島 浩一郎 伊藤 祐策 中元 正也 ソフトバンククリエイティブ 2009-06-27 |
 |
携帯サイト コーディング&デザイン 高木 悠介 ソフトバンククリエイティブ 2008-12-26 |
