モバイルサイトの作り方

モバイルサイト,いわゆる携帯用ホームページの需要は増えているようであり,携帯が進化するとともに独自のHTML言語も発達しているようだが,キャリア,時期,メーカーなどの違いによって,PC以上に言語は複雑多様化している.したがって,すべてに共通のサイトを作るのは至難の業であるが,とりあえず,これだけは押させておこうというものだけを取り上げてみたい.

仕様

説明に入る前に各社の仕様書を参考されたい.

各社の言語・仕様は,次の通りである.

imode
iモード対応HTML(HTML2.0,3.2,4.0,4.01のサブセット)文字コードはSHIFT_JIS,画像はgif
iモード対応XHTML(WAP Forum(現OMA:Open Mobile Alliance)のXHTML-MPをもとにiモード対応HTMLとの互換性を意識して策定したもの)文字コードはSHIFT_JIS,画像はgif,jpg
ezweb
XHTML Basic(XHTMLのサブセット)
HDML
ソフトバンク3G
XHTML Mobile Profile1.2をベースとして,iモード対応HTMLと共通しているところがある.

おそらくモバイルサイトは文書としての体をなしていないので,マークアップ言語として取り扱うことは不可能であるし,通信面(パケット代)からも誤作動を起こしにくいものは極力省いた方がいいだろう.

エミュレーター

ウェブサイトを作ったときに,キャリアごとの端末で確認することは大変難しい.そこで,エミュレーターを使って確認する.各社のエミュレーターは上記サイトからダウンロードできる(ただし,ソフトバンクは会員登録が必要である)

ひな形

どんな携帯にも対応できるようなページを労力をかけずに制作するという観点からひな形を用意する.W3C勧告のXHTMLにしたがうととんでもないことになるので,そのあたりは無視する.ファイルの文字コードはSHIFT_JISとする

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>タイトルの記入</title>
</head>
<body>
本文
</body>
</html>
本文の中で共通に使うことができるのは,次くらいなものである.
<br>,<a>,<hr>

その他デザイン等で凝ることも可能ではあるが,CSS非対応であったり,ファイルサイズのことを考えるとこの2つで作るのが無難である.

厳格に XHTML に準拠したページを作ることも可能だし,対応機種も増えているが,それらは,XHTMLの項目を参照されたい.ただし,その場合でも table は使わないこと.

HTMLの規格を厳格に守らないとすれば,ダブルクォーテーションなども極力使わないこと.なぜならばその分ファイルサイズを少なくすることができるからである.もちろん,ページ名も短い方がその分ファイルサイズも小さくなる.

半角カタカナ

いわゆる半角カタカナは,ひらがなの半分の大きさなので1行内に収まる文字数は増えるが,半角カタカナはひらがなと同じ2バイトの容量なのでファイルサイズが少なくなることはない.

アクセスキー

携帯端末で重要なのは,操作のしやすさである.幸い accesskey を使うことができるので,これは大いに活用したい.

[1]<a href="1.html" accesskey="1">ページ1</a><br>
[2]<a href="2.html" accesskey="2">ページ2</a><br>

キャッシュ

携帯端末は通信量削減の面からキャッシュを活用し,ユーザーが更新しない限りページが更新されにくい.一方,ページ作成の面からは即時性が要求されることもある.そこで,携帯端末のキャッシュを無効にする場合はヘッダに次の内容を入れておくと良い.ただし,過大なキャッシュの無効化は通信量の増大を招くので注意すること.

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

フォーム入力

フォーム入力はほぼどの機種でも対応しているようである.ただし,フォーム入力の際余分なデータを送信しないよう心がけたい.

テキスト入力欄では通常日本語入力になるが,郵便番号など数字を入力するときは自動で英数入力になると便利である.各端末では次のようなモードが用意されている.

<input type=text name=hoge size=6 istyle=4 mode=numeric value=>

HTMLの規格に外れるがダブルクォーテーションも極力使わない.すべてはファイルサイズを小さくするために!現状ではエラーが生じるときだけ厳格に守ればよいであろう.

携帯固有情報の取得

携帯端末ではcookieが使えない機種がほとんどなので,ユーザー認証などで不便が生じることがある.いわゆる簡単ログインでは,携帯固有情報を取得して,ユーザーが一意であることを確認する.便宜上phpでの取得方法を紹介する.

imode

docomo端末では,従来は form を使って情報を送信する必要があったが,現在はimodeIDと呼ばれる一意のランダムな英数字が与えられており,ユーザーが許可している場合に限り取得することができる.取得方法は次の通り.

URLに?guid=ONを記述する.

$_SERVER['HTTP_X_DCMGUID']

ezweb

au端末では,ez番号,サブスクライバIDと呼ばれ,端末に一意のランダムな英数字が与えられており,ユーザーが許可している場合に限り取得することができる.取得する方法次の通り.

$_SERVER['HTTP_X_UP_SUBNO']

softbank

ソフトバンク端末では,端末シリアル番号と呼ばれ,端末固有の番号である.端末シリアル番号はユーザーが許可している(製造番号通知設定で許可している)場合は,HTTP_USER_AGENTに含まれる.

$_SERVER['HTTP_USER_AGENT']

目次