Mobile Archive

モバイル向けサイトをGoogleモバイル検索にインデックスしてもらうのに
どうすればいいのかと思ったら、モバイルのクローラー向けにsitemapを
用意してあげればいいということだった。

Continue reading

WordPressには「Google XML Sitemaps」という、XMLサイトマップを簡単に作成して更新できる便利なプラグインがある。（WordPressのプラグインを使ってサイトマップを生成する）

でも、これをただこのまま利用しているだけではモバイル向けの「モバイルサイトマップ」には対応出来ない。（らしい）

なので、『Google Sitemap Generatorをモバイルサイトマップに対応させる』を参考に、自分でGoogle XML Sitemapsのソースを編集し、モバイルサイトマップに対応させる。

Continue reading

これも「PHP×携帯サイト デベロッパーズバイブル」を参考に。

現状で、いわゆる「常識」とされる部分について、超基本的なところをあらためてメモ。クライアントに説明する際にも、ざっとこのあたりを示すことが出来るとプレゼン等、進めやすいことがあるので。

Continue reading

ローカルでの、自分で php.ini を編集できる環境ではいいけれど、レンタルサーバではそれが出来ないので、以下のように .htaccess を使って、モバイルサイトを制作するにあたっての各項目の設定を変更する。

.htaccessで設定した項目

（これは php4 の場合。5の場合は mod_php5.c とすればいい）

<IfModule mod_php4.c>

# セッションIDを保存するのにCookieを使用するかどうか
# 携帯では基本的にCookieを利用出来ないのでオフに
php_value session.use_cookies 0

# URLにセッションIDを付加するかどうかを指定
# 携帯ではCookieにセッションIDを保存できないので、これはオン
php_value session.use_trans_sid 1

# 内部文字エンコーディングの設定
# 携帯の特殊文字にも対応出来るようにeucJP-winを使用する
php_value mbstring.internal_encoding eucJP-win

# 自動文字エンコーディングの検出の順番を設定
# モバイルサイトは幅広い文字に対応する必要があるので、eucJP-winとSJIS-winを利用する
# そのために検出の順番を明確に定義しておく
php_value mbstring.detect_order SJIS-win,eucJP-win,JIS,UTF-8,ASCII

</IfModule>

以下の５つの項目については、ホスティング先の設定がすでにそうだったので、今回はとくに指定しなかった。（イコールは、あくまでもphp.ini上での表記で、この.htaccessでの設定では使わない）

• session.use_only_cookie = 0
• mbstring.language = Japanese
• mbstring.http_input = pass
• mbstring.http_output = pass
• mbstring.encoding_translation = Off

＊注意：
mbstring.detect_order のところは、文字コード名を繋ぐカンマの後に半角スペースとか入れてはだめ（エラーになる）

iモードHTMLとiモードXHTMLを正しく切り替える方法より引用。

『ちなみに、ドコモ向け端末において、XHTMLモード（iモードXHTML）で表示させる場合、
拡張子は「xhtml」でなければならないという解説をしているところもありますが、それは間違いです。
Webサーバーにおいては拡張子はそれほど重要ではなく、
問題はその拡張子がどのようなコンテンツMIMEタイプであり、どんなHTTPヘッダが出力されるか
ということのほうが重要です。

上記例（htaccess）では、「.html」という拡張子においてはHTTPヘッダ
は「application/xhtml+xml」にせよ、という明示なので、この設定がなされていれば、Webサーバーは拡張子htmlで、「application/xhtml+xml」というHTTPヘッダを出力するようになるので、
ドコモの機種はXHTMLモードに切り替わります。』

参照記事：携帯サイトの文字コードに気をつける

Shift_JIS

基本的に日本でモバイルサイトを制作する際には、文字コードはShift_JISを利用する。

出力文字コードはSJIS-win

モバイルサイトで絵文字を扱うには、各キャリアの絵文字が設定されている「外字領域」を含んだ文字エンコードを利用する必要がある。

