読者です 読者をやめる 読者になる 読者になる

主に技術的なことを書くブログ

あくまでもデザイナーという方向で技術的なことをメモしていましたが、ざっくばらんに書くことにします。

2009年度版 携帯サイトのコーディングまとめ

Mobile

各キャリアがだいたい対応してきているというだけで、「XHTMLでコーディングしなければいけない」っていう理由がいまいちわからなかったんですが、いろいろ調べてみると、どうやら、CSSを使うためには、XHTMLでコーディングしないとダメで、携帯ではdocomoがIE的なポジションで、XHTMLじゃないとCSSが効かなかったり(インラインしかダメなくせに)いろいろ問題があるみたいです。

個人的には、こまかい文字サイズの違いとか、勝手に空いてしまう余白とかは、ある程度、携帯のせいにして、昔のPCサイトのコーディングみたいに、DOCTYPE宣言とかもなしで、原始的なHTMLでコーディングする感じでいいんじゃないかとも思います。

でも、会社で制作するとなると、そういうわけにもいかないので、一応、勉強しながらやってみようかな、と。

ただ、書いてることがあちこちで微妙に違ってて、結局、PCのコーディングと一緒で、人それぞれやり方が違うみたいで、調べれば調べるほど混乱しました。

以下の記事がけっこううまくまとまってる気がしたので、引用させてもらうと

WebTecNote - [XHTML] 携帯サイト用 XHTML仕様まとめ

  • XHTML Mobile Profile1.0
  • DOCTYPE宣言を省略しない。キャリア別に変更できるなら変更を推奨
  • 文字コードはShift-jis
  • iモードブラウザ1.0端末に対応する場合はstyle属性を使ってCSSを記述する
  • 要素を入れ子にする記述をなるべく避ける
  • PC98系機種依存文字を使用しない
  • スペース、タブ、改行の扱いに注意する
  • テキストのみで10kb以下、全体で100kb以下を目安にする

だいたい、こういう感じでやればいんじゃないかなと、思いました。

ただ、個人的には、容量は全体で50KB以下がベスト、できれば30KB以下を目指したいところですね。


3キャリア共通テンプレート

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=shift_jis" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>ページタイトル</title>
<style type="text/css">
a:link{color:#0075a9;}
a:visited{color:#eb6100;}
a:focus{color:#fff;}
div {margin: 0; padding: 0; border: 0;}
</style>
</head>
<body>

こんな感じでどうなんでしょう?

fontタグは使わずに、ほとんどdivとspanにstyle直書きという感じで、文字サイズは、x-smallとmediumぐらいしか使わない(機種によって、大きさが違うけど、このふたつは許せる感じ)。

あと、docomoはXHTMLのとき、拡張子が.xhtmlじゃないとだめらしく、以下の.htaccessを設置。

AddType application/xhtml+xml .htm .html

au端末はかなりキャッシュが残るらしく、更新したのに反映されないとかを防ぐために、ヘッド内に以下の一文を追加するといいかも。

<meta http-equiv="cache-control" content="no-cache" />

画像の横幅は240pxがぴったりだけど、一部の機種では勝手に縮小されて、画像がつぶれてしまうので、228pxにしておくのがベターかと。でも、隙間があくから、どっちもどっちという感じ。つぶれるか、隙間か、みたいな。

これで、絵文字を使わない携帯サイトなら、だいたい使い回せそうです。

その他の参考:
【mobile site】3キャリア共通XHTMLでコーディングしてみた
3キャリア共通のモバイルサイトコーディングにおけるポイント
ケータイ3キャリアに対応するためのDOCTYPE宣言について
モバイルサイトデザイン集のモバイルデザインアーカイブ