AngularJSのチュートリアルをCakePHPでやってみる。その5

4日目のソースが欲しい方はこちらです。
サンプルページはこちらです。

ルート設定と複数のビュー

ここではAngularJSで複数のビュー(テンプレート)を切り替える為の設定方法を新しくやるようです。 今までの方法はあくまで簡易的な方法で,実際は今回のやり方を推奨しているようです。

大まかな概要

ページを開いた時は今まで通り、スマホの一覧が表示されます。リンクをクリックするとその詳細を開くといった画面を作ります。

必要なもの

• app.js：モジュールを指定する。その中で$routeProviderにURL、テンプレート、コントローラを指定する事で使えるようになるみたいです。
• controllers.js：これは今まで通りコントローラに、新たに'PhoneDetailCtrl'を追加します。
• index.html：表示の大枠のテンプレート。この中の一部が下2つのテンプレートに置き換えるようです。レイアウトテンプレートと呼んでいるようです。この辺はCakePHPと同じです。
• phone-list.html：一覧表示用のテンプレート
• phone-detail.html：詳細表示用のテンプレート。今回は中身はほぼ空です。

内容

• index.htmlにng-app="phonecat"、app.jsにangular.module('phonecat', []). ・・・と対応させる。
• index.htmlで「angular.js」「app.js」「controllers.js」を読み込む。
• index.htmlで他のテンプレートを差し込む部分に<div ng-view></div>を設定する。
• app.jsで$routeProviderをURL、テンプレート、コントローラを設定する。
• 差し込み部分の各テンプレートを用意する。 といった感じです。

CakePHPでの設定

AngularJSをCakePHPで動作させる場合はルートプロバイダの設定を

when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl})

では無く、

when('/phones', {templateUrl: 'http://hogepage.com/angularjs/js/partials/phone-list.html',   controller: PhoneListCtrl})

のようにテンプレートをフルパスで設定し、テンプレートファイル’phone-list.html’をCakePHPの「app/webroot/js/partials」に入れれば良いようです。
どなたか、相対パスでも出来る方法知ってる方いらしたらご教授お願いします。

後はAngularJS公式のチュートリアルと内容同じはずです。

今回はこの辺で、ではでは。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.5
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

AngularJSのチュートリアルをCakePHPでやってみる。その4

4日目のソースが欲しい方はこちらです。
サンプルページはこちらです。

テンプレート内でのリンクと画像

今回はテンプレート内でaタグを使ってリンクするのと、画像を設定する所が、メインです。
つまり以下の部分がキモです。

<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="/angularjs_tutorial/{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>

簡単ですね。imgタグには「src」では無く、「ng-src」で指定するようです。「src」でも普通に動いたんですけど…？

Jsonの変更

今回、JsonController.phpを修正してます。

public function api_get2($type = null){
    // リクエストをデバッグログに書き出し
    $this->ApiTool->logingRequest($this->request);
    // 引数チェック。空か、指定タイプ以外だったら404エラー
    $this->ApiTool->checkType($type,array('phones'));
    // タイプごとにphonesを作り分ける。
    if ($type == 'phones'){
     $phones = $this->__getPhones();
     // debug($phones);die;
     $this->set('phones',$phones);
    }
    // JSON用としてレスポンスを返す
    return new CakeResponse(array('body' => json_encode($phones)));
}

上のメソッドを追加してます。
JSON吐き出す部分を$this->set('_serialize', array('phones'));では無く、return new CakeResponse(array('body' => json_encode($phones))); としてます。こちらでも同じようにJsonを吐き出しますが以前のと違いは、Jsonの一番外側に「CakeResponse」で指定した場合、例えば「’phones’」が付きません。
こっちの方が都合が良いので今後はこっちを使用していくつもりです。
以下比較
serializeで作ったJSON
CakeResponseで作ったJSON

ではでは。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.5
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

AngularJSのチュートリアルをCakePHPでやってみる。その3

Step5 XMLHttpRequestと依存性の注入

3日目のソースが欲しい方はこちらです。
サンプルページはこちらです。

jsonを表示する設定

routes.phpに以下を追加

Router::parseExtensions('json');

CakePHPのコントローラ作成

CakePHPのコントローラ、JsonController.phpを追加します。 これでjsonが表示されます。CakePHPのビューはありません。また、データは本来はDBにテーブル作ってinsertすべきでしょうけど、手間なので直接配列を書いてます。

<?php
App::uses('AppController', 'Controller');

/**
 * Static content controller
 *
 * Override this controller by placing a copy in controllers directory of an application
 *
 * @package     app.Controller
 * @link http://book.cakephp.org/2.0/en/controllers/pages-controller.html
 */
class JsonController extends AppController {

/**
 * Controller name
 *
 * @var string
 */
    public $name = 'Json';

/**
 * This controller does not use a model
 *
 * @var array
 */
    public $uses = array();

/**
 * レイアウトを決める
 */
    public $layout = "common";
 /**
  * コンポーネントの設定
  */
    public $components = array('Tools.ApiTool','RequestHandler');

/**
 * ヘルパーを設定する。
 */
    public $helpers = array();
/**
 * Displays a view
 *
 * @param mixed What page to display
 * @return void
 */
    public function index() {}

    public function api_get($type = null){
    // リクエストをデバッグログに書き出し
    $this->ApiTool->logingRequest($this->request);
    // 引数チェック。空か、指定タイプ以外だったら404エラー
    $this->ApiTool->checkType($type,array('phones'));
    // タイプごとにphonesを作り分ける。
    if ($type == 'phones'){
     $phones = $this->__getPhones();
     $this->set('phones',$phones);
    }
    // ビュークラスをJSONにする
    $this->viewClass = 'Json';
    $this->set('_serialize', array('phones'));
 }

    public function beforeFilter() {
        parent :: beforeFilter();
    }

    //スマートフォンのデータ。配列で返す。
    public function __getPhones(){
        $phones = array(
                array(
                    "age"=> 0, 
                    "id"=> "motorola-xoom-with-wi-fi", 
                    "imageUrl"=> "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
                    "name"=> "Motorola XOOM\u2122 with Wi-Fi", 
                    "snippet"=> "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb)."
                ), 
                array(
                    "age"=> 1, 
                    "id"=> "motorola-xoom", 
                    "imageUrl"=> "img/phones/motorola-xoom.0.jpg", 
                    "name"=> "MOTOROLA XOOM\u2122", 
                    "snippet"=> "The Next, Next Generation\n\nExperience the future with MOTOROLA XOOM, the world's first tablet powered by Android 3.0 (Honeycomb)."
                ), 
                array(
                    "age"=> 2, 
                    "carrier"=> "AT&amp;T", 
                    "id"=> "motorola-atrix-4g", 
                    "imageUrl"=> "img/phones/motorola-atrix-4g.0.jpg", 
                    "name"=> "MOTOROLA ATRIX\u2122 4G", 
                    "snippet"=> "MOTOROLA ATRIX 4G the world's most powerful smartphone."
                ), 
                array(
                    "age"=> 3, 
                    "id"=> "dell-streak-7", 
                    "imageUrl"=> "img/phones/dell-streak-7.0.jpg", 
                    "name"=> "Dell Streak 7", 
                    "snippet"=> "Introducing Dell\u2122 Streak 7. Share photos, videos and movies together. It\u2019s small enough to carry around, big enough to gather around."
                ), 
                array(
                    "age"=> 4, 
                    "carrier"=> "Cellular South", 
                    "id"=> "samsung-gem", 
                    "imageUrl"=> "img/phones/samsung-gem.0.jpg", 
                    "name"=> "Samsung Gem\u2122", 
                    "snippet"=> "The Samsung Gem\u2122 brings you everything that you would expect and more from a touch display smart phone \u2013 more apps, more features and a more affordable price."
                ), 
                array(
                    "age"=> 5, 
                    "carrier"=> "Dell", 
                    "id"=> "dell-venue", 
                    "imageUrl"=> "img/phones/dell-venue.0.jpg", 
                    "name"=> "Dell Venue", 
                    "snippet"=> "The Dell Venue; Your Personal Express Lane to Everything"
                ), 
                //...
                //中略
                //...
                array(
                    "age"=> 19, 
                    "id"=> "motorola-charm-with-motoblur", 
                    "imageUrl"=> "img/phones/motorola-charm-with-motoblur.0.jpg", 
                    "name"=> "Motorola CHARM\u2122 with MOTOBLUR\u2122", 
                    "snippet"=> "Motorola CHARM fits easily in your pocket or palm.  Includes MOTOBLUR service."
                )
        );
        return $phones;
    }
}
?>

で、「/angularjs_tutorial/json/api_get/phones.json」にアクセスすると以下の様な画面でJSONが吐出されているのが確認出来ます。

AngularJSのコントローラを作成。

