node.jsのgmライブラリでCopyOpacityするのに1日ハマった話するわ

gmライブラリ

node.jsにおける画像編集の鉄板？ライブラリである。 バックでGraphicsMagick(ImageMagick)が動いており、 それらをnode.jsの機能のように使うことをapiなのだろうか。 今回はこのgmライブラリを使ってはまりまくったので、 後に筆者のような愚かな人間が生まれないように記事を書く。 多少心が荒んでいるので、丁寧語が抜けていることをお許し願いたい。

今回やりたかったこと

blog.yug1224.com

サムネイルを作る目的ではないが、 こちらの記事にあるようにmaskとなるpngファイルから 透過値をコピーして、丸く切り取るようなことがしたかった。 また、作業に際し速度が必要であったため、 ImageMagickではなくGraphicsMagickを使うことにした。

compositeとconvert

おそらく、ちゃんとした区分があるのだろうが、筆者のなんとなくの理解では

• 画像の変換系はconvert
• 画像の合成系はcomposite

である。 GraphicsMagickにある、コマンドはそんなに多くない。 というかむしろほとんどのことは convertですませるのだろう。 convertを使う場合、基本的に画像ファイルの引数は二つだ。 ここで、問題が生じる。 maskを用いた透過値のコピーには引数が3つ必要なのである。 上記ページからもわかる通り、このような場合はcompositeを用いる他ない。

gmライブラリの仕様上注意

今回のメインディッシュである。 gmライブラリは今のところ、convertコマンドしかサポートしていないのだ。 これが何を意味するかというと,

gmライブラリで今回の目的が達成できない

最終的な筆者のソリューションは、おそらくみなさんが行なっているであろう。 child_processを使って、シェルに直接実行してもらう方針である。

// gmモジュールがcompositeをサポートしていないため関数定義
internals.gmcomposite = function(maskImagePath, tempImagePath, newImagePath, callback) {
  var gmspawn = spawn('gm', ['composite', '-quality', 100, '-compose', 'CopyOpacity', maskImagePath, tempImagePath, newImagePath]);

  gmspawn.stdout.on('data', function(data) {
    console.log('stdout: ' + data);
  })

  gmspawn.stderr.on('data', function(data) {
    console.log('stderr: ' + data);
  })

  gmspawn.on('exit', function(code) {
    if (code !== 0) {
      callback(code, null)
    }else {
      callback(null, null)
    }
  })
};

これでひとまずは実行できた。 恥ずかしい話、ここにたどり着くまでに1日の時間を要した。

GraphicsMagickのややこしいオプション

今回、ここまで時間がかかったのにはgmがサポートしていなかったことと 合い重なってGraphicsMagickのオプションがわかりづらいと言うことがある なんと、

• convertコマンドには-composite
• compositeコマンドには-convert

オプションが存在するのだ。 筆者は永遠とgmライブラリの-compositeオプションを使い、 どのオペレータを用いればmaskを用いたCopyOpacityができるのか延々と悩んでいたわけである。

まとめ

え、今回の問題に直面した時の反省点ですか？…マジでわからん。。。 こう言う泥沼にハマった時の対処法誰か教えてください。。

werckerをmac(docker for mac)で動作させたわ

docker for mac

なんか最近出たらしいですね。 これまではdocker toolboxみたいなので、 virtualbox上でdockerを走らせていたらしいのですが、 virtualboxじゃない仮装アプリでなんかdockerの利点を最大限生かせるようになったのが docker for macみたいな記述があった気がします ただいかんせん新しいので、ドキュメントが少ない問題に直面しまして、 誰かの助けになればいいなと一筆した次第であります。

導入手順

wercker-cliを(macに)インストールします

$ brew install wercker/wercker/wercker-cli

macにwercker-cliがインストールされたら、

$ wercker build

で、勝手にdockerがimageを引っ張ってきてくれて使えるようになります。

ちょっと解説のようなもの(間違ってる説は結構ある)

