[Top]
  作ろう! i-modeホームページ

■ 目次

[目次へ戻る]


■ はじめに

iモード対応の携帯電話では、インターネット上のホームページを見ることができます。
そして多少の制限はあるものの、iモードと対応端末の特徴をよく知って、携帯電話で見るためのiモード対応のホームページを作ってみましょう。

[目次へ戻る]


■ 特有機能

  1. Phoneto機能
    ある特定のホームページにリンクを張る場合、次のように記述します。
    <A href="http://www.***.com/">***のホームページ</A>

     また、メールアドレスへのリンクは次のように記述します。パソコン上ではこのリンク部分を選択すると任意のメールソフトが起動しますが、iモード端末でも同じようにメール作成モードに切替ります。

    <A href="mailto:***@***.com">***さんにメール</A>

     そして、電話番号にリンクを張りたいなら、頭に「tel:」を付ければOK。これで、iモード端末でリンク部分を選択すると、その番号に電話がかけられるようになります。市外局番から入力するのを忘れないように。

    <A href="tel:090********">***さんに電話</A>
  2. 特殊文字機能
    iモード端末には、専用の特殊文字がたくさん設定されています。
    これらは一般のHTML文書で、「&#60」を「<」と表示させるように、5桁の数字を使った実体参照コードで記述します。
    絵文字とソースコード一覧

  3. ダイレクトキー機能
    「ACCESSKEY="ボタン"」という属性を追加させることで、ダイレクト入力が可能です。

    <A href="http://www.***.com/" accesskey="1">1.***のホームページ</A>
    <A href="mailto:***@***.com" accesskey="2">2.***さんにメール</A>
    <A href="tel:090********" accesskey="3">3.***さんに電話</A>

     今度は「accesskey="ボタン"」という属性が追加されています。つまり、数字の1のボタンを押すと「***のホームページ」、2のボタンを押すと 「***さんにメール」、3を押すと「***さんに電話」と表示された部分を選択したのと同じ結果になります。これで、通常の矢印ボタンで移動して選択、という煩雑なステップを省略できます。

    利用できるボタンは、1〜9までの数字ボタンと、「#」「*」の記号ボタン。必ず半角で記述しましょう。

[目次へ戻る]


■ 制限事項

  1. HTML3.2から一部のタグを追加・削除したものです。
  2. 文章はSJIS、画像はGIFのみ表示可能です。
    ●GIFへの対応について
     GIFへの対応について、正式にはこうなっています。501iではオプションは使わないのが基本となります。

    GIFのオプション機能 502i 501i
    オプションなし(普通のGIF)
    インターレースGIF ×
    透過GIF ×
    アニメーションGIF ×
    注:△はカラー対応のiモードのみ。

    ●アニメーションGIFについて  
  3. 1ページのサイズは2kバイト(イメージファイルを含む)以内で。但し、ページ構成によっては2K以下でも表示できない場合があります。
  4. cgiは対応してますが、JavaScriptは対応しておりません。
  5. 機種によっては上記の制限以上のことができる場合があります。

[目次へ戻る]


■ サンプル

