不肖者の人生実験

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

noreply@blogger.com (busyomono99) — Mon, 17 Jun 2013 21:52:00 +0000

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

noreply@blogger.com (busyomono99) — Tue, 21 May 2013 22:32:00 +0000

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

Sublime Textのチートシートを作ってみた

noreply@blogger.com (busyomono99) — Tue, 14 May 2013 22:17:00 +0000

先日、Sublime Textのショートカットを使えこなせずにイライラしてました。そんな自分へ腹立ちまぎれにチートシートを作ってみました。
画像は自分が覚えて無い分、markdownの方はメニューのショートカットがあるコマンドを端から並べた感じです。画像を壁紙にしてチラ見して使ってます。
自分の環境に合したものなので、もし必要な方はmarkdown形式のものをスラっとコピって改変してみて下さい。

注意

Mac用です。
スペル等内容が間違えてる可能性はあります。
日本語訳が正しいかは不明です。
何か間違いなどあった場合は指摘して頂けると有難いです。m(_ _)m

画像

markdown 英語

## File
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| New File                          |                               | super + N                     |
| Open...                           |                               | super + O                     |
| Open Recent                       | Reopen Closed File            | shift + super + T             |
| Save                              |                               | super + S                     |
| Save As...                        |                               | shift + super + S             |
| Save All                          |                               | alt + super + S               |
| New Window                        |                               | shift + super + N             |
| Close Window                      |                               | shift + super + W             |
| Close File                        |                               | super + W                     |

## Edit
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Undo                              |                               | super + Z                     |
| Redo                              |                               | super + Y                     |
| Undo Selection                    | Soft Undo                     | super + U                     |
|                                   | Soft Redo                     | shift + super + U             |
| Copy                              |                               | super + C                     |
| Cut                               |                               | super + X                     |
| Paste                             |                               | super + V                     |
| Paste and Indet                   |                               | shift + super + V             |
| Line                              | Indent                        | super + \]                    |
|                                   | Unindent                      | super + \[                    |
|                                   | Swap Line Up                  | ctrl + super + ↑                |
|                                   | Swap Line Down                | ctrl + super + ↓                |
|                                   | Duplicate Line                | shift + super + D             |
|                                   | Delete Line                   | ctrl + shift + K              |
| Comment                           | Toggle Comment                | super + /                     |
|                                   | Toggle Block Comment          | alt + super + /               |
| Text                              | Insert Line Before            | shift + super + Enter         |
|                                   | Insert Line After             | super + Enter                 |
|                                   | Delete Line                   | ctrl + shift + K              |
|                                   | Delete to End                 | ctrl + K                      |
|                                   | Delete to Beginning           | super + Backspace             |
| Mark                              | Set Mark                      | super + K,super + space       |
|                                   | Select To Mark                | super + K,super + A           |
|                                   | Delete To Mark                | super + K,super + W           |
|                                   | Swap With Mark                | super + K,super + X           |
|                                   | Clear Mark                    | super + K,super + G           |
| Code Folding                      | Fold                          | alt + super + \[              |
|                                   | Unfold                        | alt + super + \]              |
|                                   | Unfold All                    | super + K, super + J          |
|                                   | Fold All                      | super + K, super + 1          |
|                                   | Fold Level 2(~9)              | super + K, super + 2(~9)      |
| Convert Case                      | Upper Case                    | super + K, super + U          |
|                                   | Lower Case                    | super + K, super + L          |
| Wrap                              | Wrap at Ruler                 | alt + super + Q               |
| Show Completions                  |                               | ctrl + space                  |
| Sort Lines                        |                               | F5                            |
| Sort Lines(Case Sensitive)        |                               | ctrl + F5                     |
| Special Characters...             |                               | alt + super + T               |



## Selection
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Split into Lines                  |                               | shift + super + L             |
| Add Previous Line                 |                               | ctrl + shift + ↑                |
| Add Next Line                     |                               | ctrl + shift + ↓                |
| Single Selection                  |                               | esc(??)                       |
| Select All                        |                               | super + A                     |
| Expand Selection to Line          |                               | super + L                     |
| Expand Selection to Word          |                               | super + D                     |
| Expand Selection to Scope         |                               | shift + super + space         |
| Expand Selection to Brackets      |                               | ctrl + shift + M              |
| Expand Selection to Indentation   |                               | shift + super + J             |
| Expand Selection to Tag           |                               | shift + super + A             |
| Abacus Align                      |                               | ctrl + alt + super + \]       |


## Find

| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Find...                           |                               | super + F                     |
| Find next                         |                               | super + G                     |
| Find previous                     |                               | shift + super + G             |
| Incremental Find                  |                               | super + I                     |
| Replace...                        |                               | alt + super + F               |
| Replace Next                      |                               | alt + super + E               |
| Quick Find                        |                               | alt + super + G               |
| Quick Find All                    |                               | ctrl + super + G              |
| Quick Add Next                    |                               | super + D                     |
| Use Selection for Find            |                               | super + E                     |
| Use Selection for Replace         |                               | shift + super + E             |
| Find in Files(Grep)               |                               | shift + super + F             |
| Find Results                      | Next Result                   | F4                            |
|                                   | Previous Result               | shift + F4                    |

