不肖者の人生実験: Twitter Bootstrap

ラベル Twitter Bootstrap の投稿を表示しています。すべての投稿を表示

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月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
IDE	SublimeText 2
開発環境?	MAMP
PC	iMac
OS	Mac 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>

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

Step4 双方向型のデータ連結

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

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

ng-repeatの値に

    | orderBy:orderProp

を追加

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

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

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

環境とか

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

2013年4月8日月曜日

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

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

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

CakePHP側の準備

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

Step0 準備と基本

AngularJSファイルの読み込み

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

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

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

ng-app

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

2個の波括弧

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

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

Step1 静的なテンプレート

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

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

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

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

Step2 AngularJSのテンプレート

サンプルサイト Step2

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

ng-controllerの設定

Step02.ctpで

<div ng-controller="PhoneListCtrl">

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

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

で保存する。

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

ng-repeat

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

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

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

Step2までは以上です。

環境とか

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

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

2012年8月1日水曜日

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

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

Controllerの概要

Controllerの役目

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

PagesControllerを改造する

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

app/View/Pages/index.ctp

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

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

app/Controller/PagesController

...

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

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

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

他のページを追加する。

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

app/Config/routes.php

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

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

app/Controller/PagesController

...

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

...

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

app/View/Pages/scaffolding.ctp

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

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

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

色々と試す

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

app/Controller/PagesController

...

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

...

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

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

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

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

app/Controller/PagesController

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

...

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

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

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

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

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

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

app/Controller/AppControllerを修正

...

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

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

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

app/Controller/PagesController

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

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

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

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

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

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

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

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

まとめ

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

環境とか

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

2012年7月30日月曜日

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

Eclipseのテンプレート機能

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

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

設定方法

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

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

使ってみる

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

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

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

環境とか

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

2012年7月28日土曜日

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

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

layoutを改造する

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

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

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

...

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

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

助っ人

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


   $this->Html->charset()

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


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

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

自作の助っ人

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

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

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

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

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

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

app/Controller/PagesControllerに追加

public $helpers = array('B99TwitterBootstrap');

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

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

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

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

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

さらに自作の助っ人

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

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

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

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

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

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

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

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

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

...

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

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

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

まとめ

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

環境とか

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

2012年7月27日金曜日

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

Viewの概要

Viewの仕組み

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

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

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

レイアウトを試す

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

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

 <?php echo $this->Html->charset(); ?>*1

 <title>

  Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?>*2

 </title>

 <?php

  echo $this->Html->meta('icon');*3



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



  echo $this->fetch('meta');*5

  echo $this->fetch('css');*6

  echo $this->fetch('script');*7

 ?>

</head>

<body>

 <div id="container">

  <div id="header">

   <h1>Twitter Bootstrap 2.0.4コピペ場</h1>

  </div>

  <div id="content">

   <?php echo $this->fetch('content'); ?>*8

  </div>

  <div id="footer">

   <p>copyright busyoumono99 2012</p>

  </div>

 </div>

</body>

</html>

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

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

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

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

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


<?php 

$this->layout = "guest";

?>

Hello World!

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

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

Twitter Bootstrapの導入

Bootstrapの準備

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

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

app/webroot/img

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

app/webroot/js

bootstrap.min.js

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

Bootstrap用にファイルを修正

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

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


<?php

?>

<!DOCTYPE html>

<html lang="ja">

  <head>

    <?php echo $this->Html->charset(); ?>

    <title>Twitter Bootstrap 2.0.4コピペ場 : <?php echo $title_for_layout; ?></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php

  echo $this->Html->meta('icon') . "\n";

  echo $this->Html->css(array('bootstrap.min','bootstrap-responsive.min')) . "\n";

  echo $this->fetch('meta') . "\n";

  echo $this->fetch('css') . "\n";

  echo $this->fetch('script') . "\n";

 ?>



  </head>

  <body>

   <div class="container">

  <div id="header">

   <h1>Twitter Bootstrap 2.0.4コピペ場</h1>

  </div>

  <div id="content">

   <?php echo $this->fetch('content'); ?>

  </div>

  <div id="footer">

   <p>copyright busyoumono99 2012</p>

  </div>

 </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>



  </body>

</html>

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

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


<?php 

$this->layout = "guest";

?>

<div class="row">

 <div class="span3">サイド</div>

 <div class="span9">Hello World!</div>

</div>

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

OKっぽい。

まとめ

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

環境とか

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

2012年7月26日木曜日

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

ウラシマ

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

BootStrapのサイト

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

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

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

準備

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

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

/app/Config/core.php


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

...

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

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

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

/app/Config/routes.php


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

↓

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

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

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

プログラマのサガ

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

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


...



public function index(){

}



...

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


<?php

?>

Hello World!


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



「Hello World！」が出た！と思ったらまたCakephpさんに怒られたorz。

内容はさっき無視した「データベースの設定ファイルが無い」って奴。しょうがないので修正する。

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

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



今度こそOK。

まとめ


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


環境とか


 項目 内容


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





投稿者



busyomono99




時刻:

21:00



0 件のコメント:
  













ラベル:
CakePHP,
Twitter Bootstrap


        

          
        
2012年7月25日水曜日

          
        






CSSフレームワークのTwitter Bootstarpを調べる





結論から言うと大分良い。



参考にしたサイト

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



気付いた注意点1つ

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

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


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






投稿者



busyomono99




時刻:

11:31



0 件のコメント:
  













ラベル:
Twitter Bootstrap




前の投稿

ホーム




登録:
投稿 (Atom)












SNS

RSS



@busyoumono99さんをフォロー




自己紹介




busyomono99


Japan
ヨメと子持ちの日本男児。
宝飾業からプログラマーを目指しプログラミングの勉強で日々を過ごす今日この頃。
無事プログラマーにはなれたものの相変わらず勉強を続ける毎日...

詳細プロフィールを表示



このブログを検索




















ラベル


AngularJS
(13)


CakePHP
(18)


SublimeText2
(2)


Twitter Bootstrap
(12)


symfony2
(11)


プログラミング
(1)


雑記
(1)




不肖者の人生実験


読込中...




フォロワー











ブログ アーカイブ








        ▼ 
      



2013

(16)





        ▼ 
      



6月

(1)

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








        ► 
      



5月

(3)







        ► 
      



4月

(5)







        ► 
      



3月

(7)









        ► 
      



2012

(7)





        ► 
      



8月

(1)







        ► 
      



7月

(6)









        ► 
      



2011

(12)





        ► 
      



11月

(11)







        ► 
      



6月

(1)









        ► 
      



2009

(3)





        ► 
      



12月

(3)



























「Awesome Inc.」テーマ. Powered by Blogger.