|
|
| 1行目: |
1行目: |
| 携帯電話向けサイトのHTMLコーディングについて
| |
| <div id="manual">
| |
| <div class="section">
| |
| ==HTML==
| |
| それぞれの携帯端末向けに使用する言語は以下の通り
| |
| <table class="rendering-mode" border="0" cellpadding="0" cellspacing="0">
| |
| <tr>
| |
| <th>キャリア</th>
| |
| <th>言語</th>
| |
| </tr>
| |
| <tr>
| |
| <td>iモード</td>
| |
| <td>iモード対応HTML、iモード対応XHTML</td>
| |
| </tr>
| |
| <tr>
| |
| <td>EZweb</td>
| |
| <td>XHTML Basic、HDML、WML</td>
| |
| </tr>
| |
| <tr>
| |
| <td>ボーダフォンライブ!</td>
| |
| <td>ボーダフォンライブ!向けHTML、MML、ボーダフォンライブ!向けXHTML</td>
| |
| </tr>
| |
| </table>
| |
| 共通している言語はXHMLだが、iモードとボーダフォンライブ!は対応している機種が
| |
| 少ないので、汎用サイトを作成するには向いていない。<br>
| |
| iモード対応HTMLとボーダフォンライブ!向けHTMLは、タグの記述方法が似ているので
| |
| 汎用サイトを作成するには向いている。<br>
| |
| また、EZwebは、HTMLで記述されたコンテンツをEZサーバでHDMLに変換することで表示できる。したがって、独自の属性を取った、プレーンなHTMLで記述すれば、汎用サイトが作成できる。<br>
| |
| ファイルサイズは端末により数値が違う。5KB以内に収めるほうが無難。<br>
| |
| 1画面に表示する文字は、機種によってまちまち。<br>
| |
| 見出しの部分などが2行になると見づらくなるので、1行を16文字(全角で8文字)前後に
| |
| 収めるようにする。半角カナ文字が使用できるので、2行にまたがる場合は半角カナ文字
| |
| を使うと良い。
| |
| </div>
| |
| <div class="section">
| |
| ==画像形式==
| |
| 1つの形式の画像で全てのキャリアのすべての世代の端末に対応させるのは不可能<br>
| |
| したがって、画像を使用したければ各キャリア別に画像を作成する必要がある。
| |
| <dl>
| |
| <dt>iモード</dt>
| |
| <dd>すべての世代のiモード端末に対応しているのはノンインターレースGIFのみ</dd>
| |
| <dd>画像データのファイルサイズはまちまちで、501iシリーズは最大5KB、902iシリーズは最大100KB</dd>
| |
| </dl>
| |
| <table class="rendering-mode" border="0" cellpadding="0" cellspacing="0">
| |
| <tr>
| |
| <th rowspan="2"></th>
| |
| <th colspan="6">
| |
| iモード対応HTMLバージョン
| |
| </th>
| |
| </tr>
| |
| <tr>
| |
| <th>1.0</th>
| |
| <th>2.0</th>
| |
| <th>3.0</th>
| |
| <th>4.0</th>
| |
| <th>5.0</th>
| |
| <th>6.0</th>
| |
| </tr>
| |
| <tr>
| |
| <th>ノンインターレースGIF</th>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>インターレースGIF</th>
| |
| <td>△※1</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>透過GIF</th>
| |
| <td>△※1</td>
| |
| <td>△※2</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>アニメーションGIF</th>
| |
| <td>△※1</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>JPEG</th>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>△※3</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| </table>
| |
| ○…対応<br>
| |
| ×…非対応<br>
| |
| ※1…ノンインターレースGIFとして表示<br>
| |
| ※2…カラー対応の機種のみ対応<br>
| |
| ※3…JPEG対応機のみ(N503i、N503iS、P503iS、N211i、R211i、SO211i、SH251i、SH251iS、R692i、FOMA2001、FOMA2002、FOMA2101V)<br>
| |
| <dl>
| |
| <dt>EZweb</dt>
| |
| <dd>ほとんどの機種で表示可能なのはPNG形式。近年の機種であればGIF、JPEG形式にも対応</dd>
| |
| <dd>GIF形式はインターレース、ノンインターレース、透過、アニメーションGIFに対応</dd>
| |
| <dd>JPEGは256色に対応していて257色以上の画像データは自動的に256色に減色</dd>
| |
| <dd>モノクロ2階調のビットマップ形式も利用可。カラーのビットマップはEZサーバ上でPNG形式に変換される</dd>
| |
| <dd>画像データの容量は最大9KB</dd>
| |
| </dl>
| |
| <dl>
| |
| <dt>SoftBank</dt>
| |
| <dd>PNG形式が使用可。JPEG形式はC2型は非対応。それ以外は表示可。</dd>
| |
| <dd>GIF形式はボーダフォンライブ!向けXHTMLに対応している3GC型で表示できる。</dd>
| |
| <dd>アニメーション画像は、PNG形式のファイルをimgタグのmotion属性を使って表現できる。対応している機種は3GC型を除くすべての機種。</dd>
| |
| <dd>JPEGを使ったアニメーション画像は、C3、C4、P、W型で使用できる。</dd>
| |
| <dd>P、W型などではPNG形式を拡張したMNG(Multiple-image Network Graphics)形式でアニメーションが表示できる。</dd>
| |
| <dd>クーポンなどの画像を再配布禁止にする場合には、jpeg→jpz、png→pnzにする。
| |
| </dl>
| |
| <table class="rendering-mode" border="0" cellpadding="0" cellspacing="0">
| |
| <tr>
| |
| <th rowspan="2" colspan="2"></th>
| |
| <th colspan="3">C</th>
| |
| <th colspan="2">P</th>
| |
| <th rowspan="2">W</th>
| |
| <th rowspan="2">3GC</th>
| |
| </tr>
| |
| <tr>
| |
| <th>C2</th>
| |
| <th>C3</th>
| |
| <th>C4</th>
| |
| <th>P4、P6</th>
| |
| <th>P6、P8</th>
| |
| </tr>
| |
| <tr>
| |
| <th rowspan="4">画像</th>
| |
| <th>PNG</th>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>JPEG</th>
| |
| <td>×</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| </tr>
| |
| <tr>
| |
| <th>MNG</th>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>○</td>
| |
| <td>×</td>
| |
| </tr>
| |
| <tr>
| |
| <th>GIF</th>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>×</td>
| |
| <td>△</td>
| |
| </tr>
| |
| </table>
| |
| </div>
| |
| <div class="section">
| |
| ==絵文字==
| |
| メールに関しては自動変換する方向に進んでいる模様。HTMLコンテンツ中の絵文字まで
| |
| 自動変換できるかどうかは不明。<br>
| |
| [http://k-tai.impress.co.jp/cda/article/news_toppage/30075.html ドコモ、auが絵文字変換サービスを開始 - ケータイウォッチ]
| |
| </div>
| |
| <div class="section">
| |
| ==アクセス制限(振り分け)==
| |
| ユーザーエージェントを見る方法と、使用しているIPアドレスの帯域を見る方法がある。<br>
| |
| ユーザーエージェントは詐称が可能(後述のFirefoxの拡張機能など)なため、絶対に特定のキャリアの端末以外がアクセスしてはいけないというようなサイトの場合はIPアドレスの帯域で振り分けを行う以外ない。iモードの公式サイトであれば端末固有の番号のようなことを見ることも可能。いわゆる勝手サイトの場合は不可能。
| |
| ===各キャリアの端末が使用するIPアドレスの帯域===
| |
| それぞれ開発者向けサイトで公開している。定期的に追加されている模様。<br>
| |
| 同じ端末が連続してアクセスした場合でもIPアドレスが異なる場合がある。
| |
| <dl>
| |
| <dt>NTT DoCoMo</dt>
| |
| <dd>[http://www.nttdocomo.co.jp/service/imode/make/content/ip/about/index.html#ip iモードサービスで利用するIPアドレス帯域]</dd>
| |
| <dd>
| |
| フルブラウザを搭載している端末の場合、iモードブラウザを使用している時と、
| |
| フルブラウザを使用している時で帯域が異なる。
| |
| </dd>
| |
| <dt>au</dt>
| |
| <dd>[http://www.au.kddi.com/ezfactory/tec/spec/ezsava_ip.html EZサーバのIPアドレス帯域]</dd>
| |
| <dt>SoftBank</dt>
| |
| <dd>[]</dd>
| |
| </dl>
| |
| </div>
| |
| <div class="section">
| |
| ==各種資料==
| |
| ===携帯キャリア 公式ガイド===
| |
| <dl>
| |
| <dt>NTT DoCoMo</dt>
| |
| <dd>[http://www.nttdocomo.co.jp/service/imode/make/ 作ろうiモードコンテンツ]</dd>
| |
| <dt>au</dt>
| |
| <dd>[http://www.au.kddi.com/ezfactory/index.html EZ Factory]</dd>
| |
| <dt>SoftBank</dt>
| |
| <dd>[http://developers.softbankmobile.co.jp/dp/ SoftBank Developers Support Site]
| |
| </dl>
| |
| ====各端末向けエミュレータ====
| |
| <dl>
| |
| <dt>NTT DoCoMo</dt>
| |
| <dd>[http://www.nttdocomo.co.jp/service/imode/make/content/html/tool.html iモードHTMLシミュレータI(900i以前向け)]</dd>
| |
| <dd>[http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2.html iモードHTMLシミュレータII(901i以降向け)]
| |
| <dt>EZ web</dt>
| |
| <dd>[http://www.au.kddi.com/ezfactory/tool/ue/index.html Openwave® SDK 6.2K]
| |
| <dt>SoftBank</dt>
| |
| <dd>[http://developers.softbankmobile.co.jp/dp/tool_dl/web/wcv.php ウェブコンテンツヴューア]</dd>
| |
| <dt>Firefox向け拡張機能</dt>
| |
| <dd>[https://addons.mozilla.org/firefox/59/ User Agent Switcher]</dd>
| |
| <dd>UserAgentを自由に変えて携帯電話向けサイトにアクセス(IPで制限かけている場合は意味なし)</dd>
| |
| </dl>
| |
| ===携帯端末向けサイト作成支援サービス===
| |
| <dl>
| |
| <dt>実機テスト</dt>
| |
| <dd>[http://mysta.jp/ 実機テスト|ケータイ・マイスタ]</dd>
| |
| <dt>携帯端末情報提供</dt>
| |
| <dd>[http://www.mobyrent.jp/ MOBYRENT(モビレント)]
| |
| </dl>
| |
| </div>
| |
|
| |
|
| </div>
| |