ブログ｜STEP UP BLOG

2024/05/21
Category :

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2015/06/18
Category : gulp

GulpでSass

少し間があいてしました。
前回はGulpでjavascript周りの処理を行いましたが、今回はCSSです。
Sassを使います。

前回
GulpでSass｜gulp｜STEP UP BLOG

$ cd project_dir
$ mkdir -p src/scss
$ mkdir -p public/assets/css
$ cat src/css/style.scss 
$bgcolor: #efefef;

body {
    background: $bgcolor;
}

$ cat gulpfile.js 
'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var es = require('event-stream');
var sass = require('gulp-sass');

gulp.task('script', function(callback) {
    var sc = gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/assets/js'));
    var br = browserify({
            debug: true,
            entries: ['public/assets/js/all.js']
        }).bundle()
        .pipe(source('all.js'))
        .pipe(gulp.dest('public/assets/js'));
    return es.merge(sc, br);
});

gulp.task('style', function(callback) {
    return gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('public/assets/css'));
});

gulp.task('hoge', function(callback) {
    console.log('hoge');
});

gulp.task('default', ['script', 'style']);

$ npm install --save-dev gulp-sass
$ gulp
$ cat public/assets/css/style.css
body {
  background: #efefef; }

出来ました！

jsに比して簡単すぎる。。
ということでもう少し手を加えていきます。
pleeeaseでベンダープレフィックスや圧縮も試してみましょう。
http://pleeease.io/

$ npm install --save-dev gulp-pleeease

$ cat src/scss/style.scss
$bgcolor: #efefef;

body {
    background: $bgcolor;
}

.box {
    display: flex;
}

$ cat gulpfile.js
...
var pleeease = require('gulp-pleeease');

...

gulp.task('style', function(callback) {
    return gulp.src(['src/scss/*.scss'])
        .pipe(sass())
        .pipe(pleeease())
        .pipe(gulp.dest('public/assets/css'));
});

…

pleeease追加前

$ cat public/assets/css/style.css
body {
  background: #efefef; }

.box {
  display: flex; }

pleeease追加後

$ cat public/assets/css/style.css
body{background:#efefef}.box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}

こんな感じです。

参考URL
http://isee-web.net/?p=593

PR

2015/05/15
Category : gulp

Gulp入門

GulpというのがGruntに代わって流行っているそうです(結構前から)。所謂フロントエンドのタスクランナー。コンパイルしたり圧縮したり、記述次第でいろいろなことができます。
http://gulpjs.com/
といわけで手を動かさないと覚えられない私はとりあえず動かしてみます。
nodeとnpmはインストールされていること前提で進めます。
最初にディレクトリ作って、

$ cd project_dir
$ mkdir -p src/js
$ mkdir -p public/assets/js

gulpのインストール。

$ npm init
$ npm install --save-dev gulp
$ echo 'export PATH=$PATH:/hoge/www/project_dir/node_modules/.bin' >> ~/.bashrc
$ source ~/.bashrc

これで、

$ gulp -v
[22:00:00] CLI version 3.8.11
[22:00:00] Local version 3.8.11

OKですね。

まずは、gulpがちゃんと動くか確かめます。

$ cat gulpfile.js
'use strict';

var gulp = require('gulp');

gulp.task('hoge', function (callback) {
    console.log('hoge');
});

gulp.task('default', ['hoge']);

これで、

$ gulp
[22:05:00] Using gulpfile ~/www/project_dir/gulpfile.js
[22:05:00] Starting 'hoge'...
hoge

大丈夫ですね！

次に、src/js以下に作ったjsファイルを公開ディレクトリとして作ったpublic/assets/jsに出力するgulpfile.jsを作ってみます。

$ cat gulpfile.js
'use strict';

var gulp = require('gulp');

gulp.task('script', function (callback) {
    return gulp.src(['src/js/*.js'])
        .pipe(gulp.dest('public/assets/js'));
});

gulp.task('hoge', function (callback) {
    console.log('hoge');
});

gulp.task('default', ['script']);

$ cat src/js/a.js
(function(global) {
    'use strict';

    console.log('happy!');
})((this || 0).self || global);

これで、

$ gulp
$ ls public/assets/js/
.  ..  a.js

出力されています！

続いて複数のファイルをまとめてみましょう。

$ cat src/js/b.js 
(function(global) {
    'use strict';

    console.log('lucky!');
})((this || 0).self || global);

$ cat gulpfile.js 
'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');

gulp.task('script', function (callback) {
    return gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('public/assets/js'));
});

gulp.task('hoge', function (callback) {
    console.log('hoge');
});

gulp.task('default', ['script']);

連結用にgulp-concatをインストールします。

$ npm install --save-dev gulp-concat
$ gulp
$ ls public/assets/js/
.  ..  a.js  all.js

出来ました！

$ node public/assets/js/all.js
happy!
lucky!

d(^^)b

この調子で圧縮もしちゃいましょう。

$ cat gulpfile.js 
'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('script', function (callback) {
    return gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/assets/js'));
});

gulp.task('hoge', function (callback) {
    console.log('hoge');
});

gulp.task('default', ['script']);

$ npm install --save-dev gulp-uglify
$ gulp
$ cat public/assets/js/all.js 
!function(l){"use strict";console.log("happy!")}((this||0).self||global),function(l){"use strict";console.log("lucky!")}((this||0).self||global);

