携帯電話向けHTMLの考え方。
携帯電話向けにHTML文書を作成するに当たってご留意願いたい事として、文字コード, 携帯電話独自の機能及び携帯電話で使えないか使うべきでない機能について解説します。
実際にマークアップするには。
その他、マークアップに当たって心掛けたい事。
例え携帯電話向けといえども、HTMLで記述する以上、PCで閲覧される恐れもあります。
PCでの閲覧に問題が生じないように、しっかり基本となる要素などで論理的にマークアップしましょう。
詳しくは実際の携帯電話向けコンテンツ作成で解説します。
携帯電話機ならではのHTML。
携帯電話に実装されているHTMLは、PC向けブラウザのそれと殆ど変わりません。
しかしながら、携帯電話機ならではの機能もあります。
ダイヤル操作でのリンク指定機能。
携帯電話に付いているダイヤルボタンを押すだけでリンクを指定できる機能があります。使い易くする為にも積極的に活用しましょう。
<a>要素にaccesskey属性を追加します。この属性はPC向けブラウザにも実装されていますが、携帯電話機ではダイヤルボタンの押下でアンカー指定を行えるようにするのに用います。
具体的に<a>要素にaccesskey属性を附与するには以下のようになります。
<a href="リンク先URI"accesskey="ダイヤルボタン">…</a>
- 但し、一部端末で
0,#及び*が使えないものがあります。重要度の高いリンクには1〜9を割り当てるようにすると良いでしょう。
尚、accesskey属性でダイヤルボタンを指定した場合、ソフトバンクの初期の旧型機とWAP 1.0端末では漏れなく表示されますが、その他の端末では当該番号が自動的に表示される事はありません。
このため、ボタンの番号を明示する必要があります。
- 本来はダイヤルボタンは明示しなくても端末が自動的に表示してくれる事が望ましいのですが、実際には多くの端末がそのようになっていないのでやむを得ず明示する事になります。詳しくは<a>要素のaccesskey属性についてをご覧下さい。
また、同一ファイル中の複数のリンクに同じボタンを指定すると正常に機能しない恐れがありますので、ご注意下さい。
電話に繋がるアンカー。
携帯電話らしく、ウェブページのリンクから電話を掛ける事が出来ます。
具体的には、<a>要素のhref属性で指定するURLの代わりに電話番号を指定する事で、電話にダイヤルするアンカーを作成出来ます。
WAPでは電話番号の前にスキーム名として「wtai://wp/mc;」を付ける事となっておりますが、日本ではｉモードの独自仕様である「tel:」スキーム名が使われます。
例えば、さいたまの電話番号048/8XX-YYYYにリンクする場合は、<a>要素にhref="tel:0488XXYYYY"属性を与えます。
- EZウェブ以外の国内の端末では「
wtai://wp/mc;」スキームは認識出来ないようです。
尚、電話番号をリンクする場合は、必ず先方の承諾を得て下さい。特にイタズラ電話には絶対に使わないで下さい。
また、電話機能はPCでは機能しない事を忘れないで下さい。
携帯電話での制限。(平成21年 5月21日 更新)
携帯端末で使えない機能。(平成21年 5月21日 更新)
従来、携帯電話向けのウェブコンテンツでは、以下の機能が使えないものとされておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
ですが、それでもまだ対応していない端末の方が遙かに多いので、使わないようにしましょう。
クライアントサイドスクリプト。(平成21年 5月21日 更新)
携帯端末では長きに亘ってJAVAスクリプトが使えないものとされておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
- 実は海外向け端末では既に実装されておりましたが、日本国内の携帯電話向けサーヴィスでは対応しておりませんでした。
ただ、フォームの入力確認などで使うのならともかく、ダイナミック HTMLやDOMを利用した場合、小さな携帯端末では却って使い難くなる恐れがあります。
また、JAVAスクリプトが使えない端末の方が現状では遙かに多いので、今後もそう言った端末の事を考慮してコンテンツを作るべきである事は言うまでも無いでしょう。
- 例えば入力フォームに正しい内容が入れられているかをチェックするにしても、スクリプトに対応していない端末から入力された場合には間違ったクエリが送られて来る恐れは充分ありますので、必ずサーヴァサイドでもクエリの確認を行うようにしてください。
フレーム。(平成21年 5月21日 更新)
フレーム機能も携帯端末では使えない事となっておりましたが、平成21年 5月以降に発売されるエヌ・ティ・ティ・ドコモ端末では一部を除いて使えるようになります。
とは言え、フレームに対応していない端末の方が遙かに多い事と、携帯電話の小さな画面ではフレームで区切られたページの閲覧は困難である事を考えると、使うべきものではありません。
- PC向けコンテンツでも、あらゆる問題が指摘されてフレームを用いたサイトは激減しております。
尚、フレームについての問題点は、フレームについてでも書きましたのでご覧ください。
- 因みに、今日では使えなくなりましたが、EZウェブの旧世代機では、フレームページを無理矢理閲覧可能にするために、各フレームへのリンクに変換するようにしておりました。これはかなり使い難いものだったようです。
<meta>要素に依るリフレッシュ。(平成21年 5月21日)
携帯端末では長きに亘って<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向けのページに振分けられてしまうでしょう。
- 実は、平成21年 4月以前でもウィルコムやイー･モバイルなど、フルブラウザをモバイル向けに流用している端末があり、そのような端末ではやはりPC向けコンテンツへ振分けられてしまいます。
- もっとも、PC向けコンテンツに振分けられてしまう端末は、フル規格のウェブコンテンツに対応しているので、フラッシュなどに気を付ければPC向けのコンテンツでも閲覧は可能でしょう。
携帯端末で使わない方が良い機能。
また、以下の機能は端末に依っては利用可能ですが、例え利用可能な端末に対しても利用しない方が良いと思われます。
テーブル(表組)は使わないようにしましょう。
現行の端末はテーブル(表組)を公式にサポートしていますが、使わない方が良いでしょう。
- 現在、テーブル(表組)を公式にサポートしていない携帯端末は902iシリーズより前のｉモード端末, EZウェブの旧型機及びH"リンクくらいでしょう。
- 実は、902iシリーズより前のｉモード端末もテーブル(表組)を実装しているのですが、横スクロールが絶対に出来ない仕様のため、横にはみ出すとその部分は絶対に読めなくなるなどの理由から公式には使えない事とされております。
使える端末であっても、横幅が広くなり過ぎると横スクロールが発生して読み難くなります。
また、WAP 2.0などでは横幅が広くなり過ぎると表組が崩れる端末もあります。
以上の点からも、テーブル(表組)を携帯端末向けに使うのはやめておいた方が良いでしょう。
- 特にレイアウトのためにテーブルを使うのは最悪と言えます。
また、携帯電話向けのHTMLでは、ベーシックテーブルと言って入れ子構造を認めない単純なテーブル(表組)が実装されております。