不肖者の人生実験: 3月 2013

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

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

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
IDE	Eclipse 3.6
開発環境?	MAMP
PC	iMac
OS	Mac OS Lion

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

AngularJS側のページを作る。

コントローラを作成

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

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

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

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

ビューを作成

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

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

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

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

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

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

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

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

JSON側の修正へ

そしてエラー

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

エラーの内容は

Uncaught SyntaxError: Unexpected token :

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

SyntaxError: invalid label

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

JsonView.phpをいじる

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

   $content = json_encode($data);

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

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

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

またエラー

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

error
undefined
0

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

環境とか

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

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

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

前のは失敗でした

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

表示するURLを決める

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

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

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

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

ルーターの設定

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

Router::parseExtensions('json');

コントローラの作成

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

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

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

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

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

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

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


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

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

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

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

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

環境とか

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

2013年3月19日火曜日

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

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

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

前提

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

表示するURLを決める

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

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

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

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

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

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

UsersController.phpに以下を記述

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

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

環境とか

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

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ファイルに書く

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

登録: 投稿 (Atom)