docker toolboxだとvirtualbox上にLinuxカーネルを立てて、 その上にdockerを起動し、さらにその上にwerckerをインストールして起動します。 それに対し、docker for macは仮装環境は挟んでいるものの、 基本的にはOS Xのカーネルを使うらしいので、 mac自体にwerckerがインストールされていないと使えない ということで、macの方のlocalにwercker-cliを入れてあげて、 docker上で起動すると、dockerの機能でimageを探してきてくれます！

引っかかったところ

あくまでmac上で起動されているため、 node.jsに置けるbcryptのようなlinuxとOS Xで挙動の違うライブラリは macの方のバージョンを入れる必要があります。 そんなん知らんやん。。。 invalid ELFみたいなのが出てきたら用心してください！！

まとめ

dockerは勉強した方が良いな完全に。。。

Macに入れてる「最初に入れとくべき！」みたいなアプリの話するわ

Macに入っているAppの紹介

そういえば最初Mac買った時ってワクワクして開くまではいいけど 何すればいいかわからなくて、 ボソッと「カッケェ…」ってため息ついて閉じてたなと思って、、
そんな状態なあなた必見！ 入れといたらやるじゃないかと言われるAppを紹介するぜ！

Alfred

www.alfredapp.com

こいつは死ぬほど定番ですね！どのランキングページにも出現します。 ところで、みなさんspotlight検索って知ってますか？ 最近のマックだとcmd + spaceとかで起動できるのかな。 だいたいそれの上位互換です笑 UIが洗練されてて、早いらしい、地味にいろんなコマンドが使えて、カスタマイズできる。 まぁでも、最もこれを入れる利点としては 入れてることで上級者っぽくてかっこいい ってところでしょうね笑 一つだけ使う上で注意というかオススメがあるんですが、 デフォルトではalt + spaceでAlfred起動なんですが、 Ctrl + spaceに変更することを強く推します！ 冷静にalt + spaceプラインドタッチとか無理でした笑

AppCleaner

AppCleaner

Windowsってコントロールパネルからアンインストールができるんですけど、 Macそういうのないんですよね、多分。 ということでこのアプリです。依存関係のファイルを検索してくれて、 削除してくれます。操作は簡単ドラッグ&ドロップ！

Avast

www.avast.co.jp

無料のセキュリティアプリです！ MacはWindowsと比べて市場規模が1/10程度なので、 ウイルスに狙われることは少ないとは思いますが、 別段Windowsと比べて最強って訳ではないので、 Macに愛を捧げるならセキュリティソフト入れておくと良いと思います。 Avastは筆者が調べた時点でなんとなく一番良さげだった気がしますが、 Macのユーザーはガンガン増えているに伴って、 ウイルスもセキュリティも進化すると思うので、 入れるタイミングで調べると良いと思います！

Caffeine

download.cnet.com

こいつは優秀です。インストールするとツールバーにコーヒーカップが現れます。 コーヒーカップをクリックするとコーヒーが中に入って、 Macがスリープしなくなります。 意外とスリープしてほしくない時ってあるので、入れとけば良いと思います！

CheatSheet

www.cheatsheetapp.com

Cmdの長押しでショートカットのカンペを出してくれます！ 最初はめちゃくちゃ使いました！ ショートカットを覚えると生産性が4倍くらいになります(主観)

Dropbox

この子に関しては一言でいいかもです。便利！

Google Chrome

www.google.co.jp

最初にSafariから乗り換えた時にびっくりするくらい速度が早くなったのを覚えています。 周りを見た感じプログラミングをするならChromeかFireFoxを入れておくのが ベターな気がしますね！特にWebエンジニア！ プログラマでなければ、スマホとブラウザ合わせればなんでも便利かと笑

Hyper Switch

bahoom.com

デフォルトのCmd + tabで、アプリケーションの切り替えができるのをご存知ですか？ あれの上位互換です(主観)。 アプリケーションごとではなく、ウィンドウごとの切り替えが可能になります！ あと、サムネールとしてウィンドウの画像が貼られるので、 フォーカスしたいウィンドウが見つけやすい気がします！

iTerm

www.iterm2.com

