携帯電話向けサイト構築

提供：Wiki@KDS
2007年2月28日 (水) 15:10時点における192.168.200.221 (トーク)による版
ナビゲーションに移動 検索に移動

携帯電話向けサイトの構築について、メモ。

HTML

それぞれの携帯端末向けに使用する言語は以下の通り

キャリア 言語
iモード iモード対応HTML、iモード対応XHTML
EZweb XHTML Basic、HDML、WML
ボーダフォンライブ！ ボーダフォンライブ！向けHTML、MML、ボーダフォンライブ！向けXHTML

共通している言語はXHTMLだが、iモードとボーダフォンライブ！は対応している機種が 少ないので、汎用サイトを作成するには向いていない。
iモード対応HTMLとボーダフォンライブ！向けHTMLは、タグの記述方法が似ているので 汎用サイトを作成するには向いている。
また、EZwebは、HTMLで記述されたコンテンツをEZサーバでHDMLに変換することで表示できる。したがって、独自の属性を取った、プレーンなHTMLで記述すれば、汎用サイトが作成できる。
ファイルサイズは端末により数値が違う。画像を含め5KB以内に収めるほうが無難。
1画面に表示する文字は、機種によってまちまち。
見出しの部分などが2行になると見づらくなるので、1行を16文字（全角で8文字)前後に 収めるようにする。半角カナ文字が使用できるので、2行にまたがる場合は半角カナ文字 を使うと良い。
マークアップに関してもたとえばHTML2.0はtableタグなどに対応していない。
サンプルソース 

<html>
	<body>
		<center>タイトル</center>
		<hr color="#7B0099" noshade>
		<center><font color="#e0e0e0">■メニュー</font></center>
		<a href="news.html">ニュース</a><br>
		<a href="weather.html">天気</a><br>
		<a href="shopping.html">ショッピング</a><br>
	</body>
</html>

携帯端末独自のHTMLタグ、属性（使ったほうがいいのを含む）

<a href="tel:090xxxxxxxx">電話をかける</a>


<a href="tel-av:090xxxxxxxx">TV電話に電話をかける</a>


<a href="index.html" accesskey="1">携帯電話の1のボタンを押すとジャンプ</a>

画像形式

1つの形式の画像で全てのキャリアのすべての世代の端末に対応させるのは不可能
したがって、画像を使用したければ各キャリア別に画像を作成する必要がある。

iモード
すべての世代のiモード端末に対応しているのはノンインターレースGIFのみ
画像データのファイルサイズはまちまちで、501iシリーズは最大5KB、902iシリーズは最大100KB

iモード対応HTMLバージョン

1.0 2.0 3.0 4.0 5.0 6.0
ノンインターレースGIF ○ ○ ○ ○ ○ ○
インターレースGIF △※1 ○ ○ ○ ○ ○
透過GIF △※1 △※2 ○ ○ ○ ○
アニメーションGIF △※1 ○ ○ ○ ○ ○
JPEG × × △※3 ○ ○ ○

○…対応
×…非対応
※1…ノンインターレースGIFとして表示
※2…カラー対応の機種のみ対応
※3…JPEG対応機のみ（N503i、N503iS、P503iS、N211i、R211i、SO211i、SH251i、SH251iS、R692i、FOMA2001、FOMA2002、FOMA2101V）