## View
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Side Bar                          |                               | super + K, super + B          |
| Enter Full Screen                 |                               | ctrl + super + F              |
| Enter Distraction Free Mode       |                               | ctrl + shift + super + F      |
| Layout                            | Single                        | alt + super + 1               |
|                                   | Columns:2(~4)                 | alt + super + 2(~4)           |
|                                   | Rows:2(3)                     | alt + shift + super + 2(3)    |
|                                   | Grid:4                        | alt + super + 5               |
| Foucus Group                      | Group1(~4)                    | ctrl + 1(~4)                  |
| Move File To Group                | Group1(~4)                    | ctrl + shift + 1(~4)          |

## Goto
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Goto Anything...                  |                               | super + P                     |
| Goto Symbol                       |                               | super + R                     |
| Goto Line...                      |                               | ctrl + G                      |
| Previous change                   |                               | alt + shift + super + G       |
| Next change                       |                               | alt + shift + super + J       |
| Switch File                       | Next File                     | alt + super + →             |
|                                   | Previous File                 | alt + super + ←             |
|                                   | Next File in Stack            | ctrl + tab                    |
|                                   | Previous File in Stack        | ctrl + shift + tab            |
|                                   | Switch Header/Implementaion   | alt + super + ↑             |
|                                   | (opened files)                | super + 1(~9)                 |
| Scroll                            | Scroll to Selection           | ctrl + L                      |
|                                   | Line Up                       | ctrl + alt + ↑              |
|                                   | Line Down                     | ctrl + alt + ↓              |
| Bookmarks                         | Toggle Bookmark               | super + F2                    |
|                                   | Next Bookmark                 | F2                            |
|                                   | Prev Bookmark                 | shift + F2                    |
|                                   | Clear Bookmark                | shift + super + F2            |
| Jump to Matching Bracket          |                               | ctrl + M                      |


## Tools
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Command Palette...                |                               | shift + super + P             |
| Build                             |                               | super + B                     |
| Record Macro/Stop Recording Macro |                               | ctrl + Q                      |
| Playback Macro                    |                               | ctrl + shift + Q              |


## Project
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| Switch Project in Window...       |                               | ctrl + super + P              |

markdown 日本語

## ファイル
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 新規ファイル                        |                               | super + N                     |
| ファイルを開く                     |                               | super + O                     |
| 最近開いたファイル                   | 閉じたファイルを再度開く          | shift + super + T             |
| 保存                                |                               | super + S                     |
| 名前を付けて保存                  |                               | shift + super + S             |
| すべて保存                           |                               | alt + super + S               |
| 新しいウィンドウ                  |                               | shift + super + N             |
| ウィンドウを閉じる                   |                               | shift + super + W             |
| ファイルを閉じる                  |                               | super + W                     |

## 編集
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 元に戻す                          |                               | super + Z                     |
| やり直し                          |                               | super + Y                     |
| 選択を元に戻す                     | ソフトアンドウ                 | super + U                     |
|                                   | ソフトリドウ                    | shift + super + U             |
| コピー                             |                               | super + C                     |
| カット                             |                               | super + X                     |
| 貼り付け                          |                               | super + V                     |
| 貼り付けとインデント                    |                               | shift + super + V             |
| 行                                   | インデント                       | super + \]                    |
|                                   | アンインデント                 | super + \[                    |
|                                   | 上の行と入れ替え              | ctrl + super + ↑                |
|                                   | 下の行と入れ替え              | ctrl + super + ↓                |
|                                   | 行を複製                      | shift + super + D             |
|                                   | 行を削除                      | ctrl + shift + K              |
| コメント                          | コメントの切替え              | super + /                     |
|                                   | ブロックコメントの切替え          | alt + super + /               |
| テキスト                          | 上に行を挿入                    | shift + super + Enter         |
|                                   | 下に行を挿入                    | super + Enter                 |
|                                   | 行を削除                      | ctrl + shift + K              |
|                                   | 行末まで削除                    | ctrl + K                      |
|                                   | 行頭まで削除                    | super + Backspace             |
| マーク                             | マークを設定                    | super + K,super + space       |
|                                   | マークまで選択                 | super + K,super + A           |
|                                   | マークまで削除                 | super + K,super + W           |
|                                   | マークを入れ替え              | super + K,super + X           |
|                                   | マークを削除                    | super + K,super + G           |
| コードの折りたたみ                   | 折りたたみ                       | alt + super + \[              |
|                                   | 展開                            | alt + super + \]              |
|                                   | 全てをを展開                    | super + K, super + J          |
|                                   | 全てを折りたたみ              | super + K, super + 1          |
|                                   | 段階2(~9)で折りたたみ         | super + K, super + 2(~9)      |
| 大文字と小文字を変換                    | 大文字にする                    | super + K, super + U          |
|                                   | 小文字にする                    | super + K, super + L          |
| ラップ                             | ルーラーでラップ              | alt + super + Q               |
| 自動補完                          |                               | ctrl + space                  |
| 行でソート                           |                               | F5                            |
| 行でソート(大文字、小文字を区別)       |                               | ctrl + F5                     |
| 特殊文字                          |                               | alt + super + T               |



## 選択
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 複数行を分割して選択                    |                               | shift + super + L             |
| 上の行を選択に追加                   |                               | ctrl + shift + ↑                |
| 下の行を選択に追加                   |                               | ctrl + shift + ↓                |
| 一つの選択にする                  |                               | esc(??)                       |
| 全てを選択                           |                               | super + A                     |
| 行を選択                          |                               | super + L                     |
| 単語を選択                           |                               | super + D                     |
| スコープを選択                     |                               | shift + super + space         |
| 括弧内を選択                        |                               | ctrl + shift + M              |
| 同じ深さのインデントを選択           |                               | shift + super + J             |
| タグで選択？？？                  |                               | shift + super + A             |
| JSONを整形                         |                               | ctrl + alt + super + \]       |


