終電23時11分って早くね？

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

2016年の目標と抱負

2016年の目標と抱負

あけましておめでとうございます！
みなさま、今年もよろしくお願いします。

今までやってこなかったですが、今年は目標と抱負的なことを書き残して年末に振り返ってみたいなぁと思います。

2016年のテーマ

昨年、30代に突入しましたが結果だらだらすごしてきてしまった感が否めません。。
ここで改めて初心に戻って様々なことに取り組もう！っという気持ちをこめて、
「原点回帰」
を今年のテーマにしようと思います。

2015年のプチふりかえり

こんなこと言ったらアホみたいですがインプットもアウトプットも少なかったのかな・・・と思っています。特に対外的？に。
会社事ではいろいろとやりましたが、特に個人的なところでの勉強不足が否めない感じがしました。

f:id:blue_goheimochi:20160103160331j:plain

この写真にも象徴されるように、積読がやばい。やばすぎます。笑
いったいいつ買ったんだよ！ってやつもちらほら。
「114,288円」
この本の中でちゃんと読んでないものの金額を定価でまとめるとこの金額です。
定価で買ったものばかりではないので、実際これだけの金額を投下した訳ではないですが、読もうと思って手元にあった本がこれだけ読まれてないのは由々しき事態では・・・。

後は積リンクもひどいです。笑
あとで読みたいな・・・と思っていてストックしてあるリンクたちもたくさん消化したい。

目標

「原点回帰」というテーマからさらに

  • 開発者基礎
  • 英語
  • 健康

の軸で目標を立てました。
ただ1年間の中でもガシガシ変化するようなことな気もするのでつどつど見直していきたいです。

開発者基礎

私、エンジニアとしての基礎というかプログラマーとしての基礎というのか、ITにかかわる人間としての基礎が欠落してる気がしています。笑
昨年はLaravelを触っていろいろな方にお会いして話を聞いたりしている中で、こういう部分が足りないのかなぁ・・ということで、

などの基礎？的なところを固める1年にしたいです。おそらく新人研修とか先輩から学ぶとかして習得すべき部分だったんだろうとは思うのですがそこが抜けています。笑
何かこれやっとけー！とかあったらアドバイスもらいたいですし、勉強会とかでお会いした方にはそういうの聞いてみようと思っています。

何か資格とか取ると自身になるよなぁ・・・と思うのでITとか開発者が取得するような資格をベースに基礎固めとしてもいい気がしているのでお勧めの資格もあれば教えてください。そもそも資格いらねーよ！とかも教えてください。笑

英語

英語力がありません。聞く力も読む力も話す力も。。笑
思えば大学時代に「英語勉強するために海外留学しよう！」という高い志をもっていたくせに4年間何もせず。。。というように英語からはだいぶ逃げてきてたなぁと思います。
特に衝撃を受けたのはRakuten Technology Conference 2015に参加したときですね。
3年前から行く行く詐欺をしていて昨年やっと参加したんですが当たり前に英語で話す方たちを見てとても刺激になりました。
あとはLaravelを触る中で英語のドキュメントを読めるとすごくよいなと感じました。新しい情報とか拾えたり、幅広く情報収集できるとより理解も増えるんじゃないかなぁ・・・と。

ということでTOEIC600点を当面の目標にがんばりたいです。

健康

体重が増えました。
昨年ちょっと走ったことにより少し落ちたんですがもうちょっと落としたいです。
68kgが目標。かつ腹筋を割りたいです。笑
お酒も飲むのも好きなので、健康維持できないと飲むのも出来なくなる日が来るでしょうしちゃんと両立できるようにします。

まとめ

  • 本を読む（積読なるべくしない）
  • ITパスポートの資格を取る
  • コンピュータについて学ぶ
  • ネットワークについて学ぶ
  • オブジェクト指向について学ぶ
  • デザインパターンについて学ぶ
  • テストについて学ぶ
  • 月1回以上勉強会に参加する
  • TOEIC600点
  • 月に1回フットサル
  • 年間420km以上走る（週7kmくらい）
  • 体重を68kgまで落とす。維持する。
  • 腹筋を割る

開発者基礎の部分とかざっくり感満載ですが書かないよりはいいかなぁ・・・と。
新しいこととかへの感度も保つために月に1回以上はちゃんと勉強会にも出よう。
あとは去年、一昨年とちゃんと参加できていないので、今年のPHPカンファレンスはちゃんと参加したい・・・

以上です。
皆様今年も仲良くしてください！＆いろいろ学ばせてください。
よろしくお願いいたします。

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

Laravel PHP

解決方法

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 に行ってきた！

PHP PHPUnit Laravel Selenium Selenium WebDriver

だいぶ遅くなってしまいましたが、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 PHPフレームワーク

「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フレームワーク最新事情

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

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

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

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

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

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

まとめ

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

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

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

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

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

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



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

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

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

こちらにサンプルソースを置いておりますので、
zipかtar.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.cssをresource/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.jsをresource/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/*.css、resource/js/*.jsが変更されると、
public_html/css/*.css、public_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実行時にエラー

npm node Windows

当方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でも動くようにしてみた

Slack Hubot Heroku XMPP

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のXMPPのGatewayを有効にする

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.」と表示されている場合は、
まだXMPPのGatewayが有効になってないので、再度管理者権限をもったユーザでXMPPのGatewayを有効にしてください。

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さんに「知りたい（ので調べてね）」って言われたので調べさせていただきました 笑