Ktai Library 勉強会 #1-2
Ktai Library 勉強会に行ってきました。
といっても、第1回が3月8日（月）で第2回が4月16日（金）でしたので、もうかれこれ1ヶ月近く経とうとしていますが。。。
でも、ちっちゃいことは気にしないで、両日を通して学んだことをまとめつつ、感想などを。（遅ればせながら）
準備編
せっかく作者の@ecworks_masapさんが来るわけですから、できるだけ準備をしておこうというわけで、とりいそぎセットアップを。
CakePHPは1.2を使用しました。
（当日聞いたら1.3でも普通に使えるということで、第2回からは1.3を使用）
Ktai Library は、今後のバージョンアップに備えて、gitで持ってくる。
$ git clone http://github.com/MASA-P/KtaiLibrary.git
（app/vendors/ecw となるように、KtaiLibrary/vendors/ecwをコピーする）
絵文字アイコンが必要なので、それもダウンロード
$ cd app/webroot/img $ wget http://start.typepad.jp/typecast/download/emoticons.zip $ tar xfvz emoticons.zip
Ktai Library で必要なファイルを、app内にコピーします。
以下は、シンボリックリンクで代替。
$ cd app/config $ ln -s /path/to/KtaiLibrary/app/config/ktai_session.php . $ cd ../../app/controllers/components $ ln -s /path/to/KtaiLibrary/app/controllers/components/ktai.php . $ cd ../../../app/views/helpers $ ln -s /path/to/KtaiLibrary/app/views/helpers/ktai.php .
app_controller.php内で、redirect()を上書きするため、KtaiLibrary/app/controllers/ktai_app_controller.phpの内容を、写す。
（ver0.2.2以前の場合で、リバースルーティングに配列を渡している場合は、コレを追加）
すべてのcontroller,viewでktaiコンポーネントとktaiヘルパーを使用する場合はapp_controller内の var $componentsとvar $helpersにKtaiを追加する。
また、以下を環境に合わせて追加
# app/app_controller.php
var $ktai = array(
'use_img_emoji' => true,
'input_encoding' => "UTF-8",
'output_encoding' => "UTF-8",
);
NamedParamsのセパレータを変更
# app/config/routes.php
Router::connectNamed(array(), array('argSeparator' => '~'));
FireMobileSimulator
すでにメインブラウザをGoogle Chromeに完全移行したのですが、いかんせんChromeの拡張機能では、現状ではFireMobileSimulatorのようなものを作れません。
というわけで、ケータイからのアクセスをシミュレートするFireMobileSimulatorをFirefoxにアドオンします。
初めて使ったのですが、超絶便利でした。しかもbetaながら、タブごとに別々のuser_agentに切り替えるバージョンまであり、開発スピードが段違い。素晴らしい！
Hello Ktai Library !
ここまでできたら、Ktai Library の教科書Chapter4のリスト04-04、04-05および04-06を参考に、サンプルページを表示します。
以下、Ktai Library 開発用デモサイトソースより一部改訂して引用
# app/controllers/mypages_controller.php
function index() {}
# app/views/layouts/default.ctp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<?php if($ktai->is_iphone()){ ?><meta name="viewport" content="width=260"><?php } ?>
<title><?php echo $title_for_layout; ?></title>
</head>
<body>
<?php if(!$ktai->is_ktai()){ ?><div style="width: 240px;"><?php } ?>
<?php echo $content_for_layout; ?>
<div align="center">
<hr width="90%" size="1" color="#333333" noshade>
(C)2009 <a href="http://shop.example.com/">MyShop</a>
</div>
<?php if(!$ktai->is_ktai()){ ?></div><?php } ?>
</body>
</html>
# app/views/mypages/index.ctp
<center><?php $ktai->emoji(0xe753); ?>Hello, ktai Library!<?php $ktai->emoji(0xe753); ?></center>
絵文字付きでHello, Ktai Library!と表示されたら準備完了です。
このブログは記憶を頼りにまとめているので、記述をそのままやっても動かない場合もあると思います。
動かない場合はtwitterでお知らせください。
勉強会 #1
じつは、勉強会の1回目は、第4章を実践することがテーマだったので、準備万端で臨むと、もう終わってたりします（笑）
というわけで私は、今後の開発がしやすいように、いろいろとカスタマイズしていくことにしました。
Themeを使って、KtaiからのアクセスとPCからのアクセスで、表示を分ける
CakePHPのTheme機能を使って、Ktaiからのアクセスの場合は、themed/ktai を使用し、PCからのアクセスの場合は、通常のviewを使用するケースです。
まず、Ktaiからのアクセスかどうかを判別して、必要に応じてテーマを使用するようにします。
Ktaiからのアクセスかどうかは、 Ktaiコンポーネント（かKtaiヘルパー）のis_ktai()を使用します。
# 使用例
if ($this->Ktai->is_ktai()) {
debug("Ktaiからのアクセスです");
}
Themeを分ける場合は、beforeRender()あたりがよさそうですので、app_controller.php内のbeforeRender()を変更します。
# app/app_controller.php
function beforeRender() {
if ($this->Ktai->is_ktai()) {
$this->view = "Theme";
$this->theme = "ktai";
}
}
これでThemeの使用ができますので、必要なファイルを作成します。
まずは、必要なディレクトリを作成しましょう。
app/views内に、themed/ktaiディレクトリを作成し、その中に、layoutsやelements、今回の場合はmypagesを作成します。
$ cd app/views $ mkdir -p themed/ktai/layouts $ mkdir -p themed/ktai/elements $ mkdir -p themed/ktai/mypages
そして、レイアウトファイルを移動します。
$ cd app/views $ mv layouts/default.ctp themed/ktai/layouts
ここで、いったん動作確認。
ケータイによるアクセスとPCからのアクセスで、別々のレイアウトファイルが使われていれば成功です。
mypages/index.ctpも忘れずに移動します。
$ cd app/views $ mv mypages/index.ctp themed/ktai/mypages
その他
elementsでヘッダーやフッターを作ったりして、初日終了。
感想など
@yashioさんの呼びかけで始まったKtai Library 勉強会＠関東ですが、非常に素敵な会でした。
まず何といっても雰囲気がよい。少人数故なのかどうかは分かりませんが、堅苦しくなくて良かったです。
また、講義を聞くスタイルではなくて、実践形式で進めるというのが、振り返ってみて良かったなと。講義を聞いて、その場で分かったつもりになって、実践しないでほったらかす人種のわたしとしては、手を動かす絶好の機会となりました。
なかにはセットアップに苦労していた方もいましたが、そういったことも含めて、実際にやってみることの大事さを再確認することができました。
最後は、みんなで歓談し、CakePHPやそれ以外のことについて情報交換。
『ゼッタイに第2回も参加しよう』と心に誓った第1回でした。
勉強会 #2
そして、第2回。今回は第5章ということで、非常にボリュームがあります。
しかし、その多くはPCによる管理画面の作成ですので、ケータイで作る部分はさほど多くない。
ひととおり読み込んで準備して、、、と思ったが、タイミング良く入っているケータイサイトのお仕事を進めないと進捗が遅れていることに気づく。
内容的にはフォームの作成で、サンプルと一緒の画面遷移なので、第5章を参考にしつつ作成しました。
teltoリンク
Ktai Library には、便利なmailto()というメソッドがある。これはいわゆるmailtoリンクを、キャリアに合わせて作成してくれるもの。
# 使用例 (for CakePHP 1.3)
// Site.mail はメールアドレスが入っています
// 第3引数で件名を第4引数で本文を指定可能です
$this->Ktai->mailto("ﾒｰﾙ",Configure::read('Site.mail'),"携帯サイト問合せ");
telto()もあるかなとリファレンスを見たが、なさそうなので急ごしらえした。
function telto($telno = "") {
if (empty($telno)) {
$telno = Configure::read('Site.tel');
}
$telnoWithoutHyphen = str_replace("-","",$telno);
return "<a href=\"tel:{$telnoWithoutHyphen}\">{$telno}</a>";
}
なんでHtmlヘルパー使ってないんだっけか？相対URLになっちゃうんだっけかな？
おかげで$optionsも指定できないからあんまり意味ないかも。
ハイフンを消す必要があるかどうかも不明だけど、確認するの面倒だからまあ良し。
あと対応できない端末があるかもなあ。
その他
主に見栄えのところを調整した。
Ktai Library には、スタイル調整用の機能があります。
# app/app_controller.php
var $ktai = array(
'style' => array(
'h2' => "color:#ffffff;background-color:#0000ff;",
),
);
としておき、viewで
# view on CakePHP1.3
<div style="<?php $this->Ktai->style("h2"); ?>">見出し文字列</div>
のように使います。便利ですね。
自ヘルパー内で拡張して、divでラップしても面白いかもしれませんね。
感想など
外は雨模様。帰りにはみぞれになっていた。4月なのに。
そんな悪天候の中、参加者は全員出席だったそう。それだけ注目のKtai Libraryであり、Ktai Library 勉強会ということでしょう。
帰ってから実機で確認してみると、キャリアによって細かい動作が違ってくるものがあるということも分かった。
携帯サイトはノウハウの集積が不可欠だと思っていたが、それでもその大部分を担ってくれるKtai Libraryを使うかどうかで、開発効率は大きく違ってくるでしょう。
そして。
Ktai Library を使っても、なお、知っておかなくてはならないことが多いのが、携帯サイトの開発だと気づく。
だからこそ、Ktai Library の教科書では、題材に『ショッピングサイト』を選んだのではないだろうか。
幅広い機能が必要となるため、それを実践することで、必要なノウハウも（多数）身についていくのですから。
続きは次回。
では。