## 検索
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 検索                                |                               | super + F                     |
| 次を検索                          |                               | super + G                     |
| 前を検索                          |                               | shift + super + G             |
| インクリメンタル検索???             |                               | super + I                     |
| 置換                                |                               | alt + super + F               |
| 次を置換                          |                               | alt + super + E               |
| クイック検索                        |                               | alt + super + G               |
| クイック検索 全て                 |                               | ctrl + super + G              |
| 次の検索結果を追加                   |                               | super + D                     |
| 選択単語で検索                     |                               | super + E                     |
| 選択単語で置換                     |                               | shift + super + E             |
| ファイル内検索(いわゆるグレップ)       |                               | shift + super + F             |
| 検索結果                          | 次の検索箇所                    | F4                            |
|                                   | 前の検索箇所                    | shift + F4                    |

## 表示
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| サイドバー                           |                               | super + K, super + B          |
| フルスクリーン                     |                               | ctrl + super + F              |
| 邪魔者を非表示にするモード           |                               | ctrl + shift + super + F      |
| レイアウト                           | Single                        | alt + super + 1               |
|                                   | 縦分割:2(~4)                   | alt + super + 2(~4)           |
|                                   | 横分割:2(3)                    | alt + shift + super + 2(3)    |
|                                   | 縦横2分割                     | alt + super + 5               |
| 作業グループ                        | Group1(~4)                    | ctrl + 1(~4)                  |
| グループにファイルを移動              | Group1(~4)                    | ctrl + shift + 1(~4)          |

## 移動
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 全部へ移動                           |                               | super + P                     |
| シンボル(クラス、メソッド等)へ移動    |                               | super + R                     |
| 行へ移動                          |                               | ctrl + G                      |
| 前の変更箇所                        |                               | alt + shift + super + G       |
| 次の変更箇所                        |                               | alt + shift + super + J       |
| ファイルの切替                     | 右のファイル                    | alt + super + →             |
|                                   | 左のファイル                    | alt + super + ←             |
|                                   | スタック内の次のファイル          | ctrl + tab                    |
|                                   | スタック内の前のファイル          | ctrl + shift + tab            |
|                                   | スイッチヘッダー？？？         | alt + super + ↑             |
|                                   | (開いているファイル)             | super + 1(~9)                 |
| スクロール                           | 選択部分へスクロール                | ctrl + L                      |
|                                   | 1行上へスクロール             | ctrl + alt + ↑              |
|                                   | 1行下へスクロール             | ctrl + alt + ↓              |
| ブックマーク                        | ブックマークのON/OFF           | super + F2                    |
|                                   | 次のブックマークへ               | F2                            |
|                                   | 前のブックマークへ               | shift + F2                    |
|                                   | ブックマークの削除               | shift + super + F2            |
| 対応するカッコへジャンプ              |                               | ctrl + M                      |


## ツール
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| コマンドパレット                  |                               | shift + super + P             |
| ビルド                             |                               | super + B                     |
| マクロの開始/停止                 |                               | ctrl + Q                      |
| マクロの実行                        |                               | ctrl + shift + Q              |


## プロジェクト
| command                           | sub command                   | Shortcut                      |
|-----------------------------------|-------------------------------|-------------------------------|
| 同じウィンドウでプロジェクトを切替       |                               | ctrl + super + P              |

markdownのプラグインと設定

ちなみにsublime textでのmarkdown用のプラグインはmarkdown previewを使用してます。
テーブル用のマークダウンはmarkdown previewのユーザー設定にgithub用にすれば使える様になります。

"parser": "github"

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

noreply@blogger.com (busyomono99) — Sat, 04 May 2013 18:31:00 +0000

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

noreply@blogger.com (busyomono99) — Sun, 14 Apr 2013 12:52:00 +0000

二日目の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>

