[ヅ] 携帯電話用ウェブサイトをつくりはじめた (2008-01-12)

携帯電話用ウェブサイトをつくりはじめた (2008-01-12)

そろそろモバイルサイトにも手を出してみたくなったので少しずつ作成中。

まずは、主要3キャリア (ドコモ iモード, KDDI au EZweb, ソフトバンク Yahoo!ケータイ) とも同じHTMLを読み込むようなシンプルなサイトを作る方向で。
できるだけキャリア依存・機種依存しないように。
でも、あまりにも古い機種は却下で。

携帯電話用ウェブサイト:
NI-Lab.(えぬあいらぼ)

以下、今後のためにメモ。

Webサイト名を入力しやすいものにする

サイトのURLが短くて単純だと入力しやすい。
1ストロークで入力できる文字 adgjmptw だけで構成すると入力がラク(同じ文字が連続しないともっと良い)。

でも、今後は検索エンジン経由でサイトに来る人がメインだと思う。
# QRコードとかメールとかもあるだろうけど……

「NI-Lab.」とアルファベットをケータイで入力するのは大変。
ケータイのIMEは最初はひらがな入力になっている可能性が高い。
日本語で「えぬあいらぼ」と入れるのは比較的簡単で、検索サイトのフォームに入力しやすい。
# あと、入力予測変換機能で出てくる単語の候補とかも考慮するともっといいかも。

URLのQRコードを作る

QRコードがあると PC -> ケータイの誘導がしやすい。
いまどきはだいたいどの携帯電話でも手軽にQRコードを読み込めそうなので、この誘導方法は良さげ。

NI-Lab.(えぬあいらぼ)

ページ構成によってはあんまり大きいとじゃまなので、もっと小さいのも作っておいた。

NI-Lab.(えぬあいらぼ)

携帯電話の機種によってQRコード読み込み精度が違うので、QRコードの画像が小さすぎたり大きすぎたりすると読み込めない or 認識しづらくて時間がかかったりするので注意。

QRコード作成には QRCode.jp - QRコード.jp が便利。
Webサイト上で簡単にQRコードが作れる。

ケータイサイト用のHTML

XHTML Mobile 1.0 を使う。
仕様については *My First HDML* - モバイル機器向けXHTML仕様が参考になる。

コンテンツの文字コード(文字エンコーディング)については、DoCoMo と au は Shift_JIS (というか Windows-31J かな？) が無難、Softbank は UTF-8 が無難。
という気はしているが、面倒なので UTF-8 に統一。

いまのところは、こんなHTMLテンプレートを使い回し。


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title>タイトル</title>
</head>
<body>
<p>タイトル</p>
<p>
本文<br />
本文<br />
本文<br />
本文<br />
本文<br />
</p>
<hr />
<a href="/m/">NI-Lab.</a><br />
</body>
</html>

au だとページを更新してもなぜかイヤな感じにキャッシュされてたりする(-_-;)ので、頻繁に更新するページには Pragma, Cache-Control, Expires を meta タグに書いておく。


<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

スタイルシート(CSS)

スタイルシートはとりあえずパス。
DoCoMo だけ外部CSSファイルが使えないとかまだまだツラそうな状況なので。

使いたくなったら初心者向け3キャリア共通モバイルサイト作成実践編 [(株)ビジュアルワークス鶴岡千春] あたりを参照するということで。夜闇の住人・特設ｻｲﾄ - ﾌｫﾚｽﾄﾉﾍﾞﾙとかカッコイイつくりのページを参考にしつつ。

あとモバイルでのXHTMLとCSS は CSS Mobile Profile と WCSS(Wireless CSS) とかの話で参考になる。

画像ファイル

3キャリア対応するなら JPEG が無難。JPEG なら3キャリアとも表示可能。

主要な画像フォーマットの対応状況
DoCoMo: GIF, JPEG
au: GIF, JPEG, PNG
Softbank: JPEG, PNG

Softbank は最近の機種ならほぼ GIF に対応しているが、一部最新機種が GIF を表示できないらしい。ので、GIFはパス。

マジメにやるなら、DoCoMo は GIF、au と Softbank は PNG というように分ける。

mailtoによるメール送信

