ECWorks Blog

ECWorks Blog

CakePHPを中心としたサイト開発情報をメインに公開。新しもの好きなので時々製品レポートなんかも。

【KtaiLibrary】各キャリア携帯サイトを世界一簡単に作ってみる

icon_ktaiクォーターパウンダーのCMで、北島康介とかがでかいことを言っているのですが、なんでこういう内容なのか、やっと意味が分かったんですよね…最近。ビッグマウスで食えってことなのね(^^;;;

というわけで、タイトルがかなりビッグマウスなんですけど、考えてみたら制作チュートリアル的なものが何処にもなかったので、ちょっと書いてみることにします。
一応、近日開催の勉強会でも内容は一通りなめる予定ですが、ネットで様子をうかがっている感じ、制作で困っていらっしゃる方も何名かいらっしゃるようなので、先行で説明させていただきます。
お役に立てれば幸いです。

今回は、とりわけ需要が高いと思われる「セッション使用」「コンポーネント有り」「ヘルパー有り」「絵文字画像有り」「一括変換はなし」という前提でご説明いたします。

準備

構築に際して、つぎのものをまず準備します。

  • CakePHP
    まずPCで普通に見れるよう、いつもの設定を行う。
    オールグリーンに。
  • Ktai Library
    ダウンロードして解凍しておく。
  • TypePadの絵文字画像
    こちらもダウンロードして解凍しておく。

インストール

Ktai Libraryと絵文字画像をインストールします。
Ktai Libraryのイメージは、CakePHPのイメージに準拠しておりますので、基本的に丸ごとコピーで大丈夫です。
最後に、絵文字画像を「app/webroot/img/emoicons」に展開します。

routes.phpの変更

routes.phpを開き、Named separatorの設定を「処理の一番最初に」行います。

【app/config/routes.php】


Router::connectNamed(array(), array('argSeparator' => '~'));
Router::connect('/', array('controller' => 'mypages', 'action' => 'index'));    //ついでにホームの変更も

コントローラの作成

Cake本体の設定は概ね終わりです。今度はコンテンツ部分の設定になります。
まず最初にコントローラを設置します。
今回はセッションの動作をチェックするよう、セッション値のカウントアップとリダイレクト処理を入れてみます。

【app/controllers/mypages_controller.php】


<?php
class MypagesController extends AppController {

var $name = 'Mypages';
var $uses = array();    //とりあえず
var $components = array('Ktai');
var $helpers = array('Ktai');
var $layout = 'mypages';

var $ktai = array(
'use_img_emoji' => true,
'input_encoding' => 'SJIS',
'output_encoding' => 'SJIS',
);

function beforeFilter(){
Configure::write('App.encoding', 'Shift_JIS');    //UTF-8ではないエンコーディングの場合に必要な処理
}

function index(){
//アクセスする度にカウントアップさせる
//(Ktai Libraryとは全く関係ない処理です)
//
$counter = $this->Session->read('Ktai.counter');
$counter++;
$this->Session->write('Ktai.counter', $counter);
$this->set('counter', $counter);
}

function red(){
//リダイレクトするだけ
//
$this->redirect('/mypages');
}

}

layout・viewの作成

とりあえず簡単に、layoutとviewを用意します。
今回はSJISページとして設定していますので、view等はSJISで制作します。

【app/views/layouts/mypages.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=Shift_JIS">
<?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 } ?>
<div align="center">
****************<br>
世界一簡単な<br>
各キャリア対応サイト<br>
****************<br>
</div>
<?php echo $content_for_layout; ?>
<?php if(!$ktai->is_ktai()){ ?></div><?php } ?>
</body>
</html>

【app/views/mypages/index.ctp】


現在のカウンターは「<?php echo $counter; ?>」です<br>
<br>
<?php echo $ktai->link('更新', '/mypages', array('accesskey' => 1)); ?><br>
<?php echo $ktai->link('リダイレクト', '/mypages/red', array('accesskey' => 2)); ?><br>

【app/views/mypages/red.ctp】
(一応ブランクファイルを作っておく)

app/tmp/cache/persistentディレクトリ内のフラッシュ