AngularJS
- ng-controller(controllers.js)は変更なし
- html側に標準のinputタグを追加。innputにはng-modelでqueryを設定。
- ng-repeatにfilter:queryを追加。これでqueryの内容で抽出する。
- 特に指定無い場合はphone.name,phone.snippetの両方で抽出する。
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でやってみる。その１

noreply@blogger.com (busyomono99) — Mon, 08 Apr 2013 14:13:00 +0000

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

gitメモ

noreply@blogger.com (busyomono99) — Sat, 06 Apr 2013 16:25:00 +0000

gitについて、ドットインストールさんのサイトで勉強しました。
以下、その時のメモ的なものです。

linuxコマンド

pwd: 現在いるディレクトリを表示する。
mkdir dirname: ディレクトリ作成
cd dirname: ディレクトリを移動
cat filename: ファイルの中身を確認
vim filename: filenameでテキストエディタを新規作成

ヴァージョン管理の流れ

ファイルを作ったり修正たり
ある程度のまとまりになったら
履歴データベースに保存する

git上での呼び方

作業ディレクトリ
ステージングエリア（インデックス）
リポジトリ（ローカル、リモート）

gitコマンド

git --version

gitのバージョン情報を表示する。

git config --global user.name ”{your name}"

gitの名前の設定。（必須）

git config --global user.email "{your email}"

gitのメールの設定。（必須）

git config --global color.ui true

色分け表示の設定。

git config -l

gitの設定一覧表示。

git config --help git help config

configのヘルプ

git config --global alias.co checkout git config --global alias.st status git config --global alias.br branch git config --global alias.ci commit

コマンドにエイリアス（短縮名）を設定する。一番上はチェックアウトの短縮名をcoに設定してる。

git init

gitを使用する宣言。その作業ディレクトリ上で実行する。

git add filename

ステージングエリアにfilenameを登録

git add .

ステージングエリアにディレクトリ以下の全てのファイルを登録

git commit

リポジトリに登録。テキストエディタが起動してメッセージ入力する

git commit -m "(message)"

リポジトリに登録。メッセージはそのまま入力できる。

git commit --amend

細かい修正のみで、新しくコミットする程でもない場合、リポジトリに登録した直前の内容で再登録する。

git commit -am"(message)"

addしつつcommitする。

git log

コミットの内容を確認する。

コミットid
コミットした人
コミットした日時
コミットのメッセージ

git log --oneline

ログの簡素版。

idの上数桁
メッセージ

git log -p

ログの詳細
変更箇所まで表示する。

git log --stat

どのファイルが何箇所変更された数を表示する。

git status

ステージングエリアやリポジトリとの差。

git checkout -- filename

ステージングエリアの内容に作業ディレクトリを戻す。

git diff

ディレクトリとステージングエリアの変更箇所を表示。

git diff --cached

リポジトリとステージングエリアの変更箇所を表示

git rm filename

一度登録したファイルを削除した場合に、git上からも削除する。

git mv filename

一度登録したファイルを移動した場合に、git上からも移動する。

git reset --hard HEAD

直前コミット内容に戻す。--hard作業ディレクトリもステージングエリアも一気に戻す。

git reset --hard HEAD^

直前の1つ前のコミットに戻す。HEAD^の部分はコミットidでもOK。

git reset --hard ORIG_HEAD

resetで戻った処理をやり直す。一度のみ。

git branch

ブランチの一覧表示。ブランチは分岐。初回のブランチ名はmaster。現状のブランチにアスタリスクついてる

git branch (branch name)

ブランチの新規作成。

git checkout (branch name)

ブランチの切り替え。

git checkout -b (branch name)

ブランチを作成しつつ、ブランチの切り替え

git merge (branch name)

マージは混ぜるの意味。別ブランチで追加した変更を現在いるブランチに適応させる。

git branch -d (branch name)

ブランチの削除。マージ後に実行する。

git branch --merged

現在いるブランチにマージされたブランチ一覧を表示する。

git tag

tagはコミットidの別名。タグの一覧表示。

git tag (tag name)

直前のコミットにタグ名をつける。

git tag (tag name) (commit id)

指定されたコミットにタグ名をつける。

git tag -d (tag name)

指定されたタグを削除する。

git show (tag name)

タグ名で指定されたコミット内容を表示する。

gitの管理に含めない方法

以下のファイルを作成して設定内容を保存する。

vim .gitignore: git管理に含めないファイルを登録する。サブディレクトリにも適応される。 *.log

コンフリクトの対処

コンフリクトとは: マージの際に同じ箇所が変更された場合は、コンフリクト（衝突）が発生して手動で修正が必要になる。
コンフリクトの修正: vim filename
　　　コンフリクトを起こしているファイルをテキストエディタで開く。コンフリクトの内容が表示されるのでいい具合に修正して保存。

共有リポジトリ関連

git init --bare

共有リポジトリを作成する。ディレクトリ名に.gitを付けるのが慣例。

mkdir ourweb.git
cd ourweb.git
git init --bare

git remote add origin (repos location)

リモートの設定。

git push origin master

共有リポジトリに向かってmasterブランチの内容を突っ込む。

git clone

