本日 　昨日
 
 
09/08(Mon) 11:28
ｉモード対応ホームページ作成講座

■ ｉモード対応ホームページをつくろう

NTT DoCoMoのｉモード加入者が2000年4月に600万人を超えました。これからも益々増えそうです。このビッグユーザ向けの、ｉモード対応ホームページにあなたもトライしませんか？　ｉモード対応ホームページといっても

・表示エリアが小さい
・使えるタグが基本的なタグに制約される
ことに留意する以外は、普通のホームページと同じ方法で作ることができます。このページは私が実際に作ってみて気が付いたちょっとした工夫やノウハウを纏めたものです。皆さまに少しでもお役に立てれば幸いです。

「菊池さんの工作室」のｉモード対応ページ「夢Walker」はこちらです。

■ ｉモード対応ホームページの基礎知識

＜表示イメージ＞
菊池さんの工作室
1.ご案内
2.相性診断
3.今日は何の日
4.自己紹介
この部分が
表示される
5.リンク集
全角８文字を超え
る長文は自動折り
返しされます。
[戻る] 		この部分は
スクロール
しないと見
えない

  1. 表示サイズ：横全角8文字(半角時は16文字)×縦6行(右図参照)
  2. スクロール：縦スクロールのみ。長文は自動折り返しされる
  3. 文字：コードはSHIFT-JISのみ。半角カナ文字の使用可
  4. カラー：カラー機種(502シリーズ)で有効。
    501シリーズは無視されモノクロ表示
  5. 画像：GIFのみ。サイズ最大94×72ドットまで
    　（1）モノクロ機種　　GIFのみ
    　（2）カラー機種　　　アニメGIF、透過GIFもＯＫ
  6. プロトコル：URLに指定可能なプロトコルは次の３つ。
    　（1）http://　　　　　　　　　　　HTTP（Webサーバ）
    　（2）mailto:xxxx@nifty.com　　電子メール
    　（3）tel:0451239876　　　　　　電話（Aタグのみ）
    相対パスまたは絶対パス指定が可能
  7. スクリプト：JavaScriptやJava appletは使えない
  8. スタイルシート：スタイルシートやDHTMLは使えない
■ ｉモード対応への工夫・ノウハウ
  1. 表示エリアが小さいのでトップページはメニュー方式がユーザに解り易い
  2. 表示を見易くするため１行の文字数を各機種共通の全角８文字以内に収める
  3. 行数は縦スクロールするのであまり意識する必要はない
  4. とは言っても、携帯電話のキャッシュメモリの大きさを考え１画面は5Kバイト未満にする(含む画像)。2Ｋバイト以内を推奨
  5. １ページに表示される量が多い時は、ページ内ジャンプも有効
  6. 操作やデータ入力を簡易にするため、ダイレクトキー操作で処理ができるよう工夫する
  7. 文章は簡潔に。あまり長い文章はスクロールしないと見えないので避ける
  8. ユーザは外出中にアクセスするケースが多いと思うので、イベント情報、レストラン情報、時刻表などのタウン情報やミニゲーム、占いなど情報提供型、ユーザ参加型コンテンツがお勧め
■ ｉモードの便利機能
■ ダイレクトキー機能−accesskey
該当キーを押下することでカーソル選択しなくても直接選択することができる機能です。
＜表示イメージ＞
[1]ご案内
[2]占い(ボタン)
  1. 使用可能タグ：A、INPUT、TEXTAREA
  2. accesskeyとして、0〜9、*、#が指定可能。　(*、# はD502iでは機能しません)
  3. 記述例−該当キーを文頭に文字表示してどのaccesskeyか分かるようにしています
    ・[1]<a href="guide.html" accesskey="1">ご案内</a>
    ・[2]<input type="submit" value=" 占い " accesskey="2">
■ 絵文字
約200種類の絵文字が準備されています（「絵文字一覧」参照）。絵文字を効果的に利用すれば、文章で説明するよりも視覚的に分かりやすくページを表現できます。
＜表示イメージ＞
134プレゼント131
134恋占い
1今日の天気
  1. 絵文字の利用方法
    "&#１０進コード；"と記述します。’；’は必須です。
  2. 記述例−項目を象徴する絵文字を項目の前に表示
    ・＆＃63718;<a href="present.html">プレゼント</a>＆＃63874;
    ・＆＃63889;<a href="tarot.html">恋占い</a>
    ・＆＃63647;<a href="wether.html">今日の天気</a>
    [注]ページに表示できないので便宜上 &# を全角文字で書いてますが、実際に記述する時は半角文字で書いてください。

  3. 絵文字は、webページで見ると、IE5.0xでは「・」、IE5.5では「[]」、NC4.xでは「?」と表示されます。
  4. よく使う絵文字と10進コード対応表
名称画像コード名称画像コード名称画像コード名称画像コード
112563879 212663880 312763881 412863882
512963883 613063884 713163885 813263886
913363887 013463888 シャープ13063877 ＮＥＷ13163874
ホーム13463684 メール13263863 ハート13463889 プレゼント13463718