PHPの場合では、それは「SJIS-win」になる。SJIS-winはShift_JISに比べて扱える文字種が増えていて、キャリアごとの絵文字領域もカヴァーしている。そのため、PHPでモバイルサイトを作成する場合にはShift_JISではなく、SJIS-winを使用する。

内部文字コードはeucJP-win

内部文字コードにEUC-JPを利用している場合（ソースファイル、プログラムファイルをEUC-JPで作成している場合）は「eucJP-win」を利用する。（これも出力文字コード同様、絵文字領域をカヴァーするため）

＊ php.ini の「mbstring.internal_encoding」項目において、内部文字エンコードに「eucJP-win」を指定してやる。

UTF-8

UTF-8の場合は、これは絵文字領域もカヴァーしているらしいので、とくに意識する必要はないらしい。
（内部文字コードはUTF-8を指定して、ソースファイルの文字コードもUTF-8使って、んで出力の場面でのみ mb_internal_encoding を使って出力文字コードに SJIS-win してやればいいってこと？試してないけど）

例外（SoftBankの3GC型）

SoftBankの3GC型端末では、文字コードを SJIS-win ではなく、UTF-8 で出力しないと不具合が起こるらしい。なので、通常の携帯端末へは SJIS-win で出力、SoftBankの3GC型端末のみ UTF-8 で出力という出し分けを行う必要がある、らしい。

PEARのNet_UserAgent_Mobileを使った場合の処理例

<?php
// Net_UserAgent_Mobile
require_once('Net/UserAgent/Mobile.php');
 
// Net_UserAgent_Mobileをインスタンス化
$agent = Net_UserAgent_Mobile::singleton();
 
// 出力する文字コードを変換
// SoftBankの3GC型端末はUTF-8に、それ以外はSJIS-winに変換
if ($agent->isSoftBank() && $agent-> isType3GC()) {
mb_convert_variables(mb_internal_encoding(), 'UTF-8', $_POST);
mb_convert_variables(mb_internal_encoding(), 'UTF-8', $_GET);
} else {
mb_convert_variables(mb_internal_encoding(), 'SJIS-win', $_POST);
mb_convert_variables(mb_internal_encoding(), 'SJIS-win', $_GET);
}
?>

自分のような初心者には丁度よくまとまっている blog エントリがあったので、これを元に自分用にさらにまとめ、整理してメモ。

ちょっと詳しいモバイルサイトの作り方
お世話になりました。ありがとうございました。

Continue reading

携帯端末におけるXHTML仕様

XHTMLの仕様はW3Cによって標準化されているが、携帯端末の世界ではキャリアごとに異なっていて統一されていない。

DoCoMo
XHTML Mobile Profileをベースにしてiモード対応HTMLとの互換性を意識して策定。

au
XHTML Basicをベースにして、独自の拡張機能を追加したものを策定。

SoftBank
XHTML Mobile Profileをベースに、独自の拡張機能を追加したものを策定。

上記のように、携帯の世界ではW3CによるXHTML Basicと、WAPフォーラム（現在のOMA）によるXHTML Mobile Profileが主な仕様となっているのが現状。

各キャリアにおけるXTMLへの対応状況

DoCoMo
FOMA機種（2002年頃発売の2001/2002/2101Vは除く）

au
WAP2.0ブラウザ搭載機種（2002年以降発売）

SoftBank
W型、3GC型（2003年以降発売）

らしい。

とくに、PHP での開発において、ざっとメモ。
（PHP×携帯サイト デベロッパーズバイブルを参考に）

1. XML 宣言が必要

<?xml version=”1.0″ encoding=”Shift_JIS” ?>

2. キャリア、端末によって DOCTYPE 宣言を書き換える必要がある

Docomo / iモードXHTML1.0
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN” “i-xhtml_4ja_10.dtd”>

Docomo / iモードXHTML1.1
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN” “i-xhtml_4ja_10.dtd”>

Docomo / iモードXHTML2.0
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN” “i-xhtml_4ja_10.dtd”>

Docomo / iモードXHTML2.1
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN” “i-xhtml_4ja_10.dtd”>

Docomo / iモードXHTML2.2
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN” “i-xhtml_4ja_10.dtd”>

