あんなこともこんなことも。そう、Node.jsならね。
こんにちは、斉藤です。
前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。
そう、Node.jsです。
Node.jsと言えば、WEBサーバーとして立てる方も多いと思いますが、ちょっとした別の使い方もあります。
ということで、今回はWEBアプリの開発に役立つNode.jsの便利なモジュールをご紹介します。
みんな使っているあのモジュールや、知らなかった便利なモジュールがあるかも！？
それでは、ご覧下さい！
ライブラリダウンロード
webアプリと言えば、色々なJSライブラリですよね？
これらをいちいち公式ページをブラウザで開いて、ダウンロードしてくるのは面倒ではないですか？
そんなときに役立つのがこちら！
pulldownというモジュールをインストールしましょう。
$ sudo npm install -g pulldown
その後、このpulldownコマンドでjqueryの最新版が手元に！
$ pulldown jquery
-> Success: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js was downloaded to ./jquery.min.js
$ ls
jquery.min.js
これで、”WEBブラウザを開いてダウンロード”なんて面倒なことはしなくて済みますね！
ちなみに、以下のようにバージョン指定もできます。
$ pulldown jquery@1.8.3
どれだけの種類のライブ ラリが、このpulldownでダウンロードができるかは、このサイトを確認ください。
http://cdnjs.com/
angularjsやunderscore、backboneも入っていますよー。
– このモジュールについて
https://npmjs.org/package/pulldown
QRコード生成
スマホのキーボードでいちいち開発中サイトのURLを入力していませんか？
パッと入力できたら便利ですよね？
URLを入れたQRコードを作っちゃいましょう！
qrcodeというモジュールをインストールしてください。
$ sudo npm install -g qrcode
その後、このqrcodeコマンドで好きなQRコードがあなたの手元に！
$ qrcode "http://monaca.mobi" qrcode.png
$ ls
qrcode.png
– このモジュールについて
https://npmjs.org/package/qrcode
HTML記述の効率化
HTMLをタグ打ちしているって？
もうそんな時代は古い（はず）。
HTMLより簡単な構文で、HTMLが生成できたらこの上なく幸せですよね？
jadeというモジュールをインストールしてください。
$ sudo npm install -g jade
後は、こんなjadeファイルを作って、
$ cat index.jade
!!!5
html
head
meta(http-equiv="Content-Type", content="text/html; charset=UTF-8").
body
div helloworld!
jadeコマンドで、jadeファイルを元にhtmlが生成されます！
$ jade -P index.jade
rendered index.html
$ cat index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>helloworld!</div>
</body>
</html>
!DOCTYPEとか、<とか、/>とかとか打つ手間が省けますね。
ちなみに、CSS用に作られたlessというモジュールもあります（今回は割愛）。
アシアル社内ではless派閥とsass派閥という、きのこたけのこ戦争みたいなことが起きているとかいないとか。
– このモジュールについて
http://jade-lang.com/
https://npmjs.org/package/jade
JSの圧縮/結合
スマートフォン対応の場合、ユーザーのネットワーク環境は大体が3Gなので、WEBページの読み込みが不安定になることは珍しくありません。
だから、少しでも読み込みJSファイル数を減らしたい。圧縮してファイルサイズを小さくしたい。
そんなときに役立つのがuglify-jsモジュール。
$ sudo npm install -g uglify-js
uglifyjsコマンドが使えるようになり、以下のようにjavascriptの圧縮/結合が可能です。
$ cat aaa.js
if(true) {
console.log("log");
}
$ cat bbb.js
(function(){
alert("foo");
}());
$ uglifyjs aaa.js bbb.js
if(true){console.log("log")}(function(){alert("foo")})();
– このモジュールについて
https://npmjs.org/package/uglifyjs
http://dev.classmethod.jp/server-side/node-js-server-side/uglifyjs/
簡易webサーバー
HTMLを作ったら、確認しますよね？
どうやってローカルで確認していますか？
Nginx？Apache？設定面倒ですよね？
そんなときにstaticというモジュールがあります。
$ sudo npm install -g static
インストールしたら、以下を入力してください。
$ static .
serving "." at http://127.0.0.1:8080
その後、WEBブラウザで、http://127.0.0.1:8080 にアクセスしてみてください。
これだけでWEBサーバーとして、指定したディレクトリをドキュメントルートとしたコンテンツの配信をできます。ちょっとした確認に便利！
ちなみに、以前のアシアルブログでも紹介されていますね。
http://blog.asial.co.jp/1187 （node-staticの項参照）
– このモジュールについて
https://npmjs.org/package/static
テストツール
javascript開発していると、ユニットテストを走らせたいですよね？
テストフレームワークの準備、実行が面倒？
karmaというモジュールがあります。
$ sudo npm install -g karma
一度設定してしまえば、手動でブラウザを開かずとも、コマンドラインから実行できるのが嬉しいところ。
使いたいテストフレームワークもJasmine, QUnitなど一つに限らないので、それぞれのフレームワークを単体で使っていた方も乗り換えもスムーズかと。
– このモジュールについて
https://npmjs.org/package/karma
http://qiita.com/shinofara/items/b3677ffdfc0c7e45e8d4
http://dev.classmethod.jp/tool/karma/
デバッグツール
PCで確認していると起きないんだけど、スマホで確認すると起きるバグってありますよね。
どうにかして、スマホブラウザの情報を取得できないものか・・・。
そんなときに迷わずお勧めしたいのが、このweinre（ワイナリー）。
$ sudo npm install -g weinre
リモートで 実行できるChromeデバッグパネルと言えば伝わると思います。
スマホブラウザ内に表示しているDOMをPC上で調査したり、consoleから関数を叩いて、スマホブラウザ内で実行してみたり。
リモートで操作できることがとても便利だと、実感できるのではないでしょうか。
図. PCから、スマホブラウザ内でJSを実行してみた例
– このモジュールについて
https://npmjs.org/package/weinre
http://blog.asial.co.jp/1075
よく行う作業のタスク化
先ほどのjade、uglifyjsなどよく使うコマンドは、Makefileみたいにまとめることが出来るんです。
そんな時に使えるのが、このgrunt。
$ sudo npm install -g grunt-cli
Makefileのように、タスクを設定するためのツールです。
JavaScriptで書かれているため、JavaScript系のプロジェクトと相性が良いです。
詳しく説明しだすと長くなるので、ほんの一例を。
$ cat Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jade: {
monaca: {
options: {
pretty: true
},
files: {
"monaca.html": "monaca.jade"
}
}
},
jshint: {
js: ['aaa.js', 'bbb.js']
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
mangle: false,
beautify: false,
compress: {
global_defs: {
DEBUG: false
},
dead_code: true
}
},
monaca: {
files: {
'build.js': ['aaa.js', 'bbb.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jade', 'jshint', 'uglify']);
};
例えばこういったGruntfile.jsというものを一度作っておくと、以下の要領でjadeによるHTML生成、jshintによるシンタックスチェックからuglifyを使った圧縮/結合まで、たった一つのコマンドであっという間に行えてしまいます！
$ grunt
Running "jade:monaca" (jade) task
File "monaca.html" created.
Running "jshint:js" (jshint) task
>> 2 files lint free.
Running "uglify:monaca" (uglify) task
File "build.js" created.
Done, without errors.
よく行う作業はコマンドによるタスク化に限りますね！便利！
ちなみに、makeコマンド（Makefile）と違うのは、
JavaScriptで書けること
gruntのモジュールが豊富に存在すること
サクセス/エラーを色付けで確認できること
です。
– このモジュールについて
http://gruntjs.com/
https://npmjs.org/package/grunt
http://www.monster-dive.com/blog/web_creative/20131004_001078.php
http://blog.kazupon.jp/post/39482409323/grunt-scratch-project
まとめ
今回はNode.jsとそのモジュールで、大抵のことができることをご紹介しました。
これまで、Node.jsを避けてきた方もこの機会にいかがでしょうか。
