2008年12月12日金曜日

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

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

1)ケータイ用振り分けスクリプト

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

>携帯振り分けPHP

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


2)キャッシュの問題

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



4)ケータイ用サイトに地図を設置する

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

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

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

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

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

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

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


5)ケータイにて電話をかけるタグ(普通に知ってると思いますが)

telタグ <a href="tel:xxxxxxxxx">

6)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>


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

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

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


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

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

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

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

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


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

webの森のFBページへも来て下さい