手っ取り早く携帯サイトを作成する時のhtmlテンプレート
最近phpをいじるがてら、ひさびさに携帯サイトに触れているためメモメモ。
携帯サイトで装飾を入れるとなるとi-cssが云々って話があったりしますが、正直テストサイトでそんな面倒なことをしていられないので、だいたい以下のようなhtmlで作成しています。
とりあえず携帯サイト作りたい時テンプレート
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
<meta name="description" content="ディスクリブション文章" />
<meta name="keywords" content="メタキーワード" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>サイトタイトル</title>
</head>
<body bgcolor="#FFFFFF" vlink="" link="" alink="" text="">
<font size="-2">
<marquee bgcolor="#666666">
<font size="-2" color="#FFFFFF">マーキー文章</font>
</marquee>
<div align="center">
<img src="./img/logo.gif" /><!-- ロゴ画像 -->
</div>
<table width="100%">
<tr>
<td bgcolor="#666666" align="center"><font color="#ffffff" size="-2">インフォメーション</font></td>
</tr>
</table>
サイトの概要文章<br />
サイトの概要文章<br />
サイトの概要文章
<table width="100%">
<tr>
<td bgcolor="#666666" align="center"><font color="#ffffff" size="-2">メイン</font></td>
</tr>
</table>
サイトのメイン文章<br />
サイトのメイン文章<br />
サイトのメイン文章
<hr />
<table width="100%">
<tr>
<td bgcolor="#CCCCCC" align="center"><a href="http://" accesskey="0"><!-- トップページURL -->
<font size="-2">(c)2010 - サイトタイトル</font></a>
</td>
</tr>
</table>
</font>
</body>
</html>
文字コードについて
phpを触っているとイラっとすることが多いShift_JISに。UTF-8とかだと一部機種で文字化けするためやむを得ず。
ただ、絵文字を扱うことを考えるとSJIS-WINが良いらしいです。前に詰まって放置してることなのですが、ちゃんと絵文字変換のスクリプトとかも扱いたい人は「SJIS-WIN 携帯」とかでぐぐると幸せになれると思います。
DOCTYPEについて
「DOCTYPEをこれにすれば、携帯検索エンジンから携帯サイト扱いされる」みたいな話がありますが、2009年秋ぐらいからGoogleモバイルもマシになってきているようなので、厳密にこれにしないとダメって話はない気がします。
一応上記のDOCTYPEとか、モバイルっぽいものにしておけば無難。厳密に調べたい人はGoogleのドキュメントを読むと良いのでないでしょうか。
http://www.google.com/support/webmasters/bin/answer.py?hl=jp&answer=72462
キャッシュを消す
サイトの手直しをしていると、「あれ？更新内容が反映されない。(特にau)」って場合は、端末にキャッシュが残っている時なので、下記のコードをhead内に書いといて、キャッシュを消しておくようにします。
<meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" />
細かい話はこの記事等を参考にすると良いと思います。
http://blog.tofu-kun.org/071207110211.php
フォントサイズについて
実際はいろいろ面倒な話があるようですが、font size="-2"でだいたいカバーできるので、とりあえずの時はこれで良いんじゃないでしょうか。
フォントサイズ-2にする理由については、昔いろいろとこの記事に書きました。
http://d.hatena.ne.jp/moba13/20090421/1240319098
一部背景色を変えたい時。
これまた下記記事でいろいろ書きましたが、ぶっちゃけtableタグで十分だと思います。
http://d.hatena.ne.jp/moba13/20080422/1208853787
たしかドコモの902シリーズからtableタグに対応しており、auはもっと前から対応していたはずなので、8割9割方tableタグで問題ないです。
ちなみに横のレイアウトを組みたいときも、tableを使っています。こんなかんじ。
<table width="100%"> <tbody><tr> <td width="80"> <img alt="" src="" height="60" width="80"> </td> <td> <font size="-2"> <a href="">---</a> </font> </td> </tr></tbody> </table>
絵文字について
「oshima」というソフトでドコモ絵文字のものを利用しています。
http://www.vector.co.jp/soft/winnt/net/se240690.html
ドコモ・au間は、絵文字の相互変換がそこそこちゃんとされますが、ソフトバンクでは絶望的に違う絵文字に変換されることがあります。ただ、シェアが低いSBガラケーは華麗にスルーしておkであれば、このソフトで対応してしまいます。
最後に
「個人で作るサイトなんで、古い携帯とか知りません！ ソフバ？みんなiPhoneでしょ？」という場合は、こんなレベルのhtmlで良いんじゃないでしょうか。細かいこと(各タグの対応端末とか)が知りたい人は、以下のような書籍を購入されるのが良いのではないかと。
最近残念なことは、はてな界の神ガラケーサイト運営者maikatanがガラケーサイトに関する記事を書いてくれないことです。この記事とかよかったですよね。
■携帯サイトのアクセスアップ、リリース1週間で1日2万PVにする方法
http://d.hatena.ne.jp/taan/20100408/p1
その他携帯コーディングについて、読むとお得な記事
■永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）
http://design.kayac.com/topics/2010/09/mobile-template.php
■一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)
http://d.hatena.ne.jp/mobile_design/20100215/p1
(2010/09/21追記)携帯でのtableタグについて
なにやらすさまじい記事がUPされていたので、リンクしておきます。Livedoorさんパネェです！
■ケータイサイトのtableタグの特徴と、5つのデザイン例＆ソース
http://blog.livedoor.jp/ld_directors/archives/51504303.html
参考までに、月間120億PVあるケータイ livedoor調べでは、table対応端末の割合は99.2％、非対応の割合は0.8％と、ほぼtable対応端末で閲覧されているので、いろいろなサイトで利用しています。
ぉー、体感95%は行ってると思ったら実際はそんなところなんですね。よく「今の携帯シェア的に古い携帯はまだまだ多いから・・」なんていう話があるとは思います。
ただ実際のところ、携帯webを使う人がそんな古い端末を利用しているわけがないんですよね。古い端末を利用しているのは、電話やメールしか利用しないユーザーのはずです。
というわけで、tableタグについて素晴らしいまとな記事のご紹介でした。
よろしければ
twitterもやっています。よろしければフォローしてください。
http://twitter.com/ry_tan