念のために、persistentをフラッシュします。
これをしないと、今回Ktai Libraryで追加したapp_controller.phpが反映されません。
意外に陥りやすい罠です。

実行

いよいよ実行です。
mypages(もしくはホーム)にアクセスしてみてください。
どうですか?
カウンターが更新されていますか?

最後に

paginateとかも説明した方が説得力あるのですが、「世界一簡単に」ではなくなってしまいそうなのでやめました(大汗)。
また、一括変換系も説明されていませんが、また次の機会にでも説明したいと思います。

あ、ちなみに設定値をかなり省略していますが、サーバ環境によっては若干変えなければならないパラメータがあるかもです(例えば絵文字画像の格納場所とか)。

とりあえず今回はここまで。


Tagged as: , , ,

27 Comments

  1. 誰からもツッコミがなかったのですが、本記事はバージョン0.1第の時に書かれたものなので、app_controller.php.defaultをapp_controller.phpにリネームするか、独自のものの中にredirectメソッドの部分をコピーする手順が書かれていませんね。これを行わないとdocomoでリダイレクトがされませんので、「コントローラの作成」のパートで行いましょう。
    ちょっと現在作業でテンパっているので、終わったら追記します。

  2. すいません
    どこかに書いてあるのかもしれないのですが、このページの通りに作成しましたら、問題なくカウンターは動作しているのですが、デバッグの表示のようなものが一緒に表示されました。

    cakephp1.3のデバッグは0に設定しても表示されたままです。
    これを非表示にする方法を教えてもらえますでしょうか?

  3. 0.3.1に不具合があったようで、0.3.2にしましたら表示されなくなりました。
    ありがとうございます!

  4. var_dumpが出てしまっていたのですね。
    ご迷惑をおかけいたしましたm(__)m。

  5. MASA-P様、有用なライブラリーをありがとうございます。
    0.2.3でテストをさせて頂いているのですが、docomoの時にセッションが引き継がれません。
    URLには以下の様にセッションパラメータが表示されているものの、毎回
    新しい値になってしまいます。
    >’?csid=692ejv2bp52vr2ffcv7mjgki27′

    セッション周りの設定は、ドキュメント通りに行っているつもりです。
    携帯の場合も、Session->read等で、セッション値を引き継げるのですよね。
    何かアドバイス、チェック項目等を頂ければ幸いです。
    よろしくお願い致します。

  6. imode携帯を所持していないので申し訳ないのですが、CakePHP1.3.0に0.2.3を導入してimodeシミュレータで検証しましたが問題なく動作しているようです。

    サーバー側の環境が影響している可能性がたかいです。

    ちなみに、0.2.3では「session.use_trans_sid」が有効でない場合に有効にする処理がうまく働かない不具合があるため、0.3.2で(正確には0.3.1で)修正をしたのですが、csidとかなっているのでたぶんこの辺は問題ないかと思いますが、新しいバージョンで試していただけますと幸いです。

  7. >新しいバージョンで試していただけますと幸いです。

    最新バージョンでも同様でした。しかし「世界一簡単な携帯」ではOK。
    更にデバッグ関数を入れて文字化けが起きた時、SIDによるセッションが
    維持できる事がわかり、私のコード側に何かしらに要因がある事が判明。
    私のコードを単純化してゆき、色々調べた所、コンポーネントに、
    ‘session’を読み込んでいると駄目になるようです。
    通常ブラウザも閲覧対象にしたいのですが、’session’は必要ありませんかね。
    Ktaiライブラリだけでも、PCのクッキーセッションを維持できるみたいですが…。
    対応策等、ご教授願えると幸いです。

  8. こちらでも、$componentsへのSessionコンポーネントの適用そのものはどこに入れても問題なく動いていますし、周辺処理も正常に動いています。

    独自でsession処理をしていますか?
    Cakeのsession処理は、Session::read()等セッション操作をした時点からsession_start()を発行します。逆に言いますとそれ以前にsession_start()等を発行しますと、セッション処理が初期化を行いセッションIDを振り直すと思いますので、この辺は全てCakeSessionに任せないとうまく動かないと思います。

    またKtai Libraryでは、セッション処理はKtaiコンポーネント内のinitialize()コールバック内で行っていますので、それ以前にセッション操作を行うとうまく動かないと思います。

  9. お手数をお掛けして、申し訳ありません。

    >独自でsession処理をしていますか?

    いえ、全くしていません。こちらで「世界一簡単な携帯」のコードに、以下の様に
    ‘session’コンポーネントを読み込ませてみましたら、同様にセッションが維持できなくなりましたが、
    こちらのサーバーの問題なんでしょうか。チェック箇所等、ありましたらご指示下さい。

    var $components = array(‘Ktai’,’session’);

    あと、セッションとは関係ありませんが、以下の様なエラーが出ました。
    私のページでは文字コードをUFT-8にしているのですが、その為なのでしょうか?

    >Notice (8): Undefined index: output_auto_encoding [APP/views/helpers/ktai.php, line 164]

    コントローラーで以下の様に、明示的にoutput_auto_encodingを定義したら、
    エラーが出なくなりました。

    var $ktai = array(
    ‘use_img_emoji’ => true, //画像絵文字を使用
    ‘input_encoding’ => ‘UTF-8’, //入力をUTF-8に変更
    ‘output_auto_encoding’ => true, //入力をUTF-8に変更
    //      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^※この一行を追加
    ‘output_encoding’ => ‘UTF-8’); //出力をUTF-8に変更

  10. 原因になりそうなものをいろいろ試してみましたが、こちらでは現象が出ません。
    sessionコンポーネントの設置場所を変えてみたり、エンコーディング関連の設定を外してみたりしましたが正常に動作しています。
    ですので、大変に申し上げにくいですが、動作環境に何か問題があるか、もしくはお書きになったコードのどこかに不具合があるかの可能性が高いです。

    また、output_auto_encodingがundefinedになっている点についても通常なら現象としてあり得ないところです。ktaiヘルパー内の$optionsに初期値が登録されていますので、消えることが不明です。考えられるとしたらarray_margeが働いていないか参照渡しが失敗しているかのどちらかです。

    コメント上では詳細が分かりかねますので、もしよろしければcakeフォルダなど込みで動作環境をアーカイブ化して当方にお送りいただくことはできますか?
    今週からしばらくイベントなどで忙しいので即答はできないかもしれませんが、追跡はさせていただきますので。
    メールはinfoあっとecworks.jpです。

  11. 本当にお手数をお掛けして、申し訳ありません。そして色々と、ありがとうございます。

    >動作環境に何か問題があるか、もしくはお書きになったコードのどこかに不具合があるかの可能性が高いです。

    了解です。

    >ktaiヘルパー内の$optionsに初期値が登録されていますので、

    これって、views\helpers\ktai.phpの事ですか? ’output_auto_encoding’でgrepすると
    views\helpers\ktai.phpの#164のみで、初期値を設定している箇所が見当たりません。
    とすると、私がKtaiライブラリのインストールに失敗している可能性が高いです。
    とりあえずもう一度、真っ新のcakeにKtaiライブラリをインストールし直してみます。
    その後、問題があったら、ご面倒をお掛けすると思いますが、メールさせて下さい。
    ちなみに私がリンクを見落としているのかも知れませんが、Ktaiライブラリのダウンロードは、
    一つ一つリポジトリから落とすしか、方法はありませんか?これだとミスしそうなので…。

  12. すみません。
    当方で検証していたバージョンが最初に報告のあった0.2.3でしたので、最新版で試していませんでした。

    output_auto_encodingについては、ヘルパーの中に初期値がありませんでした。
    なのでヘルパーのみで運用したい場合は確かにワーニングが出るかもしれません。
    この件については修正しておきます。

    それ以外の件については正常に機能していまして不具合等出ていません。

    ふと気がついたのですが、ktaiコンポーネントが正常にロードされていない場合はセッションがうまく機能しないと思いますので、ktaiコンポーネントの設置ミスも考えられます。この辺もお確かめください。

  13. KtaiLibrary初導入しました!
    質問なんですが、ダウンロードしたKtaiLibrary配下
    app/controller/配下にktai_app_controller.phpというのがあったので、
    そのファイルを開き、

    class KtaiAppController extends AppController {
    省略・・・・・
    }

    のソースコードを、自分のインストールしたCake、/cake/libs/controller/配下に
    app_controller.phpがあるので、そのファイルを開くと下記のように書いてあったので、
    class AppController extends Controller {
    }
    その下に
    class KtaiAppController extends AppController {
    省略・・・・・
    }
    を付け加えてみたのですが、正しいでしょうか??

    また、
    【app/views/mypages/red.ctp】
    (一応ブランクファイルを作っておく)
    何故red.ctpを作るのですか??ブランクファイルを作ると、どうなるのですか?

    最後に、
    app/tmp/cache/persistentディレクトリ内のフラッシュ
    これはドコかのソースコードにflash(~)みたいなソースを書けばよいのでしょうか?

    素人過ぎる質問すいません。

  14. 度々すいません。
    is_ktai関数を使うと
    Call to a member function is_Ktai() on a non-object
    と表示されるので
    app_controller.phpの設定の仕方が間違っているのでしょうか?
    色々試してみたのですが上手くいかないです

  15. ありがとうございます。
    質問の解答は次の通りです。

    【質問1】
    ktai_app_controller.phpは、App::import()で読み込んで使用してください。
    当ブログ記事は0.1.x時のもので、最新バージョンの0.3.xからは導入方法が変わっています。
    詳しくは添付されたreadme.txtをお読みください。

    【質問2】
    ブランクファイルを作っておくと、もし何かの問題があってリダイレクトされなかった場合に「ビューがない」というエラーの表示を抑制できます。

    【質問3】
    「is_Ktai()」ではなく「is_ktai()」です。たぶんスペルミスかと思います。

  16. 迅速な回答ありがとうございます!
    詰まってたんで本当助かります笑
    まだ試していませんがこれから試してみます!

  17. すいません。readme.txt見ましたが、App::import()のことが記載されておらず、
    添付されているapp_controller.php.ktaiをapp/controllersディレクトリに
    コピーして「app_controller.php」にリネームするか、既に設置されている
    app_controller.phpにコード部分をペーストします。
    と記載されておりました。
    最新バージョンはこの手順を踏まず、
    ktai_app_controller.phpをappディレクトリに置き、
    自分で作成さたcontroller内部でApp::import()するようにすれば良いのでしょうか?
    App::import()するっていうのは、
    ktai_app_controllerのcontrollerを呼び出すという意味で良いですか?

  18. KtaiAppControllerに関してはreadme.txtに更新漏れがありました。
    申し訳ございません。

    例えばMypagesControllerを制作する場合は、次のようにしてください。

    ———- ここから ———-
    App::import(‘Controller’, ‘KtaiApp’);
    class MypagesController extends KtaiAppController {

    //任意の処理

    }
    ———- ここまで ———-
    KtaiAppControllerを用いたくない場合は、AppController内に「KtaiAppController内に記述されているredirect()、__redirect_url()メソッド」をAppControllerにコピーペーストしてください。

  19. 何かやっと分かってきました・・すいません色々ご迷惑おかけしました
    is_ktaiの件はスペルミスというよりも、参考にしていた本だとktailibraryのバージョンが古かったので
    呼出し方が違うんですね。

    古いバージョン
    //携帯からのアクセスだったらPC用へ
    if($Ktai->is_ktai()){

    新しいバージョン
    //携帯からのアクセスだったらPC用へ
    if($this->Ktai->is_ktai()){

    今後、本を参考にしていると、また今回のような事が起こってしまいそうなんで、
    最新のドキュメント又は、最新のKtailibraryを勉強するのに良いドキュメントは添付のREADME.txt以外ありますか?

    あと、できれば添付のREADME.txtに更新漏れがないかもう一度チェックをして頂けると助かります。

    最後に一点
    app/tmp/cache/persistentディレクトリ内のフラッシュ
    という手順が未だ分かりません。具体的にどのようなソースを書けば良いのか?
    と何故persistentディレクトリ内のフラッシュを行わないと、app_controller.phpが反映されないのか?

  20. > is_ktaiの件はスペルミスというよりも、参考にしていた本だとktailibraryのバージョンが古かったので
    呼出し方が違うんですね。

    いえ、コントローラ内(コンポーネント使用)とビュー内(ヘルパー使用)を混同されていると思います。
    コンポーネントは「$this->Ktai->is_ktai()」、ヘルパーは「$ktai->is_ktai()」です。
    これはCakePHPの規約です。

    > 最新のドキュメント又は、最新のKtailibraryを勉強するのに良いドキュメントは添付のREADME.txt以外ありますか?

    現状ありません。
    最新版は先週出たばかりです。

    > app/tmp/cache/persistentディレクトリ内のフラッシュという手順が未だ分かりません。

    ディレクトリ内に生成されている全てのファイルを消してください。
    ディレクトリは消してはいけません。
    つまりフラッシュとは「ファイルを消して最初の状態に戻す」ということです。

  21. ありがとうございます。
    全て納得いたしました。

    Ktailibrary 第4章 サーバの設定について

    DNSの設定で、SPFレコードにも設定をしておく部分は飛ばしてもよいでしょうか?
    一応下記を参考に
    http://arisonsvr.org/web/maincontents/serverset/dns/dns.html
    やってみようと思うのですが、
    長く躓いているのだったら後に回そうかと思っています。
    ちなみにSPFレコードを設定するのは

    メールサーバのサブドメイン設定
    MXレコードにmail.example.comを設定
    @example.comのメールは全て有効

    を設定すれば良いんですよね?

  22. お世話になっております。
    P213で、サンプルソースをダウンロードし、ユーザ追加を行いましたが、saveAllで追加失敗してしまいます。
    $this->dataにデータは入っています。テーブルもサンプルのsqlをインポートしたので問題ないかと思います。
    何がいけないのでしょうか?アイデアを頂ければと思います。

    あと、また原因調べてないのですが、ログインIDを半角英数字で入力しても半角英数字で入力してくださいと
    エラーが出ます。(こちらは現状、コメントアウトしてます)

    以上。どうぞよろしくお願いします。

  23. どんなエラーが出ているのか、SQLはどんなものが出ているのか分かりませんが、データベースのエンコーディングがUTF-8ではないのではないでしょうか? もしくはソースのアップロード時のエンコーディング変換、BOMなども疑わしいものの一つです。

  24. エンコーディングはUTF-8で統一しています。
    またBOMも見てみましたが、付けていませんでした。

    実行した際、ロールバックが起きているということはやはり問題があることですよね

    下記に登録時のデバック情報を添付します

    DESCRIBE `users` 9 9 1
    DESCRIBE `configrations` 4 4 0
    SELECT `Configration`.`name`, `Configration`.`value` FROM `configrations` AS `Configration` WHERE 1 = 1
    START TRANSACTION
    ROLLBACK

    と表示されています

  25. PHPで作る携帯サイトデベロッパーズガイドを購入させて頂きました。
    P213のユーザ追加を行っているのですが、ユーザ追加のログインIDだけ
    半角英数字で入力しているのですが、『半角英数字で入力してください』という
    エラーがでてしまいます。この解決策がわからないのですが、なにかアイデアを
    頂ければと思いコメントさせて頂きました。

  26. 有用なライブラリをありがとうございます。
    つまずいています。

    このページのサンプルを設置したのですが、「更新」リンクでは値がカウントがアップされるのに「リダイレクト」のほうでは、カウントアップがされません。
    リダイレクトのほうだと、csidが毎回変わってしまいます。つまりセッションIDが毎回変わってしまいます。
    更新リンクではうまくいくので何が違うのか。。。何か手がかりになるような情報はありますでしょうか。

    環境:
    PHP 5.3.3
    CakePHP 1.3.6
    Ktai Library 0.4.0

  27. KtaiAppControllerクラスを適用していますか?
    もしくはAppController内に、上記クラスの必要箇所をコピーしていますか?

    リダイレクトでセッション値が更新されない場合は、上記redirect()メソッドのオーバーライドが適切でない事がありますのでご確認ください。

    ※本記事はKtaiAppControllerクラスの新設がない頃の解説のため、上記解説がされていません。
     詳しくはアーカイブ内に添付されていますreadmeをご覧ください。