<HTMLソース> 下記のように記述するとこのように表示されます(⇒ サンプルへ

<HTML>
<HEAD>
<META name="CHTML" content="yes">
<META name="description" content="アブノーマルチェック、占い、クイズ等暇つぶしにどうぞ">
<TITLE>Keizu imode</TITLE>
</HEAD>
<BODY bgcolor="#FFFF99" text="#000000" link="#0000FF" vlink="#0000FF" alink="#000000">
<DIV align=center><IMG src="im_list_01.gif" alt="" width=95 height=40><BR>
<!--#include virtual="/cgi/cnt/count.cgi?icount-kot-log-seigen"--> Hit<BR>
<HR size=1>
<A href="http://www.dokyun.com/agtsite/index.php3/000278/">ケイズコミニュティ</A></DIV>
<HR size=1>
&#63879;<A href="uranai.htm" accesskey="1">占い</A><BR>
&#63880;<A href="http://k-zu.com/cgi/i/iabcheck.cgi" accesskey="2">アブノーマルチェック</A><BR>
&#63881;<A href="pet.htm" accesskey="3">ペット飼育ゲーム</A><BR>
&#63882;<A href="http://k-zu.com/cgi/i/iquiz.cgi" accesskey="4">クイズ</A><BR>
&#63883;<A href="game.htm" accesskey="5">ミニゲーム</A><BR>
&#63884;<A href="check.htm" accesskey="6">診断テスト</A><BR>
&#63885;<A href="bbs.htm" accesskey="7">BBS/CHAT</A><BR>
&#63886;<A href="iappli.htm" accesskey="8">i アプリ</A><BR>
&#63887;<A href="link.htm" accesskey="9">リンク</A><BR>
&#63888;<A href="link1.htm" accesskey="0">注意事項</A><BR><BR>
&#63863;<A href="mailto:keizu@k-zu.com">メール</A><BR>
<HR size=1>
<A href="mailto:adress?body=http://k-zu.com/i/">◆友達に教える◆</A>
<HR size=1><CENTER>
<A href="http://www.manmosu.net/i-mode/rank2/ranking.cgi?links=210&urls=rkg">
<Img src="http://www.manmosu.net/sazabi/riku/image/02.gif"><BR>
<A href="http://rank.kingdom.to/i/uranai/ranklink.cgi?action=rank&id=1955">今週のTOP100♪</A><BR>
<A href="http://ranking.on.arena.ne.jp/cgi-bin/04/rank.cgi?id=1955">imodeRANKING</A><BR>
<A href="http://www.hhh.ne.jp/ddd/www.cgi?action=rank&id=1955">i-RANK</A><BR>
<A href="http://www.gensen.jp/rank/game/ranking.cgi?id=1955">厳選サイトランキング</A><BR>
<A href="http://www.dokyun.com/r/r04/ranklink.cgi?id=1955">Dokyunランキング</A><BR>
<A href="http://rank.girlswalker.com/r.php?c=1&id=keizu">◆girlsRANKING◆</A><BR>
<HR size=1>
<A href=http://i.atmarkdo.net/cgi-bin/i/index.cgi?L1=900&L2=428&L3=0001>
無料でお得な<BR>携帯新サービス@DO!</A></CENTER><HR size=1>
<A HREF="http://sb-v.net/">
<IMG SRC="http://sb-v.net/sbv/images/softbankv.gif" WIDTH="94" HEIGHT="15"></A><BR>
Code:15570<BR>
<HR size=1>
<FORM action="http://www.gigahz.net/g_code.cgi" method="POST">
▼ギガコード<BR>
<INPUT type="text" size="8" istyle="4" name="G_CODE">
<INPUT type="submit" value="GO"></FORM>
Code:420527<BR><a href="http://www.gigahz.net/aboutg.cgi">◆ギガコードって?</A>
<HR size=1>
</BODY>
</HTML>

[目次へ戻る]


■対応タグリスト

1.!-- 【書式】<!-- -->
・ブラウザに表示させたくない文字列をソース上に書き込む場合、このタグで囲んで記入します
2.A 【書式】<A name=""><A href="URL#マーカ名"accesskey="char">
・ ほかのURLへリンクを張ります
3.BASE 【書式】<BASE href="URL">
・HTMLファイル内で扱うURLの基準にするパスを指定します
4.BLOCKQUOTE 【書式】<BLOCKQUOTE>…</BLOCKQUOTE>
・文章をブロック化しインデントします
5.BODY 【書式】<BODY>…</BODY>
・ページとして表示される内容を指定します
6.BR 【書式】<BR clear="回り込み解除位置">
・改行を指定します。
・clear属性が指定されている場合は、BRタグ以降の文字列の回り込みを解除します
7.CENTER 【書式】<CENTER>…</CENTER>
・文字列やイメージなどを画面中央に揃えます
8.DD 【書式】<DL><DT>見出し<DD>内容</DL>
・定義型リストを作成します
9.DIR 【書式】<DIR>…<LI>…</DIR>
・リストを作成します
10.DIV 【書式】<DIV align="表示位置">…</DIV>
・タグで囲まれた部分を、指定した表示位置に揃えます
11.FORM 【書式】<FORM method="メソッド" action="URL">…</FORM>
・ CGIにデータを渡すためのフォームを指定します
12.HEAD 【書式】<HEAD>…</HEAD>
・ページタイトルやサーバ等が利用する情報を指定します
13.H 【書式】<H1 align="表示位置">…</H1>〜<H6 align="表示位置">…</H6>
・見出し(ヘッダ)を指定します
14.HR 【書式】<HR align="水平線の位置" size="ピクセル数" width="ピクセル数 | %">
・水平線(区切り線)を指定します
15.HTML 【書式】<HTML>…</HTML>
・HTMLファイルであることを明示します
16.IMG 【書式】<IMG src="ファイル名" width="ピクセル数 | %" height="ピクセル数 | %" align="イメージの位置" vspace="ピクセル数" hspace="ピクセル数">
・イメージ(画像)データを表示します
17.INPUT 【書式1】テキスト入力
<INPUT type="text" name="フィールド名" value="データ" size="文字数" maxlength="最大文字数" accesskey="char" >
【書式2】送信ボタン
<INPUT type="submit" name="フィールド名" value="データ" accesskey="char">
【書式3】リセットボタン
<INPUT type="reset" name="フィールド名" value="データ" accesskey="char">
18.LI 【書式】<LI>…
・リスト項目を作成します
19.MENU 【書式】<MENU>…<LI>…</MENU>
・リストを作成します
20.OL 【書式】<OL>…<LI>…</OL>
・番号付きリストを作成します
21.OPTION 【書式】<OPTION value="値" selected>…
・選択項目を作成します
22.P 【書式】<P align="段落の配置">…</P>
・段落を作成します
23.PLAINTEXT 【書式】<PLAINTTEXT>…</PLAINTEXT>
・テキストとして、すべてのそのまま表示します
24.PRE 【書式】<PRE>…</PRE>
・改行や空白を含めて、ソースをそのままの形で表示します
25.SELECT 【書式】<SELECT name="リスト名" size=リスト行数><OPTION>…</SELECT>
・選択リストを作成します
26.TEXTAREA 【書式】<TEXTAREA name="フィールド名" cols="桁数" rows="行数">…</TEXTAREA>
・複数行の文字列を入力するためのボックスフィールドを作成します
27.TITLE 【書式】<TITLE>…</TITLE>
・ページタイトルを指定します
28.UL 【書式】<UL>…<LI>…</UL>
・行頭文字のあるリストを作成します

[目次へ戻る]

■ サンプルCGI

Mobile BBS
携帯用の掲示板です。必要最低限の機能は備えています。表示部分もシンプルです。
i-modeで使用になる場合はMETHOD="POST"が推奨です。

数当てゲーム
携帯用のゲームです。3桁の数当てゲームです。
i-modeで使用になる場合はMETHOD="POST"が推奨です。

[目次へ戻る]


■ 作成ツール

  iモード専用ホームページ制作ソフトです。
  1. iホタル WIN版 標準小売価格17,800円  デービーソフト
  2. ホームページ・ビルダー WIN版 標準小売価格14,800円  日本IBM
    専用ソフトではないが、iモードも制作できます。
  3. iど〜も! WIN版 標準小売価格4,100円  ネットファーム・コミュニケーションズ
  4. iホームページマスター WIN版 標準小売価格4,800円  ジャングル
  5. ケータイHP王 WIN版 標準小売価格4,780円  アスク

[目次へ戻る]