携帯サイトを3日で作れ的な展開になって泣きながら勉強したときのメモ

なんだかとりあえず3日で携帯サイト作れみたいな展開になってきたので、


1日目:勉強
2日目:環境整備&構想
3日目:コーディング


というスケジュールでやろうかと。
携帯サイト構築に関する本もちょっぴり出ているけど、携帯の世界は移り変わりが激しくて、内容が古かったりするのでやっぱりWEBで最新のモバイル開発をお勉強。


ちなみに携帯サイトの開発経験ゼロ、普段携帯サイトはあんまりみないです(乗換検索とたまにmixigmail)。


早速検索してみたところ、こんな↓勉強会が開かれていたようです!


blog.grayash.com - モバイル勉強会レポート

携帯サイト開発概要早分かり

こちらの勉強会の二つのプレゼン資料が、最近のモバイル開発の概要を知るのに最適!


『理論』
モバイルでのXHTMLとCSS

『実践』
初心者向け3キャリア共通モバイルサイト作成 実践編

phpを使った携帯サイト開発概論

概要がわかったところでphpを使って各種キャリア対応などを実装するにはどうすればいいかを以下で学ぶ。


モバイル開発におけるPHPの利用法とTips

キャリア判別と絵文字についてよりつっこんで学ぶ

特にユーザからの投稿などの機能のないサイトなら絵文字なしの運用も可能だと思いますが、
ユーザからの書込み・投稿・メールなどがありえる場合は絵文字についてきちんと対応したいところ。


キャリア判別と絵文字の扱い

携帯サイト開発環境を整えよう。

実際に開発する前に、まずは実行確認ができなきゃ話にならないですね。


実機があるなら実機で確認するのが一番確実だけど、全キャリア・全機種揃えるのは難しいのでなんらかのエミュレータを使うのが現実的かなと。


調べてみたところ、とりあえず3キャリアのオフィシャルエミュレータツール(および開発ツール)が
ありました。いくつかあるけど今はこの3種でOKっぽい。


ドコモ
iモードHTMLシミュレータII | サービス・機能 | NTTドコモ

au by KDDI
Openwave SDK 6.2K

ソフトバンク
Web Contents Viewer


それぞれがどんなもんなのかについては↓を参照。


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絵文字)を使って、できない人は公式のエミュレータ、というのが手軽なのかなあ。

データ

キャリア・機種判別のための情報をまとめて、かつプログラムに利用可能な状態でデータを公開されてる方もいらっしゃいます!これは活用したい!


機種情報DB - trac on tmty.jp - Trac

携帯端末スペック一覧 - ke-tai.org


おまけ
CodeZine:携帯シミュレータ入門 携帯シミュレータのUser-Agent一覧

iモードサイトを全携帯端末対応にするツール

試してないですが、iモードサイトを全携帯端末対応に変換するツールもありました。
スムーズに理解&導入できたらとても便利そう。
(仕組みを理解するのが大変そうなので今回はとりあえず独自で作ろうかな?)


iモードサイトを全携帯端末対応にするCGI『しらぎくモバイルシステム』。

PCサイトを携帯対応に変換するスクリプト

PCサイトを携帯対応に変換するスクリプト、というのもありました。
これは既存のPCサイトに一切手を加えることなく、サイトにアクセスする際にこのスクリプトを通すことで変換処理を行おうというもの。かなりドキュメントも充実してます。


PCサイト->携帯変換スクリプト


(今回はPCサイトを携帯で見れるようにするというより、携帯用のサイトを作るのが趣旨なのでまたの機会に触ってみよう)



・・・という感じでとりあえずまとめメモ。


(2008/7/12追記)
ちなみにこの記事書いた少し後に各キャリア別にもう少しつっこんでhtmlとxhtmlを振り分けるための指針もまとめてみました↓

携帯サイト作成の実際 - Kemworld::Diary