ケータイ用サイトを作って困ったことのメモ

ケータイ用のページを作成したので、備忘録です。

１）ケータイ用振り分けスクリプト

下記のサイト様のPHPをダウンロードして、利用させていただきました。

＞携帯振り分けＰＨＰ

ダウンロード、解凍後、index.phpの冒頭の振り分けURLにhttp://からの絶対パスを記入して、indexのある階層にアップロード
パーミッションを705に変更


２）キャッシュの問題

とりあえず自分の携帯でしか動作確認できないので、していたところ、
変更したのに反映されず、ページを更新しても変わらない・・・なんで？？かなり困りました。
検索したところ、auの場合、キャッシュがしつこく残っていてこの３行がどうやら有効みたいです。
というわけで＜head＞の中に入れる。
＜meta http-equiv="Pragma" content="no-cache" /＞
＜meta http-equiv="Cache-Control" content="no-cache" /＞
＜meta http-equiv="Expires" content="-1" /＞



４）ケータイ用サイトに地図を設置する

Googleの携帯用Map表示サービスを利用してタグを埋め込みます。

PC版の Google Maps API と違い、Javascript を必要としないので、携帯電話向けの Webページに貼り付けることができます。

下記のページを参考にしました
＞Google マップが携帯でも表示できるように
要するに、緯度と経度、マーカーの位置、縮小率、APIキーの４点を下記のサービスを使って割り出して、入れてあげるだけで大丈夫。

上記のページの通りにやってうまくいかなくて悩んでいたら
改行がだめなのですね（＾＿＾；。。。ソースの上で改行しないようにつなげて入れること。

＜img src="http://maps.google.com/staticmap?center=緯度と経度&markers=マーカーの位置,red&zoom=15&size=240x300&key=キー" /＞

＞ここで簡単に緯度と経度などの数字を取得できます

＞GoogleMapのAPIキーの取得はこちら


５）ケータイにて電話をかけるタグ（普通に知ってると思いますが）

telタグ　＜a href="tel:xxxxxxxxx"＞

６）xml宣言と文書型

文字コードはshift_jisが良いと言われていますが、今回はutf-8で。
xml宣言と文書型のひながたも載せておきます。

＜?xml version="1.0" encoding="UTF-8"?＞
＜!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" xml:lang="ja"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜meta http-equiv="Pragma" content="no-cache" /＞
＜meta http-equiv="Cache-Control" content="no-cache" /＞
＜meta http-equiv="Expires" content="-1" /＞
＜title＞タイトル＜/title＞
＜/head＞
＜body＞


６）ページ全体のマークアップをして、▲.htmlという名前で保存したら、FTPにてアップロード
１ページのサイズは10キロバイト以内と言われています。（かなりおおざっぱな説明ですが・・・詳しくは携帯電話各社に記載されてます）
Dreamweaverを使用してる場合は、ページの右下にそのページの画像を含んだ容量が出るのでわかりやすいですね。
今回作ってるページを見ると、5Kになってました。

（１）のPHPの振り分け先に、ケータイからのアクセスの行き先を▲.htmlに絶対パスで指定
.htaccessファイルにて、スラッシュ以下が省略された場合、index.phpを読みにいくように指定する

例えばこんなかんじ
DirectoryIndex index.php index.html index.cgi index.shtml /404.html


下記のサイト様を参考にさせていただきました。
＞携帯電話用ウェブサイトをつくりはじめた

７）せっかく携帯用にコンパクトなサイトを作ったのに、携帯Googleにて検索して出てくるページが、PC用になってしまう問題

携帯からURLでダイレクトにアクセスすると振り分けスクリプトが動いて、ケータイ用ページへリダイレクトしてくれます。
ところが、携帯Googleにて検索したときにヒットしたページからアクセスすると、PCサイトが表示されてしまいます。
これはGoogleさんが、PCサイトを勝手に（というかありがたいサービスなんですが）ケータイ用に変換してくれるんですね。
web標準で作っていて、なおかつimgの容量を極力少なくしておくと、PCサイトでもケータイでストレスなく読めるようにしてくれます。
でも、わざわざケータイ振り分けスクリプトをおいて、別画面を作ったんだから、携帯からのアクセスはこちらに行ってほしい。
というわけで探したところ、Googlewebマスターページに下記の件が載っていました。
Googleモバイル ヘルプセンター

Googleでは､携帯向けでないサイトを携帯電話の画面に合わせてコードを自動的に変換しております｡ウェブページを変換することを望まない場合は､ユーザーがトランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするようにGoogle にリクエストしてください｡ リダイレクトをリクエストするには､ページの HTMLファイルのセクションに次の行を含めてください｡

＜link rel="alternate" media="handheld" href="(モバイル向けURLアドレス)" /＞

というわけで、PCサイトに上記の１行を入れております。