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


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


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

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

    iモード対応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> 
    

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

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

    iモード対応XHTML

  • 画面領域や、画像形式等の注意事項については、「iモード対応HTML(Compact HTML)」ページと基本的には同じです。XHTMLでは、スタイルシートを外部に置く事を推奨していますが、「iモード対応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="https://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>
    

  • 「iモード対応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スクリプト(iモードBBS)を利用させてもらいました。
  • iモードINDEX:ドコモのiモードに関する情報のページ


HOWTOへもどる


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