携帯電話向けにHTML文書を作成するに当たってご留意願いたい事として、文字コード, 携帯電話独自の機能及び携帯電話で使えないか使うべきでない機能について解説します。
携帯電話での制限 (平成21年 5月21日 更新)
携帯端末で使えない機能 (平成21年 5月21日 更新)
文字コードとしては、必ずシフトJISコードを用いて下さい。
例え携帯電話向けといえども、HTMLで記述する以上、PCで閲覧される恐れもあります。
PCでの閲覧に問題が生じないように、しっかり基本となる要素などで論理的にマークアップしましょう。
詳しくは実際の携帯電話向けコンテンツ作成で解説します。
携帯電話に実装されているHTMLは、PC向けブラウザのそれと殆ど変わりません。
しかしながら、携帯電話機ならではの機能もあります。
携帯電話に付いているダイヤルボタンを押すだけでリンクを指定できる機能があります。使い易くする為にも積極的に活用しましょう。
<a>要素にaccesskey属性を追加します。この属性はPC向けブラウザにも実装されていますが、携帯電話機ではダイヤルボタンの押下でアンカー指定を行えるようにするのに用います。
具体的に<a>要素にaccesskey属性を附与するには以下のようになります。
<a href="リンク先URI"accesskey="ダイヤルボタン">…</a>
ダイヤルボタン
には 0〜 9, #及び*が使えます。
0, #及び*が使えないものがあります。重要度の高いリンクには 1〜 9を割り当てるようにすると良いでしょう。尚、accesskey属性でダイヤルボタンを指定した場合、ソフトバンクの初期の旧型機とWAP 1.0端末では漏れなく表示されますが、その他の端末では当該番号が自動的に表示される事はありません。
このため、ボタンの番号を明示する必要があります。
また、同一ファイル中の複数のリンクに同じボタンを指定すると正常に機能しない恐れがありますので、ご注意下さい。
携帯電話らしく、ウェブページのリンクから電話を掛ける事が出来ます。
具体的には、<a>要素のhref属性で指定するURLの代わりに電話番号を指定する事で、電話にダイヤルするアンカーを作成出来ます。
WAPでは電話番号の前にスキーム名として「wtai://wp/mc;」を付ける事となっておりますが、日本ではｉモードの独自仕様である「tel:」スキーム名が使われます。
例えば、さいたまの電話番号048/8XX-YYYYにリンクする場合は、<a>要素にhref="tel:0488XXYYYY"属性を与えます。
wtai://wp/mc;」スキームは認識出来ないようです。尚、電話番号をリンクする場合は、必ず先方の承諾を得て下さい。特にイタズラ電話には絶対に使わないで下さい。
また、電話機能はPCでは機能しない事を忘れないで下さい。
従来、携帯電話向けのウェブコンテンツでは、以下の機能が使えないものとされておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
ですが、それでもまだ対応していない端末の方が遙かに多いので、使わないようにしましょう。
携帯端末では長きに亘ってJAVAスクリプトが使えないものとされておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
ただ、フォームの入力確認などで使うのならともかく、ダイナミック HTMLやDOMを利用した場合、小さな携帯端末では却って使い難くなる恐れがあります。
また、JAVAスクリプトが使えない端末の方が現状では遙かに多いので、今後もそう言った端末の事を考慮してコンテンツを作るべきである事は言うまでも無いでしょう。
フレーム機能も携帯端末では使えない事となっておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
とは言え、フレームに対応していない端末の方が遙かに多い事と、携帯電話の小さな画面ではフレームで区切られたページの閲覧は困難である事を考えると、使うべきものではありません。
尚、フレームについての問題点は、フレームについてでも書きましたのでご覧ください。
携帯端末では長きに亘って<meta>要素に依るリフレッシュをサポートしていなかったため、この機能を持ちいてPC端末と携帯端末を振分けていたようです。
例えば、以下のように記述する事で、PCとモバイルを振り分けるようにする訳です。
<?xml version="1.0" encoding="shift_jis"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xml:lang="ja"><head><meta http-equiv="content-type" content="text/html; charset=shift_jis" /><meta http-equiv="refresh" content="0;URL=PCindex.html" /><title>○○のサイト・モバイル版</title>…</head><body><h1>○○のサイト(モバイル版)</h1>…</body></html>
尚、この方法の場合、リフレッシュに対応していない環境は全てモバイル版を閲覧する事となりますが、モバイル版を謂わば簡易HTML版として扱う事も出来るでしょう。
もっとも、リフレッシュに依るページ自動更新は、好ましい事ではありません。何故なら、リフレッシュに対応している環境だと、ページを読んでいる途中で無理矢理そのページの表示を消されてしまう恐れがあるからです。
このように、従来はリフレッシュ機能サポートの有無でPCかモバイルかを判別する方法が使えたのですが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いてこの<meta>要素に依るリフレッシュが使えるようになります。
従って、そのような端末では、<meta>要素で振分けようとしても、PC向けのページに振分けられてしまうでしょう。
また、以下の機能は端末に依っては利用可能ですが、例え利用可能な端末に対しても利用しない方が良いと思われます。
現行の端末はテーブル(表組)を公式にサポートしていますが、使わない方が良いでしょう。
使える端末であっても、横幅が広くなり過ぎると横スクロールが発生して読み難くなります。
また、WAP 2.0などでは横幅が広くなり過ぎると表組が崩れる端末もあります。
以上の点からも、テーブル(表組)を携帯端末向けに使うのはやめておいた方が良いでしょう。
また、携帯電話向けのHTMLでは、ベーシックテーブルと言って入れ子構造を認めない単純なテーブル(表組)が実装されております。
