Node.jsでbatch処理を書くときに便利な visionmedia/batch

はじめに

node.jsでbatch処理書くって言っても、普通にnode batch.jsとかで実行したらええんじゃないの？visionmedia/commander使って引数渡したらいいんじゃないのって話ではないです。

visionmedia/batch

https://github.com/visionmedia/batch

commanderは超重宝するのでもちろん使ったほうがいいのですが、その中の処理を非同期に書いたり、progressの処理が書けたりするので便利。

使い方

package.jsonに"batch"を追記して、npm install。

実装はこんな感じ。

実行するとこんな感じ。

$ node batch.js 

organized 加賀

progress 25 %

organized 赤城

progress 50 %

organized 島風

progress 75 %

organized 出雲

progress 100 %

results [ '加賀', '赤城', '島風', '出雲' ]

batch.push()したfunctionがbatch.end()でconcurrencyされた数で並行に実行されてるみたい。
resultsはdone()で２つ目の引数で渡した値がpushされていくみたいですね。

progressの中身はこんなことになっています。

これ使って現在どこまで処理してるか〜とかをconsole.logに書いたりするなど色々使えますね。

{ index: 0,

  value: '加賀',

  error: null,

  pending: 4,

  total: 4,

  complete: 1,

  percent: 25,

  start: Wed Aug 07 2013 19:36:49 GMT+0900 (JST),

  end: Wed Aug 07 2013 19:36:49 GMT+0900 (JST),

  duration: 11 }

まとめ

艦これのコンテンツ力…！！

SublimeText2落ちたんだけど！なんなの！？という話

SublimeText2で作業してて、「お〜なんかpackage更新してるなー」と思ったら急にお亡くなりになって、起動してもずっと落ちっぱなしになりました。
直ったのでメモ。

対処法

起動して落ちるまでの一瞬で、package controlのログ的な文字が見えました。
そこにはSublimeLinterという自分でインストールしたpackageの名前が。

じゃあそいつを消したら治るんじゃないかということで、下記ディレクトリ(mac)を削除。

/Users/USERNAME/Library/Application Support/Sublime Text 2/Packages/SublimeLinter

それからSublimeText2を再起動。
直った。ε-(´∀｀*)ﾎｯ

TechLionというイベントに登壇します