DoCoMo と au はページのエンコーディングが UTF-8 であっても、mailto の引数は Shift_JIS で URLエンコーディングしないと文字化けする。
Softbank は mailto の URLエンコーディングを自動判別しているのかも。ページとmailtoの引数のエンコーディングが違っても文字化けしなかった。
このへんは機種依存なのかも。

⇒ mailto: メール送信の起動テスト
⇒ *My First HDML* - mailto:について

端末判別/キャリア判別

普通にHTMLページを作るだけなら踏み込みたくない領域。

単純なキャリア判別だけなら、User Agent が以下の文字列ではじまっているかで判断。

DoCoMoの場合: DoCoMo
auの場合: UP.Browser, KDDI
Softbankの場合: J-PHONE, Vodafone, SoftBank, MOT

movaとFOMAでページを変えたいとか細かくやりたいならキャリアの資料にあたるべき。
⇒ 携帯電話のユーザエージェント (NI-Lab.'s MemoWiki - MobileUserAgent)

他の判別方法としては、携帯電話が使うIPアドレスを利用するとか。
⇒ 携帯電話のIPアドレス (NI-Lab.'s MemoWiki - MobileIPAddress)

あるいは、リモートホストを見るとか。

- ドコモ
- docomo.ne.jp
- au
- ezweb.ne.jp
- ソフトバンク
- jp-d.ne.jp
- jp-h.ne.jp
- jp-t.ne.jp
- jp-c.ne.jp
- jp-k.ne.jp
- jp-r.ne.jp
- jp-n.ne.jp
- jp-s.ne.jp
- jp-q.ne.jp

携帯ブラウザのユーザーエージェントによる機種判別、キャリア判別 [ドコモ(iモード),au(EZweb),ソフトバンク(SoftBank)]

絵文字

たいへんそうだからまたいつかやるということで。

⇒ 携帯電話用の絵文字について (NI-Lab.'s MemoWiki - MobilePhonePictgram)
⇒ はてなブックマーク - NI-Lab.の電子栞 / pictgram

リンク集をつくる

携帯電話用サイトのリンク集を作っておく。
自分がケータイサイトをうろうろするのに便利だし、あとデザイン等の参考になるモバイルサイトを列挙しておくとか。

⇒ NI-Lab.(えぬあいらぼ)

Mobile Link Discovery

Mobile Link Discovery は携帯電話用ページのURLをWebクローラ等に知らせる仕組み。
同じ内容のコンテンツだけど、PC用と携帯電話用ではURLが異なる場合に使う。

以下は携帯電話用ページのURL である http://www.nilab.info/m/ を XHTML, Atom, RSS に埋め込む例。

XHTML
<link rel="alternate" media="handheld" type="text/html" href="http://www.nilab.info/m/" />

Atom 1.0
<link rel="alternate" x:media="handheld" type="text/html" href="http://www.nilab.info/m/" />

RSS
<rss xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.nilab.info/m/" />

Ref. Six Apart - Docs: Mobile Link Discovery 仕様

Google も推奨している。

携帯電話で Google のウェブ検索を利用して、デスクトップのウェブブラウザ対応の Google インデックスのコンテンツをすべて検索することができます。ただし、全てのコンテンツが携帯電話などの携帯デバイス向けとは限らず適切に表示されない可能性もあるため、オリジナルの HTML コードを解析しモバイル対応形式に変換する Google のトランスコーダを使用してウェブ検索の結果が表示されます。ご利用の携帯電話や携帯デバイスで快適にるウェブページをご覧いただくため、Google ではイメージのサイズを変更したり、イメージやテキストのフォーマット、ウェブページの一部の機能を調整または変換することがあります。

ウェブページを変換することを望まない場合は、ユーザーがトンランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするように Google にリクエストしてください。リダイレクトをリクエストするには、ページの HTML ファイルの <HEAD> セクションに次の行を含めてください。

<link rel="alternate" media="handheld" href="alternate_page.htm" />

代わりのページには、オリジナルページを携帯用に最適化したページを使用するか、そのサイトが携帯電話では表示できないことを通知するメッセージを使用します。

携帯電話での表示用にウェブページが調整される仕組みを教えてください。