ホーム > タグ > まとめ

まとめ

モバイル向けサイトを制作するにあたって認識しておくべきPC向けサイト制作との違い

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

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

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

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

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でモバイルサイトを制作する際の注意と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のエミュレータ(ウェブコンテンツビューア)でアクセスした場合には実機とは異なるキャリア名でアクセスされるので注意。

ウェブサイトを高速化する方法

あなたのウェブサイトを高速化する方法

パフォーマンス向上のための14のティップス

1. HTTPリクエストを減らす
2. コンテンツデリバリーネットワーク(CDN)を使う
3. Expiresヘッダを追加する
4. コンポーネントをgzip圧縮する
5. スタイルシートを先頭に配置する
6. スクリプトを末尾に配置する
7. CSS expressionの使用を避ける
8. JavaScriptとCSSを外部ファイルに記述する
9. DNSルックアップを減らす
10. JavaScriptのサイズを小さくする
11. リダイレクトを避ける
12. スクリプトの重複を排除する
13. ETagの設定を変更する
14. Ajaxをキャッシュ可能にする

ホーム > タグ > まとめ

検索
フィード

ページの上部に戻る