携帯電話向けサイト構築
携帯電話向けサイトの構築について、メモ。
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以内に収めるほうが無難。
文字コードはShift_JIS
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>
inputタグとaタグに指定できるが、vodafoneのC2ではinputタグのaccesskey属性は効かない。
<form> <!--ひらがなで入力--> <input type="text" name="hoge" istyle="1" mode ="hiragana"> <!--半角カタカナで入力--> <input type="text" name="hoge" istyle="2" mode ="hankakukana"> <!--アルファベットで入力--> <input type="text" name="hoge" istyle="3" mode ="alphabet"> <!--数字で入力--> <input type="text" name="hoge" istyle="4" mode ="numeric"> </form>
iモード2.0以降の端末とEZwebの端末はistyle属性に対応。SoftBankの端末はmode属性に対応。
その他留意点
画像
1つの形式の画像で全てのキャリアのすべての世代の端末に対応させるのは不可能
したがって、画像を使用したければ各キャリア別に画像を作成する必要がある。
ただし、JPEGであれば2003年以降発売のほぼ全機種に対応可。
- iモード
-
すべての世代のiモード端末に対応しているのはノンインターレースGIFのみ
画像データのファイルサイズはまちまちで、501iシリーズは最大5KB、902iシリーズは最大100KB
画像サイズはNTT DoCoMo推奨は94×72ドット
|
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 | × | × | × | × | × | × | △ | |
絵文字
キャリアごとに種類や内容、表示方法が違う。
EZweb端末では、HTMLファイル中にiモード絵文字を示す「Shift_JIS16進」または「Shift_JIS10進」コードがあった場合、
それぞれ対応するEZweb絵文字に自動変換する模様
ｉモード絵文字変換表 - My First HDML
メールに関しても同様
ドコモ、auが絵文字変換サービスを開始 - ケータイウォッチ
- iモード
-
基本絵文字（176種類）と拡張絵文字（76種類）があり、拡張絵文字はiモード対応HTMLバージョン4.0以降に対応した機種で表示可能。
入力方法コード 入力方法 絵文字 対応HTML 基本 拡張 Shift_JISの16進数コード バイナリコード ○ ○ 全バージョンに対応 Shift_JISの10進数コード テキスト ○ × 全バージョンに対応 Unicode テキスト ○ ○ 4.0以降のみ - EZweb
- 1325種類の絵文字がある。タイプA～Dの4種類に分けられ、一部の絵文字はアニメーション。
すべての機種に対応した絵文字はないが、各タイプの共通した絵文字番号は、同じような意味をもった絵文字になる。 -
<img localsrc="179">若葉マークを表示
- SoftBank
-
270種類ありパケット対応機はこの他に210種類の絵文字が利用できる。
入力方法はUnicodeまたはウェブコード
QRコード
QRコードに埋め込むことができる情報
- サイトのURL（URLとページタイトルが入れられる。iモードであればブックマークにも登録できる）
- メール（送信先のメールアドレス、件名、本文）
- アドレス帳（名前、フリガナ、電話番号、メールアドレス、住所、誕生日）
- テキスト文字（通常の文字や絵文字が入れられる）
iアプリ、EZアプリ、Vアプリの作成
いずれもJavaにより作成。詳しくは各キャリアのサイトを参照。
アクセス制限（振り分け）
ユーザーエージェントを見る方法や、使用しているIPアドレスの帯域を見る方法、対応しているMIMEタイプを見る方法などがある。
ユーザーエージェントは詐称が可能（後述のFirefoxの拡張機能など）なため、絶対に特定のキャリアの端末以外がアクセスしてはいけないというようなサイトの場合はこの方法は使えない。iモードの公式サイトであれば端末固有の番号のようなことを見ることも可能。いわゆる勝手サイトの場合は不可能。
端末振り分け - My First HDML
各キャリア端末のユーザーエージェント
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 - 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
例（キャッシュあり）：DoCoMo/1.0/D502i/c10
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
SoftBank
ジェイフォン時代と、今のボーダフォンで大きく異なる。また、702シリーズの一部もユーザーエージェントが異なる。
ジェイフォン時代のケータイには「J-PHONE」の文字列が記述され、ボーダフォンでは「Vodafone」が記述される。また、702MO、702sMOでは「Vodafone」の文字列ではなく、「MOT」が記述される。いまのところこの3種類。
SoftBankに変わったのでまた変更になっている可能性あり。
各キャリアの端末が使用するIPアドレスの帯域
それぞれ開発者向けサイトで公開している。定期的に追加されている模様。
同じ端末が連続してアクセスした場合でもIPアドレスが異なる場合がある。
- NTT DoCoMo
-
iモードサービスで利用するIPアドレス帯域
フルブラウザを搭載している端末の場合、iモードブラウザを使用している時と、 フルブラウザを使用している時で帯域が異なる。 - au
- EZサーバのIPアドレス帯域
- SoftBank
- IPアドレス帯域について
フルブラウザ
公式サイト・検索エンジンへの登録
NTT DoCoMo
申請の際には、仮登録、本登録を行うと必要書類一式がDoCoMoから送付される。
必要書類の中には企画書の提出も含まれる。
申請は無料
登録申込み受け付け
iモードメニュー掲載基準
EZweb
DoCoMoと同じように登録後に企画書を提出する必要がある。
EZwebオープンサイト掲載基準と呼ばれるガイド手順に沿って進める。
申請は無料
EZwebでのコンテンツ提供に関して
EZwebサイトエントリーのご案内（受け付け）
SoftBank
申請の際の書類を含めたスターターキットがSoftBankのサイトからダウンロードできる
登録は有料
企業登録料：初回84,000円(税込)、更新料126,000円(税込)
コンテンツ登録料：（コンテンツ単位）21,000円(税込)
オフィシャルコンテンツについて
CNET Japanの記事
「インフラ事業者」と「いち私企業の論理」は両立するのか
公式サイトの掲載基準が不明瞭なことなどを批判
Yahoo! モバイルへの登録
各種資料
携帯キャリア 公式サイト
- 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（モビレント）
主なモバイル向けサイトの情報
Yahoo! モバイル
http://mobile.yahoo.co.jp/
端末判別：ユーザーエージェント(SoftBankは不明)
実際のテスト結果(FirefoxのUser Agent Switcherでテスト)
| キャリアと機種 | iモード | EZweb | SoftBank | |||
|---|---|---|---|---|---|---|
| N503i(mova:2001年3月発売) | SH901iC(FOMA:2004年12月発売) | A1304T II(2003年12月発売) | A5516T(2005年12月発売) | V801SA(2003年12月発売) | V802SE(3G:2004年12月発売) | |
| 言語 | iモード対応HTML | iモード対応HTML | HDML(カラー画像対応機種のみ対応のためハネられる) | XHTML Basic | 不明 | 不明 |
| 画像 | GIF | GIF | BMP(カラー画像対応機種のみ対応のためハネられる) | PNG | 不明 | 不明 |
全体月間PV：19億6800万PV
iモード月間PV：9億2900万PV
EZweb月間PV：6億8000万PV
ボーダフォンライブ！月間PV：3億5300万PV
来訪者の男女比は男性が59.3%、女性40.7%。男性30～34才が11.5%でもっとも多い。
Yahoo! JAPAN 媒体資料 2006年12月版より
mixiモバイル
端末判別：不明(ユーザーエージェントではない)
対応機種(フルブラウザ、PCサイトビューアーはサポート対象外)
- NTT DoCoMo
- iモード対応全機種
- EZweb
- 機種に制限有り(mixiサイト上に記載あり)
- SoftBank
- 3G対応機種
2007年1月15日にPVが1日1億PVを突破
mixiモバイルのユニークユーザ数は230万人(2006年12月)
携帯電話からだけで1日12,000人以上の新規ユーザ
ユーザプロファイル
【性別】男性43.7%、女性56.3%。20代の利用が65.2%と最も多く、居住地域は関東地方が50%。
2007年1月17日mixiプレスリリースより
Google モバイル
端末判別：全端末共通コンテンツ
実際のテスト結果(FirefoxのUser Agent Switcherでテスト)
| キャリアと機種 | iモード | EZweb | SoftBank | |||
|---|---|---|---|---|---|---|
| N503i(mova:2001年3月発売) | SH901iC(FOMA:2004年12月発売) | A1304T II(2003年12月発売) | A5516T(2005年12月発売) | V801SA(2003年12月発売) | V802SE(3G:2004年12月発売) | |
| 言語 | HTML1.0 | HTML1.0 | WML | HTML1.0 | HTML1.0 | HTML1.0 |
| 画像 | GIF | GIF | GIF | GIF | PNG | GIF |
R25式モバイル
端末判別：不明(ユーザーエージェントではない)
2006年5月時点のユニークユーザー数127万人
トップページの総PVは400～500万PV
ユーザの約8割が男性。ほとんどは首都圏在住のM1層。
R25式モバイルの媒体資料
このページの作成に使った資料
- ケータイサイト構築ガイドブック
-
毎日コミュニケーションズ
2,625円 - ケータイサイト実践運用ガイドブック
-
毎日コミュニケーションズ
2,730円