いわゆる携帯サイトとは？ 文字コードについて 機種判別について セッションについて 画像変換について 絵文字変換について Zend_Formのつかいどころ 半角カナ＆絵文字メールについて アクセス制限について テストについて その他について まとめ

1. ZendFramework勉強会@Tokyo
ZFではじめる携帯サイト
id:Bayside
id:Bayside MAIL: bayside@cpan.org
Copyright (C) 2009 Buzoo Inc. All Rights Reserved.

2. 自己紹介
はてなer
id:Bayside
日記以外にほとんど使っていません
技術メモなど
http://d.hatena.ne.jp/Bayside
覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3
現在はもっぱらPHPer
2月からバズー株式会社というところで携帯サイト作ってます
http://buzoo.jp/
新規案件からは全面的にZFを使うことが決定！
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 2

3. 自己紹介
はてなer
id:Bayside
日記以外にほとんど使っていません
技術メモなど
http://d.hatena.ne.jp/Bayside
覚えた言語：Java→C言語→C++言語→Perl/VB→PHP/AS3
現在はもっぱらPHPer
2月からバズー株式会社というところで携帯サイト作ってます
http://buzoo.jp/
新規案件からは全面的にZFを使うことが決定！
・・・というか勝手に決めて、社長承認を取得w
3月中にいろんなサイトをZFで作りました
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 3

4. 本日のアジェンダ
いわゆる携帯サイトとは？
文字コードについて
機種判別について
セッションについて
画像変換について
絵文字変換について
Zend_Formのつかいどころ
半角カナ＆絵文字メールについて
アクセス制限について
テストについて
その他について
まとめ
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 4

5. いわゆる携帯サイト は？
と
docomo/au/softbank携帯に対応したウェブサイト
携帯電話会社→キャリア、個々の携帯→端末
もっぱらSJISで書かれている
最近はCSSにも対応している
キャリアごとの仕様の違いを上手く吸収する必要がある
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 5

6. いわゆる携帯サイト は？
と
docomo/au/softbank携帯に対応したウェブサイト
携帯電話会社→キャリア、個々の携帯→端末
もっぱらSJISで書かれている
最近はCSSにも対応している
キャリアごとの仕様の違いを上手く吸収する必要がある
エンジニアの実力の見せ所！
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 6

7. 文字コ について
ード
UTF-8に対応している端末もあるが、対応範囲を広げるならSJIS
UTF-8→SJIS変換は文字化けする文字があるのでオススメしない
文字コード変換のコストを考えると、全部SJISにするのが楽
データベース
ソースコード
HTMLテンプレート
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 7

8. 機種判別について①
UserAgentでキャリア、機種IDを取得
$ua = $_SERVER['HTTP_USER_AGENT'];
if (preg_match("/^DoCoMo/1.0/", $ua)) {
# docomo (mova)
} elseif (preg_match("/^J-PHONE|^Vodafone|^SoftBank/", $ua)) {
# softbank (3G)
} elseif (isset($_SERVER['HTTP_X_JPHONE_MSNAME'])) {
# softbank (2G)
} elseif (preg_match("/UP.Browser/", $ua)) {
# au
} elseif (preg_match("/^DoCoMo/2.0/", $ua)) {
# docomo (foma)
} else {
# willcom / emobile / PC など
}
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 8

9. 機種判別について②
機種IDから端末情報を取得
何らかの形の端末データベースが必要
http://svn.sourceforge.jp/view/mod_chxj/trunk/etc/?root=modchxj
http://pear.php.net/package/Net_UserAgent_Mobile/
最新機種が出るたびに更新しないといけないので結構大変・・・
＜端末データベースの例＞
+--------+------+-------+-----+-----+-------+
| career | d_id | dname | w | h | flash |
+--------+------+-------+-----+-----+-------+
| 2 | HI3B | W53H | 232 | 348 | 2 |
| 2 | KC3B | W53K | 232 | 348 | 2 |
| 2 | SN3B | W53S | 228 | 368 | 2 |
| 2 | CA39 | W53CA | 232 | 348 | 2 |
| 2 | TS3D | W53T | 229 | 348 | 2 |
| 2 | ST32 | W53SA | 230 | 348 | 2 |
+--------+------+-------+-----+-----+-------+
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 9

10. 機種判別について③
端末固有IDで固体判別することが可能
docomo・・・URLに”guid=ON”をつける
$_SERVER['HTTP_X_DCMGUID'] から取得
au・・・HTTPヘッダについてくる
$_SERVER['HTTP_X_UP_SUBNO'] から取得
softbank・・・HTTPヘッダについてくる
$_SERVER['HTTP_X_JPHONE_UID'] から取得
取得した端末固有IDを使って「簡単ログイン」などを実現できる
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 10