共有リポジトリの内容をコピーする

git pull

共有リポジトリの内容を現在の作業ディレクトリにマージする。
他の人が共有リポジトリにpushした場合は、自分が新しくpushする前にpullをする必要がある。

Macにgitをインストールしてみました。

noreply@blogger.com (busyomono99) — Fri, 05 Apr 2013 15:11:00 +0000

ずっと気になっていたgitを始めようと思いたち、差し当たってmacにgitをインストールしてみました。なんだかんだで時間かかりました。

方法

インストールする方法はいくつかあるようですが、今回はmacportsを使う方法で行いました。

Xcodeのインストール

Xcodeは元々インストールしてあったので、詳細は不明ですがApp Storeからインストールします。検索すれば出てくるので特に問題ないと思います。

MacPortsのインストール

こちらやこちらを参考にインストールしました。
MacPortsの公式サイトの右上の「Download」ボタンをクリック→

“pkg” installers for Mountain Lion, Lion and Snow Leopard,...

の部分で対応するOSのリンクをクリック。pkgのダウンロードが始まります。
pkgをダブルクリックして指示通りにインストールします。

gitのインストール

ターミナルを開き

sudo port install git-core

を実行。そしてエラーorz

Warning: Xcode appears to be installed but xcodebuild is unusable; some ports will likely fail to build.
...

といった感じで表示されました。エラーでない場合は「gitのインストールに再挑戦」の途中から続けて下さい。

Command Line Tool for Xcodeをインストールする。

ぐぐったらこちらの記事に当たりました。早速Xcodeを起動。
メニューのXcode -> Open Developer Tool -> More Developer Tools…をクリック。
ブラウザが立ち上がり、AppleID入力画面に。素直に入力して最新の「Command Line Tool for Xcode」をクリック。
ここでもつまづく。
画像の赤丸部分をクリックしても何も無い画面が開くだけ。
←こんな感じ
色々触っているうちに「cmd+クリック」でダウンロードが開始しました。
ひょっとしたらブラウザがChromeだったせいかも知れません。Safariなら問題なかったかも。試してません。
ダウンロードしてdmgファイルからインストールします。

gitのインストールに再挑戦

ターミナルを開き

sudo port install git-core

を実行。今度はインストール開始しました。
それなりに時間かかりました。10分弱ぐらい？でした。

No broken files found.

と表示されたらインストール終了です。

確認

ターミナルで

git --help

を実行。説明文らしきものが表示されたらOKです。
これからドットインストールさんのサイトで勉強です。

AngularUIのdatepickerを使ってみた

noreply@blogger.com (busyomono99) — Mon, 01 Apr 2013 15:36:00 +0000

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ファイルは

jQuery
jQueryUI
AngularJS
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ファイルも読み込みます。

Twitter bootstrap
jQueryUI
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

noreply@blogger.com (busyomono99) — Wed, 27 Mar 2013 16:44:00 +0000

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を使用する。アカウントを取得しておく。

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

デフォルトのインストール先は
“~/Library/Application\ Support/Sublime\ Text\ 2/"
以下の3つのフォルダを先ほど作成した「Sublime Text 2」ディレクトリにコピーする

"Installed Packages"

"Packages"

"Pristine Packages"
コピー元のディレクトリを削除またはリネームする

ターミナルを開き、以下のコマンドを実行する

"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"

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

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

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のチートシートを作ってみた

AngularJSで連動するSELECTタグを作る

noreply@blogger.com (busyomono99) — Sat, 23 Mar 2013 15:48:00 +0000

連動するSELECTタグ

2015/02/12追記

hrfmmymtさんがfilter使ったより良い方法を記事にしてくれました。
hrfmmymtさんのやり方の方が良いので合わせて読んで下さい。
追記ここまで。

作るもの

今回はCakePHPはお休みして、主にAngularJSメインで試してみます。
作るものは一つ目SELECTタグを選択したら、その内容に応じて二つ目のSELECTタグのOPTIONが変化するサンプルです。

そしてサンプルです

jsFiddleにサンプル作ったので、こちらを確認して下さい。
まずhtmlの中身の解説をすると、

<h1>AngularJSの練習</h1>
 <div ng-app>  <-ここでアプリの宣言
    <div ng-controller="mainCtrl">
    <form novalidate name="myForm" >
    <p>Group:
    <select ng-model="group"  <-設定されるモデルは”group"
             ng-options="g.name for g in groups"  <-optionをgroupsモデルからループ処理で作成。
             ng-change="change()">  <-内容に変更があったらchange()メソッドを実行
        <option value="">-- chose group --</option>  <-一番上に来る空のオプションを設定
    </select>
    </p>
    <p>User:
    <select ng-model="user"  <-設定されるモデルは”user"
           ng-options="u.name for u in listUsers"> <-optionをlistUsersモデルからループ処理で作成。
        <option value="">-- chose user --</option> <-一番上に来る空のオプションを設定
    </select>
    </p>
    </form>
    <pre>グループ名 : {{group.name}}</pre>  <-グループ名の表示
    <pre>ユーザー名 : {{user.name}}</pre>  <-ユーザー名の表示
     </div>
