2013年6月18日火曜日

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

2013年5月22日水曜日

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

2013年5月15日水曜日

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

先日、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"

2013年5月5日日曜日

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
IDESublimeText 2
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年4月14日日曜日

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
IDESublimeText 2
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年4月8日月曜日

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

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
IDESublimeText 2
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年4月7日日曜日

gitメモ

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


linuxコマンド

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


ヴァージョン管理の流れ

  1. ファイルを作ったり修正たり
  2. ある程度のまとまりになったら
  3. 履歴データベースに保存する
git上での呼び方
  1. 作業ディレクトリ
  2. ステージングエリア(インデックス)
  3. リポジトリ(ローカル、リモート)


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をする必要がある。

2013年4月6日土曜日

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

ずっと気になっていた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です。
これからドットインストールさんのサイトで勉強です。

2013年4月2日火曜日

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
IDESublimeText 2
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年3月28日木曜日

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

2013年3月24日日曜日

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

連動する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と比べてコードは少ないし、見やすいしで良かった良かった。ではでは。

2013年3月22日金曜日

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
IDEEclipse 3.6
開発環境?MAMP
PCiMac
OSMac 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
IDEEclipse 3.6
開発環境?MAMP
PCiMac
OSMac 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
IDEEclipse 3.6
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年3月19日火曜日

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

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

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
IDEEclipse 3.6
開発環境?MAMP
PCiMac
OSMac OS Lion

2013年3月18日月曜日

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ファイルに書く
これで上手く行くかは分かりませんが、進めて行きたいです。