携帯サイト作成メモ

仕事で携帯サイトを作っています。
MTの場合はMT4iというMovableType用 携帯電話向け変換プログラムを利用すれば簡単に作れてしまいます。
だいぶ前に個人的に携帯サイトやってた事もありますがお手軽に作成できる無料サービスを利用しただけなので自分で作るのは全くの初めてです。
キャリアによって…はたまた同じキャリアでも結構仕様が違っていて全ての携帯で見られるようにするには結構面倒みたいです。

1.)Dreamweaverの拡張を利用

DreamweaverにもiModeページ作成用の拡張があったのでインストールしてみました。

Dreamweaver MX 2004 : iMode 拡張 MX ダウンロード

↑こんな感じで拡張をインストールするとDreamweaverにiMode用のメニューが表示できるようになります。
絵文字パレットやiMode未対応のタグをクリーンアップしてくれたり、Fireworksと連携して携帯用に画像を最適化してくれる機能が使えます。
PC用のサイトと違ってファイルサイズに気を使うのでDreamweaverのファイルサイズをリアルタイムで表示してくれる機能はとても便利です。
携帯サイト作成に特化したソフトもいくつかあるみたいですがまぁこれで十分かな…と。

2.)携帯サイトの注意点

でも困るのがキャリアによる仕様の違い。
キャリアごとの違ったページを作って振り分けてもいいですけどちょっと面倒です。
とりあえずほぼ全ての携帯でほぼ同じように表示する為のポイントがあるみたいです。
合わせて携帯サイトならではの注意点も並べてみます。
●文字コードをShift_JISにする。
●1ページあたりのファイルサイズは画像を含めて5KB以内にする。
●画像はgif形式を使用する。
●画像サイズは120×120ピクセル程度に収める。
●ソースにインデントを入れない。
●センタリングは<center>～</center>を使う。
●タイトルや見出しは8文字程度にする。
●半角英数字、半角カナを使う。

キャリアごとの細かい仕様については以下を参考にしました。

■Docomo
DoCoMo Net - 作ろうiモードコンテンツ

■au
EZweb ホームページを作ろう！

■Vodafone
Vodafone Developers Support Site

3.)表示確認

ある程度サイトが出来上がったら実際の表示を確認したいです。
でも全キャリアの携帯が手元にあればいいですが現実はそうはいきません。
ワタシの携帯はDocomoのmovaなのでパケット定額制のサービスがありません…
なのでPC上で携帯からの見た目をシミュレーションできるソフトを使わせていただきました。

■Docomo
iモードHTMLシミュレータ(901iシリーズ以前対応)
iモードHTMLシミュレータII(901iシリーズ以降対応)

■au
Openwave SDK

■Vodafone
ウェブコンテンツヴューア

上記のソフトの中には表示と同時にタグのエラーもチェックできるのでとても便利です。
1番使いやすいのはウェブコンテンツヴューアかな?
エラー箇所が何行目か教えてくれるのとソースも一緒に表示されるので修正しやすいです。

4.)PC・携帯のページ振り分け

URLにアクセスしてもそれぞれPCと携帯用のページに自動で振り分ける方法がいくつかあります。
・フレームページを使う(携帯はフレーム非対応な点を利用)
・cgiを使う
…などなど

＜参考サイト＞
パソコン(PC)向けページと携帯向けページの振り分け方法について[CGI/SSI/Perl]

5.)携帯用アクセス解析
商用サイトの場合アクセス解析はつけたいところ。
携帯対応版を探してみました。

■cgi設置
The Room - Mobile Analyzer

高機能アクセス解析CGI Standard版 - futomi's CGI Cafe

■レンタル版
忍者TOOLS

ITギア - 無料レンタルアクセス解析

6.)URLの公開

表示確認をしてエラーを修正したらURLを公開します。
PC版のサイトが元からある場合はQRコードを貼り付けたり、メールでURLを送信するリンクをつけるといいと思います。

QRコード.org

↑こちらには簡単にQRコードを作成できるQRWindowというソフトを無料で配布されています。

普通メールアドレスのリンクは↓のように記述します。

<a href="mailto:メールアドレス">メール</a>

タイトルと本文をあらかじめ入力したメールを送る為のリンクは↓のように記述します。
[例]
メールアドレス→@docomo.ne.jp
タイトル(subject)→携帯版URL
本文(body)→http://caramel-tea.com/としました。

<a href="mailto:@docomo.ne.jp?subject=%e6%90%ba%e5%b8%af%e7%89%88URL&body=http://caramel-tea.com/">メールで携帯にURLを送信</a>

日本語を使う場合はURLエンコードする必要があります。
DreamweaverのiMode 拡張 MXにはメールリンク作成ボタンがあるので簡単です。

URLエンコード・デコードフォーム

携帯サイトって使えるタグが少ないので簡単かなって思ってたんですがキャリアの仕様の違いやいろんな制限があるのがちょっと大変というか面倒でした。
その割りにスタイルシートも使えないし作っていてもちっとも面白くない…
表現の幅がほとんどないってやりがいがないもんですね…
でもいろいろと勉強になりました。