Quantcast
Channel: アシアルブログ
Viewing all articles
Browse latest Browse all 298
↧

あんなこともこんなことも。そう、Node.jsならね。

November 25, 2013, 7:14 pm
$
0
0
こんにちは、斉藤です。
前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。



そう、Node.jsです。
Node.jsと言えば、WEBサーバーとして立てる方も多いと思いますが、ちょっとした別の使い方もあります。
ということで、今回はWEBアプリの開発に役立つNode.jsの便利なモジュールをご紹介します。
みんな使っているあのモジュールや、知らなかった便利なモジュールがあるかも！？

それでは、ご覧下さい！




ライブラリダウンロード


webアプリと言えば、色々なJSライブラリですよね？
これらをいちいち公式ページをブラウザで開いて、ダウンロードしてくるのは面倒ではないですか？
そんなときに役立つのがこちら！

pulldownというモジュールをインストールしましょう。
  1. $ sudo npm install -g pulldown

その後、このpulldownコマンドでjqueryの最新版が手元に！
  1. $ pulldown jquery
  2. -> Success: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js was downloaded to ./jquery.min.js
  3. $ ls
  4. jquery.min.js

これで、"WEBブラウザを開いてダウンロード"なんて面倒なことはしなくて済みますね！
ちなみに、以下のようにバージョン指定もできます。
  1. $ pulldown jquery@1.8.3

どれだけの種類のライブラリが、このpulldownでダウンロードができるかは、このサイトを確認ください。
http://cdnjs.com/
angularjsやunderscore、backboneも入っていますよー。

- このモジュールについて
https://npmjs.org/package/pulldown


QRコード生成


スマホのキーボードでいちいち開発中サイトのURLを入力していませんか？
パッと入力できたら便利ですよね？
URLを入れたQRコードを作っちゃいましょう！

qrcodeというモジュールをインストールしてください。
  1. $ sudo npm install -g qrcode

その後、このqrcodeコマンドで好きなQRコードがあなたの手元に！
  1. $ qrcode "http://monaca.mobi" qrcode.png
  2. $ ls
  3. qrcode.png



- このモジュールについて
https://npmjs.org/package/qrcode


HTML記述の効率化


HTMLをタグ打ちしているって？
もうそんな時代は古い（はず）。
HTMLより簡単な構文で、HTMLが生成できたらこの上なく幸せですよね？

jadeというモジュールをインストールしてください。
  1. $ sudo npm install -g jade

後は、こんなjadeファイルを作って、
  1. $ cat index.jade
  2. !!!5
  3. html
  4.   head
  5.     meta(http-equiv="Content-Type", content="text/html; charset=UTF-8").
  6.   body
  7.     div helloworld!

jadeコマンドで、jadeファイルを元にhtmlが生成されます！
  1. $ jade -P index.jade
  3.   rendered index.html
  5. $ cat index.html
  6. <!DOCTYPE html>
  7. <html>
  8.   <head>
  9.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10.   </head>
  11.   <body>
  12.     <div>helloworld!</div>
  13.   </body>
  14. </html>

!DOCTYPEとか、<とか、/>とかとか打つ手間が省けますね。

ちなみに、CSS用に作られたlessというモジュールもあります（今回は割愛）。
アシアル社内ではless派閥とsass派閥という、きのこたけのこ戦争みたいなことが起きているとかいないとか。

- このモジュールについて
http://jade-lang.com/
https://npmjs.org/package/jade


JSの圧縮/結合


スマートフォン対応の場合、ユーザーのネットワーク環境は大体が3Gなので、WEBページの読み込みが不安定になることは珍しくありません。
だから、少しでも読み込みJSファイル数を減らしたい。圧縮してファイルサイズを小さくしたい。

そんなときに役立つのがuglify-jsモジュール。
  1. $ sudo npm install -g uglify-js

uglifyjsコマンドが使えるようになり、以下のようにjavascriptの圧縮/結合が可能です。
  1. $ cat aaa.js
  2. if(true) {
  3.     console.log("log");
  4. }
  5. $ cat bbb.js
  6. (function(){
  7.     alert("foo");
  8. }());
  9. $ uglifyjs aaa.js bbb.js
  10. 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というモジュールがあります。
  1. $ sudo npm install -g static

インストールしたら、以下を入力してください。
  1. $ static .
  2. 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というモジュールがあります。
  1. $ 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（ワイナリー）。
  1. $ 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。
  1. $ sudo npm install -g grunt-cli