■ 絵文字とaccesskeyによるダイレクト選択
accesskey属性に対応する「数字の絵文字」と組み合わせで使うと、ユーザに対して分かりやすいページにすることができます。菊池さんの工作室 iモードトップページのソースを下に示します。実際の表示と見比べてください。メニュー方式で「ご案内」部分にページ内ジャンプも使ってます。
＜表示イメージ＞
夢Walker
125ご案内
126相性診断
127今日は何の日
ｉモード対応HP作
成講座、CGIのダ
ウンはパソコンか
らこちらです

<html><head><title>iモード</title></head><body>
<font color=hotpink>夢Walker</font><hr>
＆＃63879;<a href="#guide" accesskey="1">ご案内</a><br>
＆＃63880;<a href="imatch.cgi" accesskey="2">相性診断</a><br>
＆＃63881;<a href="whatday/iwhatday.cgi" accesskey="3">今日は何の日</a><hr>
<a name="guide">
ｉモード対応HP作成講座、CGIのダウンはパソコンから<a href="http://kikuchisan.net/">こちら</a>です

■ フォーム入力とistyle(502シリーズ)
＜入力モードと属性値＞
属性値入力モード
1全角かな
2半角カナ
3英字
4数字
  1. istyleは、INPUT type="text"とTEXTAREAタグの属性として新設されたiモード固有の機能です。
  2. istyle指定をすれば入力モードの初期値を英字・数字等に設定変更できます。デフォルトの入力モードは１(全角かな)です。
  3. 記述例−メールアドレスに英字、月日に数字入力設定の例
    ・メールアドレス<input type="text" size="15" istyle="3">
    ・誕生日
    <input type="text" size="2" istyle="4">月
    <input type="text" size="2" istyle="4">日
■ ｉモードのカラーパレット(502シリーズ)
  1. ｉモードでは、256色のカラーパレットが利用可能です
  2. 色指定形式は＃RRGGBBです。標準16色以外は色名称指定はできないので注意が必要です
  3. 下記標準16色については16進数による色指定以外に色名称による指定も可能です
black="#000000" navy="#000080" blue="#0000FF" green="#008000"
teal="#008080" lime="#00FF00" aqua="#00FFFF" maroon="#800000"
purple="#800080" olive="#808000" gray="#808080" silver="#C0C0C0"
red="#FF0000" fuchsia="#FF00FF" yellow="#FFFF00" white="#FFFFFF"

■ ｉモード対応CGI

  1. iモード用CGIです。CGI は著作表示(プログラム名と当サイトへのリンク等)を消さないでご利用いただければ、お持ち帰り、お料理自由です。ご自由にお使い下さい。掲示板にご利用報告を頂ければ嬉しいです。
  2. 携帯電話の画面サイズに合わせてコンパクトにしてあります。名前を(左)クリックするとダウンロードを始めます。downcnt.cgiという名前で保存されますので、itarot.lzhなど名前を変更して保存します。これをLhasaなどの解凍ソフトで解凍します。

ｉモード対応CGIダウンロードバージョンサイズサンプル設置解説
タロット占いitarot.lzhV3.04KBitarot.cgicgi11.html
相性診断imatch.lzhV2.03KBimatch.cgicgi12.html
おみくじiomikuji.lzhV1.02KBiomikuji.cgicgi13.html
今日は何の日iwhatday.lzhV1.296KBiwhatday.cgicgi09.html
ダイエットの鉄人idiet.lzhV2.03KBidiet.cgicgi14.html
バイオリズムibio.lzhV1.05KBibio.cgicgi16.html
夢チャットychat.lzhV3.014KBychat.cgi　（注）cgi15.html
夢掲示板yboard.lzhV1.013KByboard.cgi　（注）cgi17.html
　　（注）このサンプルは運用中のものです。試し書きはご遠慮ください。

■ テクニック＆資料集

■ ｉモードページとwebページのどちらも見れるようにするには
ｉモードページをこれから作ろうと思ってる方には、すでにwebページをお持ちの方も多いと思います。携帯からアクセスしたユーザはwebページを見ることができません。携帯からのアクセスユーザ、パソコンからのアクセスユーザどちらにもページを見ていただくにはちょっとした工夫が必要です。

■ ｉモードとJフォンのどちらも見れるようにするには
１つのCGIでｉモードとJフォンのどちらでも見れるようにするには、i-mode用とJ-sky用パラメータ自動設定ツール mode.pl を組み込みます。

■ ｉモード対応HTMLタグ一覧
ｉモードで利用可能なタグの一覧です。基本的には、webページタグのサブセット（機能縮小版）ですが、webページでよく使われるタグでｉモードでは機能しないものに以下のものがあります。

・太文字を表示する<b>タグ
・色指定を行う bgcolor、font color　(カラー機種を除く)
・文字サイズの指定 font size

■ ｉモード絵文字一覧
約200種類の絵文字が準備されています。絵文字を効果的に利用すれば、文章で説明するよりも視覚的に分かりやすくページを表現できます。