プログラマの定番。なぜかターミナルでは物足りなかった強者が入れている。 という印象だったので入れて見た。 タブ分けができたりなんだか色々ターミナルの先を走っていたみたいですが、 今となってはターミナルも進化してどっちもどっち説が浮上しております。 これもあれですね、 とりあえず入れといたらちょっとイカす

LINE

タイピングの方が早い人は入れるべきですね

QR Journal

QRを読み込みます！ なんでもいいと思いますが、焦ってQR読み込みしたい時のために先んじて入れておくと良いでしょう。 (そんな日はあるのか？)

終わり

なんかだいたいこんな感じな気がします！ プログラマ向けのもの以外もしくは、 プログラマ向けのものは入れておくだけでMacがオシャレに見えるものを選んできました！ お役に立てれば幸いです！

pythonのversion周りがなんかあれな話するわ

pythonのバージョンはややこしい

python以外に4つくらい他の言語に触れたことがあるのですが、 pythonに勝る美しい言語はないと思っています。 そんなpython最大の弱点が、version問題かなと。。 python2系とpython3系があるんですが、 互換性がないとかいうね。完全切り捨て御免とかいうね。 というわけで、いろんなバージョン管理方法があるわけですが、 筆者は pyenv を使わせていただいてます。 なんかいろんな記事をさらっと読んだ感じ、 virtualenv がデファクトスタンダードで、 pyenv がかなりこなれてて、 venv とかいう公式のバージョン管理ソフトができたっぽい。

…いや、待て。なんでややこしいバージョン管理を簡潔にしたいのに、 その方法でまた悩まなあかんねん！！ ってことで、師匠に教えてもらったpyenvから一歩も動くことなく、 盲目にこれがいいと信じながら使っております。

現在の管理状況

機械学習始めたらめっちゃバージョン管理必要になった

問題は 機械学習なんですよ 。 最近勉強会に参加させていただいていて、 発表者の方がちゃんとipynb形式でデモを実行できるように準備してくれるんですけど、 pythonのバージョンが割とまちまち… 具体的に機械学習で使うバージョンは多分

• 2.7
• 3.5
• 3.6

だと思うんですけど、 2系と3系の相互互換がないのはいつものことで納得いくんですが、 何故3.5と3.6までうまくいかないんだ！？ ということで、原因を探るよりも もうpyenvに全部入れてしまえばよくね！？ ってなりました。 というわけで現在、筆者のpyenv管理下には上記のpythonバージョンを含んだ anacondaが3つぶち込まれています。それぞれに pytorch と tensorflow がぶち込まれています。 なんか汚らしい気がするので、こういう状況での ベストプラクティスをどなたか教えてくださると嬉しいです。

pyenv-virtualenv

機械学習では使うの面倒だなってなりました。 誰かとコードを共有するってなったら Dockerでも勉強するか…と思っています。 それ以外の、例えばデスクトップアプリなどでは大活躍してくれていますが、 どんどん環境増えたら管理がまた面倒になるなと思って、 みなさんがどういう管理をしているか気になります。

まとめ

もう自分で使う分にはとりあえず依存関係考えずにやろうかなと 開発の段になった場合にDockerの導入か、 virtualenvの導入か、(pyenv-virtualenvは開発の仮想に向かなそう？) やらを考えることにしました！(必殺後回し戦法！)

JavaScriptに入門し始めたからまとめていくわ[part2]

went-went-takkun135.hatenablog.com

上記の続きです！

基本仕様後半戦！

ここからが難しいところなのでしょうね。 気合をいれて臨みたいと思います。 まじで早くNode.jsまでたどり着きたい！

変数とオブジェクト

代入

• 基本型のリテラルは値を代入
• それ以外のオブジェクトは参照を代入

だけとりあえず覚えておけば良さそう！ バイト先でオブジェクトの値コピー方法を何回もググってる気がするけど、 未だにどれが正解かわかっていない。

オブジェクト

めちゃくちゃ長くて、 ちょっと難しすぎたから割と読み飛ばしてしまった。 おそらく著者が言いたかったことのエッセンスは

