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