2007-10-02
携帯サイトを3日で作れ的な展開になって泣きながら勉強したときのメモ
なんだかとりあえず3日で携帯サイト作れみたいな展開になってきたので、
1日目：勉強
2日目：環境整備＆構想
3日目：コーディング
というスケジュールでやろうかと。
携帯サイト構築に関する本もちょっぴり出ているけど、携帯の世界は移り変わりが激しくて、内容が古かったりするのでやっぱりWEBで最新のモバイル開発をお勉強。
ちなみに携帯サイトの開発経験ゼロ、普段携帯サイトはあんまりみないです（乗換検索とたまにmixi、gmail）。
早速検索してみたところ、こんな↓勉強会が開かれていたようです！
blog.grayash.com - モバイル勉強会レポート
携帯サイト開発概要早分かり
こちらの勉強会の二つのプレゼン資料が、最近のモバイル開発の概要を知るのに最適！
『理論』
『実践』
phpを使った携帯サイト開発概論
概要がわかったところでphpを使って各種キャリア対応などを実装するにはどうすればいいかを以下で学ぶ。
キャリア判別と絵文字についてよりつっこんで学ぶ
特にユーザからの投稿などの機能のないサイトなら絵文字なしの運用も可能だと思いますが、
ユーザからの書込み・投稿・メールなどがありえる場合は絵文字についてきちんと対応したいところ。
その他携帯サイト関連まとめ・概論系参考サイト
上記に加えて余裕があれば以下の記事も読むと勉強になります（だいぶボリュームがあるのでまずはざっと眺めてから深く読んでくほうがいいかも）。
そろそろモバイルサイト作成について本気でなんとかしたいと感じる・・・が。*ホームページを作る人のネタ帳
ケータイサイトを作る時にやっていること。 - ぎじゅっやさん
携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
TRANS [hatena] - 携帯用CSSを書く上で押さえておくべきポイント
携帯サイト開発環境を整えよう。
実際に開発する前に、まずは実行確認ができなきゃ話にならないですね。
実機があるなら実機で確認するのが一番確実だけど、全キャリア・全機種揃えるのは難しいのでなんらかのエミュレータを使うのが現実的かなと。
調べてみたところ、とりあえず3キャリアのオフィシャルエミュレータツール（および開発ツール）が
ありました。いくつかあるけど今はこの3種でOKっぽい。
ドコモ
iモードHTMLシミュレータII | サービス・機能 | NTTドコモ
au by KDDI
それぞれがどんなもんなのかについては↓を参照。
CodeZine：携帯シミュレータ入門（開発ツール, まとめ）
でも、↓の記事によれば
TokuLog 改め だまってコードを書けよハゲ - ケータイシミュレータなんて使ってないで Moxy 使えばいいのに
という感じでエミュレータだってあんまりあてになんないよ、書いてあります。
で、
実際には Firefox+UserAgentSwitcher+ModifyHeaders+i絵文字 という組み合わせがよく使われてるんじゃないかと思いますね。
とのこと。
上記に加えてさらにMoxyというプロキシサーバーをかませて開発すると楽ですよ、ということが書いてあります。すごく便利そう。Moxyについてのプレゼンムービーもありました。
Moxyプレゼンムービー
Mobile web development with Moxy
Moxyプレゼン資料テキスト版
Mobile web development with Moxy
（※ちなみにPerlで実装されてるのでPerlがわからないと導入は難しそう。）
できる人はMoxy（Firefox+User Agent Switcher+Modify Headers+i絵文字）を使って、できない人は公式のエミュレータ、というのが手軽なのかなあ。
ウノウラボの携帯サイト開発関連記事
ウノウラボの携帯サイト開発関連記事も中身が濃くて必読です！
ウノウラボ Unoh Labs: 携帯サイト作成時の注意点(SoftBank編)
ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点
ウノウラボ Unoh Labs: 携帯開発向けに便利な支援ツール/サイト
ウノウラボ Unoh Labs: 携帯サイト作成のためにも使えるPHPのライブラリ
データ
キャリア・機種判別のための情報をまとめて、かつプログラムに利用可能な状態でデータを公開されてる方もいらっしゃいます！これは活用したい！
機種情報DB - trac on tmty.jp - Trac
おまけ
CodeZine：携帯シミュレータ入門 携帯シミュレータのUser-Agent一覧
リファレンス
XHTML Mobile Profileリファレンス バージョン 1.0
OMA-WAP-WCSS-V1_1-20061020-A.pdf (application/pdf オブジェクト)
そのほか役立ちそうなtipsとかツールとか
第10回 Net_UserAgent_Mobile クラス - 携帯端末情報取得ライブラリ - PEAR講座
携帯電話の「簡単ログイン」は個体識別番号を使ってこんなふうに作れます｜WEBクリエイターの木
cakePHPでPCと携帯で出力文字コードを変更する方法 - インストールメモ
ちょっぴりオシャレな QR コードが作れる Web サービス | *LOVE IS DESIGN*
MobileHackerz - [携帯向けに簡単に動画を変換してみよう]
ｉモードサイトを全携帯端末対応にするツール
試してないですが、ｉモードサイトを全携帯端末対応に変換するツールもありました。
スムーズに理解＆導入できたらとても便利そう。
（仕組みを理解するのが大変そうなので今回はとりあえず独自で作ろうかな？）
ｉモードサイトを全携帯端末対応にするCGI『しらぎくモバイルシステム』。
PCサイトを携帯対応に変換するスクリプト
PCサイトを携帯対応に変換するスクリプト、というのもありました。
これは既存のPCサイトに一切手を加えることなく、サイトにアクセスする際にこのスクリプトを通すことで変換処理を行おうというもの。かなりドキュメントも充実してます。
（今回はPCサイトを携帯で見れるようにするというより、携帯用のサイトを作るのが趣旨なのでまたの機会に触ってみよう）
・・・という感じでとりあえずまとめメモ。
（2008/7/12追記）
ちなみにこの記事書いた少し後に各キャリア別にもう少しつっこんでhtmlとxhtmlを振り分けるための指針もまとめてみました↓
Permalink | コメント(0) | トラックバック(0) | 01:55 
CakePHPによる実践Webアプリケーション開発