</div>

といった内容になってます。
続いてJS側は

    //以下はそれぞれモデルでデータを格納してます。
    $scope.groups
    $scope.group 
    $scope.users 
    $scope.listUsers
    $scope.user
    //以下はメソッドで、一つ目のセレクトタグに変更があった場合に実行されます。
    $scope.change = function(){
        $scope.listUsers = [];
        for(var i=0;i<$scope.users.length;i++){
            //選択されたグループのidと一致しているユーザーを配列に追加していく
            if($scope.users[i].group_id ==$scope.group.id){
                 $scope.listUsers.push($scope.users[i]);  
            }
        }
    };

といった感じです。最初change()メソッドではなく、html側で

<select ng-model="user" ng-options="u.name for u in listUsers | filtter:ホニャララ">

みたいな感じで作れると思ったのですが、どうにもこうにも上手くいきませんでした。もし「出来るよ〜」って方がいらしゃったら是非ご指導下さいm(__)m。
ともかく、jQueryと比べてコードは少ないし、見やすいしで良かった良かった。ではでは。

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

noreply@blogger.com (busyomono99) — Fri, 22 Mar 2013 13:43:00 +0000

サーバー側の修正

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

noreply@blogger.com (busyomono99) — Thu, 21 Mar 2013 16:34:00 +0000

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

noreply@blogger.com (busyomono99) — Thu, 21 Mar 2013 15:25:00 +0000

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アプリを作る。その１

noreply@blogger.com (busyomono99) — Mon, 18 Mar 2013 15:46:00 +0000

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アプリを作る

noreply@blogger.com (busyomono99) — Mon, 18 Mar 2013 14:05:00 +0000

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

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

noreply@blogger.com (busyomono99) — Wed, 01 Aug 2012 12:30:00 +0000

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

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の各アクション前に

エラーがあるかつデバッグレベルが0を超えていたらレイアウトはdefalut
管理者用のアクセスだったらレイアウトはadmin
それ以外は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（道草）

noreply@blogger.com (busyomono99) — Mon, 30 Jul 2012 12:30:00 +0000

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

noreply@blogger.com (busyomono99) — Sat, 28 Jul 2012 00:00:00 +0000

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

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

noreply@blogger.com (busyomono99) — Fri, 27 Jul 2012 12:00:00 +0000

最近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

noreply@blogger.com (busyomono99) — Thu, 26 Jul 2012 12:00:00 +0000

ウラシマ

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



CSSフレームワークのTwitter Bootstarpを調べる
noreply@blogger.com (busyomono99) — Wed, 25 Jul 2012 02:31:00 +0000
結論から言うと大分良い。



参考にしたサイト

 
  これからTwitter Bootstrapをはじめる人のためのエントリまとめ
 
 
  Twitter Bootstrapの使い方
 
 
  ドットインストールのbootstrap講座
 



気付いた注意点1つ

 レスポンシブデザインを導入すると、スマートフォンやタブレットにも対応します。で以下のlinkタグ貼り付けるのですが、
 

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
 
 これ以外にも
 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 を追加しないと、PC上でブラウザでの幅を狭くして見た時にはスマートフォン用のデザインになるのですが、実際にスマートフォンで見るとPC用のデザインのままです。


 その他の使い方は上のURLで良くわかります。ではでは。



noreply@blogger.com (busyomono99) — Wed, 25 Jul 2012 02:00:00 +0000
会社でSymfony使う予定だったのが中止になり、その後C++とQtとjavaとspringframworkを扱う案件でてんやわんやしてました。

最近また落ち着いて来たのでまたCakephpを唐突にいじりだす。その前にtwitter bootstrapの勉強。


[symfony2]ユーザーとかのフォームとかコントローラーとか
noreply@blogger.com (busyomono99) — Mon, 07 Nov 2011 14:41:00 +0000
少し間が開きましたが、認証関連のフォームを作ってみました。



1.UserとRoleのフォームを作る
それぞれ以下のコマンドを実行します。

php app/console doctrine:generate:crud --entity=AcmeSecurityBundle:User --route-prefix=AcmeSecrityBundle_user --with-write

php app/console doctrine:generate:crud --entity=AcmeSecurityBundle:Role --route-prefix=AcmeSecrityBundle_role --with-write

「doctrine:generate:crud」は指定したエンティティに対して、新規追加、一覧、編集、詳細のフォームを作るコマンドみたいです。

--entity　作成するフォームのエンティティを指定

--route-prefix　ルーターの接頭辞

--with-write　一緒にnewとdeleteアクションを作ってくれる？

フォーマットの指定はアノテーションでやりました。



するとsymfonyが自動で入力フォームをサクッと作ってくれました。

できたものを確認すると、多分以下ファイルが出来てました。

src/Acme/SecurityBundle/Controller/UserController.php

src/Acme/SecurityBundle/Form/UserType.php

src/Acme/SecurityBundle/Resources/views/User/edit.html.twig