11. セッ ンについて
ショ
docomoはcookieが使えない
auもSSLをまたぐとセッションが使えなかったりする
cookieは使えないものとして考える
PC以外からのアクセスでは、URLにセッションIDをつける
GETのときはhiddenタグに埋める（ここでハマリやすい！）
セッションID名は”.htaccess”に”php_value session.name XXXX”と書けば変
更できるので”PHPSESSIONID”はなるべく使わない
if ($career) {
ini_set('session.use_cookies','off');
ini_set('session.use_trans_sid','1');
Zend_Session::setOptions(
array('use_trans_sid'=> '1', 'use_only_cookies'=> '0')
);
}
Zend_Session::start();
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 11

12. 画像変換について①
端末ごとに画面サイズが違う
対応画像形式も違う
画像はアプリ側で変換させる
ImageMagickが便利
sudo pecl install imagick
毎回やると遅～いので、キャッシュの仕組みが別途必要
＜.htaccessの例＞
RewriteRule (.*).(gif|jpg|png)$ /index.php/image/view?file=$1&ext=$2 [R]
public function viewAction() {
// ビューを無効にする
$this->_helper->layout->disableLayout();
$this->_helper->viewRenderer->setNoRender();
// PECL::Imagickが必要
$image = new Imagick();
$image->readImageBlob($image_data);
// ここでいろんな処理
echo $image;
}
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 12

13. 画像変換について②
ImageMagickの使い方はマニュアルを参照
http://jp.php.net/manual/ja/book.imagick.php
毎回やると遅～いので、キャッシュの仕組みが別途必要
＜画像形式変更＞
header('Content-type: image/jpeg');
$image->setImageFormat('jpg');
＜リサイズ＞
$image->thumbnailImage($width, 0);
＜コピー禁止＞
if ($career === DOCOMO) {
$image->commentImage('copy="NO"');
} elseif ($career === AU) {
$image->commentImage('kddi_copyright=on');
} elseif ($career === SOFTBANK) {
header('x-jphone-copyright: no-transfer,no-peripheral');
}
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 13

14. 絵文字変換について①
キャリアによって仕様がバラバラでカオスな部分
docomo絵文字
au絵文字
HTML用
Email用
softbank絵文字
SJIS用
UTF-8用
基本絵文字・・・176文字
拡張絵文字・・・端末ごとに異なる
変換表が必須
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 14

15. 絵文字変換について②
MobilePictogramConverterが便利
http://php-develop.org/MobilePictogramConverter/
Zend_Layoutを使っているならこんな感じで使う
// application/default/views/script/laytout.html
<?php
echo $this->render('header.html');
require_once '../MobilePictogramConverter.php';
if ($this->career === DOCOMO) {
$career_code = MPC_FROM_FOMA;
} elseif ($this->career === AU) {
$career_code = MPC_FROM_EZWEB;
} elseif ($this->career === SOFTBANK) {
$career_code = MPC_FROM_SOFTBANK;
}
$mpc = MobilePictogramConverter::factory(
$this->layout()->content,
$career_code, MPC_FROM_CHARSET_SJIS, MPC_FROM_OPTION_RAW
);
$mpc->setImagePath("./img/");
echo $this->career ? $mpc->autoConvert() : $mpc->Except();
$this->render('footer.html');
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 15

16. Z e n d _F o r m のつかいどころ①
基本的な使い方はPCサイトと同じ
ユーザビリティをあげるために初期入力モードを設定
istyle・・・docomo / au
istyle=”1” //全角かな
istyle=”2” //半角カナ
istyle=”3” //英字
istyle=”4” //数字
mode・・・softbank
istyle=hiragana” //全角かな
istyle=katakana” //全角カナ
istyle=hankakukana” //半角カナ
istyle=alphabet” //英字
istyle=numeric” //数字
istyleとmodeは混在可能
<form input type=”text” istyle=”4” mode=”numeric”>
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 16

17. Z e n d _F o r m のつかいどころ②
Zend_Config_Iniを使っているならこんな感じで設定する
register.step1.elements.email.type = "text"
register.step1.elements.email.options.required = false
register.step1.elements.email.options.istyle = "3"
register.step1.elements.email.options.mode = "alphabet"
register.step1.elements.email.options.size = "40"
register.step1.elements.email.options.validators.email.validator =
"EmailAddress"
register.step1.elements.email.options.validators.strlen.validator =
"StringLength"
register.step1.elements.email.options.validators.strlen.options.min = "0"
register.step1.elements.email.options.validators.strlen.options.max = "64"
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 17