• 基本型以外のものは全てオブジェクト
• オブジェクトそれ自体には名前がなく、 名前がある変数などに参照を代入することで固有の名前を得る
• オブジェクトは内部にプロパティを持ち、 アクセスはドットかブラケット
• 連想配列としての使い方もある
• this参照には注意が必要
• 実質のクラスとしても使用可能
• クラスの継承みたいなのはプロトタイプ継承というものによって行われる
• 型判定やプロパティの列挙は汎用性が高すぎるせいで多少面倒

大変だった5章

この章めちゃくちゃ長くて力入れてるのがひしひしと伝わってきたものの、 めちゃくちゃ意味不でめちゃくちゃ眠かった(2,3回じゃないほどの寝落ち)。 しかし頑張っていきたいと思います。。

関数とクロージャ

スコープ

• ブロックスコープがJavaScriptにはない。
• JS独自拡張の変数宣言にletがありそれはブロックスコープがある
• 後は基本Pythonと同じ

クロージャ

言葉遣いは難解だったけど、 過去最高にわかりやすかった気がする。

function() {
  var cnt = 0;
  return function() { return ++cnt; }
}

var fn = f();
fn();  // 1
fn();  // 2
fn();  // 3

上記コードのように関数呼び出し時に関数を返すようにすると、 関数呼び出し時に生成されるCallオブジェクトなるものが 消去できなくなるため、ずっと同様のCallオブジェクトで この関数オブジェクトが呼び出されることとなり、 関数内の情報が保存されるという仕組みらしい。

モジュールがない

モジュールっぽい概念が言語仕様上はないらしいです。 一つのプロジェクトのグローバル変数が共有されるので、 大事故につながる恐れがあります。 そのため、一つのファイルをクラスのように括ってしまうなどの 対策が迫られるらしいのですが、それでもprivateな変数は作れません。 そこでクロージャ！みたいな感じの話でした。

データ処理

• 配列
• JSON
• Date()
• 正規表現

についての記載があった。 配列に関してはものすごく詳しく書かれていたが、 実用上はそれほど細かい知識は必要なさそうなので割と目を通した程度。
JSONはeval関数を使わないこと。
Date関数はクライアントサイドで使うと面倒なことと、 実行環境に依存すること。
正規表現はリテラル表現が存在し、

var reg = /^\s+/;  // 先頭文字が空白
var reg = new RegExp('^\\s+');

のように記述する。他にもStringオブジェクト側から、 引数に正規表現を用いる技法も存在するが、 ここの難点は主に正規表現そのものなので、 JavaScript側で難しいことはそれほどないと思う。

まとめ

これでJavaScript基本仕様については終了！ らしいがこれで実際にコードちゃんと読めるかは微妙なラインな気がする。 理由としては、 コード規約自体は簡単なのに、変なイディオムとか メソッドチェーンとかコールバック関数とか見慣れない使い方が多い みたいな感じやと思う。

つまり、結論

慣れが大事。

次回からはクライアントサイドの説明をしてくれるそうです！

JavaScriptに入門し始めたからまとめていくわ[part1]

JavaScript始めました

本当はインターンでずっと使ってたんですけど、 一切体系的に学んでおらず、 なぁなぁでコーディングをそろそろ脱却せねばと一念発起いたしました。

パーフェクトJavaScript （Perfect　series） [ 井上誠一郎 ]

上司の方にこの本とかがいいんじゃない？と言われ、 即購入、その間30秒。 失敗したのは当日暇だったので 普通に大学で買えば当日から始められたのにということですね！
もう一つ失敗を付け加えると、この本は めっちゃJava学んでる前提で話進めてくる んですけど、筆者はまったくJavaに触ったことないことくらいですね！
ということで、今読んでる最中なのですが、 入門書に関しては読んだ後にレビューではなくて、 要点を読みながら書いた方が絶対いい気がするので、 章が終わるたびに書き足して行っています！

JavaScriptの概要