src/Acme/SecurityBundle/Resources/views/User/index.html.twig

src/Acme/SecurityBundle/Resources/views/User/new.html.twig

src/Acme/SecurityBundle/Resources/views/User/show.html.twig

＊Roleも同じものが出来てました。



早速ブラウザで「ect.com/web/app_dev.php/user/」にアクセスすると一覧が出てました。

2.Role.phpの改造
そのまま新規追加してみようと思いまして、新規追加するリンクをクリックしたらエラーが出ました。

Roleエンティティに__toString()メソッドを作ってくれない？みたいな感じです。

多分ユーザーの権限の入力フォームがselectタグで、そこに表示する用の文字列を吐き出せば良いかなと当たりをつけて以下のコードを追加してみました。

#　src/Acme/SecurityBundle/Entity/Role.php

public function __tostring()

 {

  return $this->name;

 }

再読込みをしてみると無事表示されました。



3.パスワードをハッシュ化する用のユーティリティクラス
このままだと、パスワードは平文のままデータベースに保存されます。それだと色々とまずいのでハッシュ化する機能を追加する。

パスワードをハッシュ化するようなユーティリティクラスを作る。前に機能拡張した時のコメントと日本symfonyユーザー会のセキュリティ　パスワードのエンコードを参考に以下の様に作ってみました。新しくUtilディレクトリを作って、クラス名はまあ適当な感じです。

#　src/Acme/SecurityBundle/Util/PasswordUtil.php

namespace Acme\SecurityBundle\Util;



class PasswordUtil

{

 /**

  *

  * パスワードをハッシュ化する一連の処理を行う。

  * @param From $form

  * @param Controller $controller

  * @return Form $form

  */

 public static function encodePasswordUtil($form, $controller)

 {

  //まず下準備

  $factory = $controller->get('security.encoder_factory');

  //$formからエンティティを取り出す

  $data = $form->getData();

  //下準備2

  $encoder = $factory->getEncoder($data);

  //パスワードをハッシュ値にする

  $hashedPassword = $encoder->encodePassword($data->getPassword(), $data->getSalt());

  //エンティティにハッシュ化したパスワードをセットする。

  $data->setPassword($hashedPassword);

  //$formにエンティティをセットする

  $form->setData($data);

  return $form;

 }



 // 文字列がハッシュか確認する。

 // @param $password フォームの内容が入っているリクエスト。

 // @return bool 長さ40で英数字の場合はtrue

 public static function isHashUtil($password)

 {

  $pattern = '/[a-zA-z0-9]{40}/i';

  if(strlen($password)===40 && preg_match($pattern, $password)){

   return true;

  }else{

   return false;

  }

 }

}



4.パスワードをハッシュ化するために変更したユーザーコントローラー
続いてユーザーコントローラー

#　src/Acme/SecurityBundle/Controller/UserController.php



...

use Acme\SecurityBundle\Util\PasswordUtil;



/**

* User controller.

*

* @Route("/admin/user")

*/

class UserController extends Controller

{

....

 /**

  * Creates a new User entity.

  *

  * @Route("/create", name="AcmeSecurityBundle_user_create")

  * @Method("post")

  * @Template("AcmeSecurityBundle:User:new.html.twig")

  */

 public function createAction()

 {

  $entity  = new User();

  $request = $this->getRequest();

  $form = $this->createForm(new UserType(), $entity);

  $form->bindRequest($request);



  if ($form->isValid()) {

   //パスワードをハッシュ化した$formを取得

   $form = PasswordUtil::encodePasswordUtil($form, $this);

   $em = $this->getDoctrine()->getEntityManager();

   $em->persist($entity);

   $em->flush();

   return $this->redirect($this->generateUrl('AcmeSecurityBundle_user_show', array('id' => $entity->getId())));

  }

  return array(

   'entity' => $entity,

   'form'   => $form->createView()

  );

 }

...

 /**

  * Edits an existing User entity.

  *

  * @Route("/{id}/update", name="AcmeSecurityBundle_user_update")

  * @Method("post")

  * @Template("AcmeSecurityBundle:User:edit.html.twig")

  */

 public function updateAction($id)

 {

  $em = $this->getDoctrine()->getEntityManager();

  $entity = $em->getRepository('AcmeSecurityBundle:User')->find($id);

  if (!$entity) {

   throw $this->createNotFoundException('Unable to find User entity.');

  }

  $editForm   = $this->createForm(new UserType(), $entity);

  $deleteForm = $this->createDeleteForm($id);

  $request = $this->getRequest();

  $editForm->bindRequest($request);

  if ($editForm->isValid()) {

   //パスワードがハッシュ値ならそのままupdate、

   //ハッシュ値で無ければ恐らく変更があったということなので、ハッシュ化してupdate

   //そんな訳で取り敢えずフォームのパスワードを取得

   $data = $editForm->getData();

   $password = $data->getPassword();

   //パスワードがハッシュ化されているか調べる

   if(!PasswordUtil::isHashUtil($password)){

    //パスワードをハッシュ化したFormを受け取る

    $editForm = PasswordUtil::encodePasswordUtil($editForm, $this);

   }

   $em->persist($entity);

   $em->flush();

   return $this->redirect($this->generateUrl('AcmeSecurityBundle_user_edit', array('id' => $id)));

  }



  return array(

   'entity'   => $entity,

   'edit_form'   => $editForm->createView(),

   'delete_form' => $deleteForm->createView(),

  );

 }

}