18. Z e n d _F o r m のつかいどころ③
ControllerとViewはこんな感じ
class RegisterController extends Zend_Controller_Action {
public step1Action() {
$config = new
Zend_Config_Ini("../application/default/configs/register.ini", "form");
$form = new Zend_Form($config->register->step1);
if ( $this->getRequest()->isPost() ) {
if ( $form->isValid($_POST) ) {
：
}
}
$this->view->form = $form;
}
}
<form action=”/register/step1” method=”post”>
：
<?= $this->form->getElement('email) ?>
：
</form>
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 18

19. 半角カナ＆絵文字メールについて①
ISO-2022-JPには半角カナは定義されていない
無理やりJISに変換してBASE64エンコードすると半角カナも使用可能
Zend_Mailは日本語対応が相当微妙なので、ラッパー関数が必要
sub send_mail($params = array()) {
$subject = mb_convert_encoding($params['subject'], 'JIS', 'SJIS');
$body = mb_convert_encoding($params['body'], 'JIS', 'SJIS');
$mail = new Zend_Mail( 'ISO-2022-JP' );
$mail->setBodyText( $body, 'ISO-2022-JP',
Zend_Mime::ENCODING_BASE64 );
$mail->setFrom( $params['from'], null );
$mail->addTo( $params['to'], null );
$mail->setSubject( $subject );
$mail->send();
}
sub_mail(array(
'from' => 'system@hogehoge.com',
'to' => 'hoge@ezweb.ne.jp',
'subject' => 'ﾊﾝｶｸｶﾅﾃｽﾄ',
'body' => 'ﾃｽﾄﾃｽﾄ'
));
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 19

20. 半角カナ＆絵文字メールについて②
絵文字メールはバッドノウハウだらけ・・・
auはEmail絵文字を使う必要がある
softbankはutf-8で送らないと途中で途切れる場合がある
PCでは確実に文字化けするので、絵文字を削除する必要がある
Zend_Mailでやるのは大変そうなので mail() 関数を使う
携帯絵文字メール送信（３キャリア）
http://yantona.jugem.jp/?eid=342
id:maru_cc さんの記事☆☆☆
http://d.hatena.ne.jp/maru_cc/20080519/softbank_emoji_mail
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 20

21. アクセス制限について
PCからのアクセスを遮断するならIPアドレス制限が必要
キャリアのIPアドレスはしょっちゅう増えたり減ったり・・・
ke-tai.orgが提供しているものをありがたく使わせてもらいましょう
http://ke-tai.org/index.php?%A5%B1%A1%BC%A5%BF%A5%A4%A5%AD
%A5%E3%A5%EA%A5%A2%A1%A6%A5%AF%A5%ED%A1%BC%A5%E9IP
%A5%A2%A5%C9%A5%EC%A5%B9
自分のIPアドレスを追加しておくこと
＜.htaccess＞
Order Deny,Allow
Deny from all
# docomo
(http://www.nttdocomo.co.jp/service/imode/make/content/ip/)
# 2008/06/20
Allow from 210.153.84.0/24 210.136.161.0/24 210.153.86.0/24
124.146.174.0/24 124.146.175.0/24
この後ずらーっと続く
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 21

22. テストについて
iモードHTMLシミュレータII
http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2/
User Agent Switcher（Firefox拡張）
https://addons.mozilla.org/ja/firefox/addon/59
FireMobileSimulator（Firefox拡張）
http://firemobilesimulator.org/
P1 Emulator（製品）
http://p1.netfarm.ne.jp/
もちろん最後には実機で！
持っていない機種でチェックするなら
http://www.ktai-labo.com/
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 22

23. その他について
GPS位置情報取得
いろいろ楽しいことができそう
緯度・経度→住所・地域の変換をどうするか
携帯Flash（Flash Lite）
1.0/1.1/2.0/3.0/3.1/非対応
Flash Lite 1.1ならほとんどの機種で対応しているが制限が多い
サイズが100KBまで
フィルターが使えない等
大きい透過PNGが表示できない
オープンソースのFlashコンパイラでは作れない
私はAdobe Flash CS3で作っています
対応機種をしぼって2.0以降にするのもあり？
デコメについて
実体はHTMLメール
デコ絵文字はただの画像
3キャリアごとに微妙に仕様が違うテンプレート
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 23

24. まとめ
SJISにするのが楽
キャリアごとの独自仕様にどうやって対応するかが肝
機種判別
セッション
画像変換
絵文字変換
半角カナ＆絵文字メール
IPアドレスによるアクセス制限
GPS / Flash Lite / デコメ ・・・
便利なライブラリを使いこなす
Net_UserAgent_Mobile
MobilePictogramConverter
ZFに向かない箇所もある
絵文字メール
日本語固有のバリデーション
携帯固有のバリデーション
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 24

25. おわり
ご静聴ありがとうございました
Copyright (C) 2009 Buzoo Inc. All Rights Reserved. Z F ではじめる携帯サイトid :B a y s id e 25