終電23時15分って早くね?

都内のIT企業で働くカラオケ大好きエンジニアの雑記

Laravel5.1でNo supported encrypter found. The cipher and / or key length are invalid.のエラーになる件

解決方法

Laravelのコードがあるディレクトリにてコンソールから、

php artisan key:generate

を実行。
で解決しました。

当方の環境としては、

でしたが、
Windowsのコンソールからでも、
vagrant sshしてサーバにログインしてからでも、
どちらでもうまくいくようでした。

原因

いろいろと設定して、
いざトップページを表示しようとすると、

f:id:blue_goheimochi:20151004231142j:plain

RuntimeException in EncryptionServiceProvider.php line 29:
No supported encrypter found. The cipher and / or key length are invalid.

のエラーになってしまい、
LaravelのWelcomeページが表示されませんでした。。

原因としては、.envファイルで指定されるはずのAPP_KEYが指定されていなかったためです。


ex).evnファイルの一部

APP_ENV=local
APP_DEBUG=true
APP_KEY=SomeRandomString


composer経由でLaravelをインストールした場合には、

"post-root-package-install": [
    "php -r \"copy('.env.example', '.env');\""
],
"post-create-project-cmd": [
    "php artisan key:generate"
]

がcomposer.jsonで指定されており、

  • env.exampleを.envとしてコピー
  • php artisan key:generateの実行

を自動で行ってくれるので大丈夫ですが、
コードをzipで取得した際などにおいては、
上記2点が実施されていない場合がありますので手動で実行する必要があるでしょう。

Laravel Meetup Tokyo Vol.6 に行ってきた!

だいぶ遅くなってしまいましたが、Laravel Meepup Tokyo Vol.6に行ってまいりました。
で、LTの機会をいただいたので、「LaravelアプリケーションをSeleniumでテストしてみた」というのを発表してみました。

f:id:blue_goheimochi:20150710013154p:plain

が、結論から言うとLaravel関係なくSeleniumの話やんけーって感じの内容だったのでどうなのかな・・・と思ったのですが、
ちょっとですがTwitterで反応していただりとかしてよかったです!笑
一応スライドとサンプルを公開しておきます・・・

実際、当日にはサンプルが間に合わずデモができなかったのですが、
サンプルをあげましたのでそちらで確認してみてもらえばなーと思います。

スライドはこちら。


サンプルのコードはこちら。github.com

サンプルの内容

●動かし方

コードをGitHubから持ってきてもらい、

$ vagrant up

$ vagrant ssh

$ cd /vagrant/src/

$ vendor/bin/phpunit

でテスト実行の確認までできます。

f:id:blue_goheimochi:20150709152823p:plain

テスト中に取得されるスクリーンショットが、/vagrant/src/tests/screenshotのディレクトリの中にできていると思います。

●何をやっているの?

PHPUnitからSelenium Serverを通してFirefoxを起動しブラウザテストをしています。

Selenium Serverのインストール&実行やFirefoxのインストールなど、
もろもろはChefのレシピを書いていてそっちがやってくれます。

ぶっちゃけ大変なのはその辺のサーバー環境の設定で、
それさえできていればSelenium Serverを用いたテストは割と簡単です。

●必要な設定は?

-サーバーの設定
サンプルではCentOSを使用しておりますが、
サーバー用途のだと当然ディスプレイとかの設定がないので、
仮想のディスプレイをXvfbを利用してエミュレートする必要があったりで、
以下のインストールが必須です。

Selenium Server
・Xvfb
Firefox

正直サンプルを作るにあたりこの部分が一番時間かかりました。笑
実際の設定内容についてはChefのレシピを見ていただければと・・・

PHPUnit周りの設定

  • composer.jsonの修正
"require-dev": {
    "phpunit/phpunit": "~4.0",
    "phpspec/phpspec": "~2.1",
    "phpunit/phpunit-selenium": ">=1.3.1"
}

require-devの部分に"phpunit/phpunit-selenium": ">=1.3.1"を追記しています。
phpunitからSelenium WebDriverのAPIを使うために必要です。

  • テストケースの作成

PHPUnit_Extensions_Selenium2TestCaseをextendしたテストケースを作成します。

<?php
class WebTest extends PHPUnit_Extensions_Selenium2TestCase
{
    protected function setUp()
    {
        $this->setBrowser('firefox');
        $this->setBrowserUrl('http://www.example.com/');
    }