ブラウザ戦争とかいうものがあって、 ブラウザの独自拡張が繰り返された時代があったそうな、 JavaScriptもその戦争のせいか、 はたまた醜い人間たちの性か、 独自拡張性が高い言語になってしまったそうな。 これでは非常に使いづらいということで、ECMAScriptなる規格が発足。 現状では、JavaScriptが新しい機能を備えたバージョンを開発していき、 それに対してECMAScriptが順次それを規格化していくという流れだったような。 とりあえずは規格化されたECMAScriptを使っていれば安心ってことなのだな？

JavaScriptの基本仕様

JavaScriptの型について

JavaScriptの基本型

• 文字列型
• 数値型
• ブーリアン型
• null型
• undefined型

上記の5つが基本型となり、その他を全てオブジェクト型という。

基本型のオブジェクト型

適切な表現が思いつかなかったので意味不明な題名。 上記5つの基本型に対応するオブジェクト型、クラスが存在する。 しかし、暗黙の型変換(基本型 <=> オブジェクト型) によってその存在は認識していなくても 実質問題ないっぽい。 ので、頭の片隅にしまいながら、 基本的には忘れていて大丈夫っぽいというか、 積極的に忘れて暗黙の型変換を使っていくのがベストプラクティスなのだとか。

型変換(数値型 <=> 文字列型)のイディオム

クライアントにjsファイルをぶん投げる際、 なるだけ短い文章で書いた方が通信量が抑えられて良いということから、 暗黙の型変換を使った最短表記がしばしば用いられるそうな。 可読性は低そうだけどよく使うなら慣れておかねばだ。

// 数値から文字列
var n = 3;
n+'';

// 文字列から数値
var s = '3';
+s;

JavaScriptの式と文

式式文文式文文 む〜ら〜さ〜ぁき
どこかの歌手が頭から離れない章名。

• ソースコードは文から構成される
• 文は文と式から構成される
• 式は式と演算子から構成される

呪文でしょうか、いいえ誰でも。。?

文の種類

基本的に文は;で区切られた一区画を指す。その種類として

• ブロック文(複合文)({}で囲まれたもの)
• 変数宣言文
• 関数宣言文
• 式文
• 空文
• 制御文
  • if-else文
  • switch-case文
• 繰り返し文
  • while文
  • do-while文
  • for文
  • for in文
  • for each in文(JavaScript独自拡張)
• break文
• continue文
• return文
• 例外(throw)

基本的に意味不明で特殊なものはないかな？ (for inとfor each inはなんか注意点いっぱいで使うの怖い)

式の種類

文と同じようにまずは列挙して同値演算子だけあとで取り上げます。 式はオペランドと演算子に分けられるらしく、 その式を特徴付けるのは演算子なので実質演算子列挙になります！

• 算術演算子
• 文字列連結演算子
• 同値演算子
• 比較演算子
• in演算子
• instanceof演算子
• 論理演算子(&&)
• ビット演算子(俺多分しばらく使わない)
• 代入演算子
• 算術代入演算子(+=)
• 条件演算子
• 条件演算子(3項演算子)
• new演算子
• delete演算子
• void演算子
• カンマ演算子
• ドット演算子とブラケット演算子
• 関数呼び出し演算子

同値演算子

JavaScriptの同値演算子のやばいポイントは、

• ==

• ---

と、二種類の演算子があることに尽きる。
==だと暗黙の型変換込みでの同値演算子。
===だと型も含めて同値であるかの判定を行うらしいぞ！

機械学習の勉強を真面目に始めましたわ[part2]

went-went-takkun135.hatenablog.com

続き行きます！主にCNNの話と用語解説になると思います！！

畳み込みニューラルネットワーク(CNN)

主に画像に用いられるニューラルネットワーク。 昔のモデル(ここまで考えてきたモデル)では、 Affineレイヤで前層の出力を全結合していたが、 その部分をConvolutionレイヤで置き換え、 必要に応じて、活性化関数適用後の出力にPoolingレイヤを挟むことで Affineレイヤの形状無視と言う欠点を補う。

Convolutionレイヤ

