Node.js | AS blind side

以前、鹿野さんが書いた下記の記事をベースに作ったものを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

【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
・５分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム – 大人になったら肺呼吸
 ・Mac OS X から Node.js をアンインストールする方法
 ・【Node.js】足りないモジュールをたったの一行でインストールするコマンド – Quita

AS blind side

「Node.js」カテゴリーアーカイブ

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

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

【Node.js】Node.jsを試してみた（基礎編）

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

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

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

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

AS,Objective-C,Javascript,その他諸々の備忘録