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

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

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