形状を考えるために、入力データに対して、 フィルター(カーネル) を用いた結合を行う。 フィルターは入力データと同じチャンネル数で、任意のサイズを持つ。 フィルターのサイズと、 入力データに対する パティング 、フィルターの ストライド によって 出力データのサイズが決定する。 一つのフィルターに対して、出力データのチャンネル数は常に1つのため、 複数のフィルターを用意して、出力データのチャンネル数を調整する。

Poolingレイヤ

サイズを小さくするための演算。 ある範囲の最も大きな値のみ抽出していくMaxPoolingが画像処理の分野では主流である。 Poolingレイヤの特徴は以下の3つに代表される。

• 学習するパラメータがない
• チャンネル数は変化しない
• 微小な位置変化に対してロバスト

CNNの特徴？

フィルターが前半の層では低次元のエッジなどを抽出していくのに対し、 後半のフィルターは高次元の犬の顔などを抽出し始めるらしい。 これは層を多くすることによって、出力までの下準備をそれまでのレイヤで 丹念にできることに起因するとかしないとか。

代表的なCNN

LeNet

1998年初めてのCNN？基本的な構造は今使われているものと同じだが、 PoolingレイヤでMaxPoolingを行なっているわけではないらしいのと、 活性化関数がSigmoid関数らしい。

AlexNet

2012年に彗星のごとくコンペティションに現れ、 圧倒的な成績でトロフィーと話題をさらっていったAlexNetさんです。 機械学習ブームの火付け役をしてくれたらしいですね。LeNetと比べると

• 活性化関数にReLU関数を用いる
• LRNと言う局所的正規化を行う関数を挟む
• Dropoutを使用する

松尾教授の書籍を読んだ時、うろ覚えですが、確かこのDropoutが 革新的だったといっていたような気がします。うろ覚えなので突っ込まないでください。

人工知能は人間を超えるか ディープラーニングの先にあるもの （角川EPUB選書） [ 松尾豊 ]

ディープラーニング

層を厚くすると言うこと

• 表現力の増加
• 表現するために必要な学習パラメタの減少
• 学習時間は増加

こんな感じのメリットデメリットがあるらしい。 表現力の増加とあるが、実際、MNISTの認識では2層くらいのモデルが 最も高精度らしく、表現力がどの程度必要なのかも考えなければならない。 ちなみに2015年のクラス分類コンペティションの優勝モデルは 150層とか言う馬鹿げたレベルのディープさだったそうな。

有名なネットワーク

VGG

CNNの基本型らしい。3x3の小さなフィルターでなんども畳み込むそうな。

GoogleLeNet

基本的に層をディープにするといったら、伝播方向っぽいんだけど、 Googleさんは横方向にも伸ばしてしまったそうな。 インセプション構造 と呼ぶらしく、複数のサイズのフィルターで たたみ込んでその結果を結合するそうな。

ResNet

GoogleがきてMSが来ないわけがない。 これがさっき言ったアホみたいに層を深くした150層ネットワーク。 レイヤを通した出力とレイヤを通す前の入力の合計をその層の出力とする スキップ構造と呼ばれるものを用いることで、 勾配消失問題を克服して、層をものごっつ厚くできたそうな。

転移学習

すでに学習済みのパラメタをそのまま初期値として用いて、 次の学習を行う手法のこと。少ないデータセットしか手元にない時とかいいらしい。

最近ディープラーニングで行われていること

• 物体検出(物体認識の適用範囲検索と物体認識の結合)
• セグメンテーション(ピクセルレベルでのクラス分類)
• 画像キャプション生成(CNNとRNNの結合)
• 画像スタイル変換(中間出力とのloss)
• 画像生成(DCGAN)

強化学習

エージェント(computer)が環境から得られる報酬を 最大化するように動いていくのかな？ ゲームとかでやってるらしい。 パックマンをコンピューターにやらせたらもう人は勝てないらしい。 とりあえず強化学習にはまた独自のアルゴリズムがあるっぽくて(Q学習？) それとCNNを融合させることでDeep Q-Networkとか言うすごい奴が生まれたらしい。

まとめ

特殊な用語がたくさん出てきたので、 とりあえずこの分野に入るときには一回真面目に入門書を読むべきと感じました。