iモード対応HTML/XHTMLページの作り方

iモード対応HTML/XHTMLページとは


「ｉモード対応HTML(Compact HTML)」ページの作り方

  • MOVAおよびFOMAで対応している「ｉモード対応HTML(Compact HTML)」は、HTML4.0の機能縮小版と言う事もあり、新たに覚えるタグは数字キーと連動するリンク（accesskey="1"等）程度です。コンパクトHTMLの詳細は、NTTドコモの以下のページを参照して下さい。

    ・ｉモード対応HTML

  • iモード端末によってブラウザの画面領域の大きさが異なります。例えば、同じN端末でもN503iでは「118×128」ですが、 N504iでは「160×180」と非常に大きくなっています。従って、N504iで同じコンテンツを見ると、小さく見えてしまいます。この辺は、ある程度ターゲットの端末を絞った作りこみが必要です。 端末毎の詳細は、NTTドコモの以下のページを参照して下さい。

    ・iモードブラウザの画面領域

  • そのほか、画像はGIF形式のみ、一行8文字程度、1ページ当たりのサイズ10KB以下等の制限に注意すれば、通常のページの作成と同じです。 ただ、写真を携帯の液晶で見ると彩度が落ちるので、彩度を上げてからGIF形式で圧縮する必要があります。この辺は実際にやって見ないと判らないですね。

  • アクセスカウンタは、PC向けのCGIではうまく表示できないものがあります。アニメーションGIF等で表示するものはだめです。私は、関連サイトにある「モバイルカウンター」を使わせてもらいました。

  • トップページ(index.htm)の記述は、以下の様になっています。アクセスキーの記述は削除しています。
    【index.htm】
    <HTML>
<HEAD>
<TITLE>名犬？タローのページ</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<P>
<CENTER>
<IMG WIDTH="94" HEIGHT="25" SRC="image/title_logo2.gif" ALT="名犬？タローのページ">
</CENTER>
【更新】H15年11月2日<BR>

<A HREF="whatsnew.htm" accesskey="1">What's New</A><BR>
<A HREF="photo.htm" accesskey="2">写真集</A><BR>
<A HREF="cgi/i-modebbs/imodebbs.cgi" accesskey="3">掲示板</A><BR>
<A HREF="profile.htm" accesskey="4">ﾌﾟﾛﾌｨｰﾙ</A><BR>
<A HREF="flash/flash.htm" accesskey="7">Flash</A><BR>
<A HREF="imotion/imotion.htm" accesskey="8">モーション</A><BR>
<A HREF="iap/MyIntro/MyIntro.html" accesskey="9">iアプリ</A><BR>

<HR>
<CENTER>(C)2003 H.N.[<IMG SRC="./cgi/mcount/count.cgi" ALT="カウンタ">]</CENTER>
</BODY>
</HTML>

「ｉモード対応XHTML」ページの作り方

  • FOMA以降で対応している「ｉモード対応XHTML」は、XHTMLのサブセットであるXHTML Basic（WAPフォーラムのXHTML Mobile Profile）を元にしています。「ｉモード対応XHTML」の詳細は、NTTドコモの以下のページを参照して下さい。

    ・ｉモード対応XHTML

  • 画面領域や、画像形式等の注意事項については、「ｉモード対応HTML(Compact HTML)」ページと基本的には同じです。XHTMLでは、スタイルシートを外部に置く事を推奨していますが、「ｉモード対応XHTML」では対応していません。インラインで記述します。

  • トップページの記述は、以下の様になっています。アクセスキーの記述は削除しています。
    【index.xhtml】
    <?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN"
 "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<title>名犬？タローのページ</title>
</head>

<body style="background-color:#ffffff">
<div style="text-align:center">
<img src="../i/image/title_logo2.gif" width="94" height="25" alt="名犬？タローのページ" />
</div>
【更新】H15年11月2日<br />

<a href="../i/whatsnew.htm" accesskey="1">What's New</a><br />
<a href="../i/photo.htm" accesskey="2">写真集</a><br />
<a href="../i/cgi/i-modebbs/imodebbs.cgi" accesskey="3">掲示板</a><br />
<a href="../i/profile.htm" accesskey="4">ﾌﾟﾛﾌｨｰﾙ</a><br />
<a href="../i/flash/flash.htm" accesskey="7">FLASH</a><br />
<a href="../i/imotion/imotion.htm" accesskey="8">iモーション</a><br />
<a href="../i/iap/myintro/myintro.html" accesskey="9">iアプリ</a><br />

<hr />
<div style="text-align:center">
(c)2005 H.N.[<img src="../i/cgi/mcount/count.cgi" alt="カウンタ">]
</div>

</body>
</html>

  • 「ｉモード対応XHTML」ページを配信するためには、Webサーバに以下のMIMEタイプの設定が必要になります。ISPのホームページスペースを利用している場合は、ISPにお願いする必要があります。BIGLOBEの場合は、設定済みでした。

    
【MIMEタイプ】
application/xhtml+xml

【エクステンション】
「.xhtm」または「.xhtml」

    「.htaccess」が利用できる場合は、以下の様に記述します。

    AddType application/xhtml+xml .xhtm .xhtml


その他

  • iモードの回線使用料については、パケット課金なので通話での従量課金に比べると安いとのイメージがありましたが、画像を使うとそうでも無い事がわかりました。

    パケット料金は、128バイト当たり0.3円になります。5KBの写真は5000÷128×0.3≒12円掛かる計算になります。これを10枚見ると120円となり、結構の値段になりますね。やはり文字情報が中心にならざるを得ない様に思います。この辺はもっと料金を安くして欲しいものです。

関連サイト

  • CGIROOM：アクセスカウンター「モバイルカウンター」を使わせて頂きました。(2003.7.27追加)
  • CGIダウンロード：掲示板用のフリーCGIスクリプト(ｉモードＢＢＳ)を利用させてもらいました。
  • ｉモードINDEX：ドコモのｉモードに関する情報のページ

HOWTOへもどる

Copyright (c) 2001-2005 Hiroshi Nakamura. All rights reserved.