EZweb
ほとんどの機種で表示可能なのはPNG形式。近年の機種であればGIF、JPEG形式にも対応
GIF形式はインターレース、ノンインターレース、透過、アニメーションGIFに対応
JPEGは256色に対応していて257色以上の画像データは自動的に256色に減色
モノクロ2階調のビットマップ形式も利用可。カラーのビットマップはEZサーバ上でPNG形式に変換される
画像データの容量は最大9KB
SoftBank
PNG形式が使用可。JPEG形式はC2型は非対応。それ以外は表示可。
GIF形式はボーダフォンライブ！向けXHTMLに対応している3GC型で表示できる。
アニメーション画像は、PNG形式のファイルをimgタグのmotion属性を使って表現できる。対応している機種は3GC型を除くすべての機種。
JPEGを使ったアニメーション画像は、C3、C4、P、W型で使用できる。
P、W型などではPNG形式を拡張したMNG(Multiple-image Network Graphics）形式でアニメーションが表示できる。
クーポンなどの画像を再配布禁止にする場合には、jpeg→jpz、png→pnzにする。
C P W 3GC
C2 C3 C4 P4、P6 P6、P8
画像 PNG ○ ○ ○ ○ ○ ○ ○
JPEG × ○ ○ ○ ○ ○ ○
MNG × × × ○ ○ ○ ×
GIF × × × × × × △

絵文字

メールに関しては自動変換する方向に進んでいる模様。HTMLコンテンツ中の絵文字まで 自動変換できるかどうかは不明。
ドコモ、auが絵文字変換サービスを開始 - ケータイウォッチ

iアプリ、EZアプリ、Vアプリの作成

いずれもJavaにより作成。詳しくは各キャリアのサイトを参照。

アクセス制限（振り分け）

ユーザーエージェントを見る方法と、使用しているIPアドレスの帯域を見る方法がある。
ユーザーエージェントは詐称が可能（後述のFirefoxの拡張機能など）なため、絶対に特定のキャリアの端末以外がアクセスしてはいけないというようなサイトの場合はIPアドレスの帯域で振り分けを行う以外ない。iモードの公式サイトであれば端末固有の番号のようなことを見ることも可能。いわゆる勝手サイトの場合は不可能。

各キャリア端末のユーザーエージェント

NTT DoCoMo

iモード対応HTMLのバージョンにより異なるが、「DoCoMo」の文字列は全バージョンで共通して記述される。

iモード対応HTMLバージョン1.0
書式：DoCoMo/1.0/機種名
例：DoCoMo/1.0/D501i
iモード対応HTMLバージョン2.0
このバージョン以降のケータイは、1画面に読み込めるキャッシュ容量が変更できるものがあるため、変更したケータイにはキャッシュ容量も記述される。キャッシュは、「c10」のように、cに続いてキャッシュ容量（単位はKB）が記述される。
書式：DoCoMo/1.0/機種名/キャッシュ
例（キャッシュなし）：DoCoMo/1.0/D502i

例（キャッシュあり）：DoCoMo/1.0/D502i/c10
iモード対応HTMLバージョン3.0
書式：DoCoMo/1.0/機種名/キャッシュ/個体識別情報
FOMAの場合：DoCoMo/2.0(スペース)機種名（キャッシュ;個体識別情報）
個体識別情報を付加してアクセスしている場合、「NMAIA00001」のような文字列が記述される。
例：DoCoMo/1.0/D201i/c10
例（FOMA）：DoCoMo/2.0 N2001/(c10)
iモード対応HTMLバージョン4.0
書式：DoCoMo/1.0/機種名/キャッシュ/状態コード/個体識別情報
FOMAの場合：DoCoMo/2.0(スペース)機種名（キャッシュ;状態コード；個体識別情報）
状態コードは、通信状態によって、次の文字列が付加される。
TB：ブラウザからの通信時(ADF取得時）
TD：JAR取得時
TJ：iアプリからの通信時

例：DoCoMo/1.0/F504i/c10/TB（ブラウザからの通信時、ADF取得時）
例：DoCoMo/1.0/F504i/c10/TD（JAR取得時）
例：DoCoMo/1.0/F504i/c10/TJ（iアプリからの通信時）

例：DoCoMo/2.0/N2051(c100;TB)(ブラウザからの通信時、ADF取得時）
例：DoCoMo/2.0/N2051(c100;TD)（JAR取得時）
例：DoCoMo/2.0/N2051(c100;TJ)（iアプリからの通信時）
iモード対応HTMLバージョン5.0
書式：DoCoMo/1.0/機種名/キャッシュ/状態コード/ブラウザ表示可能バイト数/個体識別情報
FOMA：DoCoMo/2.0(スペース)機種名（キャッシュ；状態コード；ブラウザ表示可能バイト数；個体識別情報）
ブラウザ表示可能バイト数は、端末側で設定したフォントサイズでの表示できるバイト数が記述される。
これは状態コードがTBおよびTCの時のみ。書式は、「W20H10」のように、Wに続いて横の表示可能バイト数、Hに続いて縦の表示可能バイト数

例：DoCoMo/1.0/SO505i/c20/TB/W21H09（ブラウザからの通信時、ADF取得時）
例：DoCoMo/1.0/SO505i/c20/TB/W18H08（ブラウザからの通信時、ADF取得時）
例：DoCoMo/1.0/SO505i/c30/TD（JAR取得時）
例：DoCoMo/1.0/SO505i/c20/TJ（iアプリからの通信時）

例：DoCoMo/2.0/N900i(c100;TB;W24H12)（ブラウザからの通信時、ADF取得時）
例：DoCoMo/2.0/N900i(c100;TB;W20H10)（ブラウザからの通信時、ADF取得時）
例：DoCoMo/2.0/N900i(c100;TB;W30H15)（ブラウザからの通信時、ADF取得時）
例：DoCoMo/2.0/N900i(c100;TD)（JAR取得時）
例：DoCoMo/2.0/N900i(c100;TJ)（iアプリからの通信時）
iモード対応HTMLバージョン6.0
書式：DoCoMo/2.0(スペース)機種名(キャッシュ；状態コード；ブラウザ表示可能バイト数；個体識別情報)

例：DoCoMo/2.0/N902i(c100;TB;W28H15)（ブラウザからの通信時、ADF取得時）
例：DoCoMo/2.0/N902i(c100;TB;W24H12)（トルカ詳細化時）
例：DoCoMo/2.0/N902i(c100;TD)（JAR取得時）
例：DoCoMo/2.0/N902i(c100;TJ)（iアプリからの通信時）

フルブラウザからのユーザーエージェントは次のとおり
書式：ブラウザの種類/ブラウザバージョン（機種名；FOMA；キャッシュ；状態コード；ブラウザ表示可能バイト数）
例（N901iS)：Mozilla/4.08(N901iS;FOMA;c300;TB;W24H12

EZweb

共通した文字列は「UP.Browser」

PENCK、Wシリーズ(W03H、W02H、W01Kを除く)、Sweets pure、G'zOne TYPE R、Sweets、talby、INFOBAR、A5000/C5000/A3000/A1400/A1300/A1100シリーズの場合
KDDI-デバイスID(スペース)UP.Browser/ブラウザバージョン（スペース）(GUI)(スペース)サーバ名
（例）KDDI-SA31 UP.Browser/6.2.0.7.3.1.29(GUI)MNP/2.0
A1000/C1000/C400/C300/C200の各シリーズおよびツーカの場合
UP.Browser/3.01-機種名（スペース）サーバ名
（例）UP.Browser/3.01-HI02 UP.Link/3.2.1.2

ボーダフォンライブ！

ジェイフォン時代と、今のボーダフォンで大きく異なる。また、702シリーズの一部もユーザーエージェントが異なる。
ジェイフォン時代のケータイには「J-PHONE」の文字列が記述され、ボーダフォンでは「Vodafone」が記述される。また、702MO、702sMOでは「Vodafone」の文字列ではなく、「MOT」が記述される。いまのところこの3種類。

各キャリアの端末が使用するIPアドレスの帯域

それぞれ開発者向けサイトで公開している。定期的に追加されている模様。
同じ端末が連続してアクセスした場合でもIPアドレスが異なる場合がある。

NTT DoCoMo
iモードサービスで利用するIPアドレス帯域
フルブラウザを搭載している端末の場合、iモードブラウザを使用している時と、 フルブラウザを使用している時で帯域が異なる。
au
EZサーバのIPアドレス帯域
SoftBank
IPアドレス帯域について

各種資料

携帯キャリア 公式ガイド

NTT DoCoMo
作ろうiモードコンテンツ
au
EZ Factory
SoftBank
SoftBank Developers Support Site

各端末向けエミュレータ

NTT DoCoMo
iモードHTMLシミュレータI(900i以前向け）
iモードHTMLシミュレータII(901i以降向け)
EZ web
OpenwaveR SDK 6.2K
SoftBank
ウェブコンテンツヴューア
Firefox向け拡張機能
User Agent Switcher
UserAgentを自由に変えて携帯電話向けサイトにアクセス（IPで制限かけている場合は意味なし）

携帯端末向けサイト作成支援サービス

実機テスト
実機テスト|ケータイ・マイスタ
携帯端末情報提供
MOBYRENT（モビレント）
「https://wiki.kohga.tokyo/index.php?title=携帯電話向けサイト構築&oldid=983」から取得