motooLogue

Icon

「どうせアタシなんかよりも○○○○の方が大切なんでしょ……」の○○○○を探してやまないアル中のブログ。

TOP > 携帯用Webページ制作の覚え書き。

13:30 11.20.2008

携帯用Webページ制作の覚え書き。

もう何度も何度も人に説明するのが面倒になりました。
そりゃ、その都度注意点マニュアル作ってたら当たり前っすね。
てな感じなので、覚書作ってみました。

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;">

とか。

背景画像…

例えば、

&lt;div style="background:#333333 url(img_cmn/bg.jpg);"&gt;見出し</div&gt;

とかやりたい場合でも、DoCoMoはBODYタグ以外で背景画像を表示してくれません。
対応策・・・無いっす。
画像が無くても可読できる感じに仕上げる必要あります・・・。

絵文字について…

各キャリアで記述方法が変わります。なので、motooさんの場合は、

<?php
switch ( true ) {
case (DoCoMoです。):
$icon['new'] = '&#63874;';
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:ヤマダサン
てな感じでどうでしょう。

Category: MEMO

Tagged:

SimilarPosts:

One Response

  1. YOSHIUR@ケロッグマンオフィス より:
    2008/11/27 09:06

    モトヲ さま
    ご無沙汰しております。
    古いＰＣのブックマークにこのサイトが残っていたのでアクセスしてみたところ、お元気そうだったのでコメント書いています。
    携帯サイト関連で色々と開発をしておりまして、ＰＨＰのフレームワークCodeigniterをゴニョゴニョして「3キャリア対応の携帯サイトが簡単に出来るかも！」というフレームワーク的なものが完成しつつあります。
    ・絵文字対応
    ･セッション対応
    ・公式サイトばりのオートログイン対応
    もしも、お時間あるならプレゼンしたいのですが、いかがでしょうか？

Leave a Reply

Archives

Ad

TranslateThis