controllers.jsを修正。上で作ったJSONのデータを「$http.get()」メソッドで取得しています。公式のチュートリアルのコードは成功した時の処理しか無いですが、 動作がわかりにくいので失敗した時の処理も追加してます。
ここで追加されている「$http」はサービスというものらしいです。コントローラの引数に必要なサービスをその都度指定して利用するようです。
このへんがAngularJSの依存性の注入に当たる様な、そうで無いような…。どなたかわかる方教えて下さい。

function PhoneListCtrl($scope,$http) {
    $http.get('../json/api_get/phones.json').success(function(data,status) {
        console.log('success');
        console.log(data);
        console.log(status);
        $scope.phones = data.phones;
        //$scope.phones = data.phones.splice(0,5);  //実験用
    }).error(function(data, status) {
            console.log('error');
            console.log(data);
            console.log(status);
    });
}

view側に変更はありません。でサンプルページのように動作しているのが確認出来ます。
今日はこんな所で終わりです。ではでは。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.5
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

AngularJSのチュートリアルをCakePHPでやってみる。その2

二日目のgithubコード

githubから必要な方はダウンロードして下さい。

Step3 繰り返し内からの抽出

Step3のサンプルページ
抽出機能を追加します。stepo3.ctpを以下のように変更。

    <?php
    $this->set('title_for_layout',Configure::read('Toutorial03.title'));

    // bodyの属性にng-appを設定する。
    $this->start('body_attr');
    echo 'ng-app';
    $this->end();

    // sidebarにinnput要素を追加
    $this->start('sidebar');
    ?>
    Search: <input ng-model="query">
    <?php
    $this->end();

    // AngularJS用の設定、コード。
    $this->start('script');
    // スクリプトを読み込む。
    echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js') . "\n";
    echo $this->Html->script('step3/controllers.js') . "\n";
    $this->end();
    ?>
    <div>
        <div ng-controller="PhoneListCtrl">
            <h4>ビューとテンプレート</h4>
            <ul>
                <li ng-repeat="phone in phones | filter:query">
                    {{phone.name}}
                    <p>{{phone.snippet}}</p>
                </li>
            </ul>

            <h4>以下実験</h4>
            <p>  <div id="status">現在のフィルター: {{query}}</div></p>
        </div>
    </div>

1. AngularJS
   • ng-controller(controllers.js)は変更なし
   • html側に標準のinputタグを追加。innputにはng-modelでqueryを設定。
   • ng-repeatにfilter:queryを追加。これでqueryの内容で抽出する。
   • 特に指定無い場合はphone.name,phone.snippetの両方で抽出する。
2. Cakephp
   • レイアウト側にbodyタグがあるので$this->start('body_attr');でレイアウトbody属性に設定
   • レイアウト側でsidebarを分けているので$this->start('sidebar');でサイドバーの設定

Step4 双方向型のデータ連結

Step4のサンプルページ
ソートの機能を追加します。
step4.ctpの修正。
サイドバー部分に以下を追加。

    Sort by:
    <select ng-model="orderProp">
        <option value="" selected>unknown</option>
        <option value="name">アルファベット順</option>
        <option value="age">新作順</option>
    </select>

ng-repeatの値に

    | orderBy:orderProp

を追加

controllers.jsの修正。各データにageを追加。

これだけでセレクトタグからソート順を選択できる。楽ちんすぎて心が痛いです。

今日はこんな所で終わりです。ではでは。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.5
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

AngularJSのチュートリアルをCakePHPでやってみる。その１

AngularJSのチュートリアルをやって行きたいと思います。

AngularJSをいじるのに限界がきたので、公式のチュートリアルをやって理解を深めようと決心しました。
せっかくなので覚えたてのgithubでコードを公開しようと思います。本日分はこちら
サンプルサイトも公開します。
なお、busyoumonoは英語読めないので感覚で書いてます。なんか違う！って時はご教授お願いします。

CakePHP側の準備

普通にCakePHPをダウンロードして解凍してってヤツです。説明しているサイトは他にもあるので割愛します。githubでコード見てもらえばわかると思います。

Step0 準備と基本

AngularJSファイルの読み込み

サンプルサイト Step0
Setp00.ctpで

$this->start('script');
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js') . "\n";
$this->end();

のように書いてAngularJSを読み込みます。

ng-app

属性にng-appをつけると、その要素内でAngularJSを使う宣言になる模様。

2個の波括弧

波括弧で囲むと簡単な式を実行して表示するようになる。

まだここには、何も{{'ありません' + '!'}}

Step1 静的なテンプレート

静的なテンプレートを試す

サンプルサイト Step1
Setp01.ctpで

<ul>
    <li>
        <span>Nexus S</span>
        <p>
            Fast just got faster with Nexus S.
        </p>
    </li>
    <li>
        <span>Motorola XOOM™ with Wi-Fi</span>
        <p>
            The Next, Next Generation tablet.
        </p>
    </li>
</ul>
<p>Total number of phones: 2</p>

と書き直し。リストが表示されたらOK。ここはそれだけ。

Step2 AngularJSのテンプレート

サンプルサイト Step2

• AngularJSは Model-View-Controller (MVC) 設計パターンを利用している。
• AngularJSはHTMLをテンプレートとして使う模様。
• HTMLの中に波括弧2つで囲み、モデルを表示する。
• PHPのフレームワークと違って Model-View の結び付きが強い模様。ViewがModelを手放さないって感じ。

ng-controllerの設定

Step02.ctpで

<div ng-controller="PhoneListCtrl">

と書いてコントローラを指定している。
コントローラは webroot/js/step2/controllers.js ファイルを作って

function PhoneListCtrl($scope) \{
    $scope.phones = [
        {"name": "Nexus S",
         "snippet": "Fast just got faster with Nexus S."},
        {"name": "Motorola XOOM™ with Wi-Fi",
         "snippet": "The Next, Next Generation tablet."},
        {"name": "MOTOROLA XOOM™",
         "snippet": "The Next, Next Generation tablet."}
    ];
\}

で保存する。

• ビュー側で使うコントローラを指定する。
• js側でコントローラを作成する。
• コントローラの引数 $scope はAngularJSで使われる大事な変数みたい。
• 今回のコントローラは「phones」というモデル（データ）を設定してるだけ。

ng-repeat

この属性を指定した要素を繰り返す。
Step02.ctp

<ul>
    <li ng-repeat="phone in phones">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
    </li>
</ul>

• コントローラに設定されたphonesのモデルをループ処理している。
• liタグを繰り返す。
• phone.nameやphone.snippetで各データを表示できる。

Step2までは以上です。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.5
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

AngularUIのdatepickerを使ってみた

AngularUIって?

相変わらずAngularJSと格闘する日々が続いてます。先日AngularJSについてググってたら AngularUIなるものを見つけました。
当方、英語は読めないので推測ですが、どうやらAngularJSを拡張して色々なUIが使えるようになるようです。jQueryとjQueryUIみたいな関係です。
どんなものがあるかはリンク先を見てもらえばサンプルが沢山あるのでなんとなくわかると思います。
ちょっと必要に迫られてAngularUIのDatepicker（AngularUI内での名前はDateです）を使ってみました。その時の内容です。

準備編

まず必要なファイルをダウンロードします。
AngularUIの「Download」をクリックするとgithubのダウンロードページに行きます。
そのページからzipファイルをダウンロードします。今回はv0.4.0のzipを使いました。解凍して展開したディレクトリ「angular-ui-0.4.0」を適当なWebページにコピーします。Cakephpなら「webroot/js」です。
当然この他にAngularJSも必要ですがGoogleライブラリAPIの「ajax.googleapis.com」から読み込むのでダウンロードしません。
後、CSSのTwitterBootstrapもダウンロードしておきます。こちらはCakephpでいう所の「webroot/css」に放り込んでおきます。

設定編1 ファイルの読み込み

AngularUIを使えるようにphpファイルで設定が2つほど必要です。
注意:今回はDatepickerを使うための設定ですが、これで他のUI(例えばSelect2)はjavascriptでエラーが出て使えなかったので他にも設定やファイル必要かもしれません。注意終わり

htmlのheadタグ内でファイルの読み込み設定をします。
読み込むjsファイルは

1. jQuery
2. jQueryUI
3. AngularJS
4. AngularUI

です。読み込む順も上の通りでないとエラーが出るようです。
cakephpのコードで書くと

echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js') . "\n";
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js') . "\n";
echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js') . "\n";
echo $this->Html->script('angular-ui-0.4.0/build/angular-ui') . "\n";

といった感じです。
またこの他にCSSファイルも読み込みます。

1. Twitter bootstrap
2. jQueryUI
3. AngularUI

こちらは順番関係無いはずです。試してませんが。
同じくCakephpのコードで書くと