5.ちょっとした解説
PasswordUtil::encodePasswordUtil()関数の引数$formはUserコントローラー内で出てくる以下の2つみたいなヤツです。

$form = $this->createForm(new UserType(), $entity);

$editForm = $this->createForm(new UserType(), $entity);

もう一つの引数$controllerはUserコントローラー自身($this)です。

PasswordUtil::encodePasswordUtil()関数の流れを少し説明すると、「$data = $form->getData();」でエンティティが取得できます。つまりUser.phpです。なので「$data->getPassword()」とか「$data->getSalt()」でフォームに入力された値が取得できます。

これを順調にハッシュ化していって、「$form->setData($data);」でフォームに設定し直して返します。



もう一つのPasswordUtil::isHashUtil()関数はupdateアクションの時に利用しています。ハッシュ値がどうかを検証してます。



UserControllerは自動で出来たコードから変更した箇所は

use Acme\SecurityBundle\Util\PasswordUtil;を追加
createAction()にパスワードがハッシュ化するように色々追加
updateAction()にフォームのパスワードがハッシュ値ではない場合にハッシュ化する処理を色々と追加
updateAction()の方法はあまり良くないですが、一応これでおいておく。

これでひと通りはOKかなと思います。



次はフォームの表示を変更していく予定です。


[symfony2][mac]データベース関連のコンソールでエラー
noreply@blogger.com (busyomono99) — Sun, 06 Nov 2011 11:56:00 +0000
普段は会社でしかsymfony2をいじってなかったのだが、散々遅れたので家のmacでよやろうと思ったらsymfonyのコンソールでエラーが出ました。



コンソールで実行したコマンドは

php app/console doctrine:schema:update --force 



出てきたエラーは

 [PDOException]

SQLSTATE[HY000] [2002] No such file or directory

[ErrorException]

Warning: PDO::__construct(): [2002] No such file or directory

(trying to connect via unix:///var/mysql/mysql.sock) in /Applications/

MAMP/htdocs/ext/vendor/doctrine-dbal/lib/Doctrine/DBAL/Driver/

PDOConnection.php line 36 

でした。どうして良いか分からず途方に暮れてましたが、以前に「googleグループの日本symfonyユーザー会に気軽に質問して下さい。」とメールを頂いていたのでディスカッションに投稿してみました。ものの15分ぐらいで返信ありました。感謝感謝。



その投稿を引用すると

...

エラーを見るに、UNIXソケットを利用してMySQLの接続を行おうとして、

接続に失敗しているものと思われます。



http://jp2.php.net/manual/ja/ref.pdo-mysql.connection.php



app/config/config.yml にてUNIXソケットの指定をすれば接続できるかと思います。

設定については下記のドキュメントを参考にしてください。

# unix_socket という項目名です



http://symfony.com/doc/2.0/reference/configuration/doctrine.html

...
との事でした。



早速リンク先のConfiguration Referenceを見ると

unix_socket:          /tmp/mysql.sock

ふむふむ、この「mysql.sock」を探せば良いのか…とmacのspotlightで検索するも出て来ません。

ググれ俺。

って事で「いろいろあって仕事に手が付かない、、」というブログの記事に（感謝感謝）。

mysqladmin version

で調べればわかるとあったのですが、分からず（この理由は後でわかります。）

諦めかけた時にMAMPのスタートページをふと見ると、「

ソケット /Applications/MAMP/tmp/mysql/mysql.sock」ってある…



今日の教訓「灯台下暗し」



そんな訳でファイルを修正

# app/config/config.yml

doctrine:

 dbal:

   ...

   unix_socket:  /Applications/MAMP/tmp/mysql/mysql.sock



で意気込んで「php app/console doctrine:schema:update --force」を実行…



また違うエラー出たー！

今度のエラーは

Exception]                                                                                                                                                                  

DateTime::__construct(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'Asia/Tokyo' for 'JST/9.0/no DST' instead  

ん？デフォルトのタイムゾーンが違うぞっていう話？？

おかしいとおもいいつつMAMPのphp.iniを開く。

やっぱし「date.timezone = "Asia/Tokyo"」になってました。そりゃそうだ、前に直したもんな。なんぞや？...

やっぱしググれ俺。

って事で、それっぽい記事を見つけました。tech tech -テクテクブログ-の記事（感謝感謝）を参考にバックアップとコピーする。



今度こそと「php app/console doctrine:schema:update --force」を実行…



無事実行されました。

なるほど、だからさっきの「mysqladmin version」も分からなかったんだなと一人納得。



ということで今日はちっとも作業がすすみませんでした。

ではでは。