    public function testTitle()
    {
        $this->url('http://www.example.com/');
        $this->assertEquals('Example WWW Page', $this->title());
    }

}
?>

https://phpunit.de/manual/current/ja/selenium.html#selenium.selenium2testcase.examples.WebTest.php

上記ページの引用ですがもっとも簡単な感じだとこんな風です。
http://www.example.com/を開いて、タイトルタグが「Example WWW Page」であるかをみるテストですね。

$this->setBrowserUrl('http://www.example.com/');でURLを設定しているので、
$this->url('http://www.example.com/');は$this->url('/');でも大丈夫です。

●後はPHPUnitを実行するだけ

後はphpunitを実行するだけです。

サーバーの設定さえしっかりできてれば、結構簡単にやれちゃいます。
そしてやっぱりLaravelである必要はなくて(笑)、
↑のテストケースでも$this->setBrowserUrl('http://www.example.com/');のURLを変えれば、
実際はどんなサイトでもテストできちゃいます。
(※他の人のサイトにはやらな・・(ry)

なので、既存のWebアプリケーションあるけどUnitテストそろえるのつらいな・・・
とかそういう状況であればSeleniumを使ったE2Eのテストからはじめてみるのもいいのかなぁ・・・
とか思っていて、実際にそういう方向から個人的には攻めたりもしています。

●Laravel特有の設定

とはいえLaravelでやった感を出したかったので、いくつかLaravel用に設定した部分を書きます。

-ArtisanコマンドとかをPHPUnit_Extensions_Selenium2TestCaseをextendしたテストケースでも使う。
LaravelでUnitテストを書くとするとtestディレクトリの中のTestCase.phpをextendして使うかと思います。
そうすることで、Artisanコマンドなどが使用できるようになるかと思うのですが、
PHPUnit_Extensions_Selenium2TestCaseを直接extendしてしまうともちろん使えないので、
Illuminate\Foundation\Testing\TestCaseと同じような構成をとるために、
src/tests/TestCaseSelenium.phpにTestCaseSeleniumクラスを作成して、
TestCaseクラスを使うときと同様にLaravelの機能が使えるようにしています。

この辺はもうちょっといいやりかたがある気がするので誰か教えてください・・・

-testingの環境変数の設定

テスト用の環境変数としてtestingを利用しています。
sqliteのファイルの切り替えなどを行いたいためですが、
SeleniumのテストでFirefoxからアクセスする場合当然ですが、
phpunit.xmlに設定しているenvは適応されません。

ですので、

というような感じで、VirtualHostに対する環境変数Apatchで設定しています。

SetEnv APP_ENV testing
SetEnv SQLITE_FILE_NAME testing.sqlite

ドメインを切るのってなんかスマートじゃない気はしますが・・・

というのがLaravel特有の設定かなーと思うところでした。

以上でーす。


ちなみに・・・

2015年7月18日(土)に「Laravel Meetup Tokyo Vol.7」が開催されるようです。
現時点でちょっと空きがあるみたいですので、
興味ある方はぜひ行ってみてはどうでしょうか??

laravel.doorkeeper.jp

【書評】「Laravel エキスパート養成読本」の読書感想文

「Laravel エキスパート養成読本」をご献本いただきました!
竹澤さん(@ex_takezawa)ありがとうございます!

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)

拝読させていただいたので、読書感想文をば。

【2015/05/01追記】
※本の内容について、正誤表が技術評論社さんから出ていますので、あわせてご確認ください。
サポートページ:Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!]:|技術評論社

目次

全部で5つのChapterと1つの特別記事がありました。

[Chapter1]Laravelをはじめよう

Laravelがどんな感じで流行ってきたか?というのが分かります。
Hello World!ができるのでまだLaravelさわったことないよー!って人はここから読むといいと思います。

副題にもありますが、「PHPの開発が楽しくなる」の言葉のとおり、
モダンで見通しがよく使いやすいフレームワークで開発速度もあがり、
PHPの開発が楽しくなるなーと使っていて個人的にも感じるところです。

[Chapter2]MVCモデルが基礎から分かる

Webフレームワークって何ぞ?って人はここを読むとよさげです。
とはいえLaravelの機能ベースでMVCを説明してるようなイメージではあるので、
MVCとか興味が沸いてきたら他のフレームワークをさわったりMVCについてググってみたり本を読んだりしてみるとより理解が深まると思います。

[Chapter3]IoCコンテナファサード、サービスプロバイダ、Eloquent