echo $this->Html->css(array('bootstrap.min','bootstrap-responsive','cake_bootstrap','pazudoraken')) . "\n";
echo $this->Html->css(array('/js/angular-ui-0.4.0/build/angular-ui')) . "\n";
echo $this->Html->css(array('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css')) . "\n";

設定編2 AngularJSのモジュール設定

続いてAngularJSにAngularUIを使うよ〜、って教えて上げます。（多分）
htmlの要素の中に「ng-app」をモジュール名付きで設定します。例えば以下の様にします。

<body ng-app="HogeModuleName">

このモジュール設定の辺りはよくわかって無いのですが、おそらく「ng-app」で設定した文字列がモジュール名になるようです。詳しいことはわからないので偉い方教えて下さい。m(_ _)m
続いてjs側でも設定します。

<script type="text/javascript">
//AngularUIを読み込む？
var HogeModuleName = angular.module('HogeModuleName', ['ui']);
//読み込んだAngularUIの初期設定？
HogeModuleName.value('ui.config', {
   select2: {    //AngularUIのUIの1つ「select2」の設定の模様。今回使用してないので要らない
      allowClear: true
   }
});

....
//何かAngularJSの処理
....

</script>

これで設定はOKです。

いざ！使ってみる。

Datepickerを表示したい箇所に以下を記述します。

<input ng-model="date"
ui-date="{ dateFormat: 'yy-mm-dd' }"
ng-change="hogeChange()">

すると、インプット要素が表示されてカーソルが移るとカレンダーが表示されるはずです。

見た感じ、カレンダー自体はjQueryUIのものを使用してるみたいですね。以上早く英語を勉強しなきゃと焦っているbusyoumono99がお送りしました。何かのお役に立てたらうれしいです。

参考にしたサイト

AngulaUI←のGetting StartedとDateの部分
StackOverflow - Getting Angular UI to work

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
JSフレームワーク	AngularJS 1.0.4
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

Sublime Text2 使い方まとめ

Sublime Text2を使い始めました

ちょっと前から流行ってるらしい、噂の恋に落ちるテキストエディタSublime Text2を使い始めました。今までEclipseを使っていたのですが、すぐにSublimeText2に乗り換えをきめました。
軽い、最初はある程度の機能で好みにカスタマイズできる、オシャレと私の心を鷲掴されました。
以下は自分の忘備録を兼ねての記事です。下のリンクの内容を更にまとめたといった感じです。

画面構成

画面下に

LineとColumn
Tabのサイズ
ソースコードのカラーリング

画面右に

ミニマップ

画面左に

サイドバー、(表示・非表示の切り替えcmd + k,cmd + b)

各種設定

設定変更方法

Preferencesで変更していく。

• FontとColor Schemeは直接変更。
• それ以外はDefaultの中身を参考にしてUserのJSONのファイルを書き換える。

Settings設定変更内容

"font_size": 14,  //フォントサイズ
ignored_packages  //Viの設定のON・OFF
"highlight_modified_tabs": true, //編集が行われたファイルのタブをオレンジ色にする
"scroll_past_end": true//最後の行を超えてスクロール出来る
"draw_white_space": "all"//空白文字を表示
"line_padding_top": 5,//行間
"tab_size": 4,//タブサイズ
"trim_trailing_white_space_on_save": true,//空白の削除
"highlight_line":true,//現在の選択行をハイライト表示(お好みで)
"word_wrap": true//自動改行
"theme": "Soda Dark.sublime-theme"

Key Bindings設定内容

• キーの内容
  • Super = cmdキー
  • ctrl = controlキー
  • alt = Altキー
• 設定内容

  • { "keys": ["ctrl+s"], "command": "toggle_side_bar" }  //サイドバーの表示・非表示

編集補助

保存した拡張子でエディットモードが変わる。タグ、関数、クラス名等の補完が有効になる。

コメントの切り替え。cmd + /

htmlの場合は右クリックで「Open in Browser」でブラウザが開く。

マルチカーソル

cmd + マウスドラッグ

cmd + d / cmd + u

cmd + ctrl + g

コマンドパレット

ショートカット

cmd + Shift + p

使用例：内容の色付け

Syntax : 言語名

Hotsave

ファイルを編集した状態でアプリを終了しても、保存無しで終了する。次開いた時は編集状態が残ったまま(終了時の状態のまま)始まる。

Goto Anything (複数ファイルの検索機能)

ショートカット

cmd + p

ファイル名以外の記述

:　行番号
@　シンボル(関数名、クラス名とか)
#　文字検索

プロジェクの管理

プロジェクト無しでも問題ない。ファイル単体でも開く。

プロジェクの作成

Project > Save Project As...

プロジェクの編集

Project > Edit Project

フォルダの指定

path //作業フォルダを指定するとそれ以外は見ないようになる。複数のパスを指定できる。

拡張子の指定

"file_exclude_patterns" : ["*.php"] //phpファイルは除く設定

スニペット

使い方

コマンドパレットで[Snippet]で検索。
もしくはスニペットトグルを記述して[Ctrl] + [space]

登録

Tools > New Snippet

<tabTrigger>hello</tabTrigger>//トリガー。実行するスニペットの名前みたいなもの。例だと「hello」
<content><![CDATA[
hogehoge;
]]></content> //スニペットの内容。hogehogeの部分が実際に実行される。

例PHPコード

echo "Hi, ${1:Tom}"; //${1:Tom}カーソルの位置、数字はカーソル移動順序、コロン以降はデフォルト値

保存場所

言語名のディレクトリ(無い場合は作成する)
保存名。トリガー名.sublime-snippet。例　hello.sublime-snippet

Build機能

作成

Tools > Build System > New Build System...

内容例

"cmd": ["php", "$file"] //$fileが現在のファイルの意味

保存

buildsディレクトリを作成してその中に保存。通常言語名で保存

選択

Tools > Build System > 言語

実行

Tools > Build // cmd + b
下にコンソールが開いて実行結果が表示される

パッケージの導入

Package Control

パッケージを簡単にインストールしてくれるパッケージ
http://wbond.net/sublime_packages/package_control/installation　でインストールコマンドをコピー
View > Console　でコンソールを表示する。
コンソールにペースト。Enterで実行。Sublime Textを再起動する。

他のパッケージの導入

コマンドパレットを開く。install Packegeを選択して実行。
パッケージのリストがあるので名前を入力して検索。該当パッケージを選択して実行。
少し待つ。successfully loadedが表示されたら成功。

導入したパッケージ

Emmet

zencodingの次世代バージョン。html関係のコーディングが早くなる。

AngularJS Attributes Completion

AngularJSの属性を自動補完してくれる。

Bracket Highlight

htmlのタグ、jsの括弧のペアをハイライトしてくれる

Side Bar Enhancements

サイドバー右クリックのメニューを拡張するパッケージ。
ブラウザを開いて確認などのよく利用するコマンドがある。

TrailingSpaces

行末の余分なスペースをハイライトする。

SublimeCodeIntel

関数・変数が定義されているところにジャンプする

abacus

イコールとかコロンとかを綺麗に揃える。
ショートカット:cmd + option + ctrl + ]

AutoFileNameimg

タグやcssなどで、パスを入力する時に、ファイル名を補完する

SublimeLinter

HTML,CSS,PHP,JS等々のリアルタイム文法チェックをする

All Autocomplete

標準の自動補完（オートコンプリート）機能を強化し、マッチする文字列があればサジェストする。

CakePHP(Native)

CakePHPのスニペットおよびオートコンプリート集

ConvertToUTF8

文字エンコードのShiftJIS等をUTF8に変換する

SublimeCodeIntel

多くの言語に対応した自動補完やジャンプ機能を利用可能にする

Theme-Soda

カラースキーマのオシャレなテーマ

Twitter Bootstrap Snippets

Twiiter Bootstrapのスニペット

ウィンドウの分割と操作

分割

cmd + Option + n //左右でn個に分割。元に戻すにはnを1にする。
cmd + Option + Shift + n //上下でn個に分割

分割ウィンドウへのカーソル移動

マウスクリック 又は
cmd + n //n個目のウィンドウに移動

分割ウィンドウへのファイル移動

マウスドラッグ 又は
cmd + Shift + n //n個目のウィンドウに移動

複数Mac間で設定共有

DropBoxを使用する。アカウントを取得しておく。

1. SublimeTextを終了。
2. DropBox内に[Sublime Text 2]ディレクトリを作成。
3. SubLime Text 2をインストールしたフォルダを開く

   デフォルトのインストール先は
   “~/Library/Application\ Support/Sublime\ Text\ 2/"

4. 以下の3つのフォルダを先ほど作成した「Sublime Text 2」ディレクトリにコピーする

   "Installed Packages"

   "Packages"

   "Pristine Packages"