Makefileのように、タスクを設定するためのツールです。
JavaScriptで書かれているため、JavaScript系のプロジェクトと相性が良いです。
詳しく説明しだすと長くなるので、ほんの一例を。
  1. $ cat Gruntfile.js
  2. module.exports = function(grunt) {
  3.     // Project configuration.
  4.     grunt.initConfig({
  5.         pkg: grunt.file.readJSON('package.json'),
  6.         jade: {
  7.             monaca: {
  8.                 options: {
  9.                     pretty: true
  10.                 },
  11.                 files: {
  12.                     "monaca.html": "monaca.jade"
  13.                 }
  14.             }
  15.         },
  16.         jshint: {
  17.             js: ['aaa.js', 'bbb.js']
  18.         },
  19.         uglify: {
  20.             options: {
  21.                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
  22.                 mangle: false,
  23.                 beautify: false,
  24.                 compress: {
  25.                     global_defs: {
  26.                         DEBUG: false
  27.                     },
  28.                     dead_code: true
  29.                 }
  30.             },
  31.             monaca: {
  32.                 files: {
  33.                     'build.js': ['aaa.js', 'bbb.js']
  34.                 }
  35.             }
  36.         }
  37.     });
  39.     grunt.loadNpmTasks('grunt-contrib-jade');
  40.     grunt.loadNpmTasks('grunt-contrib-uglify');
  41.     grunt.loadNpmTasks('grunt-contrib-jshint');
  43.     grunt.registerTask('default', ['jade', 'jshint', 'uglify']);
  44. };
例えばこういったGruntfile.jsというものを一度作っておくと、以下の要領でjadeによるHTML生成、jshintによるシンタックスチェックからuglifyを使った圧縮/結合まで、たった一つのコマンドであっという間に行えてしまいます！
  1. $ grunt
  2. Running "jade:monaca" (jade) task
  3. File "monaca.html" created.
  5. Running "jshint:js" (jshint) task
  6. >> 2 files lint free.
  8. Running "uglify:monaca" (uglify) task
  9. File "build.js" created.
  11. Done, without errors.
よく行う作業はコマンドによるタスク化に限りますね！便利！
ちなみに、makeコマンド（Makefile）と違うのは、
  1. JavaScriptで書けること
  2. gruntのモジュールが豊富に存在すること
  3. サクセス/エラーを色付けで確認できること
です。

- このモジュールについて
http://www.monster-dive.com/blog/web_creative/20131004_001078.php
http://blog.kazupon.jp/post/39482409323/grunt-scratch-project



まとめ


今回はNode.jsとそのモジュールで、大抵のことができることをご紹介しました。
これまで、Node.jsを避けてきた方もこの機会にいかがでしょうか。
↧
Search
Viewing all articles
Browse latest Browse all 298

Trending Articles

モーツァルト ディヴェルティメント 変ホ長調 K.563 の名盤

December 23, 2017, 2:32 am

井上貴博アナウンサー彼女や結婚の噂は？実家や親が話題？人気は？

September 15, 2013, 1:59 am

Ke Aloha Kalikimakaの歌詞を和訳します

January 9, 2014, 6:10 pm

PaliのLepe `Ula`ulaと歌詞の和訳

July 19, 2012, 7:10 pm

2014年6月6日号　三菱東京ＵＦＪ銀行（5月14日付）

June 9, 2014, 1:51 am

LNK2019:未解決の外部シンボル と LNK1120:外部参照 1 が未解決について

October 23, 2005, 9:03 pm

ヴァンパイア・ノーツ　攻略

December 11, 2018, 6:10 am

大阪・泉南イオンで飛び降り自殺とみられる転落事件が発生：ネットで拡散された理由とは

July 15, 2016, 12:05 pm

メールディーラーで受信するアドレスを追加できますか？

July 30, 2019, 1:56 am

Robocopy のエラー (戻り値) について

January 23, 2018, 11:28 pm

林要の結婚や経歴&評判とWikiプロフやLOVOT(ラボット)とグルーブエックス株価は

December 23, 2018, 6:18 am

【極☆寒】「凍った髪」を競い合う『国際ヘア・フリージング・コンテスト』！ 寒〜い写真に身震いしつつ過ぎ行く冬にサヨナラだ!!

March 10, 2015, 2:00 pm

滋賀の部落（同和地区）一覧

March 24, 2010, 6:39 am

【銃刀法違反】吉田総業組長代行 恩田達志容疑者を再逮捕

November 17, 2016, 6:39 pm

和歌山県代表決まる　都道府県対抗中学バレー

September 10, 2013, 2:00 am

大浦街道で重体事故

August 31, 2016, 1:35 am

【世界大学ランキング】 第１位にジュリアード音楽院とウィーン国立音大、日本勢は？

August 23, 2019, 1:32 am

【対策済】「SKYSEA Client View」のアップデートに失敗する問題についてのお知らせ

December 27, 2007, 7:00 am

Lahaina Lunaの歌詞を和訳しました

January 14, 2016, 6:10 pm

画像・写真】ららぽーと横浜で16歳男子高校生が転落死 不審な動き→逃走し警備員に追いかけられ→柵越え飛び降り・12m転落 窃盗・万引き？それとも盗撮？

September 17, 2016, 8:50 am
Search