ホーム > Mobile

Mobileのアーカイブ

モバイルサイト制作における文字コードの扱いについて

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

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を使った場合の処理例

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);
}
?>

3キャリア対応のモバイル向けサイトを作るにあたって

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

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

モバイル端末におけるXHTMLについて

携帯端末における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年以降発売)

らしい。

XHTMLでモバイルサイトを制作する際の注意とtips

とくに、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 タグでは以下を記述

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キャリアにおけるキャリア判別について

主要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のエミュレータ(ウェブコンテンツビューア)でアクセスした場合には実機とは異なるキャリア名でアクセスされるので注意。

絵文字変換スクリプト

フリーで配布されている絵文字変換スクリプトを試してみた

携帯サイトを作ろう!-ちょっと詳しいモバイルサイトの作り方-のエントリ「携帯絵文字変換スクリプトの改良版 (PHP・SSI対応版)を作りました」内で配布されていた、絵文字変換スクリプト(主要3キャリア対応)を試用してみたメモ。(メモもなにも、とてもくわしく該当エントリに記してある)

特徴としては

  • 3キャリア対応(docomo は iモードHTML4.0以上)
  • PHP、SSHに対応
  • Unicode数値参照方式を採用
  • PHP4と5で動作
  • PC閲覧時にも絵文字を表示(UI偽装とかじゃなくて普通にPCでのアクセス)
  • ドコモの絵文字が基準

らしい。

とりあえず PHP で使用する限りは、emoji_trans.php(絵文字変換スクリプト)の PC 用絵文字の格納ディレクトリへのパスだけ、自分の環境(これらのスクリプトをアップロードした)に合わせて書き換えれば OK だった。(モバイル端末でのアクセスは関係ない)

// WebRoot からの相対パス
$emoji_img_dir = “/emoji/include/emoji/images”;

まだ試用してみただけだけど、必要な場面では大変重宝しそうです。ありがとうございます。お世話になります。

DLしたソースファイル(zip)は Dropbox/Download/emoji 内に。

.htaccessでIPアドレスによるアクセス制限をかける

この記事は
.htaccessでIPアドレスによるアクセス制限をかける
に引っ越しました。

PEAR::Net_UserAgent_Mobileを使ってキャリア判別によるリダイレクト

PEAR::Net_UserAgent_Mobileを使ってキャリア判別によるリダイレクト

http://hogehoge.hoge/m

にアクセスすると、DoCoMo, au, SoftBank 端末とそれ以外を判別して、指定したディレクトリ(ページ)にリダイレクト。

PHP の PEAR パッケージのひとつ「Net_UserAgent_Mobile」を利用する。
続きを読む

.htaccess を使ってアクセス端末ごとにリダイレクト

この記事は
.htaccess を使ってアクセス端末ごとにリダイレクト
に引っ越しました。

PEAR::Net_UserAgent_Mobileをインストール

VMware fusion 上の Ubuntu Server 8.10 へ。
まだベータ版なので、それを指定してインストール。

$ sudo pear install Net_UserAgent_Mobile-beta
downloading Net_UserAgent_Mobile-1.0.0RC3.tgz …
Starting to download Net_UserAgent_Mobile-1.0.0RC3.tgz (44,075 bytes)
…………done: 44,075 bytes
install ok: channel://pear.php.net/Net_UserAgent_Mobile-1.0.0RC3

インストールされたディレクトリは
/usr/share/php/Net/UserAgent だった。
(/usr/share/php/Net 配下に UserAgent ディレクトリごとインストールされた模様)

ちなみに、MacPorts で管理している(インストールした)場合は
/opt/local/lib/php/Net/UserAgent になる。

ホーム > Mobile

検索
フィード

ページの上部に戻る