5. コピー元のディレクトリを削除またはリネームする
6. ターミナルを開き、以下のコマンドを実行する

   "cd ~/Library/Application\ Support/Sublime\ Text\ 2/"
   "ln -s ~/Dropbox/Sublime\ Text\ 2/Installed\ Packages ./Installed\ Packages"
   "ln -s ~/Dropbox/Sublime\ Text\ 2/Packages ./Packages"
   "ln -s ~/Dropbox/Sublime\ Text\ 2/Pristine\ Packages ./Pristine\ Packages"

7. Sublime Text 2を開き、Dropbox内のディレクトリにリンクされていることを確認

   Sublime Text 2 > Preferences > Browse Packages… でDropbox内のPackagesディレクトリが開かれる

8. 別MacにSublime Text 2をインストール。
9. 一度起動して終了する。
10. “~/Library/Application\ Support/Sublime\ Text\ 2/"内のディレクトリをリネームする。
11. ターミナルで「6」のコマンドを実行する。
12. またディレクトリがリンクされている事を確認

google日本語入力との兼ね合い

様々なプラグインとgoogle日本語入力で動作の不具合が発生するので対処する。

Kye Bindings Defaultの以下「tab」キー関連をコメントアウト

// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
//  "context":
//  [
//   { "key": "setting.tab_completion", "operator": "equal", "operand": true }
//  ]
// },
   

但しスニペットを「tab」キーをで実行できなくなる。スニペットは「ctrl + space」かコマンドパレットで実行。

Emmetプラグインが「tab」キーをおかしくする件。

以下をuser settingsに追加する。

{
  // tabでの展開の上書きしない for Emmet
  "disable_tab_abbreviations": true,
  // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
  "disable_formatted_linebreak": true
}
   

全角文字が半角2文字と同じ幅にならない。

フォントにRictyを使い、フォントサイズを偶数にする。

"font_face": "Ricty",
"font_size": 14,
   

日本語入力中にタブキーを押すと、候補選択にならず、タブ入力になってしまう。

次のDefaultキーバインド設定をコメントアウト

// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": true} },
// { "keys": ["tab"], "command": "insert_best_completion", "args": {"default": "\t", "exact": false},
//   "context":
//     [
//       { "key": "setting.tab_completion", "operator": "equal", "operand": true }
//     ]
// },
   

プラグインのアンインストール

• コマンドパレット表示
• 「package remove」で検索
• インストールされたプラグインが一覧になっているので該当プラグインを選択。
• 少々待って終了。

チートシート

クラスメソッド株式会社様 開発ブログ

参考にしたサイト

• Sublime Text 2入門 (全14回) - ドットインストール
• ”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！
• Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
• [MAC][WIN]SUBLIME TEXT のススメと最初にすべき日本語入力環境の改善
• エディタ乗り換えてみるテスト（Sublime Text 2）
• Sublime Text 2 Docblockr Pluginとgoogle日本語入力を使っていてENTERを押したら入力内容が消える問題を解消 - hounobouno
• Sublime Text 2 の日本語入力問題 | Nishiaki's Log
• Sublime Text 2にインストールしたプラグイン（パッケージ）をアンインストールする方法 | 株式会社WEB企画スタッフブログ
• 日本語入力でタブを使えるようにする - kaz_shuの日記
• 【追記】【寄せあつめ】今さらだけどSublime Text 2の基本とカスタマイズ【&Vim化】【4日目】 ｜ Developers.IO

以下追記

自分でもチートシート作ってみました。 Sublime Textのチートシートを作ってみた

CakePHPとAngularJSでWebアプリを作る。その4

サーバー側の修正

JSONPってなんだっけ

