- 2008年11月20日 13:30
- MEMO
もう何度も何度も人に説明するのが面倒になりました。
そりゃ、その都度注意点マニュアル作ってたら当たり前っすね。
てな感じなので、覚書作ってみました。
Webページの確認...
iモード：iモードHTMLシミュレータ、iモードHTMLシミュレータII
au：Openwave® SDK 6.2K
SoftBank：ウェブコンテンツヴューア
全部Windows用です。悪しからず。
ページサイズ上限...
HTML＋画像で10KB。今時の機種は100KBでも表示できるけど、ちょい古めの機種だと10KBとか12KBという縛りがあるので、いろいろ機種別の対応するよりは10KBで制作した方が気が楽。
HTTPヘッダー...
通常のHTMLだと「Content-type: text/html」で出力されるけど、FOMAの場合、これだとXHTMLだと認識してくれない。というか、CSSが使えない。イコール<div style="hogehoge">～</div>が使えない。
なので、PHPでFOMAだけを判定して、「Content-type: application/xhtml+xml」で出力する必要がある・・・。
THANKS:スガワラサン
画像について...
写真などの画像についてはJPEGでオッケー。
ただし、地図やロゴなど、JPEGよりGIFの方が好ましい画像の場合はGIFにしたい。・・・しかしながら、auやSoftBankでは標準的にPNGの使用が強いられます。
なので、GIF＆PNGの画像を準備して、PHPで画像の読み分けをする必要あり。
スタイルシートについて...
基本、FOMAは外部CSSを読んでくれません。
HEADタグ内に書いたCSSも読んでくれません。
なので、
<div style="hogehoge">ほげほげ</div>
<span style="hogehoge">ほげほげ</span>という記述が強いられます、トホホ。
例外：
<style type="text/css">
<!--
a:link { color:#ffcc00;}
a:visited { color:#ffcc00;}
-->
</style>という、疑似クラスだけはHEADタグ内に記述しても認識してくれます。
古い記述と新しい記述の併記...
たとえば
<center>ほげほげ</center>だと、FOMAではセンタリングしてくれません。
<div style="text-align:center">ほげほげ</div>だと、MOVAでセンタリングしてくれません。
なので、併記する必要があります・・・。
例えば
<div style="text-align:center"><center>ほげほげ</center></div>とか、
<span style="color:#ff0000"><font color="#ff0000">ほげほげ</font></span>とか、
<head>
<style type="text/css">
<!--
a:link { color:#ffcc00;}
a:visited { color:#ffcc00;}
-->
</style>
</head>
<body bgcolor="#000000" text="#ffffff" link="#ffcc00" vlink="#ffcc00" style="background-color:#000000;color:#ffffff;">とか。
背景画像...
例えば、
<div style="background:#333333 url(img_cmn/bg.jpg);">見出しとかやりたい場合でも、DoCoMoはBODYタグ以外で背景画像を表示してくれません。
対応策・・・無いっす。
画像が無くても可読できる感じに仕上げる必要あります・・・。
絵文字について...
各キャリアで記述方法が変わります。なので、motooさんの場合は、
<?php
switch ( true ) {
case (DoCoMoです。):
$icon['new'] = '廬';
break;
case (SoftBankです。):
$icon['new'] = '$F2';
break;
case (auです。):
$icon['new'] = '<img localsrc="334">';
break;
default:
$icon['new'] = '[NEW]';
}
?>
NEWアイコンは「<?=$icon['new']?>」だ！！なんてやってます。
絵文字については、作ろうiモードコンテンツ：絵文字記述方法 | サービス・機能 | NTTドコモ、KDDI au: 技術情報 > 絵文字、WEB & NETWORK 絵文字一覧 使用方法を参照してください。
※Shift_JISのテキスト入力は推奨しないとありますが、クソくらえ。
ページ内アンカーについて...
一般的には
<a name="here"></a>なんて書きますが、FOMAでは認識せず・・・。
仕方ないので
<a name="here" id="here"></a>って書いてます。
マーキーについて...
PCでマーキー使ってたら「氏ね」なんて言われそうですが、携帯という視界が狭いメディアでは未だに有効。
でもやっぱりFOMAだとMARQUEEタグを認識してくれません・・・。
仕方ないので
<span style="display:-wap-marquee;-wap-marquee-style:scroll;-wap-marquee-loop:16;-wap-marquee-dir:rtl;">流れます・・・</span>って書きます。
アクセスログ解析について...
PCのWebだと、GoogleAnalyticsを使ってるんですが、モバイルはまだ未対応。つか、対応する気もなさげ・・・。
なので、futomi's CGI Cafe 高機能アクセス解析CGIを利用してます。
お！？google analytics モバイルに組み込むってやり方もあるんですね・・・やったこと無いけど。
THANKS:ヤマダサン
てな感じでどうでしょう。