Docomo / iモードXHTML2.3
<!DOCTYPE html PUBLIC “-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN” “i-xhtml_4ja_10.dtd”>

au
<!DOCTYPE html PUBLIC “-//OPENWAVE//DTD XHTML 1.0//EN” “http://www.openwave.com/DTD/xhtml-basic.dtd”>

SoftBank
<!DOCTYPE html PUBLIC “-//JPHONE//DTD XHTML Basic 1.0 plus//EN” “xhtml-basic10-plus.dtd”>

3. Content-Type の書き換えも必要

通常（デフォルト）では、Content-Type は text/html になる。
XHTML を使用する場合はこれを application/xhtml+xml としないといけない。
対応する部分は以下の二箇所。

• meta タグによる Content-Type の指定
• HTTP レスポンスの Content-Type フィールドにおける指定

具体的には、

meta タグでは以下を記述

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset='Shift_JIS'" />

HTTP レスポンスヘッダーに以下のような Content-Type を指定（これは PHP の場合）

header(‘Content-Type: application/xhtml+xml;’);

この PHP の header 関数は、全ての出力の「前」に呼び出される必要がある。

4. mb_output_handler に注意（文字化け）

PHP での開発において mb_output_handler（出力時の文字コードの変換を行ってくれる関数）を使うことが出来ない。
HTTP レスポンスヘッダーの Content-Type に application/xhtml+xml が記述されているときは、この関数は機能しないので使うことが出来ないので注意。（ようするに、XHTML を使おうとするときは、この関数は使えないということ）

5. mb_output_handler を利用せずに文字コード変換

以下のスクリプトを使用して、内部文字コードを出力文字コードに一括変換する。

詳しい実例は初めてのXHTMLによるモバイル向けページの作成を参照。

＊この際、mb_output_handler を無効にしておくこと。
（php.ini の mbstring.http_output = pass にしておく）

＊プログラム内で一時的に mb_output_handler を無効にするには
ini_set(‘mbstring.http_output’, ‘pass’);

// 出力バッファリングを有効に
ob_start();
 
// バッファにためた出力データを取得する
$str = ob_get_contents();
 
// 文字コードを出力文字コードに変換する
$output_str = mb_convert_encoding($str, 'SJIS-win', mb_internal_encoding());
 
// バッファリングをクリア
ob_end_clean();
 
// 内容を出力する
echo $output_str;

主要3キャリアを判別するにあたって、何に注意するべきかのメモ。
（PHP×携帯サイト デベロッパーズバイブルを参考に）

docomoのユーザーエージェント

基本的にブラウザのiモード対応HTMLごとにフォーマットが異なる。

詳細は割愛。（詳しくは『デベロッパーズバイブル』参照のこと）

auのキャリア判別法

auはHDMLブラウザとWAP2.0ブラウザの二種類のフォーマット。
「UP.Browser」という文字列が先頭につくかどうか。（auは先頭につく）
※UP.BrowserはSoftBankでも採用されている（SoftBankでは文字列中央部に記述される）

auの機種判別法

auでは機種名を直接取得することができない。デバイスIDを取得することは出来るが、これは機種名とは異なる情報。

ただし、デバイスIDと機種名は一意にひもづけられる情報のため、デバイスIDから実際の機種名を取得することは可能。（この場合は、両者をひもづけるための別のデータが必要）

SoftBankのキャリア判別法

SoftBankはキャリア名が複数混在している。（J-Phone, Vodafone, モトローラ等）

キャリア名はユーザーエージェントの文字列の先頭に必ず来る。

SoftBankとして分類するキャリア名は、J-PHONE, Vodafone, SoftBank。モトローラの場合のみ、キャリア名は表記されずに MOT- という特殊な記述になる。

Disney MobileはSoftBankと同じ扱い。ユーザーエージェントにもSoftBankと記述される。そのため、Disney Mobileのみを判別したい場合は機種名で区別する必要がある。

※SoftBankのエミュレータ（ウェブコンテンツビューア）でアクセスした場合には実機とは異なるキャリア名でアクセスされるので注意。