カテゴリー別アーカイブ: Node.js

【Gulp】GulpでPNGとJPEGを圧縮する

以前、鹿野さんが書いた下記の記事をベースに作ったものをPNG,JPEGの両方に対応するように作り直してみたメモ。

5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA

全体的な解説は鹿野さんの記事に詳しいので、ここでは変更点のみ記します。

・PNGの圧縮は、imagemin-pngquan を使う方がいいらしいので、こっちを追加。以下のコマンドで該当フォルダにインストール。

npm install --save-dev imagemin-pngquan

・JPEGの圧縮は、imagemin-mozjpeg を使うため追加。以下のコマンドで該当フォルダにインストール。

npm install --save-dev imagemin-mozjpeg

※ちなみに「–save-dev」はinstallしたlibraryの情報を自動でpackage.jsonに書いてくれるオプションです。
npmでnode.jsのpackageを管理する – Qiita

・複数の拡張子を指定するには、{} で囲めばいいらしい(gulpfile.js 11行目)。

・PNG,JPEG共に圧縮設定を追加(gulpfile.js 12-25行目)。

これらを書き足したコードが以下です。

・gulpfile.js(全文)

// gulpプラグインの読みこみ
var gulp = require('gulp');

// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
var pngquant  = require('imagemin-pngquant');
var mozjpeg  = require('imagemin-mozjpeg');

// imagesフォルダのpng,jpg画像を圧縮して、minified_imageフォルダに保存する
gulp.task("imageMinTask", function() {  // 「imageMinTask」という名前のタスクを登録
    gulp.src("images/*.{png,jpg}")    // imagesフォルダ以下のpng,jpg画像を取得
    .pipe(imagemin([
       pngquant({
         quality: '65-80',
         speed: 1,
         floyd:0
       }),
       mozjpeg({
         quality:85,
         progressive: true
       }),
       imagemin.svgo(),
       imagemin.optipng(),
       imagemin.gifsicle()
     ]
        ))   // 画像の圧縮処理
        .pipe(gulp.dest("minified_image/"));    //保存
});

実際に圧縮してみた結果は、こんな感じでした。

・PNG
(圧縮前)2534 × 3490 ピクセル 2.9 MB(2,854,228 バイト)
(圧縮後)2534 × 3490 ピクセル 1.6 MB(1,555,755 バイト)> 約55%に圧縮

・JPEG
(圧縮前)3024 × 4032 ピクセル 6.3 MB(6,335,114 バイト)
(圧縮後)3024 × 4032 ピクセル 1 MB(1,032,033 バイト)> 約16%に圧縮

【参考】
Gulpでpngquantを使ってPNGの減色&軽量化 – Qiita
gulp-imageminのプラグインによる最適化が機能しない際の対処 – Qiita

【node.js】node.js,npm,bower,gulpなどの諸々

最近この辺使うので、とりあえず個人的なリンクのまとめ。

・node.js,npm関連
npm自体のバージョンを上げる – Qiita
nodebrewでnodeとnpmのバージョン管理しよう(Mac編) | Webサプリ
Macにnode.jsを複数バージョン切り替えられるようにインストール – Qiita
nodebrewでnodeとnpmのバージョン管理しよう(Mac編) | Webサプリ
nodebrewで手軽にnode.jsバージョンアップ&バージョン切り替え – Qiita
Cordovaの環境構築 – Qiita

・bower関連
Bower(フロントエンド用パッケージマネージャー)の導入方法と使い方 | 株式会社LIG

・Gulp関連
5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
ざっくりGulp.js入門(Mac向け) – Qiita
Gulpでpngquantを使ってPNGの減色&軽量化 – Qiita
gulp-imageminのプラグインによる最適化が機能しない際の対処 – Qiita

・ターミナル関連
Mac OS X ターミナルで別のボリュームへ移動するには?? – Qiita
必ず使える!Macのターミナルで使う基本UNIXコマンド15選 | NEZU.log

【Node.js】Node.jsを試してみた(基礎編)

【OSX 10.11.2 + Node.js v.4.2.4】
今更ながらですが、Node.js使ってみました。ターミナルやサーバ周りはあんまり得意ではないので、使ってみて「あれ?」となったところをまとめてみます。

参考にしたのはコチラのサイト。
Tech Blog | リクルートライフスタイル開発者ブログ Tag : ‘Node.js’

このサイトの記事を参考にテストしてみて、つまずいた点をメモとして以下に記します。

Node.jsで5行Webサーバを書いてみよう〈Node.jsシリーズ vol.1〉

手順通り公式サイトからパッケージをダウンロードしてインストールします。今回ダウンロードした時点でのバージョンは、v.4.2.4でした。で、インストールが終了すると、この画面が表示されます。

インストール完了時の画面。ここにインストール先のパスが書かれています。
インストール完了時の画面。ここにNode.js,namのインストール先とパスが書かれています。

記事には説明がないのですが、/usr/local/bin があんたのパスだよと書いてあるので、ここにファイルを作っていくことにします。つまり「たった5行でWebサーバーが書ける」にあるサンプルスクリプトは、 webserver.js という名前で、/usr/local/bin/ に保存するということです。

※ルートパスで書かれているので、実際は Macintosh HD/usr/local/bin にあります。それからディレクトリ「usr」は不可視なので、この辺を参考に不可視ファイルを表示するように設定します。

