2009年02月12日
携帯サイト制作で気を付けるポイント、auで画像が表示されない解決法など
スポンサード リンク
昨年末にお客さんの携帯サイトを始めてphpで作ったのですが、その時にメモ帳にメモったことを忘れないように投稿しておこうと思います。
自分に向けたメモ的エントリーになりそうですが、これからケータイサイトを制作する人にも参考になるかと。
振り返ると、始めて携帯サイトを作ったのは２００２年頃と早かったんですよね。
まだ、制作会社で働いている時のことです。
その時は、イヤでしょうがなかったんですよね。ケータイサイト制作ってつまらなくて。。
機種ごとのチェックもたいへんだし、退屈な作業だったし。
当時はメーカーごとにhtmlが違っていて、chtmlとかもありましたが、今はxhtmlでドコモ、au、ソフトバンクモバイル共にOKです。
といっても、メーカーによって、タグの解釈が違ったりするという難点もあります。
その辺についてメーカーごとにまとめてみたいと思います。
au
・auはスタイルシートに関しては、かなり柔軟に対応してくれています。
・画像フォーマットはgif、jpg、pngともに対応しているが、jpgの場合はPhotoshopで「Web用に保存」する際に、「プログレッシブ」にチェックが入っていると表示されない。これは、メール添付した画像の場合も同様。
・文字コードは「Shift_JIS」。それ以外だと文字化けする。
・一段階フォントを小さくする場合は「x-small」を使う。
・外部スタイルシートでpタグ、ulタグ、liタグにスタイルを設定しても無視される。
・CSS（スタイルシート）のfloatプロパティには対応していないので、回り込みレイアウトをする時は、「align="left"」を使う。クリアは「<div clear="all" style="clear:both;">」と念のため２重に記述。
【キャリア公開情報サイト】
ドコモ（docomo）
ドコモは携帯サイトを作るにあたって、最大の関門です。というか、最大の問題です。。
というのも、制限が一番多いんですね。非常に作りづらい仕様になっています。制作者泣かせです。。
しかし、ドコモのシェアは約５０％と半分を占めているので、結局、ドコモに合わせて作るしかないというのが現状です。
・まず、ドコモでスタイルシートを使う場合は、xhtmlで書かなければなりません。その場合、一番重要なのが、「MIMEタイプ」です。
この設定を間違えると、全くうんともすんともいいません。逆に言うと、これさえクリアすれば、第一関門は突破です。「MIMEタイプ」で間違えると、すべてがダメです。
具体的には、ヘッダーのXHTMLのMIMEタイプを「application/xhtml+xml」にします。「text/html」じゃないですね。
つまり、ヘッダーに次のように書くということです。
<head/>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
</head/>
上のドコモのページに、「XHTMLのMIMEタイプは、application/xhtml+xmlとします。」と書いてあります。
もし、ファイルの拡張子を「.html」にしたいなら、「.htaccess」ファイルに次にように書きます。
AddType application/xhtml+xml .html
もし、phpでサイト構築するなら、DOCTYPE宣言の前に次のように書きます。
<?php header("Content-type: application/xhtml+xml"); ?>
<?php echo '<?xml version="1.0" encoding="Shift_JIS"?>'."¥n" ?>
僕は今回、phpで携帯サイトを構築したので、この記述をDOCTYPE宣言の前に書きました。
ちなみに、phpでサイトを構築するメリットは、共通部分を外部ファイルにして読み込むことができることです。まるで、ブログのように。
・DOCTYPEの記述法は「iモード対応XHTMLのバージョン」で説明しています。
XHTMLのバージョンによって、若干の変化があるようです。
しかし、ここで指定れているDOCTYPEでなくてもいけるようです。
ちなにも、僕はグーグルの携帯サイトが採用している下記のDOCTYPEを採用し、ドコモ携帯で確認しましたが、問題なく表示されました。
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
・CSS（スタイルシート）は、外部とhead内の記述は未対応。style属性によるインラインのみ対応。
・文字コードは「Shift_JIS」「UTF-8」に対応。
・pタグやdivタグでインラインstyle属性を使ってもCSS（スタイルシート）が反映されない。なぜかspanタグならOK。
【キャリア公開情報サイト】
↓キャリア公開情報ではないですが、このサイトも参考になります。
ソフトバンクモバイル
・ソフトバンクモバイルは個人的には安定しているというか、懐が深い印象を受けた。問題を起こさない子という感じです。
・ulタグにインラインスタイルシートを書くと、2008年初頭に発売された機種では無視されたので、なるべくdivにインラインスタイルシートを書いた方がいい。
【キャリア公開情報サイト】
その他
・tableタグに対応していない端末もあるらしい。
・古い機種だと、画像のファイル容量が10kを超えると見れないこともあるらしい。
・画像サイズは横幅240pxがよい。paddingのことも考慮すると、220pxくらいがいいかも。
・以下の書き方だとfloatが効かない。
<p><img src=""></p>
<p>テキスト</p>
なので、
<p><img src="">テキスト</p>
と記述する。
そして、先ほども書いたようにauはfloatが効かないので、インラインCSSで「style="float:left;" align="left"」と書くことになってしまう。
追伸（2009年7月12日）
先日、この本を買って読みました。
携帯サイト コーディング&デザイン
高木 悠介
この本、素晴らしいです。というか、もっと早く読んでいれば、どれだけ時間を節約できたことか。。
僕はここに書いた情報を得るまでにすごい時間がかけたんですよね。
もう、調べまくって、携帯でチェックしまくりました。
パケット代もすごいことになっていましたし、僕が使っていないキャリアを使っている友達にも協力してもらったりして、すごい労力と時間がかかってしまいました。
でも、この本に全部書いてありますよ。。
2008年12月に発売されていたのに。。
というわけで、これから携帯サイトをはじめて作る人は、まずこの本に目を通しておくことをオススメします。
時間の節約を考えると、かなりやすい買い物です。僕のように無駄に時間ばかりかけてしまうと、利益が出なくなってしまいますからね。。というか、赤字ですよ。。
#
最後に、今回の記事は自分しか分からないメモ書きのようになってしまったので、下記にモバイルサイト制作で参考になるサイトのリンクも載せておきます。
参考にどうぞ！
Openwave SDK Universal Edition Quick Start Guide
携帯サイトを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
livedoorディレクターblog：モバイルサイトのCSS
ke-tai.org ケータイサイト開発のためのコミュニティサイト
OK Wave：ドコモだけPHPを介すとスタイルシートが効かない
サイバー・メディアブログ - Docomo 携帯向け CSS 記述方法
それにしても、メーカーごとでhtmlタグやCSSの解釈に違いがあるのは問題だと思いますよ。。
昔のパソコン用サイトを思い出します。。
なんとかしてほしいものですね。
スポンサード リンク