その3からの続きです。
原因不明で途方に暮れるましたが、ふとAngularJSの

 $http.jsonp(url).success(function(data,status) {

って部分に注目。「JSON」じゃなくて「JSONP」ってなんだっけ？と思いググる。
はてなキーワード:JSONPを読む。フムフム。以下一部を引用。

…JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、…

ん？

例.callbackFunc

！！！ああ、そうでした。以前業務の案件の最中にピュアPHPで「$_GET['callback']」とか、そんな感じのヤツを先頭につけた記憶が蘇って来ました。

リクエストを調べる

こんな時のためにCakePHP側でログを書き出しておきました。

// リクエストをデバッグログに書き出し
  $this->ApiTool->logingRequest($this->request);

/app/controller/HogeUsersController.phpの上記の部分です。
サーバー側でリクエストを受け付けた時に、何かしら値を受け取ってるかもと思い、以下のログファイルを開く。
/app/tmp/logs/debug.log

2013-03-22 13:51:06 Debug: Array
(
    [callback] => angular.callbacks._0
)

ありましたねぇ。この時テンションMAX↑↑↑。

JsonView.phpの修正して確認

JsonView.phpの括弧をつけた部分を以下のように修正します。

 $content = '('.json_encode($data).')';
 if (!empty($this->request->query['callback'])){
  $content = $this->request->query['callback'] . $content;
 }

ブラウザのコンソールを確認してみる。

ちゃんと取得出来てるようです。良かった良かった。

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

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

CakePHPとAngularJSでWebアプリを作る。その3

AngularJS側のページを作る。

コントローラを作成

JSON側はできた（と思っていた）のでAngularJSのアプリページを作っていきます。まずはコントローラです。
/app/Controller/AngularjsController.phpを作成します。

App::uses('AppController', 'Controller');

class AngularjsController extends AppController {
 …
 public $layout = "angularjs";

 public function index() {
  
 }
 
 // jsonを取得するページ。
 public function json_get_test(){
  
 }
 
 public function beforeFilter() {
  parent::beforeFilter();
  $this->set('title_for_layout','AngularJS test');
 }
}

ビューを作成

レイアウトもAngularJS用のレイアウトを用意します。
/app/View/Layouts/angularjs.ctp

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
 <?php echo $this->Html->charset(); ?>
 <title>Test Site<?php echo $title_for_layout; ?></title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php
  echo $this->Html->meta('icon') . "\n";
  echo $this->Html->css(array('bootstrap.min','bootstrap-responsive')) . "\n";
  echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js') . "\n";
  echo $this->fetch('meta') . "\n";
  echo $this->fetch('css') . "\n";
  echo $this->fetch('script') . "\n";
 ?>
</head>
<body>
 <div class="container-fluid">
  <div class="row-fluid">
   <div class="span3">
    <?php echo $this->fetch('sidebar'); ?>
   </div><!--/span-->
   <div class="span9">
<?php echo $this->fetch('content'); ?>
   </div><!--/span-->
  </div><!--/row-->
  <hr>
 </div>
<?php
 echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js') . "\n";
 echo $this->Html->script('bootstrap') . "\n";
?>
</body>
</html>

htmlタグの所に「ng-app」、AngularJS用のjavascriptファイルの読み込みをすれば後は、まあご自由にどぞ。ちなみにCSSはTwitter Bootstrapを使ってます。CakePHP用のプラグインの方は使ってません。

ようやくお待たせしました。メインのAngularJS部分の記述を以下のビューファイルに書いてきます。 /app/View/Angularjs/json_get_test.ctp

<?php
$this->start('sidebar');
echo $this->element('angularjs_localnavi');
$this->end();

$this->start('script');
?>
<script type="text/javascript">

var requestCtrl = function($scope, $http, $templateCache){
  //取得先のURL
  $scope.jsonUrl = 'no url';
  //JSONを取得する
  $scope.doGetUser = function(){
   var url = $scope.jsonUrl;
   console.log(url);
   $http.jsonp(url).success(function(data,status) {
    console.log('success');
    console.log(data);
    console.log(status);
    $scope.result = data;
   }).
   error(function(data, status) {
    console.log('error');
    console.log(data);
    console.log(status);
   });
  }
  //サンプル用のURLとYouTube用のURLのどちらかを設定する。
  $scope.setJsonURL = function(type){
   var url = null;
   if(type == 0){
    url = ' http://sample.com/api/hogeUsers/get/user_list?'
    + [
     'callback=JSON_CALLBACK'
     ].join('&');
   } else {
    url = 'https://gdata.youtube.com/feeds/api/videos?'
     + [
      'q=' + 'ももクロ',
      'alt=json',
      'max-results=5',
      'v=2',
      'callback=JSON_CALLBACK'
     ].join('&');
   }
   $scope.jsonUrl = url;
  }
 }
</script>
<?php $this->end(); ?>
<div >
 <h3>AngularJSでJSON取得のテスト</h3>
</div>
<div ng-controller="requestCtrl">
 <form name="getTarget">
  <pre>$scope.jsonUrl : {{jsonUrl}}</pre>
  <button ng-click="doGetUser()"  class="btn btn-primary">ユーザーJSONデータ取得</button><br/>
  <br />
  <button ng-click="setJsonURL(0)" class="btn">HogeUser List</button>
  <button ng-click="setJsonURL(1)" class="btn">Youtube</button>
 </form>
</div>

これでブラウザ(クローム)のコンソールに取得したJSONオブジェクトが表示されるはず！「HogeUser List」ボタンを押してから「ユーザーJSONデータ取得」を押す！！

JSON側の修正へ

そしてエラー

無常にもコンソールにはエラーが出るorz。

エラーの内容は

Uncaught SyntaxError: Unexpected token : 

予期しないトークン「:」と出ている…。???、直接ブラウザで確認するもJSON形式に則っているように見える…。
ここからハマった。
それならブラウザをFireFoxに変えて試してみる。やっぱりエラー…。でもよく見ると

SyntaxError: invalid label

とエラーの内容が違う。
ここで昔Ajaxでやった時にJSONを「()」で囲む事を思い出す。なんか、この括弧で囲まないとエラーがでるんだっけ？

JsonView.phpをいじる

HogeUsersControllerでJSON用のビューを設定してました。そのビューはどうやら「/lib/Cake/View/JsonView.php」の事らしい。Cakeディレクトリの中にあるので「/app/View/JsonView.php」にコピペして開いてみます。
中を確認すると

   $content = json_encode($data);

という部分があったので、括弧で囲むように修正↓

   $content = '('.json_encode($data).')';

これで再び実行してみる。

またエラー

コンソールに表示された内容は

error
undefined
0 

と出る。「SyntaxError」は出なくなったが、JSONの取得後の「success」側の処理ではなく「error」側の処理を実行している模様。
そして途方に暮れる。
腹立ちまぎれに続きは次回。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

CakePHPとAngularJSでWebアプリを作る。その2

CakePHPでJSONを吐き出すページを作る。正規版

前のは失敗でした

その1で作ったJSON用のページは間違ってました。m(__)m申し訳ないです。以下はJSONを表示するページの作り直しです。
ちなみに今回のも完成ではありません。注意して下さい。

表示するURLを決める

CakePHPのお作法的にどういったURLが正しいか分かりませんが、以下の様にきめました。

http://sample.com/api/hogeUsers/get/user_list

「api」部分はプレフィックスです。core.phpに以下の部分のコメントアウトをとって「api」を追加しました。

Configure::write('Routing.prefixes', array('admin','api'));

ルーターの設定

CakePHP2.xではJSON用のビューを使うための設定が必要らしいです。 設定その1。/app/Config/routes.phpの最後に以下を追加します。

Router::parseExtensions('json');

コントローラの作成

/app/controller/HogeUsersController.phpを作ります。

App::uses('AppController', 'Controller');

class HogeUsersController extends AppController {
　　…
 public $layout = "common";
 /**
  * コンポーネントの設定
  */
 public $components = array('ApiTool','RequestHandler');
 
 public function index() {
 }
 
 public function api_get($type = null){
  // リクエストをデバッグログに書き出し
  $this->ApiTool->logingRequest($this->request);
  // 引数チェック。空か、指定タイプ以外だったら404エラー
  $this->ApiTool->checkType($type,array('user_list'));
  // タイプごとにmodelsを作り分ける。
  if ($type == 'user_list'){
   $models = array(
     array('name'=>'yamada','id'=>115),
     array('name'=>'kitamura','id'=>116),
     array('name'=>'matsumoto','id'=>117),
     );
   $this->set('models',$models);
  }
  // ビュークラスをJSONにする
  $this->viewClass = 'Json';
  $this->set('_serialize', array('models'));
 }
 
 public function beforeFilter() {
  parent::beforeFilter();
  $this->set('title_for_layout','HogeUsers');
 } 
}

コンポーネントに「RequestHandler」を設定します。これはCakePHP2.xではJSON用のビューを使うための設定その2です。
自作したコンポーネント「ApiTool」も設定してます。
「api_get」アクションを作って中身を書いていきます。「$this->viewClass = 'Json';」の部分でJSON用のビューを設定しているようです。最後のシリアライズ「$this->set('_serialize', array('models'));」も忘れないようにしましょう。

自作コンポーネント「ApiTool」

同じ処理を色々な箇所で書きそうだったのでコンポーネントを自作しました。 /app/Controller/Component/ApiToolComponent.php

App::uses('Component', 'Controller');


class ApiToolComponent extends Component {
 // リクエストの内容をログに書き出す。
 public function logingRequest($request = null){
  if (empty($request)) return;
  $this->log($request->params, 'debug');
  $this->log($request->data, 'debug');
  $this->log($request->query, 'debug');
 }
 
 // 引数チェック。空か、$types以外だったら404エラー
 public function checkType($type,$types=array()){
  if (empty($type) || empty($types)) throw new NotFoundException('このページはありません。');
  if (empty($type) || !in_array($type,$types)){
   throw new NotFoundException('このページはありません。');
  }
 }
}

JSON用のページにアクセスしてみる

これでJSONが吐出されるのでブラウザで「http://sample.com/api/hogeUsers/get/user_list」にアクセスしてみます。 以下が表示されました。

{"models":[{"name":"yamada","id":115},{"name":"kitamura","id":116},{"name":"matsumoto","id":117}]}

ブラウザ上で見る限りは、PHPの配列がJSON形式で表示されてます。
しかしこれでは上手く行きません。続きは次回です。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

CakePHPとAngularJSでWebアプリを作る。その１

m(__)m申し訳ないです。この記事は間違ってました。CakePHPとAngularJSでWebアプリを作る。その２に修正した内容を書いたのでそちらを読んで下さい。

CakePHPでJSONを吐き出すページを作る

前提

ひと通り基本的なCakephpのサイトが出来てる前提で進めます。
データベースにUsersテーブルがあって、Userモデル、Usersコントローラは作ってあるとします。

表示するURLを決める

CakePHPのお作法的にどういったURLが正しいか分かりませんが、以下の様にきめました。

http://sample.com/api/users/get/list?id=123

「api」部分はプレフィックスです。core.phpに以下の部分のコメントアウトをとって「api」を追加しました。

Configure::write('Routing.prefixes', array('admin','api'));

これで「UsersController」の「api_get」アクションに内容を書いていきます。

JSONで吐き出すようにコントローラを作成

UsersController.phpに以下を記述

 public function api_get($type = null){
  // 引数チェック。空か、list、all以外だったら404エラー
  if (empty($type) || !in_array($type,array('list','all'))){
   throw new NotFoundException('このページはありません。');
  }
  // タイプで処理を切り分け。そのままsetする。
  if ($type == 'list'){
   $this->set('data',$this->User->find('list'));
  }
  if ($type == 'all'){
   $this->set('data',$this->User->find('all'));
  }
  // URLのクエリをとる
  $id = $this->request->query['id']
  // 試しに適当にsetする。
  $this->set('test','hogehoge');
  // JSON形式で表示するように設定。
  $this->viewClass = 'Json';
  // シリアライズを実行する。
  $this->set('_serialize', array('data','test'));
 }

で、ブラウザでアクセスするとJSON形式のデータが表示される。
おもむろに終わり

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.5
CSSフレームワーク	Twitter bootstrap 2.2.2
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

CakePHPとAngularJSでWebアプリを作る

またまた放置してましたけど気にせずに再開したいと思います。

CakePHPとAngularJSでWebアプリを作っていきます。

AngularJSに惹かれたわけ

ダイナミックにWebページを表示したくてjavascriptのフレームワークを探してたらAngularJSに出会いました。軽く解説している記事など読んでゾッコンになりました。
この感じはjQueryを初めて使った時に似ています。なんかスイスイ実装できる。作ってワクワクしていく感じです。
ですが、AngularJSを扱った記事がまだネット上に少ないです。
英語も読めませんし。そんなことなら自分で作りながら記事にしてみようと思い立った訳であります。

AngularJSの基礎的な事

基本的なことはドットインストール様のサイトで勉強しました。このサイトは無料で取っ掛かりの勉強するのに最適で良く利用してます。
こちらです。
ここのレッスン一覧で「AngularJS 」タグがついてる4つを全部見ました。その内容の解説はしないので悪しからず。

参考に読んだ記事

vvakame様の記事や
TEA-NOMA様の記事(←すごい)や
FumiYamazaki様の記事
atusi様の記事
なんかを読みました。とにかく「AngularJSすげ～！」ってなりました。

これから作るサイトの事

以上を踏まえて、大雑把に以下様な感じで進めて行きたいと思います。

　
• CakephpのView部分はJSON吐き出しとAngulaJS用のページに分ける。
　
• AngularJSのソース部分はCakephpのViewファイルに書く

これで上手く行くかは分かりませんが、進めて行きたいです。

[Cakephp2.2][Twitter bootstrap2.0.4]CakephpでTwitter bootstrapのサンプルサイトを作る。その5

最近オリンピックのサッカーの試合みてばかりで寝不足です。目指せアベック優勝！！！

Controllerの概要

Controllerの役目

CakephpのControllerは色々と指示を出す人です。多分、日本名は魂斗羅くんです。流行りのキラキラネームですが、仕事はできるヤツです。
魂斗羅くんはユーザーの注文を受け取って、ModelやView（美優さん）をこき使い、ユーザーに正しく返答できるようにするのが責任範囲です。
関係ないModelやViewは呼び出しません。必要に応じて美優さんに助っ人つけます。そんな感じの仕事をしてます。

PagesControllerを改造する

今までの所index.ctpでレイアウトを指定してますが、これをPagesControllerで指定するように変更します。
index.ctpのレイアウトを設定している部分を削除します。

app/View/Pages/index.ctp

<?php 
//$this->layout = "guest";
?>
...
 

PagesControllerのindexメソッドにレイアウトをguestに設定します。

app/Controller/PagesController

...

 public function index(){
  $this->layout = "guest";
 }
 
...

ブラウザで「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」にアクセスします。

見た目が変わらないので、よく分かりませんがとりあえずOKです。

他のページを追加する。

とりあえず1ページだけ追加してみます。まず、routesの設定をコメントアウトします。

app/Config/routes.php

...
// Router::connect('/pages/*', array('controller' => 'pages', 'action' => 'display')); //コメントアウトします。
...
 

これは、urlが「/pages/hoge」や「/pages/page」とかなら、PagesControllerのdisplayメソッドを呼び出すようにしているので無効にしています。
後は簡単で2箇所修正します。コントローラにメソッドを追加します。

app/Controller/PagesController

...

 public function index(){
  $this->layout = "guest";
 }
 //add
 public function scaffolding() {
  $this->layout = "guest";
 }

...

Viewも追加します。中身はまあ、ここでは適当にしておきます。

app/View/Pages/scaffolding.ctp

<?php 
?>
<div class="row">
 <div class="span3">サイド</div>
 <div class="span9">scaffolding</div>
</div>

ブラウザで「dream-travel.boo.jp/twitter_bootstrap_2.0.4/pages/scaffolding」にアクセスします。

... 相変わらず変化しないので、分かりづらいですがOKのようです。

色々と試す

ここで色々と試してみたいと思います。とりあえず以下の用にscaffoldingメソッド内でレイアウトをdefaultに指定してみます。

app/Controller/PagesController

...

 public function index(){
  $this->layout = "guest";
 }
 public function scaffolding() {
  $this->layout = "default";
 }

...

ブラウザで各アドレスにアクセスします。
「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」

「dream-travel.boo.jp/twitter_bootstrap_2.0.4/pages/scaffolding」

scaffoldingの方はCakephpデフォルトのレイアウトが適応されてます。つまりメソッド毎にレイアウトを振り分ける事ができます。


もう一つ試します。PagesControllerのメンバでレイアウトを設定してみます。

app/Controller/PagesController

...
 
/**
 * This controller does not use a model
 *
 * @var array
 */
 public $uses = array();
 
 public $helpers = array('B99TwitterBootstrap');
 
 public $layout = "guest";

...

 public function index(){
  //$this->layout = "guest";　←実際は削除する。
 }
 public function scaffolding() {
  //$this->layout = "default";　←実際は削除する。
 }
 
...

ブラウザで各アドレスにアクセスします。
「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」

「dream-travel.boo.jp/twitter_bootstrap_2.0.4/pages/scaffolding」

両方共guestのレイアウトが適応されてます。メソッド毎に変えないという事ならこれでも良いです。

もっと汎用的にレイアウトを設定する

上記の方法でそれぞれレイアウトを設定しても問題ないのですが、Cakephp1.3で何個かサイト作った経験で私は定形的以下の方法でやってます。
1.AppControllerを修正します。beforeFilter()を追加して、その中に条件付きでレイアウト設定します。

app/Controller/AppControllerを修正

...

class AppController extends Controller {
 
 public function beforeFilter(){
  //レイアウトの設定
  if (Configure::read('debug') == 0) {
   $this->layout = "guest";
  }
 }
}
  

Cakephp的に全てのコントローラはAppControllerを継承する必要があります。なのでこのコントローラで設定した事は全てのコントローラに適応されます。
また、beforeFilter()メソッドはCakephpのコールバックの1つで、コントローラの各アクションの前に実行されます。
Configure::read('debug')はapp/Config/core.phpで設定するデバッグのレベルを取得します。
なのでここで追加した内容は、「全てのコントローラのアクション実行前にデバッグレベルが0だったらレイアウトをguestに設定する」という事をしてます。

2.各コントローラにbeforeFilter()を追加して、その中に条件付きでレイアウト設定します。ここではPagesControllerを修正します。

app/Controller/PagesController

 ...
 
 // public $layout = "guest"; //←実際は削除
 
 ...
 
 public function beforeFilter(){
  //レイアウトの設定
  if ('CakeError' === $this->name && Configure::read('debug') > 0){
   $this->layout = "defalut";
  } else if('admin' === $this->request['prefix']) {
//   $this->layout = "admin";
  } else {
   $this->layout = "guest";
  } 
 }
 

この追加は何をしているかと言うと、PagesControllerの各アクション前に

1. エラーがあるかつデバッグレベルが0を超えていたらレイアウトはdefalut
2. 管理者用のアクセスだったらレイアウトはadmin
3. それ以外はguest

という事をやっています。管理者のアクセスについてはここでは説明省きますが、とにかくユーザーアクセスの状態によってレイアウト設定を振り分けてます。

汎用的にレイアウトを設定した場合アクセス結果

上の修正をした時のアクセス結果のスクショです。

URL	デバッグレベル　2	デバッグレベル　0
dream-travel.boo.jp/twitter_bootstrap_2.0.4/
dream-travel.boo.jp/twitter_bootstrap_2.0.4/pages/hoge
dream-travel.boo.jp/twitter_bootstrap_2.0.4/hoge

いかがでしょうか？まあ、これはあくまでも私が個人的いいなと思っている方法なので色々とアラがあるかもしれませんが、良かったら皆さんも試してみて下さい。

まとめ

• コントローラで色々と仕事を振り分ける
• 設定をコントローラで行う事もある
• AppControllerとかコールバック関数とかがある

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion

[Cakephp2.2][Twitter bootstrap2.0.4]CakephpでTwitter bootstrapのサンプルサイトを作る。その4（道草）

Eclipseのテンプレート機能

Bootstrapは便利だけど面倒くさい

Bootstrapを使うと、デザイン的にはサクッとやってくれますが、コーディング量は多くなります。特にrowとかspanとはたくさん使うので面倒です。
Eclipseを使っている場合はテンプレートという機能を使えば楽になります。

設定方法

Eclopse→環境設定（Windowsはウィンドウ→設定でしたっけ？）からWeb→HTMLファイル→エディター→テンプレートを選択します。
右側の「新規」ボタンをクリックします。



名前、パターンを入力します。ここでは名前は「tb_row_span」（Twitter Bootstrapのrow、spanの意味）としてます。パターンはdivタグにクラスを指定してます。spanの後ろは数字を入れるですが、都度変更するので変数を指定してます。パターンの中に「${}」を入れて変数に出来ます。ここでは数字を入れたいので「int1」とかしてます。変数名は重複しなければ特に何でも問題ないと思います（多分）。良ければ「OK」を押して設定します。

使ってみる

「Ctrl + space」でコード補完を表示してから「tb」と打つと今設定した内容が表示されます。選択して「Enter」押します。



span後ろの各変数の位置を「tab」キーで切り替えながら入力出来ます。



後は自分の使いたいテンプレートを増やして行くだけです。簡単ですね。

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion

CakephpでTwitter bootstrapのサンプルサイトを作る。その3

大分前ですが、駅で電車を待っていたら事故か何かでダイヤが乱れてました。その時遅れている事をアナウンスしていた（おそらく新入社員の）女性駅員さんが、アナウンスする度に駅名を噛んでました。
...駅員が駅名噛んだらマズイだろ。と思ってました。そしてついでに萌えてました(*´ω｀*)

layoutを改造する

グローバルナビが欲しい今日この頃

レイアウトのguest.ctpを作ってきましたが、やっぱりナビが欲しいと思いました。しかもBootstrapのナビバーがいいなぁ~と思いました。かっこいいですよねあれ。
まあ、Bootstrap用のサイト作るなら必須だなと後から気づいた訳ですけども。
やっぱりBootstrapのサンプルページからナビバーの部分だけコピペします。

app/View/Layout/guest.ctpを変更

...

<div id="header">
 <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Bootstrap コピペ場</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</div>
...
 

こういうCSSフレームワークを使うとどうしても、上のような感じに入れ子&クラス名が多くなるんですよね。そこはまあ、納得してお付き合いしてかなければいけないんですけども。

助っ人

前回書いたViewこと美優さんは健気に頑張っています。あまりに大変そうなのでControllerさんが気を利かせて助っ人を付けてます。HtmlHelperです。前回美優さんの隠し玉とかいてたHelperの1つです。 HtmlHelperはすでに何回も出てきています。guest.ctpを確認すると以下の箇所があります。

$this->Html->charset()


すなわち$this（＝美優さん）のHtml助っ人（＝HtmlHelper)のcharset()という仕事を実行していた訳です。文字列を返し例えばcharset()なら以下の文字列返します。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

助っ人さんは他にいます。FormHelperとかですが、今は出番が無いので放置します。
助っ人さんの役目は、複数のビューやエレメント、レイアウトで共有する処理を目的別にまとめておく事です。HtmlHelperなら、htmlタグを返すメソッドがそろってます。
後でHtmlHelperのメソッドをまとめたいです。

自作の助っ人

助っ人は自作出来ます。今後Bootstrapの関連のタグをたくさん使いそうなので、Bootstrap用の助っ人を作ってみようとおもいます。
約束事があります。

• ファイル作成場所は「app/View/Helper」の下
• AppHelperを継承する。
• Viewで使用するHelperはController内で設定する

取り敢えずシンプルなナビバーを返すところから始めます。以下コード。

app/View/Helper/B99TwitterBootstrapHelper.phpを新たに作成。

<?php
/**
 * Twitter Bootstrap用のヘルパー
 */
App::uses('AppHelper', 'View/Helper');

class B99TwitterBootstrapHelper extends AppHelper {
 public $helpers = array('Html');
 
 /**
  * 
  * @return String navbar tag string
  */
 public function simpleNavbar(){
  $result = <<<NAV
<div class="navbar">
 <div class="navbar-inner">
  <div class="container">
   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </a>
   <a class="brand" href="#">Bootstrap コピペ場</a>
   <div class="nav-collapse">
    <ul class="nav">
     <li class="active"><a href="#">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
    </ul>
   </div>
  </div>
 </div>
</div>
NAV;
  return $result;
 }
}

app/Controller/PagesControllerに追加

public $helpers = array('B99TwitterBootstrap');

そのままナビバーを表示しても見た目が変わらないのでデバッグ出力します。

app/View/Pages/index.ctpに追加

<?php 
$this->layout = "guest";
debug($this->B99TwitterBootstrap->simpleNavbar());
?>
...

ブラウザでアクセスします。

自作した助っ人がちゃんと動作しているようです。

さらに自作の助っ人

B99TwitterBootstrapHelperを作ってみましたが、固定の文字列を返すだけでこのままでは使い勝手が良くありません。下のリストのようにさらに改造します。

• プロジェクト名を引数で渡す
• リンク先を引数で渡す
• 「class="active"」って所を自動で判別して差し込む

app/View/Helper/B99TwitterBootstrapHelper.phpを修正

...
 /**
  * 
  * シンプルなナビバーを作って返す
  * @param array $brand array( 'title' => 'Bootstrap コピペ場', 'url' => '/')titleはaタグに挟まれる文字列、urlはAタグのリンク先
  * @param array $links　$links = array('index' => array( 'title' => 'Home', 'url' => '/'))keyは$active_strと合う文字列、titleはaタグに挟まれる文字列、urlはAタグのリンク先
  * @param string $$active_str
  * @return String navbar tag string
  */
 public function simpleNavbar($brand, $links, $active_str){
  $link_li_tag = "";
  $brand_a_tag = "";
  //このfor文の中でactiveなclassの値を設定する
  foreach ($links as $key => $val) {
   //classがあるかチェック無ければ追加する
   if (!isset($val['class'])) {
    $val['class'] = "";
   }
   //activeなliタグかチェック
   if ($key==$active_str){
    //classに「active」文字列を追加
    $val['class'] .= " active";
   }
   //配列の値を設定し直す
   $links[$key] = $val;
  }
  //liタグを作る
  foreach ($links as $key => $val){
   $link_li_tag .= "     " . $this->Html->tag('li', $this->Html->link($val['title'] , $val['url']), $val['class']) . "
";
  }
  //プロジェクト名のaタグを作る
  $brand_a_tag = $this->Html->link($brand['title'], $brand['url'], array('class'=>'brand'));
  //ナビバーの文字列を返す
  return <<<NAV
<div class="navbar">
 <div class="navbar-inner">
  <div class="container">
   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </a>
   {$brand_a_tag}
   <div class="nav-collapse">
    <ul class="nav">
{$link_li_tag}
    </ul>
   </div>
  </div>
 </div>
</div>
NAV;
 }
...
  

app/View/Pages/index.ctpからコメントアウト（もしくは削除）

<?php 
$this->layout = "guest";
//debug($this->B99TwitterBootstrap->simpleNavbar());
?>
...

app/View/Layout/guest.ctpへ追加

<?php 
$brand = array( 'title' => 'Bootstrap コピペ場', 'url' => '/');
$links = array(
 'index'  => array( 'title' => 'Home', 'url' => '/'),
 'scaffolding' => array( 'title' => 'Scaffolding', 'url' => '/pages/scaffolding'),
 'base-css'  => array( 'title' => 'Base Css', 'url' => '/pages/base-css'),
 'components' => array( 'title' => 'Components', 'url' => '/pages/components'),
 'javascript' => array( 'title' => 'Javascript Plugins', 'url' => '/pages/javascript'),
 'about'  => array( 'title' => 'About', 'url' => '/pages/about'),
);

debug($this->B99TwitterBootstrap->simpleNavbar($brand, $links, $this->request->params['action']));

...

  <div id="header">
<?php echo $this->B99TwitterBootstrap->simpleNavbar($brand, $links, $this->request->params['action']);?>
  </div>
...

ブラウザでアクセスする。

オッケーのようなのでguest.ctpからdebug()メソッドを削除する。
これで晴れてグローバルで動的にactiveが変化するナビバーの出来上がり...のはず。
simpleNavbar()メソッドの第3引数が「$this->request->params['action']」となってますが、これは現在のurlからアクションに当たる文字列を格納しています。この値を渡すことでどこのliタグがactiveなのかを判断してます。

まとめ

• 美優さんことViewには助っ人ことHelperという仕組みがある。
• Helperを使うには色々と決まりがある。
• 変数の中身がわからない場合はdebug()メソッドを使う

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion

最近4歳の娘がスギちゃんのモノマネをします。何度注意しても「ワイルドだよ~」になります。

Viewの概要

Viewの仕組み

CakephpのViewは表示を担当する人です。多分日本名は美優さんです。Controllerさんからいろんな値を渡されて、その値を美優さんが一生懸命頑張って表示します。美優さんは最終的にはhtmlやXml等の文字列を返すのが責任範囲です。
美優さんは自分の仕事がしやすい様に扱う大きさにで整理しています。下の表でhtmlの時を例に説明します。

名前	内容
layout	一番大きな枠組みで、複数のURLにアクセスした時の共通部分です。後でビューや(時々エレメント）を差し込めるように作成しておきます。例）htmlタグ、headタグ、bodyタグの一部、グローバルナビとかを記述しておきます。
view	中位の枠組みで、アクセスするURL毎に表示する内容が替わる部分です。後でエレメントを差し込めるようにもできます。例）bodyタグの主要な部分を記述しておきます。
element	一番小さな枠組みで、layoutやview、果ては他のelement内で再利用可能なわりかし小さなパーツ。例）ログイン状態を表示するdivタグとか

美優さんは他にもblockとかthemeとはhelperという隠し玉を持ってますが、ややこしいので後回しです。

レイアウトを試す

早速レイアウトを試してみます。レイアウトは「app/View/Layout」フォルダに入れます。元々デフォルトでそのまま「default.ctp」ってのがあります。
ちなみにCakephpではViewの関連のファイルの拡張子は「.ctp」(CakePHP Templateの略らしい)です。
その「default.ctp」を参考に「guest.ctp」というレイアウトを作ります。

app/View/Layout/guest.ctpを新たに作成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php echo $this->Html->charset(); ?>*1
<title>
Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?>*2
</title>
<?php
echo $this->Html->meta('icon');*3

echo $this->Html->css('');*4

echo $this->fetch('meta');*5
echo $this->fetch('css');*6
echo $this->fetch('script');*7
?>
</head>
<body>
<div id="container">
<div id="header">
<h1>Twitter Bootstrap 2.0.4コピペ場</h1>
</div>
<div id="content">
<?php echo $this->fetch('content'); ?>*8
</div>
<div id="footer">
<p>copyright busyoumono99 2012</p>
</div>
</div>
</body>
</html>


guest.ctpではどのURLでも表示する内容を記述しています。headタグやヘッダー、フッター等です。あと所々にphpでechoしているのは下で軽く説明しています。

• *1：キャラセットを指定します。この場合UTF-8です。ちなみにCakephpはutf8が基本らしいです。
• *2：htmlのタイトルを表示します。controllerやviewで設定しないとコントローラ名がデフォルトで表示されるようです。
• *3：ファビコンの指定をします。
• *4：cssの指定をします。今は空です。
• *5：設定されているメタタグがあれば表示します。
• *6：設定されているCSSがあれば表示します。*4とかぶるような気がしますがdefault.ctpでもこうなってたのでこのまま行きます。後で調べる。
• *7：設定されているjavascriptを表示します。
• *8：viewがここで表示されます。今だったら「index.ctp」の中身がここで表示されます。

viewの中でレイアウトの設定をする。

レイアウトを作ってもそのままでは美優さんはレイアウトを利用してくれません。取り敢えずここでは「index.ctp」の中で設定してみます。

app/View/Pages/index.ctpを変更

<?php
$this->layout = "guest";
?>
Hello World!

これでまたブラウザで「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」にアクセスしやす

Cakephpのデフォルトでは無いデザインが適用されました。なんかNote(8)とか出てますが、*4で空にしたのが原因なので気にしない。

Twitter Bootstrapの導入

Bootstrapの準備

ここからCakephpにBootstrapを取り込みます。BootstrapのHPからダウンロードしてきます。 ダウンロードしたファイルを解凍して以下のようにファイルを配置します。
app/webroot/css

• bootstrap-responsive.min.css
• bootstrap.min.css

app/webroot/img

• glyphicons-halflings-white.png
• glyphicons-halflings.png

app/webroot/js

• bootstrap.min.js

多分下のような見え方になってるとおもいます。

Bootstrap用にファイルを修正

Bootstrapのデザインを適応するようにguest.ctpを修正します。今度はBootstrapのサンプルページを 元に作ってみる

app/View/Layout/guest.ctpを修正

<?php
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<?php echo $this->Html->charset(); ?>
<title>Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
echo $this->Html->meta('icon') . "\n";
echo $this->Html->css(array('bootstrap.min','bootstrap-responsive.min')) . "\n";
echo $this->fetch('meta') . "\n";
echo $this->fetch('css') . "\n";
echo $this->fetch('script') . "\n";
?>

</head>
<body>
<div class="container">
<div id="header">
<h1>Twitter Bootstrap 2.0.4コピペ場</h1>
</div>
<div id="content">
<?php echo $this->fetch('content'); ?>
</div>
<div id="footer">
<p>copyright busyoumono99 2012</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>


cssを複数指定したい場合は上の用にarray()で渡します。
ついでにBootstrapが反映されているか分かるようにindex.ctpも編集してみる。

app/View/Pages/index.ctpを変更

<?php
$this->layout = "guest";
?>
<div class="row">
<div class="span3">サイド</div>
<div class="span9">Hello World!</div>
</div>


これで再度ブラウザでアクセスすると

OKっぽい。

まとめ

• 美優さんには色々機能がある。
• レイアウト使うと便利

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion

CakephpでTwitter bootstrapのサンプルサイトを作る。その1

ウラシマ

Cakephpからしばらく離れていたらいつの間にか1.3から2.2になっていた。新しいCakephpになれる意味でも何かサイト作ろうかなと思った次第です。
よくあるブログ記事だとデータベース使った説明が入るのでしょうけど、覚える事が多いと挫折するので、まあ最初は静的Webサイトを作ればコントローラとビュー周りは分かるかなと思った次第です。

BootStrapのサイト

いいネタ無いかなと悩んでたらひらめきました。以前の記事で紹介したbootstrapのサイトも良いのですが、ちと自分に向いてないというのも

• 現状のVerでない
• コピペ用のサンプルがスペースでインデントしてある

そしたら自分で作るべ。Cakephpで！！

準備

日本語のcookbook見ながらインストールは完了。
今回は色々訳あって「dream-travel.boo.jp/twitter_bootstrap_2.0.4」というフォルダ構成にした。早速ブラウザで「dream-travel.boo.jp/twitter_bootstrap_2.0.4/」にアクセスする。

おお！何かおしゃれになっている！
変なとこに感激しつついつもの画面が出てきて安心する。
エラーメッセージを消す為に以下を修正。

/app/Config/core.php

Configure::write('Security.salt', 'DYhG93b0qyJfIxfs2guVoUubWwvniR2G0FgaC9mi');
...
Configure::write('Security.cipherSeed', '76859309657453542496749683645');

上記はデフォルト値なので、第2引数の値を適当に変更してから再度ブラウザでアクセスする。

オッケー！赤いの消えた。
黄色のメッセージはデータベースの設定ファイルが無いという事ですが、今回データベース使わないので無視。
次にurlのルーティングを変更する。デフォルトのままだとurlが「/」の時「PagesController」の「display」メソッドを実行して「home.ctp」 を表示するという設定になっているのでこれを変更する。

/app/Config/routes.php

Router::connect('/', array('controller' => 'pages', 'action' => 'display', 'home'));
↓
Router::connect('/', array('controller' => 'pages', 'action' => 'index'));

また、ブラウザでアクセスする。

Cakephpさんに怒られた。(´・ω・｀)
取り敢えず「routes.php」の修正は成功で、今度のエラーメッセージはアクションの「index()」メソッドがねーよ！という内容。

プログラマのサガ

無性に挨拶したくなって来ませんか？わたしは挨拶したくなりました。
そんなわけで以下を編集。

/app/Controller/PagesController.phpに以下を追加

...

public function index(){
}

...


/app/View/Pages/index.ctpファイルを新たに作成。

<?php
?>
Hello World!

またブラウザでアクセスする。

「Hello World！」が出た！と思ったらまたCakephpさんに怒られたorz。
内容はさっき無視した「データベースの設定ファイルが無い」って奴。しょうがないので修正する。

• app/Config/database.php.defaultをコピー
• 同じ場所に「datebase.php」で貼り付け。

内容は変更せずにそのままでOK...なはず。またブラウザでアクセスする。

今度こそOK。

まとめ

• core.phpでセキュリティ関係のデフォルト値を2箇所変更する
• データベースの設定ファイルのdatebase.phpはさっさと作る
• routes.phpでホームurlの設定を変更する
• Pagesコントローラクラスにindexメソッドを追加
• View/Pagesフォルダにindex.ctpを作成

環境とか

項目	内容
PHPフレームワーク	Cakephp 2.2.0
IDE	Eclipse 3.6
開発環境?	MAMP
PC	Macmini
OS	Mac OS Lion

cakephp Plugin ACL でハマる

散々間を開けて投稿します。cakephpについてです。



高橋です

上のサイトを参考に（チョー助かった。ありがとうございます。）Plugin ACLの導入を進めていたがはまった。

まず、cakephpのcookbookの開発事例11.2 ACL を制御するシンプルなアプリケーションをすすめる。

グダグダ言わず全部やる。

その時ユーザー、グループの登録を焦ってやらない。ちゃんとcookbookの手順通りにユーザー、グループの登録をする。



http://ドメイン/admin/aclにアクセスする所でツマづいた。

アクセスしても確か

Warning (512): DbAcl::check() - Failed ARO/ACO node lookup in permissions check. Node references:以下略なんたらかんたらが出てきて何も出来ない。

色々と調べた結果、原因は結局プラグインのACLを追加したのに、acosテーブルにはadmin/acl等が追加されてないので、cakephpがとにかくアクセス禁止にしていたよー。（多分）

対処方法1は

• 
  app/app_controller.php
  

のbeforeFilter()関数に

parent::beforeFilter();

$this->Auth->allow('*');

を追加する。これはフィルタリング始める前にauthコンポーネントのアクセス許可を、とにかく全てOKにするよという処理（多分）。

（もちろん正しい設定をした後は削除かコメントアウトする。）

そしたら「admin/acl」にアクセス出来るようになった。

で！まだ油断しない！Plugin ACLを利用してacoを追加する。（高橋です。のページの「Actions」→「Build actions ACOs」→「Build」←これね）

その時リンクされているBuildをクリックしないと追加されないので注意。

これでadministrators権限を持っているユーザーなら、対処方法１を削除してもhttp://ドメイン/admin/aclにアクセスできる。



あー、3日悩んだ。…時間かかり過ぎだろオレ…

PluginACL自体はチョーグッド！！

---その後思いついた事です。---

対処方法の2。試してないけど

• app/plugin/acl/controllers/acl_controller.php


• app/plugin/acl/controllers/acos_controller.php


• app/plugin/acl/controllers/aros_controller.php

の３つのファイルのbeforeFilter()関数に

parent::beforeFilter();

$this->Auth->allow('*');

を足せばよかったかも。