ウェブインコ

インコの技術メモ

携帯サイト

■Google Analytics を使用する。
ログインしてトップページ。
携帯用にプロファイルを作る。
「編集」をクリック。
「ステータスの確認」をクリック。
「詳細」タブをクリック。
「携帯電話向けのサイト」をチェック。
 PHP,Perl,JSP,ASPX のいずれかを選ぶ。
 コードを指定の場所に貼り付ける。2箇所あるので注意。
 ga.php をダウンロードしてルートディレクトリにアップロードする。パーミッションに注意。

■Google Map を使用する。
固定画像ですがkeyを取得(→http://code.google.com/intl/ja/apis/maps/signup.html)していれば表示できます。
Google Static Maps サンプル

<img src="http://maps.google.com/staticmap
?center=34.66893499630322,135.62626361846924
&markers=34.66893499630322,135.62626361846924,redc
&zoom=16&size=480x320
&key=ABQIAAAAFOBUio5H1UsiIv60zia_DBTs4tCkBFx4W-cQuJiAMfqUuMWx_BTo2ccUVi23pHuELom071E6eiZFXw"
width="240" height="160" class="imageframe"
alt="Google Static Maps サンプル" />


■CSS
DoCoMoはタグのオプションの位置に直接書き込む方法しかできません。
リンクの色指定だけは<head>で出来ます。

■DoCoMo、i-cssをつかうときの拡張子
ファイルの拡張子は .xhtml にしないといけません。
したくないときには、 .htaccess に以下の1行を書いて、DoCoMo用のルートディレクトリの中にでも入れて置きます。
AddType application/xhtml+xml .html

■DoCoMo、i-cssをつかうときのXML宣言
例えばバージョン2なら
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>?
DoCoMoは上とこの2点を踏まえないとcssが効きません。
XML宣言は表現したいCSSの種類によって選びます。バージョンが上がると表現の幅は広がりますが、対応機種は限られてゆきます。詳しくは↓
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html

■DoCoMoのマーキー(CSSを使うとしたとき)
<span style="display:-wap-marquee; background-color:#41bffa;";">知的な人が幸せでいるのは、私が知っている最もまれなことである。 アーネスト・ヘミングウェイ</span;">

■最近の文字サイズ
<span style="font-size:small";">大</span;">
<span style="font-size:xx-small";">小</span;">
これぐらいな感じです。2008.11.12現在

■hr
<hr style="height:2px; border-style:solid; border-color:#8f9807;">
特に携帯に限ったものでは有りませんが。

■背景色
<div style="background-color:#e9f8ff;">へ(-。-)ノ</div>
3キャリアとも幅いっぱいになります。

■背景画像
<div style="background-image:url(/img/hoge.gif);">へ(-。-)ノ</div>
DoCoMoは<body>タグにしか使えません。
au、SoftBankは<table><tr><td>の中にも書けます。

■画像の回り込み 3キャリア対応
<div><img src="hoge.jpg" align="left" style="float:left" /><span style="font-size:small">You'll never find rainbows if you're looking down.
もし下を向いたままならば、虹を決して見つけることはできないだろう。
チャーリー・チャップリン</span></div><div style="clear:both;"></div>

■画像の回り込みでauの絵文字は不可。
auの絵文字は<img>タグなのでボックス要素とみなされ、絵文字の後ろで改行されてしまいます。
どうしても使いたいときには<table>タグを使うしか有りませんが、文字数がはみ出た時に下に回りこんでくれません。

■画像の拡張子
最近では全部.jpgでいけますが、念のため。
DoCoMo .gif
au .jpg
SoftBank .png
どのみちgifしか表示できないDoCoMoの機種は容量制限も厳しすぎるので切り捨てて良いと思う。

■CSSでリンク色指定
<style type="text/css">
<![CDATA[
a:link{color:#FF0000;}
a:focus{color:#0000FF;}
a:visited{color:#009900;}
]]>
</style>
</head>
DoCoMoもこれだけは<head>で指定できるようです。

■.htaccess でキャリア振り分け

こんな感じのディレクトリ構成の場合。

public_html
├d (DoCoMo用ディレクトリ)
├a (au用ディレクトリ)
├s (SoftBank用ディレクトリ)
└.htaccess

↓.htaccessに書く

RewriteEngine On
# imode
RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo*.
RewriteRule ^$ /d/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo.*
RewriteRule ^(s|a)/(.*)$ /d/$2 [R,L]
# au
RewriteCond %{HTTP_USER_AGENT} ^.*KDDI.*
RewriteRule ^$ /a/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*KDDI.*
RewriteRule ^(s|d)/(.*)$ /a/$2 [R,L]
# jphone , vodafone
RewriteCond %{HTTP_USER_AGENT} ^.*(J\-PHONE|vodafone|softbank|Vemulator|MOT\-).* [NC]
RewriteRule ^$ /s/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*(J\-PHONE|vodafone|SoftBank|Vemulator|J-EMULATOR|MOT\-).* [NC]
RewriteRule ^(d|a)/(.*)$ /s/$2 [R,L]

■DoCoMo 背景色 i-css css xhtml
?拡張子は .xhtml
拡張子を変えることができない場合は、.htaccessに次の1行を書き足す。
AddType application/xhtml+xml .html

?ヘッダは以下の通り
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html

iモード対応XHTML 1.1
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">

iモード対応XHTML 2.0
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

iモード対応XHTML 2.1
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">

iモード対応XHTML 2.2
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN" "i-xhtml_4ja_10.dtd">

?サンプル
(DoCoMo以外では色付かない)

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html>
<head>
<title></title>
</head>
<body>

<div style="color: #FFFFFF; background-color: #FF0000;">
DoCoMo 背景色
</div>

</body>
</html>