Laravelのコアな部分の説明がしっかり書かれています。
(って自分もまだ完全に理解できてるわけではないのですが・・・)

Laravelに慣れてきたあたりで読むとより理解が深まったり、
新しい発見があると思います。(バルクインサートできるとか知らなかった・・笑

Laravelを扱ううえでの基礎固めという意味でも、
すでに使っている方も読んでおいて損はない内容だと思います。

[Chapter4]Laravel5の新機能を紹介

ご献本くださった竹澤さんのパート。

本の中では全体的にLaravel4.2系が使われていますが、
ここでは最新バージョンのLaravel5の新機能などが紹介されています。

だいぶ内容が濃いーのでおなかいっぱいになります 笑
自分自身ももう何度か読んで腹に落としたいなぁ・・・と。。

Laravel5を使ってもう1歩進んだ開発をしたいぜ!っという、
中~上級者向けの記事かなぁと思います。

[特別記事]PHPフレームワーク最新事情

SymfonyCakePHPZend Framework、Yiiが紹介されています。
他にも取り上げることができなかった・・・ということで、
CodeIgniter、FuelPHP、Phalconなどの名前もあがっています。

Laravelは開発スピードをあげられるフレームワークだなーという風に
個人的には思っていて使いやすいなぁーと感じていますが、
CakePHPなんかは日本語の情報が充実してて利用者も多かったり、
Zend Frameworkは独立性が強い設計になってたりと、
それぞれ特徴や長所・短所があるかと思うので、
他のも触ってみて自分にあったフレームワークを探してみるのもいいかもしれません。

[Chapter5]実践!REST APIアプリケーション

ホントに実践的な内容になっていて、
サンプルアプリケーションの仕様から順々と、
ルーティング、コントローラ、サービス・モデル、さらにテストにまで説明が及んでいます。

サンプルアプリケーション自体にVagrantfileも含まれており、
VagrantVirtualBoxがインストールされていれば
vagrant upのコマンド1つですぐに試すこともできるのも親切!

どんな風に実践すればいいかなーと思っていたり、現状の方法と照らし合わせてみたりするとより理解が深まるのではないでしょうか。

まとめ

感想文を書いていましたら日が回ってしまいましたが・・(笑
4月21日(火)の今日、「Laravelエキスパート養成読本」が販売されるそうです!

初めてLaravelを使う方から割とガシガシ使っている方まで、
Laravelに興味があれば1冊あって間違いなしの本ではないかなと。

日々の新しい情報はTwitterや日本語チャットで情報を追っかけるとよいでしょう!

ご献本いただきました、竹澤さんをはじめとした著者のみなさま、
技術評論社さん、ありがとうございました!

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)

Laravelエキスパート養成読本[モダンな開発を実現するPHPフレームワーク!] (Software Design plus)



もう何周かは読んでちゃんと勉強しないとなぁ・・・
みんなと飲みたいなぁ・・・

いまさらgulpはじめてみました

GulpとかGruntとか「タスクランナー」って聞くとだいぶ敷居がたけえなって感じていた私。
「色々何でもタスクにしてGulpとか使うとめっちゃはかどるよ!!」
って言われても色々何でもって・・・覚えること多そう・・・
ってなってずっと敬遠してたんですがこのたび重い腰をあげて、
ようやっと手をだしてみたのでまとめます。
同じように感じていた人が使ってみてうおーってなってくれるとうれしい。

なるべく分かりやすくgulpがどんな感じのものか手順をまとめたつもりなので、
上から順番に手元で動かしながら試してみてもらえばと。

とりあえずやってみたこと(gulpにどんなタスクを実行させたか)

  • CSSとかJSとかを更新するとブラウザが自動的に更新される。
    CSS・JSを編集して、ブラウザに切り替えて、F5押して・・・っていう作業をしなくてよくなります。
  • CSS・JSファイルを圧縮する。
    ファイル容量が意外に圧縮されるのでページ読み込みが多少早くなると思います。

動作確認環境

$ npm -v
1.4.28

※node.jsがインストールされていない場合は、
公式からダウンロードするか、OSのパッケージ等をご利用ください。
http://nodejs.org/

  • gulp
$ gulp -v
[16:37:33] CLI version 3.8.10

※gulpがインストールされていない場合は、

$ npm install -g gulp

でgulpをインストールしてください。

サンプルソースをダウンロードする

https://github.com/blue-goheimochi/gulp-sample/releases

こちらにサンプルソースを置いておりますので、
ziptar.gzのアーカイブをダウンロードして、デスクトップなどで解凍してください。

必要なパッケージをインストールする

npmを使って必要なパッケージをインストールします。

■package.jsonを作成

{
  "devDependencies": {
    "gulp": "^3.8.8",
    "gulp-minify-css": "^0.4.6",
    "gulp-uglify": "^1.1.0",
    "browser-sync": "^2.0.0"
  }
}

解凍したディレクトリ直下にpackage.jsonを上記の内容で作成してください。

【参考】
Add package.json for install dependencies · e13af57 · blue-goheimochi/gulp-sample · GitHub

■パッケージのインストール

$ npm install

解凍したディレクトリに移動してnpm installコマンドを実行してください。
node_modulesディレクトリが作成されてその中にパッケージがインストールされます。

gulpfile.jsを作成しgulpを実行してみる。

■gulpfile.jsを作成

  • gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('default', function(){
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

解凍したディレクトリ直下にgulpfile.jsを上記の内容で作成してください。

【参考】
Add gulpfile.js for browser start-up · 1634aba · blue-goheimochi/gulp-sample · GitHub

■gulpを実行

$ gulp

解凍したディレクトリにカレントディレクトリを移動してgulpコマンドを実行してください。

自動的にブラウザが開いたでしょうか!?
ブラウザが開けば、gulpの実行は成功です。

「ctrl」+「c」でgulpの実行を停止できます。

gulpコマンドとタスクについて

$ gulp

gulpコマンドでgulpを実行すると、defaultのタスクが実行されます。
サンプルで言うと、

gulp.task('default', function(){
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

ここの部分が実行されます。
サンプルではこの部分でブラウザを起動するようになっています。

また別のタスクを定義することもできます。
ブラウザを起動するプログラム部分をbrowser-syncというタスクに定義し、
defaultタスクから呼ぶように修正します。

  • gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');

// browser-syncタスクの追加
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

// defaultタスクからbrowser-syncタスクを呼び出すように変更
gulp.task('default', ['browser-sync']);

このようにするとdefaultタスク実行時にbrowser-syncタスクが実行されるようになります。

■gulpを実行

実際にgulpコマンドを実行してみましょう。

$ gulp

先ほどと同様にブラウザが開かれると思います。

【参考】
Change default task to browser-sync task · b3b274a · blue-goheimochi/gulp-sample · GitHub

public_html/css/app.cssが変更されたらブラウザが更新されるようにする

ファイルの変更を監視するためにはgulp.watch()を使います。
gulpfile.jsを以下のように変更します。

  • gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function(){
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

gulp.task('default', ['browser-sync'], function(){
    // gulp.watch()を追加。
    gulp.watch(['./public_html/css/app.css'], function(){
        browserSync.reload();
    });  
});

この追加部分を補足すると、

gulp.task('default', ['defaultタスク実行前に実行するタスク'], function(){
    gulp.watch(['監視対象とするファイル'], function(){
        browserSync.reload(); // 監視対象のファイルが変更されたときに実行される処理
    });
});

という形になります。

サンプルソースの流れだと

  1. gulpコマンドを実行する
  2. defaultタスクが呼び出される
  3. browser-syncタスクがまず実行される
  4. defaultタスク内のgulp.watch()が実行される
  5. public_html/css/app.cssが変更されるとbrowserSync.reload();が実行される

という流れで実行されていきます。

■public_html/css/app.cssを変更する

public_html/css/app.cssのどこかを変更してみましょう。
たとえば、

body {
    color: #363947;
    font-size: 15px;
    background: #FF0000;
}

bodyにbackgroundを設定して保存してみます。

うまくいけば、自動的に既に起動していたブラウザが更新され、
背景が赤色に変わっていると思います!

その他の箇所でもpublic_html/css/app.cssが変更されると、
ブラウザが自動的に更新されるはずなので色々変更してみましょう。

【参考】
Modified gulpfile.js for app.css watching · 23568dc · blue-goheimochi/gulp-sample · GitHub

public_html/js/app.jsも監視対象に設定する

CSSファイルに続いてJSファイルも監視対象に設定してみます。
public_html/js/app.jsが監視対象になるように以下のように変更します。

  • gulpfile.js
var gulp = require('gulp');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function(){
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

gulp.task('default', ['browser-sync'], function(){
    gulp.watch([
        './public_html/css/*.css',
        './public_html/js/*.js' // 監視対象にJSファイルを追加
    ], function(){
        browserSync.reload();
    });
});

上記のようにgulp.watch()は監視対象とするファイルを複数指定することができます。
またお気付きになったかもしれませんが、
ファイルの指定には「*」(ワイルドカード)も指定できるので、
このように指定を入れておくことで、別のcss、jsが追加された場合でも、
追加されたファイルが監視対象になってくれます。

■public_html/js/app.jsを変更する

public_html/js/app.jsを変更してみましょう。

function btnClick() {
  alert('Bye!');
}

alert();のメッセージを「Hello!」から「Bye!」に変えてみました。
デザインには影響はないと思うので変化はなさそうですが、
「Click Me!」のボタンを押すと実際に「Bye!」とアラートが出ると思います。

【参考】
Modified gulpfile.js for app.js watching · 731e6df · blue-goheimochi/gulp-sample · GitHub

CSSを圧縮する

CSSをgulpのタスクで圧縮することができます。

public_html/css/app.cssを圧縮すると、
Modified gulpfile.js for minify app.css · 97286b7 · blue-goheimochi/gulp-sample · GitHub
このような感じでCSSの機能を保ったまま圧縮されます。
(「Diff suppressed. Click to show.」をクリックして確認してみてください。)

圧縮すると可読性は下がってしまうので、
修正自体は圧縮されていないCSSに手を加えて、
その後圧縮するという流れにするために、
resource/css/app.cssに圧縮前のCSSを配置し、
それを圧縮してpublic_html/css/app.cssに書き出す。
という方法でやります。

■resource/css/app.cssを作成

public_htmlと同じ位置にresourceディレクトリを作成し、その中にcssディレクトリを作成。
そしてpublic_html/css/app.cssresource/css/app.cssに配置するようにコピーします。

■gulpfile.jsを修正

gulpfile.jsを修正します。

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css'); // 追記
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

// minify-cssのタスクを追加
gulp.task('minify-css', function () {
    gulp.src(['./resource/css/app.css'])
        .pipe(minifyCSS())
        .pipe(gulp.dest('./public_html/css')
    );
});

gulp.task('default', ['browser-sync','minify-css'], function(){ // minify-cssタスクがdefaultタスクで実行されるように追加
    gulp.watch([
        './public_html/css/*.css',
        './public_html/js/*.js'
    ], function(){
        browserSync.reload();
    });
});

修正箇所は3点で、

  • var minifyCSS = require('gulp-minify-css');を追記。
  • minify-cssのタスクを追加
  • minify-cssタスクがdefaultタスクで実行されるように追加

です。

■gulpを実行

$ gulp

今まで通りブラウザが起動し見た目には変わりがないと思いますが、
public_html/css/app.cssを確認するとCSSが圧縮されているのが分かると思います。

【参考】
Modified gulpfile.js for minify app.css · 97286b7 · blue-goheimochi/gulp-sample · GitHub

JSを圧縮する

CSSと同様にJSも圧縮してみましょう。

■resource/js/app.jsを作成

resourceディレクトリの中にjsディレクトリを作成。
そしてpublic_html/js/app.jsresource/js/app.jsに配置するようにコピーします。

■gulpfile.jsを修正

gulpfile.jsを修正します。

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify'); // 追記
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

gulp.task('minify-css', function () {
    gulp.src(['./resource/css/app.css'])
        .pipe(minifyCSS())
        .pipe(gulp.dest('./public_html/css')
    );
});

// compressのタスクを追加
gulp.task('compress', function () {
    gulp.src(['./resource/js/app.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public_html/js')
    );
});

gulp.task('default', ['browser-sync','minify-css','compress'], function(){ // compressタスクがdefaultタスクで実行されるように追加
    gulp.watch([
        './public_html/css/*.css',
        './public_html/js/*.js'
    ], function(){
        browserSync.reload();
    });
});

修正箇所は3点で、

  • var uglify = require('gulp-uglify');を追記。
  • compressのタスクを追加
  • compressタスクがdefaultタスクで実行されるように追加

です。

■gulpを実行

$ gulp

ブラウザが起動し、
public_html/js/app.jsを確認するとJSが圧縮されていると思います。
ちょっとサンプルのJSだと圧縮の効果が薄いですがしっかりと圧縮がかかっているのが分かると思います。

【参考】
Modified gulpfile.js for compress app.js · 8fcb7cd · blue-goheimochi/gulp-sample · GitHub

タスクを個別に呼び出す

タスクを個別に呼び出すには、

$ gulp [タスク名]

でコマンドを実行します。

gulpコマンドを実行した場合はdefaultタスクが実行されますが、
gulp.watch()でのファイル監視はgulpコマンドでは動かなくていいといいよ。
という場合などに活用できます。

サンプルでは

$ gulp

が実行された場合はCSS・JSの圧縮のタスクのみが実行され、

$ gulp watch

が実行された場合のみgulp.watch()が実行されファイルの監視をするようにしています。

■gulpfile.jsを修正

gulpfile.jsを修正します。

var gulp = require('gulp');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./public_html",
            port: 8080
        }
    });
});

// ブラウザをリロードをタスクに切り出し
gulp.task('bs-reload', function() {
    browserSync.reload();
});

gulp.task('minify-css', function () {
    gulp.src(['./resource/css/app.css'])
        .pipe(minifyCSS())
        .pipe(gulp.dest('./public_html/css')
    );
});

gulp.task('compress', function () {
    gulp.src(['./resource/js/app.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public_html/js')
    );
});

// watchのタスクを追加
gulp.task('watch', ['browser-sync'], function () {
    gulp.watch([
        './resource/css/*.css', // resource/css/の中のCSSを監視するように修正
        './resource/js/*.js' // resource/js/の中のJSを監視するように修正
    ], ['minify-css','compress', 'bs-reload']); // 監視対象のファイルに変更がかかると、CSSの圧縮、JSの圧縮、ブラウザのリロードが実行される
});

// defaultタスクではCSS・JSの圧縮のみ実行されるように変更
gulp.task('default', ['minify-css','compress']);

■gulpを実行

$ gulp

CSS・JSの圧縮のみが実行されます。

■gulp watchを実行

$ gulp watch

ブラウザが起動し、ファイル監視が行われます。
resource/css/*.cssresource/js/*.jsが変更されると、
public_html/css/*.csspublic_html/js/*.jsに圧縮されたファイルが作られるとともに、
ブラウザがリロードします。

【参考】
Modified gulpfile.js for devide default task and watch task · cfd9b30 · blue-goheimochi/gulp-sample · GitHub

まとめ

いかがでしたでしょうか?

少し手順は多くなってしまいましたが、

  • CSSとかJSとかを更新するとブラウザが自動的に更新される。
  • CSS・JSファイルを圧縮する。

この2つのタスクをgulpで実行することができました。

他にも、

  • 複数CSSファイルを1つのファイルにまとめて書き出す
  • sass、lessのファイルをコンパイルしてCSSに書き出す

・・・などなど、色々なことができます!

「こんなことタスク化しておきたいな・・・」、「この手作業自動化できないかな・・・」
って思ったら、自分でコマンドを書いても実現できるかもしれないですし、
探してみると既にそれにマッチしたgulpのプラグインも見つかるかもしれません。
gulpのプラグインは下記に色々上がっておりますので、
こちらから探してみても面白いと思います!


results for gulp

以上、gulp食わず嫌いのあなたのお力になれたら幸いです。

【解決済】Windows7でnpm install実行時にエラー

当方Windows7環境なのですが、
npm installを実行するとエラーが出た。

MSBUILD : error MSB3428: Visual C++ コンポーネント "VCBuild.exe" を読み込めませんでした。この問題を解決するには、次のいずれかを行ってください。 1) .NET Framework 2.0 SDK インス
トールする。 2) Microsoft Visual Studio 2005 をインストールする。
3) その他の場所にインストールされている場合、コンポーネントの場所をシステム パスに追加する。 [c:\Users\YourName\Desktop\Path\To\Your\Hubot\node_modules\hubot-xmpp
\node_modules\ltx\node_modules\node-expat\b
uild\binding.sln]

※3)のパスは適当に改変してます。

私はhubot-xmppを利用しようとして、

$ npm install hubot-xmpp --save

のコマンドを打った際にこのエラーが出ました。

今回の解決方法

今回の解決方法としては、
http://go.microsoft.com/?linkid=9816758
からMicrosoft Visual Studio C++ 2012 for Windows Desktop」をインストールしたことで解決した。

その他の解決方法

上記でダメであれば、
https://github.com/TooTallNate/node-gyp#installation
こちらのページの「On Windows」内の「Windows XP/Vista/7: 」か「Windows 7/8: 」の項目のいずれかを試してみるのがよさそうです。

下記の3つが挙げられています。

Microsoft Visual Studio C++ 2010のインストール。

Microsoft Visual Studio C++ 2010 (Express version works well)

http://go.microsoft.com/?linkid=9709949
上記URLからプログラムを直接ダウンロードしてインストール。

Microsoft Windows SDK for Windows 7 and .NET Framework 4 のインストール

For 64-bit builds of node and native modules you will also need the Windows 7 64-bit SDK

Download Microsoft Windows SDK for Windows 7 and .NET Framework 4 from Official Microsoft Download Center
上のURLから、Microsoft Windows SDK for Windows 7 and .NET Framework 4 のインストール。

Windows SDK 7.1 用 Microsoft Visual C++ 2010 Service Pack 1 コンパイラ更新プログラムを適応。

If you get errors that the 64-bit compilers are not installed you may also need the compiler update for the Windows SDK 7.1

Download Microsoft Visual C++ 2010 Service Pack 1 Compiler Update for the Windows SDK 7.1 from Official Microsoft Download Center
上記URLからWindows SDK 7.1 用 Microsoft Visual C++ 2010 Service Pack 1 コンパイラ更新プログラムを適応。


以上。同じようなエラーで困った人の助けになれば・・・

SlackとHubotを連携させてPRIVATE GROUPでも動くようにしてみた

Hubotをhubot-slackで連携させるのは非常に簡単で、

hubot-slack
https://github.com/tinyspeck/hubot-slack

を使えばすぐできるんですが、PRIVATE GROUP上では反応してくれないようで、
なんとかしたい・・ってことで調べてみた結果できましたので
その方法を残しておこうと思います。

結論としては、

hubot-xmpp
https://github.com/markstory/hubot-xmpp

XMPPプロトコルによりHubotとSlackを連携させる感じです。

今回はHubot自体はHerokuにデプロイして動かしています。

※2014年11月21日追記
GitHubにも置いてみた。ツッコミありましたらぜひ!
あわせて見ていただければ。
blue-goheimochi/hubot-slack-xmpp-base · GitHub

事前準備

Hubot用のユーザをSlackで用意しておく。

このユーザがSlack上で反応するので、
アイコンとかユーザ名とかbotにあったものにしくといいかもです。

Hubot用のユーザをPRIVATE GROUPに所属させておく。

Hubot用のユーザを反応してもらいたいPRIVATE GROUPに参加させる必要があるので参加させておきましょう。


Hubotのインストールとボットの作成

$ npm install -g hubot coffee-script
$ hubot --create hubot-xmpp

npmコマンド使えない人は、インストールしてください。


Hubotの動作確認

$ cd hubot-xmpp
$ bin/hubot
Hubot> hubot ping
Hubot> PONG (←自動で応答することを確認)


hubot-xmppのアダプターを追加

$ npm install hubot-xmpp --save


Procfileを編集する

$ vi Procfile
web: bin/hubot -a xmpp -n hubot-xmpp

Procfireに記述する -n [文字列]で指定した文字列(上の例で言うとhubot-xmpp)を監視してHubotが反応してくれます。
※Slack上のユーザ名で反応するわけではないので注意


Heroku appを作成する

$ git init
$ git add .
$ git commit -m "first commit"
$ heroku create yourname-hubot-xmpp

herokuコマンド使えない人は、インストールしてください。


Herokuにデプロイする

$ git push heroku master


Herokuのconfig設定する

※2014年11月20日追記
しばらくするとherokuのインスタンスがアイドル状態になってて、
hubot-slackのときはそんなことなかったのになーと思って調べまして、

$ heroku config:add HEROKU_URL=http://yourname-hubot-xmpp.herokuapp.com

HEROKU_URLの設定をしておくと20分に1回URLにPOSTされて、
アイドル状態にならなくなる。とのコトでした。

参考


Hubot - HerokuにデプロイしたHobotをIdlingさせない方法 - Qiita


HubotとSlackの連携の設定をする

おそらくここが肝です。

SlackのXMPPGatewayを有効にする

https://my.slack.com/admin/settings#permissions

管理者権限を持ったユーザで上記URLにアクセスし、

f:id:blue_goheimochi:20141019003136p:plain

「Gateways」の「expand」で設定項目を開き、
上記の画像のように「Enable XMPP gateway(SSL only)」にチェックを入れ「Save Settings」をする。

Hubot用ユーザの認証情報を取得する

https://my.slack.com/account/gateways

「Getting Started: XMPP」の項目を確認すると、

f:id:blue_goheimochi:20141019003742p:plain

上記画像のように認証情報が表示されていると思います。
ここが、「XMPP is disabled for your team. Ask your team owner to enable it.」と表示されている場合は、
まだXMPPGatewayが有効になってないので、再度管理者権限をもったユーザでXMPPGatewayを有効にしてください。

HerokuにSlackの認証情報を設定

$ heroku config:add HUBOT_XMPP_USERNAME="hubot-xmpp@your-team.xmpp.slack.com"
$ heroku config:add HUBOT_XMPP_PASSWORD="HUBOT_XMPP_PASSWORD"
$ heroku config:add HUBOT_XMPP_ROOMS="test@conference.your-team.xmpp.slack.com"

上記の画像で赤枠で囲った部分をそれぞれ設定します。


PRIVATE GROUPでHubotにpingしてみる

f:id:blue_goheimochi:20141019004010p:plain

ping すると hubot-xmppユーザがPONGを返すようになりました!

「Procfileを編集する」のところにも記述しましたが、

参考

Hubot起動時の -n [名前] の名前に反応するので、その点お気をつけください。

Procfileに

web: bin/hubot -a xmpp -n hoge-hoge

と設定した場合

f:id:blue_goheimochi:20141019004149p:plain

となります。


おわり

という感じで、hubot-slackのアダプターを使うよりは少し複雑ですが、
hubot-xmppのアダプターを使えばプライベートグループでもHubotと連携できますので、
より幅が広がるのではないでしょうか?

参考サイト

Slack を XMPP プロトコルで Hubot と連携する - ja.ngs.io
Home · markstory/hubot-xmpp Wiki · GitHub

ちなみに、xmppと連携しないバージョンはこっち↓
PRIVATE GROUPで使わないのならこっちのが楽ちん。


blue-goheimochi/hubot-slack-base · GitHub

おまけ

「誰か教えてくれるかな・・・」という淡い期待を持ってつぶやいたんですが、
@ex_takezawaさんに「知りたい(ので調べてね)」って言われたので調べさせていただきました 笑

Laravel4のhomesteadでmigrateしようとしたら「SQLSTATE[HY000] [2002] 対象のコンピュータによって拒否されたため、接続できませんでした。」でハマった件

タイトルが長いけどそういうことです。

当方Windows7のLaravel4.2でHomesteadを利用した環境でございます。
Macご利用の方はその辺脳内変換していただければと。。

やろうとしたこと

migrate:makeでマイグレーションを作成し、

$ php artisan migrate:make create_users_table

DBスキーマ等々設定の上、

$ php artisan migrate --env=local

を入力してたらエラーが出ました。

[PDOException]
SQLSTATE[HY000] [2002] 対象のコンピュータによって拒否されたため、接続できませんでした。

【参考画像】

f:id:blue_goheimochi:20140915231233p:plain

これです。

解決方法

上記のmigrateコマンドを見ていただいても分かるかと思いますが、
今回はlocalに対する操作だったのと、
もう1点、Homesteadを利用していたので、
MySQLのポートを参照するためには、33060のポートを参照しないといけませんでした。

■Laravel Homestead
http://laravel.com/docs/homestead#ports

SSH: 2222 -> Forwards To 22
HTTP: 8000 -> Forwards To 80
MySQL: 33060 -> Forwards To 3306
Postgres: 54320 -> Forwards To 5432

という感じで、ローカルからHomesteadに向けて、
ポートフォワードしてくれているわけですな。

ということで、ポートの設定をdatabasae.phpに書くことで解消できました。

対象は、\app\config\local\database.php です。

【変更前】

'mysql' => array(
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'homestead',
    'username'  => 'homestead',
    'password'  => 'secret',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => '',
),

【変更後】

'mysql' => array(
    'driver'    => 'mysql',
    'host'      => 'localhost',
    'database'  => 'homestead',
    'username'  => 'homestead',
    'password'  => 'secret',
    'charset'   => 'utf8',
    'collation' => 'utf8_unicode_ci',
    'prefix'    => '',
    'port'      => '33060',
),

'port' => '33060',
こいつを追加です。

という感じで無事にmigrateの処理が通るようになりましたとさ!

余談

別途、

[PDOException]
could not find driver

というエラーにもはまったんですが、
php.iniでphp_pdo_mysql.dllが有効になっていませんでした・・・