携帯サイトを簡単に作るコツ
評判良かったので大幅に加筆訂正してみました。
ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。
間違いが含まれている可能性が非常に高いです。
突っ込み大歓迎。
前提
キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。
なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。
長くなるので最初にまとめ
・文字コードはUTF-8。
・マークアップ言語はXHTML Basic。
・画像はJPEGかGIF。
・CSSはインラインで書く。
・ページサイズはXHTML9KB以内、画像含めてで100KB以内。
以下、なぜそうするのかの理由
携帯の分類
サイト制作者の視点から、世の中の携帯を大まかに分けるとこんな感じになります。
・au (3G)
・Docomo FOMA (3G)
・Docomo mova (2G)
・Softbank 3G
・Softbank 2G(W型P型C型など)
auの2Gはほとんどユーザーがいないので無視します。
movaとSoftbank 2Gはナウじゃないので、とりあえず今回はあまり対応を意識しません。
ユーザー数そこそこいるんですけどね…（詳しくは最後の契約者情報参照）
まあ、頻繁にウェブにアクセスするユーザー層ではないだろうという憶測で切り捨てます。
文字コード
悩みの種のモバイルの文字コードですが、実はShift-JISじゃなくていいんですね。
僕のauではtwitterが文字化けするのですが、どうやらUTF-8に対応していないからではなくて、エンコード指定が正しくできていないからのようです。（どこが原因なのか不明）
１年前の資料ですが、movaを除いて、ほとんどの端末はUTF-8対応しているみたいです。
http://miniturbo.org/memo/2006/12/29/034842/
auなんて技術情報に「EZwebでサポートする文字コードはShift-JISです」なんて書いてあるのに…
利根川先生風に言うと「Shift-JISをサポートしているとは言ったが、UTF-8をサポートしていないとは言っていない！」という感じでしょうか…
もちろんShift-JISの方がmova等をカバーできて素敵なのですが、文字コード変換かませるのはいろいろとめんどくさい + mova対応のためには同時にHTML変換も必要になるので…（詳しくは下のマークアップ言語の項目を参照）
マークアップ言語
基本的にXHTML Basicで。
auは基本的にそれでOKです。
docomoはfomaはOKでmovaだと対応していないです。
softbankは3GとW型はOKですがP型C型は対応してないです。
DOCTYPE宣言はそれぞれのキャリアで異なるので、そこは切り替えて下さい。（たぶんDOCTYPE宣言しなくても動くと思いますが）
これもHTMLの方が対応している端末が多いので与力があればHTMLに直してもいいんですけどね…
ただHTMLで書く一番大きなメリットとしてはmovaの対応が出来ると言うことなのですが、上にも書いたようにdocomoのHTMLはUTF-8に対応していないため文字コードをShift_JISに直すのも同時に行わなければいけなくなります。
softbankもHTMLで書くと2G端末をカバー出来ますが、同じく2G端末だとP4型とW型を除いてUTF-8に対応していないのでShift_JIS変換が必要になります。
画像
基本的にJPEG or GIFでOK。
PNGだけはdocomoが対応していないのでNG。
（2G端末の場合でも、多くの場合は場合JPEGにしておけば問題ナシです。GIFはsoftbankのW型以前非対応）
とか書いてたら既に3G携帯端末対応ウェブページについてまとめている人がいた
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合
http://labs.unoh.net/2007/07/3g.html
思いっきり内容がかぶってますね。
上記エントリーにはページサイズの制限などについて書かれてます。
というわけで、ウノウラボのエントリーで触れられていないポイントについて
auとsoftbankの3GとW型は基本的にでCSS対応しているのですが、DocomoのCSSはi-CSSとかいう微妙な規格なので、なんと基本的にインラインのCSSにしか対応していません。（movaはCSS非対応）
外部読み込み出来ないし、headの中に書いてもダメなのです。
ドコモ、softbank、auの３G携帯対応WEBページ制作 - へたぷろ - 楽天ブログ（Blog）
http://plaza.rakuten.co.jp/yamamoto2/diary/20070513/
ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース - TokuLog 改め だまってコードを書けよハゲ
http://d.hatena.ne.jp/tokuhirom/20070809/1186617282
なんとまあ…
とりあえずdocomo対応するために、モバイル向けのテンプレートではCSSはインラインで書くしかなさそうです。
最後にもう一度まとめ
・文字コードはUTF-8。
・マークアップ言語はXHTML Basic。
・画像はJPEGかGIF。
・CSSはインラインで書く。
・ページサイズはXHTML9KB以内、画像含めてで100KB以内。
で、最近の端末はだいたいカバーできるはず。
movaとかsoftbank 2Gにも対応するのであれば、Shift_JIS + HTML + JPEG でCSSを使わない超シンプルなページを救済措置的に別に作るのがベターですかねー。
古い端末はページサイズ制限が厳しかったりしてほとんどまともに作れないんですけどね…
http://pub.studio15.jp/2008/02/04/mobile-website-2008-2/より引用 すみません(^-^;)
ちょっと昨日、一昨日と携帯向けサイトを作っていたのですが、最近の携帯電話事情がわからず、どういうタグを使えばいいのかとか、CSSは対応しているのかとか、文字コードの問題はどうするのかとかいろいろわからないところが多かったので、ちょっと自分なりに調べてまとめてみます。
間違いが含まれている可能性が非常に高いです。
突っ込み大歓迎。
前提
キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。
なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。
長くなるので最初にまとめ
・文字コードはUTF-8。
・マークアップ言語はXHTML Basic。
・画像はJPEGかGIF。
・CSSはインラインで書く。
・ページサイズはXHTML9KB以内、画像含めてで100KB以内。
以下、なぜそうするのかの理由
携帯の分類
サイト制作者の視点から、世の中の携帯を大まかに分けるとこんな感じになります。
・au (3G)
・Docomo FOMA (3G)
・Docomo mova (2G)
・Softbank 3G
・Softbank 2G(W型P型C型など)
auの2Gはほとんどユーザーがいないので無視します。
movaとSoftbank 2Gはナウじゃないので、とりあえず今回はあまり対応を意識しません。
ユーザー数そこそこいるんですけどね…（詳しくは最後の契約者情報参照）
まあ、頻繁にウェブにアクセスするユーザー層ではないだろうという憶測で切り捨てます。
文字コード
悩みの種のモバイルの文字コードですが、実はShift-JISじゃなくていいんですね。
僕のauではtwitterが文字化けするのですが、どうやらUTF-8に対応していないからではなくて、エンコード指定が正しくできていないからのようです。（どこが原因なのか不明）
１年前の資料ですが、movaを除いて、ほとんどの端末はUTF-8対応しているみたいです。
http://miniturbo.org/memo/2006/12/29/034842/
auなんて技術情報に「EZwebでサポートする文字コードはShift-JISです」なんて書いてあるのに…
利根川先生風に言うと「Shift-JISをサポートしているとは言ったが、UTF-8をサポートしていないとは言っていない！」という感じでしょうか…
もちろんShift-JISの方がmova等をカバーできて素敵なのですが、文字コード変換かませるのはいろいろとめんどくさい + mova対応のためには同時にHTML変換も必要になるので…（詳しくは下のマークアップ言語の項目を参照）
マークアップ言語
基本的にXHTML Basicで。
auは基本的にそれでOKです。
docomoはfomaはOKでmovaだと対応していないです。
softbankは3GとW型はOKですがP型C型は対応してないです。
DOCTYPE宣言はそれぞれのキャリアで異なるので、そこは切り替えて下さい。（たぶんDOCTYPE宣言しなくても動くと思いますが）
これもHTMLの方が対応している端末が多いので与力があればHTMLに直してもいいんですけどね…
ただHTMLで書く一番大きなメリットとしてはmovaの対応が出来ると言うことなのですが、上にも書いたようにdocomoのHTMLはUTF-8に対応していないため文字コードをShift_JISに直すのも同時に行わなければいけなくなります。
softbankもHTMLで書くと2G端末をカバー出来ますが、同じく2G端末だとP4型とW型を除いてUTF-8に対応していないのでShift_JIS変換が必要になります。
画像
基本的にJPEG or GIFでOK。
PNGだけはdocomoが対応していないのでNG。
（2G端末の場合でも、多くの場合は場合JPEGにしておけば問題ナシです。GIFはsoftbankのW型以前非対応）
とか書いてたら既に3G携帯端末対応ウェブページについてまとめている人がいた
ウノウラボ Unoh Labs: 3G携帯のみに限定したサイトを作る場合
http://labs.unoh.net/2007/07/3g.html
思いっきり内容がかぶってますね。
上記エントリーにはページサイズの制限などについて書かれてます。
というわけで、ウノウラボのエントリーで触れられていないポイントについて
auとsoftbankの3GとW型は基本的にでCSS対応しているのですが、DocomoのCSSはi-CSSとかいう微妙な規格なので、なんと基本的にインラインのCSSにしか対応していません。（movaはCSS非対応）
外部読み込み出来ないし、headの中に書いてもダメなのです。
ドコモ、softbank、auの３G携帯対応WEBページ制作 - へたぷろ - 楽天ブログ（Blog）
http://plaza.rakuten.co.jp/yamamoto2/diary/20070513/
ドコモでも CSS を外部参照を使える HTML::DoCoMoCSS をリリース - TokuLog 改め だまってコードを書けよハゲ
http://d.hatena.ne.jp/tokuhirom/20070809/1186617282
なんとまあ…
とりあえずdocomo対応するために、モバイル向けのテンプレートではCSSはインラインで書くしかなさそうです。
最後にもう一度まとめ
・文字コードはUTF-8。
・マークアップ言語はXHTML Basic。
・画像はJPEGかGIF。
・CSSはインラインで書く。
・ページサイズはXHTML9KB以内、画像含めてで100KB以内。
で、最近の端末はだいたいカバーできるはず。
movaとかsoftbank 2Gにも対応するのであれば、Shift_JIS + HTML + JPEG でCSSを使わない超シンプルなページを救済措置的に別に作るのがベターですかねー。
古い端末はページサイズ制限が厳しかったりしてほとんどまともに作れないんですけどね…
http://pub.studio15.jp/2008/02/04/mobile-website-2008-2/より引用 すみません(^-^;)
携帯の押すボタンを考えたURL
携帯でURLを直接押すと、何度も押さないといけない。
わかりやすいドメインでも、回数が多くなることがある。
このページでは その回数を計測することが出来る。
http://ours.be/w/phpwhois/mstrokes.php
わかりやすいドメインでも、回数が多くなることがある。
このページでは その回数を計測することが出来る。
http://ours.be/w/phpwhois/mstrokes.php
携帯のランキングサイトを考える
携帯サイトで良くあるのが、ランキングサイト
淡い期待を持ってクリックしたモノの
リンク先がまたランキングサイトになっている。というかランキングサイトのリンク先がすべて
ランキングサイトになっている。これはひどい。ユーザーの時間を無駄にさせている。
これは検索エンジンスパムにならないのか、というと、ならないようだ
ロボットは HTMLの情報をインデックスするため、スクリプトには目もくれていない
だからスクリプトを使ったページは、乱暴なリンクの仕方をしても それがコンテンツ自体だから
許されるんじゃないだろうか？？
淡い期待を持ってクリックしたモノの
リンク先がまたランキングサイトになっている。というかランキングサイトのリンク先がすべて
ランキングサイトになっている。これはひどい。ユーザーの時間を無駄にさせている。
これは検索エンジンスパムにならないのか、というと、ならないようだ
ロボットは HTMLの情報をインデックスするため、スクリプトには目もくれていない
だからスクリプトを使ったページは、乱暴なリンクの仕方をしても それがコンテンツ自体だから
許されるんじゃないだろうか？？
携帯会社の文字コードについて
AU・・シフトJIS
ドコモ・・シフトJIS・UTF-8
である。ソフトバンクは知らね。
EUCで記述しちゃった場合、携帯電話は読み込めないことになる。
困った門だ。
ということで
●HTMLの中にPHPを書くのも
●PHPの中にHTMLを書くのも
携帯では出来ないことになる。なんせEUCでないとサーバーが読み込めないのだから。
ドコモ・・シフトJIS・UTF-8
である。ソフトバンクは知らね。
EUCで記述しちゃった場合、携帯電話は読み込めないことになる。
困った門だ。
ということで
●HTMLの中にPHPを書くのも
●PHPの中にHTMLを書くのも
携帯では出来ないことになる。なんせEUCでないとサーバーが読み込めないのだから。
携帯の検索サイトのシェアランキング
▼モバイル検索エンジンのシェアランキング2008
1位：Yahoo!モバイル(51.5%) http://mobile.yahoo.co.jp/
2位：Googleモバイル(51.0%) http://mobile.google.jp/
3位：gooモバイル（9.7%） http://mobile.goo.ne.jp/
4位：MobileSearch!（9.2%） http://m-search.jp/
5位：infoseekモバイル（7.8%） http://m.infoseek.co.jp/
6位：F☆ROUTE（6.3%） http://froute.jp/
7位：BIGLOBEサーチ（4.4%） http://kbg.jp/
8位：R25式モバイル（3.4%） http://r25.jp/
9位：SeafTyy（3.4%） http://seaftyy.jp/
10位：ixen（2.9%） http://ixen.jp/
10位：CROOZ!（2.9%） http://crooz.jp/
10位：ファイルシーク（2.9%） http://fileseek.net/
MCFの2008年ケータイ白書より
