2015-02-15

FuelPHPでCoffeeScriptのコンパイルにcoffeescript-phpを使う

FuelPHP CoffeeScript PHP

はじめに

突然ですが、FuelPHPでCoffeeScript使って実装したいと思ったことありませんか？
生のjavascriptよりも簡潔に書けて、javascript特有のバグも起きにくいということからCoffeeScriptで書きたいというケースは少なからずあると思います。
でもCoffeeScriptで実装する際にめんどくさいポイントが２つあると思っていて、

CoffeeScriptのためにnode.jsやnpmをサーバーにインストールしなければならないこと
CoffeeScriptのコンパイル

このポイントを解決できるのがcoffeescript-php(https://github.com/alxlit/coffeescript-php)です。
2012年に書かれたものなのですが、これは

Composerでインストール可能
PHP単体でCoffeeScriptのコンパイルが可能（node.js、npm不要）

という代物です。そこでcoffeescript-phpを使ってFuelPHPでCoffeeScriptの自動コンパイル機能を簡単に実装してみます。

coffeescript-phpのインストール

FuelPHPにcoffeescript-phpをインストールするにはComposerを使います。FuelPHPには初期からComposerがあるのでそれを利用します。

{
...
    "require": {
        ...
        "coffeescript/coffeescript": "1.3.1"
    },
...
}

と追加してからcomposer.pharがあるディレクトリで

$ php composer.phar update

とすればVENDERPATH配下にインストールされます。(FuelPHPのVENDORPATH等についてはこちらを参照）

使い方

coffeescript-phpがインストールができるともう使用することができます。
（Composer経由でインストールしたパッケージは、autoload.phpをrequireすれば使用可能になりますし、それがFuelPHPではCOREPATH/bootstrap.phpで記述されているのでほぼ全てのファイルで使用可能になります。）
ここいらがFuelPHPの楽ちんなところですね！

coffeescript-phpでCoffeeScriptファイルからjavascriptファイルを生成するには以下のようにします。

<?php
...

// コンパイルを実行したいCoffeeScriptファイルへのフルパス
$coffeescript_path = "/path/to/coffeescript_file";

// ファイルの中身を取得
$coffeescript = File::read($coffeescript_path, true);
 
$javascript = CoffeeScript\Compiler::compile($coffeescript);
// $javascript にはコンパイル実行結果のjavascriptのコードが文字列で格納されている

あとは出力されたjavascriptのコードをお好きなファイル（例えばpublic/asset/js/配下とか）に書き出すとかできるようになります。
これを上手いこと使えば、CoffeeScriptの自動コンパイルの仕組みを作ることができます！

では！

余談

ちなみに私はCoffeeScriptを独自拡張したAsset::coffee()でCoffeescriptのソースを読み込ませると、

自動で更新があったのかどうかを判別し、
更新があった場合はpublic/asset/js/配下にjavascriptファイルを設置して、
Asset::js()と同じようにHTMLのソースに貼っつける

という仕組みを作れました。（作った拡張Assetクラス↓↓）

<a href="https://github.com/shirakiya/ROOtKEY/blob/master/fuel/app/classes/asset.php">shirakiya/ROOtKEY</a>

ROOtKEY/asset.php at master · shirakiya/ROOtKEY · GitHub

このようにcoffeescript-phpは結構使い方によっちゃあ便利になると思います！

2015-01-30

Vagrant+tmux環境下でvimのヤンクデータを共有する

Vagrant Vim

はじめに

vagrant仮想環境で開発を進めているときにめっちゃイラッとすることが２つある。（※自分はMacとiTerm2を使っています。）

仮想環境下で新しいウィンドウを開くとssh接続が切れてローカルから再スタート
Vimでヤンクしたコードが他のvimウィンドウでペーストできない

1に関してはtmuxを使うことによって回避できているが、2に関しては今までどうすることもできなかった。（調べても記事が無い）

なので、この2に関して力技でなんとかしてみた。

viminfoを使う

viminfoとはコマンド、検索履歴、レジスタなどの情報が格納されているファイルで、通常ホームディレクトリ以下に「.viminfo」の形で存在している。
※わかりやすい解説はこちら

このviminfoにレジスタのデータが書かれており、

# ヤンクした後に
:wv

# 別タブのvimで
:rv!

とすることによって、ヤンクしたデータを複数ウィンドウ間で共有することができる。
これを利用して、ヤンクすると自動的に:wvを実行し、ペーストすると自動的に先に:rv!を実行させることで、わざわざコマンドを叩く事なく、軽快なヤンク+ペーストをさせることができる。

以下を.vimrcに記述する。

"Linuxの場合はviminfoを用いてヤンクデータを共有
let OSTYPE = system('uname')
if OSTYPE == "Linux\n"
    noremap y y:wv<CR>
    noremap p :rv!<CR>p
endif

set viminfo='50,\"3000,:0,n~/.viminfo

基本的にMacのローカル環境は共有できている前提で、今回はOSがLinuxの時のみ有効にさせたが、ローカルでも同じことがしたい場合はif内を書いておけば良い。

またset以下はviminfoの設定で、何行までヤンクしたデータを保存するのかを決めている。
こちらの記事を参照したほうがわかりやすいので詳細については今回は割愛する。

2014-11-08

FuelPHPの導入（完全版）

FuelPHP 環境構築

前回のFuelPHPの導入時にcssが権限周りでエラって表示されないという出来事があったが、その不具合を解消できたので、再度「完全版」ということで記事を書く。

※PHPの環境構築は過去の記事を参照
Homebrewでnginx + php-fpmのphp実行環境構築

この環境構築の後にPHPのWAF（Web Application Framework）であるFuelPHPの導入をした時のメモ。
FuelPHPの紹介は他に譲るとして、今回はその導入に焦点を当てて書く。
対象はMacOSなのでご注意を。（Linuxについてはある程度共通しているはずだが、試していないので守備範囲外ということで。）

参考記事

FuelPHP 1.7 Documentation

oilコマンドのインストール

FuelPHPのパッケージコマンドであるoilコマンドをまずインストールする。
（oilコマンドの詳細はこちら）

$ curl get.fuelphp.com/oil | sh

これでoilコマンドが使用可能な状態となる。

FuelPHPによる新規プロジェクトの作成

プロジェクトを置きたい任意のディレクトリで以下を実行。

$ oil create [プロジェクト名]

しばらく待つと、カレントディレクトリに指定したプロジェクト名のディレクトリが作成される。
その後、nginxに書き込み権限を与えるため、そしてComposerにより定義された依存ライブラリを取得するために以下のコマンドを実行。

$ cd /path/to/[プロジェクト名]
$ oil refine install
$ php composer.phar update

※ちなみにFuelPHPプロジェクトを作成するこの他の方法として、以下の２つがあるが割愛。
1. zipファイルをダウンロードしてくる
2. GitHubからクローンする

nginxの設定

ブラウザから見られるようにするためにnginxの設定を変更する。

※ただし今回は要求として「(FuelPHPとは関係が無い)php スクリプトを実行するディレクトリ」と「FuelPHPの練習用ディレクトリ」の２つを分けたいと思っていたので、FuelPHP用のlocationを用意した。
※エラーログは現状共存する形になっているが、そこはお好きにどうぞ。

http {
    ...

    include mime.types;
    default_type application/octet-stream;

    server {
        listen 80;

        # 前回の記事
        root /path/to/your_document_root/; # ドキュメントルート
        server_name localhost;
        charset utf-8;
        index index.php index.html index.htm; # /で終わった時にアクセスするファイル

        # 前回の記事
        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }

        # FuelPHP用(「fuelphp_sample」というプロジェクト名の場合)
        location /fuelphp_sample/public/ {
            try_files $uri /fuelphp_sample/public/index.php?$uri&$args;
        }
   
        location /fuelphp_sample/public/\favicon.ico {
            empty_gif;
            access_log off;
            log_not_found off;
        }

        location ~ /fuelphp_sample/public/assets/(.+) {
            autoindex on;
            alias /path/to/your_document_root/fuelphp_sample/public/assets/$1;
        }

        location ~ /fuelphp_sample/public/\.php$ {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }
}

nginxを再起動した後にブラウザでhttp://localhost/fuelphp_sample/public/にアクセス。
前回はここでcssが403でエラーが出ていて、cssが当たっていない画面が表示された。

しかし、同僚に教えてもらったところこんな記事が。。ほとラボ - Nginxでつくる、どシンプルな静的コンテンツサーバ

…ドキュメントルートまでのとあるディレクトリの"."に確かにOtherに実行権限が無かったあああ！！

そんなわけで実行権限を与える。

$ chmod o+x 対象ディレクトリ

すると治って下のページが表示された！(∩´∀｀)∩ﾜｰｲ

f:id:shirakiya:20140721174527p:plain

ってことで同じように403でassets系のファイルにアクセスできない場合は、ディレクトリの実行権限に要注意で！

以上の流れをまとめると、

PHPの実行環境を作る
Nginxでプロキシサーバーを立てる（PHPサーバーでも可）
FuelPHPのアプリケーションを構築

でFuelPHPの導入完了！

2014-07-25

PHPのオブジェクト指向プログラミング（クラスの作り方）

PHP

最近独学でPHPの勉強をしています。
PHPの書籍は良書が少ないと言われているのを色々なところで目にしますが、そんな中で良書と呼ばれている「PHP 逆引きレシピ」を片手に（実際は片手で持てないぐらい分厚い本なのですが）、勉強を進めています。

そこで第5章のクラスとオブジェクトの勉強した内容をブログに綴ろうと思います。

クラスとは

オブジェクト：データとそのデータを操作するための手続きをひとまとめにしたもの。（オブジェクト = 変数 + 関数）
クラス：オブジェクトの定義（雛形）

オブジェクトが持つ変数をプロパティと呼び、関数をメソッドと呼ぶ。 PHPでは以下のように書く。

class クラス名
{
    // プロパティ
    private $プロパティ名;

    // メソッド
    public function メソッド名(引数)
    {
        // 処理を記述
    }
}

”public”等はアクセス修飾子と呼び、プロパティやメソッドへのアクセス権を表す。アクセス修飾子を省略するとpublicを明示的に指定したのと同じ意味になる。（ただしコードを明瞭にするために省略せずに記述すべし）

アクセス修飾子まとめ

public：外部からでもアクセス可能
protected：定義するクラス内とそのクラスを継承したクラスからアクセス可能
private：定義するクラス内のみからアクセス可能

（クラスを作る例: fileinfo.php）

<?php
class FileInfo
{
     private $retCode;

     //改行コードの数を調べるメソッド
     public function readFile($file)
     {
          $this->retCode['CRLF'] = 0;
          $this->retCode['LF']   = 0;

          $fp = fopen($file, 'r');
          // is_resourceは評価する変数がリソース型であるかどうかを返す(true or false)
          // リソースは特別な変数であり、外部リソースへのリファレンスを保持している
          if (! is_resource($fp)) {
               die('ファイルを開けませんでした');
          }

          while (($line = fgets($fp)) !== false) {
               if (preg_match('/\r\n\z/', $line)) {
                    $this->retCode['CRLF']++;
               } else {
                    $this->retCode['LF']++;
               }
          }
          fclose($fp);
     }

     // 改行コードの数を返すメソッド
     public function getRetCode()
     {
          if ($this->retCode['CRLF'] == 0 && $this->retCode['LF'] == 0) {
               return '';
          } elseif ($this->retCode['CRLF'] == 0) {
               return 'LF';
          } elseif ($this->retCode['LF'] == 0) {
               return 'CRLF';
          } else {
               return 'CRLF & LF';
          }
     }
}

クラスを使う

クラスを利用するには、new演算子でオブジェクトを作成(インスタンス化)する必要がある。
クラスから生成されたオブジェクトを「インスタンス」と呼び、クラスからインスタンスを生成することを「インスタンス化」(実体化)と呼ぶ。

（上記の例であれば、class FileInfoをインスタンス化することによって、readFileやgetRetCodeメソッドが使用可能となる）

1つのクラスからインスタンスはいくつでも生成でき、生成されたオブジェクトはそれぞれがプロパティを持つことになる。

（FileInfoクラスを使用する例: sample.php）

<?php
require_once '/path/to/fileinfo.php';

$fileinfo = new FileInfo();
$fileinfo->readFile('./sample.php');

echo '改行コードは「'.h($fileinfo->getRetCode()).'」です。';
?>

今日はここまで。

2014-07-21

HomebrewでCoffeeScriptの実行環境を作った

環境構築 CoffeeScript

基本的にHomebrewでセットアップする。ご多分に漏れずこれもMac向けということで。

参考記事

Mac OS 環境に CoffeeScript をインストールする手順
 node.jsとnpmのインストール

node.jsのインストール

node.jsはJavaScriptで出来たWebサーバ。公式HPはこちらから

$ brew install node

#node.jsがインストールされたかの確認
$ node -v

npmのインストール

npmとはnode package managerの略で、nodeを使ったツール（例えば今回のCoffeeScript等）をインストールするときに依存関係のあるデータとかを自動で管理してくれるパッケージマネージャ。

#nodeをインストールするときにnpmも一緒にインストールされている可能性あり。
$ brew install npm

#パスを通すために.bash__profileや.zshenvに以下を記述
export NODE_PATH="/usr/local/lib/node_modules:$PATH"

#npmがインストールされたかの確認
$ npm -v

#npmのヘルプを見る
$ npm help npm

CoffeeScriptのインストール

CoffeScriptはnpm経由でインストールする。

$ npm install -g coffee-script

#CoffeeScriptがインストールされたかの確認
$ coffee -v

※ちなみにnpm installは２つのモードがあり、globalモードとlocalモードが存在する。
* globalモード：/usr/local/lib/node_modules/以下にパッケージが置かれ、共通で使用できる。
* localモード：./node_modules/以下にパッケージが置かれ、カレントディレクトリ以下で使用できる。デフォルトはこちらのモードが適用される。

-gオプションは-globalと同一で、globalモードで実行するために必要なオプションとなっている。

以上でcoffeescriptが使える環境が作れた。めっちゃ簡単！

2014-07-21

FuelPHPの導入（一部ハマリ中）

PHP 環境構築 FuelPHP

前回行った環境の構築の後にPHPのWAF（Web Application Framework）であるFuelPHPの導入をした時のメモ。
FuelPHPの紹介は他に譲るとして、今回はその導入に焦点を当てて書く。
対象はMacOSなのでご注意を。（Linuxについてはある程度共通しているはずだが、試していないので守備範囲外ということで。）

参考記事

FuelPHP 1.7 Documentation

oilコマンドのインストール

FuelPHPのパッケージコマンドであるoilコマンドをまずインストールする。
（oilコマンドの詳細はこちら）

$ curl get.fuelphp.com/oil | sh

これでoilコマンドが使用可能な状態となる。

FuelPHPによる新規プロジェクトの作成

プロジェクトを置きたい任意のディレクトリで以下を実行。

$ oil create [プロジェクト名]

$ cd /path/to/[プロジェクト名]
$ oil refine install
$ php composer.phar update

nginxの設定

ブラウザから見られるようにするためにnginxの設定を変更する。

http {
    ...

    server {
        listen 80;

        # 前回の記事
        root /path/to/your_document_root/; # ドキュメントルート
        server_name localhost;
        charset utf-8;
        index index.php index.html index.htm; # /で終わった時にアクセスするファイル

        # 前回の記事
        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }

        # FuelPHP用(「fuelphp_sample」というプロジェクト名の場合)
        location /fuelphp_sample/public/ {
            try_files $uri /fuelphp_sample/public/index.php?$uri&$args;
        }
   
        location /fuelphp_sample/public/\favicon.ico {
            empty_gif;
            access_log off;
            log_not_found off;
        }

        location ~ /fuelphp_sample/public/assets/(.+) {
            autoindex on;
            alias /path/to/your_document_root/fuelphp_sample/public/assets/$1;
        }

        location ~ /fuelphp_sample/public/\.php$ {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }
}

nginxを再起動した後にブラウザでhttp://localhost/fuelphp_sample/public/にアクセス。
本来なら以下のような画面が表示されるはずだが、なぜかその下の画面に…。

↓正常な画面（cssが付いている）

f:id:shirakiya:20140721174527p:plain

↓今回の画面（cssが無い）

f:id:shirakiya:20140721174614p:plain

読み込まれるはずのcssにアクセスすると403が返ってきていたので、エラーログを確認すると見事に「(13: Permission denied)」という表示が。。
そこで、publicディレクトリ直下にあるassetsディレクトリの権限を調べてみると「drwxr-xr-x」だった。さらにそこでファビコンも同じ症状でエラーが出ているっぽい。ちゃんと権限与えてるのに権限で弾かれるのは、え、っていう感じで現在ハマり中。

なのでnginxの設定は今は参考にしないでください。

2014-07-20

Homebrewでnginx + php-fpmのphp実行環境構築

PHP 環境構築

初めましてのブログ投稿。
「いいインプットしてるんだから、アウトプットしろ（ブログ書け）！」と言われて、物は試し、勉強した内容をブログに書くことにした。ここから何かに気付けるかもしれないし、本当にインプットとアウトプットのいいサイクルが出来上がるかもしれないのでやってみようの根性。

本題

MacにPHPの実行環境を作ることにした。
MacならデフォルトでPHPとApacheが入っているので、特別用意する必要は無いが、勉強がてらnginxとphp-fpmで構成されるPHPの実行環境を（めっちゃ調べながら）作ってみた。
（ちなみにこの記事ではHomebrewの導入については話しない。ただHomebrewを下にスクロールしたら書いてあるコマンドを叩くだけでOKだったはず。）

参考記事

基本的に以下の記事を参考にした。
Mac OSX: homebrew を使って nginx と php-fpm をインストールする

nginxのインストール

まずHomebrewでnginxをインストールする。
（Homebrewのnginxはオプションが最小限だのなんだのっていうのでnginx-fullを入れようっていう動きもあるけど、この違いについてはよくわかりません。）

$ brew install nginx

設定ファイルは /usr/local/etc/nginx/nginx.conf にある。

自動起動設定はMac使いならお馴染みのこれ。

$ ln -sfv /usr/local/opt/nginx/*.plist ~/Library/LaunchAgents
$ launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.nginx.plist

※デフォルトだとnginxも80番をlistenしていて、かつapacheを起動しているならばapacheが80番をlistenしている可能性があるので注意。その場合apacheを停止するか、nginxを8080等をlistenするように変更する必要がある。

ちなみにnginxの起動、停止、再起動は以下のコマンド

$ sudo nginx     # 起動
$ sudo nginx -s stop     # 停止
$ sudo nginx -s reload     # 再起動

php55のインストール

会社でもnginx + php-fpmという組み合わせでPHPを処理させているので、同じくphp-fpmを導入することにした。
php-fpmはapacheのmod_phpモジュールのようなもので、Nginxには直接php処理モジュールを組み込むことはできないので、Nginxと組み合わせてPHPを動かすにはこれが必要。

PHPをhomebrew-phpからインストールするためにtapコマンドでfomuraを追加

$ brew tap homebrew/dupes
$ brew tap homebrew/versions
$ brew tap homebrew/homebrew-php

おまちかねphp-fpmとPHP55をインストール

$ brew install php55 —with-fpm

.bash_profileや.zshenvに以下を書いてパスを通す

PATH=“/usr/local/bin:$PATH”     # for PHP55
PATH=“/usr/local/sbin:$PATH”     # for php-fpm

PHP55の自動起動設定

$ cp /usr/local/Cellar/php55/5.5.11/homebrew.mxcl.php55.plist ~/Library/LaunchAgents/
$ launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.php55.plist

このPHP55の準備ができればコマンドラインからはPHP55でphp スクリプトを実行することができる。

nginxの設定

phpファイルがブラウザ上で動作するようにnginxを設定する。
上記のnginx.confに以下を記述する。

http {
    ...
    
    server {
        listen 80;
   
        root /path/to/your_document_root; # 任意のパス
        server_name localhost;
        charset utf-8;
        index index.php index.html index.htm; # '~localhost/'で終わった時にアクセスするファイル
   
        location ~ \.php$ {
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }
}

これを記述した後nginxを再起動。

$ sudo nginx -s reload

例えば設定したドキュメントルート以下に以下のファイルを置いてブラウザでhttp://localhost/phpinfo.phpにアクセスしてみる。

/path/to/your_document_root/phpinfo.php

<?php
phpinfo();

このような画面が表示されたらOK！

f:id:shirakiya:20140720203920p:plain

次回はPHPのWAFであるFuelPHPを動かしてみようと思う。

Be an Engineer.

社会人からWEBエンジニアになった人間の備忘録的勉強記録

FuelPHPでCoffeeScriptのコンパイルにcoffeescript-phpを使う

はじめに

coffeescript-phpのインストール

使い方

余談

Vagrant+tmux環境下でvimのヤンクデータを共有する

はじめに

viminfoを使う

FuelPHPの導入（完全版）

参考記事

oilコマンドのインストール

FuelPHPによる新規プロジェクトの作成

nginxの設定

PHPのオブジェクト指向プログラミング（クラスの作り方）

クラスとは

アクセス修飾子まとめ

クラスを使う

HomebrewでCoffeeScriptの実行環境を作った

参考記事

node.jsのインストール

npmのインストール

CoffeeScriptのインストール

FuelPHPの導入（一部ハマリ中）

参考記事

oilコマンドのインストール

FuelPHPによる新規プロジェクトの作成

nginxの設定

Homebrewでnginx + php-fpmのphp実行環境構築

本題

参考記事

nginxのインストール

php55のインストール

nginxの設定