で、「nodeコマンドでサーバーを起動してみましょう」って書いてあるんだけど、ターミナル使ったことないとココでハマります(笑)。

通常、ターミナルを起動すると、こんな感じになってるはずです。

c-gerus-MBP2011:/ c_geru$

※「c_geru」はユーザ名

つまり、起動時点ではユーザ直下にいるので、そのままnodeコマンドを叩くと・・・

c-gerus-MBP2011:/ c_geru$ $ node webserver.js
-bash: $: command not found

とコマンド(webserver.js)ないといわれてしまいます。

c-gerus-MBP2011:/ c_geru$ node /usr/local/bin/webserver.js

とルートパス指定で起動するか、

c-gerus-MBP2011:/ c_geru$ cd /usr/local/bin/
c-gerus-MBP2011:bin c_geru$ node webserver.js

と、ディレクトリを /usr/local/bin/ に切り替えた上で(1行目)、起動することになります。

ちなみにnodeコマンドのあとに1行空行で改行された状態が、サーバが起動している(nodeコマンドが受け付けられた)状態です。

さて、この最初に起動した webserver.js をどうやって終わらせるのか?「Control+C」で停止します(ブレークを送信/中止・キャンセル)。

c-gerus-MBP2011:bin c_geru$ node webserver.js
^C
c-gerus-MBP2011:bin c_geru$

ターミナルが起動前の状態になってカーソル点滅になり、入力可能状態に戻ります。

この辺りのターミナル用コマンドは、いくつも解説サイトがありますが、例えばこの辺を参考に。
[ Mac ] ターミナルコマンドのまとめ ( 多分 Linux でも使えるはず )

この辺りはターミナルに馴れていれば自明のことなんでしょうが、知らないと結構ハマります。

npm実践! モジュールをインストールしQRコードを生成しよう〈Node.jsシリーズ vol.2〉

「npmコマンドでのモジュールインストール」で、qrcode-console モジュールをローカルインストール/グローバルインストールのどちらでインストールするか書いてないので、ちょっとハマりました。

・ローカルインストール
コマンドを実行するパス直下のnode_modulesディレクトリにインストールします。つまりインストール先は「/usr/local/bin/node_modules」になります。

・グローバルインストール
同一環境内にあるすべてのコードからモジュールを使えるようにインストールします。この場合のインストール先は「/usr/local/lib/node_modules」になります。

私はグローバルインストールしたので、qrcode_sample.jsのサンプルコードがそのままでは動きません。グローバルにあるモジュールを参照するので、1行目のrequire文のパスを書き換えます。

var qrcode = require( '../lib/node_modules/qrcode-console' );

この記事の冒頭に「node_modulesというディレクトリ配下におかれたモジュールは、コアモジュールと同じようにパス記号を付けず呼び出すことができます。」と書いてあったので、グローバルインストールすればパスなしで使えるのかと思ったんですが、「ローカルインストールでnode_modulesというディレクトリ配下におかれたモジュールは、コアモジュールと同じようにパス記号を付けず呼び出すことができます。」ということのようです。

チャットを作りながら学ぶSocket.IO〈Node.jsシリーズ vol.4〉

「Socket.IOを使ってWebサーバーを立ち上げると、/socket.io/socket.io.jsというパスに、そのライブラリが自動的に生成されます。」と書かれていますが、起動してみてもファイルができません。バージョン変わって仕様が変更になったのかも?とファイルを探してみると、下記にありました。

・ローカルインストール
/usr/local/bin/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

・グローバルインストール
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

で、このファイルをindex.htmlに指定してみたのですが、socket.io.js自体がエラー(Uncaught SyntaxError: Unexpected token “<“…)で動きません。。。

Socket.IOのダウンロードページをみたらサーバ上の参照パスが書かれていたので、これを使うことにして無事起動しました。

<script src="https://cdn.socket.io/socket.io-1.4.3.js"></script>

この時期では同一PC上で複数ブラウザを立ち上げているのですが、同一ローカルネットワーク上の別端末からアクセスする場合は、index.htmlに書かれているjsの「localhost」の部分を

var ioSocket = io.connect( "http://192.168.11.6:3000" );

のように、サーバを起動しているPCのIPアドレスを指定することでアクセス可能になります。

ちょっとした小技で効率UP——アプリケーションをデーモン化〈Node.jsシリーズ vol.7〉

foreverを試そうとしてインストールするも、何度やってもエラーでインストールできず。。。

いろいろ試したところ、npm configを下記のように書き換えることでやっとインストールができました。

npm config set registry="http://registry.npmjs.org/"

【参考】【NODE.JS】NPMでFOREVERのインストールに失敗してしまう。。。

これでざっとNode.jsのテストが出来ました。今ひとつわかってない気がするので、間違い等ありましたら、ご指摘下さい。

【その他参考サイト】
・第1回 Node.jsとは:基礎から学ぶNode.js|gihyo.jp … 技術評論社
・node.jsのrequire相対パスうざい問題 – Quita
・SwiftでSocket.io (nodes利用) – Quita
・Socket.IO入門 (全10回) – プログラミングならドットインストール
・How do I check the version of socket.io and update it – Stack Overflow
・Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ – ICS MEDIA
・5分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム – 大人になったら肺呼吸
・Mac OS X から Node.js をアンインストールする方法
・【Node.js】足りないモジュールをたったの一行でインストールするコマンド – Quita