学生の頃からよくしていただいている技術評論社のフォンさんから誘って頂き、TechLionというイベントで小話をすることになりました。
まだ残席あるそうなので是非！！Ustもあるらしい。


  - 日時：2013年7月23日(木) 19:00開場、19:30開演、22:30終了予定
  - 場所：六本木・スーパーデラックス
  - Webサイト: http://techlion.jp/vol13
  - 公式タグ: techlion (twitterでは#techlion)



一緒に登壇するのはさくらインターネット社長の田中さん、同じ大学・大学院研究室同期でmixiでノハナを開発している田中くんと田中づくしのメンバーの中に珍しい名字枠で参加します。

スポンサーがしっかりしているのと、過去には小飼弾さんとか、めっちゃ有名な人達も参加してるイベントなので若干緊張しております。

何話そうかな〜と色々相談しながら進めているわけですが、国産エンジニアとかあんまり関係なく会社寄りな話をさせてもらおうかなと思ってますｗ
入社時の話とか、キラキラ女子の話とか、仕事してて社長との関わりが意外と多かったのでそういう話とかできればなと！リクエストあれば受け付けますｗ

技術的な話よりも、業界的にはまだ若手？な自分がどうエンジニアとして働いてるのかって話をすることになってます。勉強会とかとはまた違った感じ？

面白くなるようにがんばりまーす(・ω<)

キーボードとマウスをMac - Windows間で共有するSynergyの設定＋REALFORCE(windowsキーボード)をmacで使う設定

最近この設定やってないけど、やり方忘れてしまうのでメモ。
Synergyを使えばmacとwindowsで片方のキーボード、マウスを共有して、OSをまたいで操作することができます！

Synergyインストール

synergyKM Mac日本語キーボード対応版を入れる。(WindowsはSynergy 1.3.1: ？下記リンクに詳細あり。ちゃんと対応したバージョンでないと、お互いに機能しない。)

https://sites.google.com/site/saburahu/Home/synergykm---mac%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%E5%AF%BE%E5%BF%9C%E7%89%88

キーボードの設定

初めてRealforceキーボードをつないだらJISを設定。

Macでrealforceを使う設定としてPCKeybordHackをインストールし、

1. PCKeyboardHackのFor Japaneseを全てチェック。

2. Command Lが初期のままだとWindowsキーになっているので、macでいうoptionとcommandLを入れ替える。(PCKeyboardHack)

・参考

PCKeyboardHackを設定する。

CapsLockはMacの機能でCtrlに出来る？(KeyRemapだかPCKey~の方でやった気がする。)

http://d.hatena.ne.jp/sotarok/20100503/1272817140

上記の派生記事（こっちのが分かるかも）

http://aoi.s60.xrea.com/blog/archives/2011/01/macrealforce_

KeyRemap4MacBookてのもあるけど、PCKeyboardHackでいろいろ変えればなんとかなる！

SANWA SUPPLY ドラッグ&ドロップ対応USB2.0リンクケーブル(Mac/Win対応) 1.8m KB-USB-LINK3M

これを使えば、WindowsとMacをUSBでつなぐだけでSynergyと同様のことができます！

絶対便利なので、面倒くさい方は是非。

nvmでNode.jsバージョン管理した時の苦労話

macでNode.jsのv.0.10.11を使おうと、homebrewでインストールしたnodeを消して、nvm経由でNode.jsを管理しようと色々やってたら悲しくなったのでメモ。

TypeError: Arguments to path.resolve must be strings

↑というエラーがnpmを使った時に起こりました。
nvmはnpmもまとめて簡単インストール☆してくれるので、npmが悪いわけない…原因はほかにあるはずだ……しかし、これがいけなかったのです。。路頭に迷い、作業時間をかなり削ってしまいました。。

原因

npmのversion違いでした。

調べるとpath.resolveの変更がNode.jsのv.0.9.xくらいにあったみたいで、v.0.8.xの時に動いたnpmではv.0.10.xの作りだと動かないみたい。

npm -vしたら、1.1.xでした。Node.js v.0.10.xでは、npm 1.2.x以上でないと動かないっぽいです。

えっ、でもnvm使ってるんじゃないの？

使ってますが、/usr/local/bin/npmに、最初にnode.jsインストールしたときのnpmが残っていました(・ω<)ﾃﾍﾍﾟﾛ

だから、npm使うと$PATHの順番的に古いほうが優先されて上記エラーが出てたんですね。

削除して、~/.nvm上の該当versionのnpmを使うように.bashrcを書き換えて糸冬了。

今回の件から私が得るべき教訓は

・アンインストールは徹底的に。

・動かなかったらpathをまず調べろ。

でした。

Node.jsでオレオレフレームワーク(スケルトン)作った

社内ニートとしての地位を確立しつつある７９です。こんにちは。

Node.jsでプロジェクト作るときは大体expressコマンドでえいやっと作るのがほとんどですが、それだけだと結局欲しい機能が色々足りなかったりするので最低限もうちょっと実装してあるフレームワーク的なのを作ってみました。

Node Framework 79

nf-79 - https://github.com/79yuuki/nf-79

なにができるの？

環境ごとに設定ファイルを指定

そもそもconfigモジュールみたいのが無くて、毎回作るのも面倒くさいし、環境ごとにDeploy出来るようになってると便利！なのでそういう機能がついています。

routing設定が出来る

expressで作っていくと基本的に app.get(), app.post()とかを沢山書かなきゃいけないのは、機能が増えていくとごちゃごちゃしがちです。

なので、configファイルにrouterの実装をしたモジュールのpathとurlをセットにして書いておくことでスッキリさせてみた。

testを書く準備が出来ている

「テストがないコードは成果物でなく、負債である」だそうです。準備はした。

loggerモジュールがある

エラーハンドリングした時にどうしよってなるので、log4jsでaccess_logとかsystem_logをファイルに出せるようにしてある。

validation使う準備がしてある

express-validationを使えるようにしてある。

viewまわり(おまけ)

ejsを使ってます。layout.ejsをベースに、bodyだけ書けば良い様にしてあります。

おまけでtwitter bootstrapのデザインをフラットデザインにしただけのflatstrapっていうのを使っています。

今後

Node.jsでなんかさくっと作りたいときにはコレ使えば面倒な実装減らせるので、こういうスケルトン作っておくのはいい事ですね。こいつが使いやすいかどうかは置いておいて。

もっとキレイにしたり、データストアとの連携部分も書いておくといいんだろうか。

何使うか決まったりしたら、追加するのもいいかも。

今更canvas使った描画やってみた

昔から画面に描画する系の事をやってみたかったので、ちょうど良かったからcanvas使って色々書いてみたよ。

hello world

その１

ハートのドット絵を根性で描いてみた。それを１コマ１コマ横と縦にずらしてアニメーションさせてる。
アニメーションさせるときは、setIntervalとか使うコードを良く見たけど、あとで出てくる最適化の話の通り、requestAnimationFrameと使ってみてる。

その２

それを画像として書きだして表示してみた。次に続く。

その３

画像をくるっと回してぴよんっと止めてみた。なんで画像かというと、Rectで矩形描いてきっちり並べたハートをそのまま回そうとしたら、斜めになった時隙間が空いちゃって、キレイなハートじゃなくなってしまったから。
後はプリレンダリング的な最適化処理にもなって良いらしい。

その４

回したり縮小〜拡大してみた！
回すのは画像座標の左上からぐるぐる回ってしまうので、座標を毎回中心で回るようにずらす必要がある。詳しくはソースコードを見てみてください！なるほどって感じ。

arcを使ったartっぽい描画やってみた

tumblrで似たようなGIFアニメ見つけて、試しに作ってみたら結構それっぽく動いた！jsdo.itのhot codeとかにもあがってちょっと嬉しかったよ(*´ω｀*)



ただまぁすごく重かったわけです。描画中はしばらく見てるとPCのファンが回りだしてしまったり、iPhoneとかで見るとホッカイロとして活用できるようになります。

で、HTML5 canvas のパフォーマンスの改善という記事を見つけ、これを見ながら頑張ってパフォーマンス改善してみました…！！

改善その１

まぁつまりは動かない背景までアニメ書いてたら大変てのと同じで、動いてない背景まで毎回書き出してたわけです。
それをcanvasタグを２つおいて、position: absoluteで重ねる事でcanvasのレイヤー化をやってみました。



これだけでかなりパフォーマンスは改善したのですが、まだなんか出来そう。
そして次です。

改善その２

次は、描画する指定座標に浮動小数点を使うを重くなるっていうのを直してみました。
ぐるぐる回る点は、単純にMath.cos, Math.sinで指定した座標なのでお構いなしに浮動小数点を使いまくっています。
なので、座標指定するところを

(浮動小数点座標 + 0.5) | 0

というビット演算を使って丸めてみました。あとから仕組みを調べたら頭の良い人は世の中に沢山いるんだなぁという感じでした。恩恵に預かります。。

で、直したのがこれ。



小数点を丸めちゃったらなんかガクガクしちゃったりしないかなーと思ったのですが、人間はそんなに目が良くなかったみたいで見た目も問題ありませんでした。
そして全然ファンが唸らないｗｗ

まとめ

色々描画すんのめっちゃたのしい！

最適化とかも、このあとしばらくやってみていて、教えてもらったLUTみたいな前処理をいれてみたり(ブラウザ落ちたｗ)、var sin = Math.sinみたいに参照が軽くなるみたいな細かい事をやってみたりしていました。

今回、円弧を描くようなアニメーションをさせるときに、sin, cosとかθとか数学でやったわーっていうのを久々に思い出して、それを扱えてるのがなんだか楽しかったです。

最近おすすめされたBeyond InteractionっていうOpenFrameworksの本を読んでるんですが、canvasではないが、これには図形の描き方の初歩から書いてあるので結構勉強になる。

何を目指してるんじゃｗｗって感じですが、まぁ現状は趣味程度に色々作って遊んでみますね＾＾