これくらいの小ささだとあまり圧縮の効果もありませんが。。

ここまできたらついでにjqueryも一緒にまとめられるのではと勢い込んできますよね。
やってみましょう。
そのためにまずbowerをインストールします。bowerはフロントエンドのパッケージマネージャです。
そしてブラウザ側スクリプトでrequireを使えるようにbrowserifyもインストールします。

$ npm install --save-dev bower
$ npm install --save-dev browserify
$ npm install --save-dev debowerify
$ npm install --save-dev vinyl-source-stream
$ npm install --save-dev event-stream
$ bower init
$ bower install --save jquery

package.jsonへ以下の記述を追加します。

"browserify": {
  "transform": [
    "debowerify"
  ]
}

$ cat src/js/a.js 
(function(global) {
    'use strict';

    var $ = require('jquery');

    $('#btn').click(function() {
        alert('happy!');
    });
})((this || 0).self || global);

$ cat gulpfile.js 
'use strict';

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var es = require('event-stream');

gulp.task('script', function (callback) {
    var sc = gulp.src(['src/js/*.js'])
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/assets/js'));
    var br = browserify({
            debug: true,
            entries: ['public/assets/js/all.js']
        }).bundle()
        .pipe(source('all.js'))
        .pipe(gulp.dest('public/assets/js'));
    return es.merge(sc, br);
});

gulp.task('hoge', function (callback) {
    console.log('hoge');
});

gulp.task('default', ['script']);

ちょっと作法に則ってないかもしれません。もう少しいい書き方があるはず。。
流れとしては、まとめたall.jsにbrowserifyをかけてます。source()が何故必要なのかはよくわかってません。
これでjquery込みのall.jsが作れます。

そもそも今更jqueryはどうなのよ、とか、jqueryぐらい別読み込みでいいよね、という意見もあると思いますが、そこはとりあえずbrowserifyを使ってみたかったということで。。
長くなってきたので今回はここまで！

参考URL
http://qiita.com/cognitom/items/4c63969b5085c90639d4
http://qiita.com/seanchas_t/items/96fbb63e5fe36f94a42e
http://akabeko.me/blog/2014/12/browserify/
http://takahashifumiki.com/web/programing/3512/

2015/04/27
Category : Laravel4

Laravelでの画像処理はIntervention Imageで決まり！

と断言したくなるほど、このライブラリは便利です。
簡単にやりたい画像処理ができます。
http://image.intervention.io/

以下が導入方法。特別なことはありません。

composer.json

"require": {
    …
    "intervention/image": "2.*"
},

app/config/app.php

providers = array(
    …
    'Intervention\Image\ImageServiceProvider',
),

aliases = array(
    …
    'Image'           => 'Intervention\Image\Facades\Image',
),

これで、Laravelのどこでも

$img = Image::make('foo.jpg');
$img->resize(320, 240)->save('bar.jpg');

のように書けます。

Image::make()で画像読込ですが、canvas()でまっさらな画像を作ることもできます。

$img = Image::make('foo.jpg');
$canvas = Image::canvas(600, 450, '#fff');
$canvas->insert($img, 'center')->save($path);

resize()では、横または縦を固定にしてアスペクト比を保ったままリサイズもできます。

$img->resize(null, 200, function ($constraint) {
    $constraint->aspectRatio();
});

もちろん透かしだってできます。

$img = Image::make('foo.jpg')->insert('watermark.png');

公式サイトを見るとわかるように、Webアプリケーションでよく使われる画像処理はほぼ網羅しています。
画像処理が必要な際は是非使ってみてはいかがでしょうか。

2015/03/11
Category : Laravel4

LaravelでExcel出力

PHPでもExcel出力したい場合があります。くやしいけど。
PHPでExcelを取り扱うライブラリでポピュラーなのがPHPExcelです。

https://phpexcel.codeplex.com/
https://github.com/PHPOffice/PHPExcel

ありがたいことにPHPExcelもcomposerでインストールできます。
composer.jsonに、

"phpoffice/phpexcel": "1.8.*"

を追加してcomposer updateしましょう。
vendor以下にPHPExcelがインストールされているはずです。
composerで入れるとautoload.phpのおかげでrequire_onceなどを書かなくてよいのでとても便利です。
あとは、

$excel = new PHPExcel();

などして、好きなように作ればいいと思います！

2015/02/24
Category : Laravel4

Laravel4のマイグレーション

LaravelのDBはマイグレーションで管理されています。
ここもRailsそのままですね。
まずはテーブルを作りたい場合ですが、

$ php artisan migrate:make create_hoge_table --create=hoge

これで/app/databases/migrations以下にテーブル作成のphpが作られます。
それを編集して、

$ php artisan migrate

これでテーブルが作成されます。
初期データが必要なら、
app/database/seeds以下に初期データ作成クラスを作りましょう。
初期データは、

$ php artisan db:seed --class=HogeTableSeeder

で登録できます。
注意点として、db:seedでは既存のテーブルを使うので、idが1から振られるとは限らない点です。
開発でいろいろいじくって全部まっさら、初期データのみにしたい場合の魔法の言葉は、

$ php artisan migrate:refresh --seed

となります。
マイグレーションはRailsの作法でまだまだ慣れない部分も多くていろいろ苦労しています。。
とりあえず、特定のテーブルだけ新しく作り直すにはどうしたらよいのだろうか。。