2007-10-02

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

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


1日目:勉強

2日目:環境整備&構想

3日目:コーディング


というスケジュールでやろうかと。

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


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


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


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


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

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


『理論』

モバイルでのXHTMLとCSS

『実践』

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


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

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


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


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

特にユーザからの投稿などの機能のないサイトなら絵文字なしの運用も可能だと思いますが、

ユーザからの書込み・投稿・メールなどがありえる場合は絵文字についてきちんと対応したいところ。


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


その他携帯サイト関連まとめ・概論系参考サイト

上記に加えて余裕があれば以下の記事も読むと勉強になります(だいぶボリュームがあるのでまずはざっと眺めてから深く読んでくほうがいいかも)。


そろそろモバイルサイト作成について本気でなんとかしたいと感じる・・・が。*ホームページを作る人のネタ帳

PCサイトを携帯に対応させるまとめ

ケータイサイトを作る時にやっていること。 - ぎじゅっやさん

携帯ホームページを作ろう! -ちょっと詳しいモバイルサイトの作り方-

TRANS [hatena] - 携帯用CSSを書く上で押さえておくべきポイント

携帯サイトの作り方

携帯電話向けコンテンツの書き方 - ウェブの作り方


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

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


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


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


ウノウラボの携帯サイト開発関連記事

ウノウラボの携帯サイト開発関連記事も中身が濃くて必読です!


ウノウラボ Unoh Labs: 携帯サイト作成時の注意点(SoftBank編)

ウノウラボ Unoh Labs: 携帯サイト作成時のXHTMLでの相違点

ウノウラボ Unoh Labs: 携帯開発向けに便利な支援ツール/サイト

ウノウラボ Unoh Labs: 携帯サイト作成のためにも使えるPHPのライブラリ


データ

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


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

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


おまけ

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


リファレンス

モバイルXHTMLCSSリファレンスとか。


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 - [携帯向けに簡単に動画を変換してみよう]


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

試してないですが、iモードサイトを全携帯端末対応に変換するツールもありました。

スムーズに理解&導入できたらとても便利そう。

(仕組みを理解するのが大変そうなので今回はとりあえず独自で作ろうかな?)


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


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

PCサイトを携帯対応に変換するスクリプト、というのもありました。

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


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


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



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


(2008/7/12追記)

ちなみにこの記事書いた少し後に各キャリア別にもう少しつっこんでhtmlxhtmlを振り分けるための指針もまとめてみました↓

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

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/kemworld/20071002/1191344135