読者です 読者をやめる 読者になる 読者になる

なっく日報

技術やら生活やらのメモ

Visual Studio CodeのKeyBindingをCTRL+Nを↓、CTRL+Pを↑に変更する

しばらくサボってましたが、今日からは再び頑張りたい。。

諸事情により、Visual Studio Codeを触り始めました。

が、違和感を感じたのが各種ウィンドウでCTRL+N、CTRL+Pのキーバインドが効かないこと。

ググッてみたところ

github.com

↑のEmacs向けのキーバインドを公開してくれている方がいました。

ありがたや。

しかし、自分は生粋のEmacsユーザという訳ではなく、とりあえずCTRL+N、CTRL+Pが効けばよかったので

curl -s https://raw.githubusercontent.com/nana4gonta/emacs-visual-studio-code/master/release/keybindings-osx.json | jq 'map(select(.key=="ctrl+n" or .key=="ctrl+p"))'

で該当する設定だけをいただきました。

あとは、Code -> Preferences -> Keyboard Shortcuts でkeybindings.jsonに貼り付けるだけです。

Mochaで--delayフラグを使って初期化完了までテストを実行しないようにする

--delayフラグ?

http://mochajs.org/#delayed-root-suite

で知りました。

setTimeout(function() {
  // do some setup

  describe('my suite', function() {
    // ...
  });

  run();
}, 5000);

のように書いて、mocha --delay test と実行すると、run()が呼ばれるまでテストの部分までは行かないと。

ちなみにrun()はmochaが勝手にグローバルスコープに追加してくれる関数だそう。

使用例

DBに接続するまでテストを実行しないようにすることができたりとか?

例えば、

↓のようなbootstrap.js というファイルを作り

DB.connect((err, db) => {
  run();
});

mocha --delay -require bootstrap.js test と実行するとか。

これで、connect()の処理が終わるまでテストが動かないようにできるはず。

本当のところ

きちんとコードを書いていれば恐らくこの書き方は必要ないんじゃと思いますw

でも、某古めなプロジェクトで困ったコードがあり、これは使えるんじゃ?と思ったので記事にしました。

本日はこんなところで。

Perlのワンライナーでよく使うテクニック

あまり時間がないので5分で!

ファイルの中身を置換する

↓はカレントディレクトリ配下のJSファイルのfooという文字列をbar

perl -i -pe 's/foo/bar/' **/*.js

findと組み合わせたりもできます。 カレントディレクトリ配下のJSファイルのパスを置換をするために /が入るときはs{}{}の書き方にすると便利です。

find . -name '*.js' | xargs perl -i -pe 's{/tmp}{/var/log}'

マッチした行から必要なテキストだけを表示

echo 'var hoge = "foo";' | perl -lnE '/var (.+?) =/ && say $1'
# => hoge

みたいに書けます。

  • -lは改行の問題で悩まなくて済むようになるので、つけておきましょう。
  • -Esayが使えるのでちょっと楽ちん。

ESLintでWarningで引っかかっているルール名を抜き出す。

eslint . -f unix | perl -lnE 'm#Warning/(.+)\]# && say $1' | sort | uniq

awk的な使い方

  • -aをつけます。
  • これまた-lは改行の問題で悩まなくて済むようになるので、つけておきましょう。
echo 'a b c' | perl -lanE 'say $F[0]'
# => a

awkと違い、インデックスは0からで$F[0], $F[1]みたいに参照できます。

特定の文字列を含むプロセスを殺す! pkillが入ってない場合とかに使ってみてはいかがでしょうか。

ps aux | grep hoge | perl -lanE 'say $F[1]' | xargs kill

本日は

こんなところで。

ESLintでファイルの中身によって設定ファイルを切り替える

yukidarake.hateblo.jp

の続きで、実際やってみたという話です。

雑なメモですがご容赦ください。

ESLint plugin作成

ここではeslint-plugin-fooとしておきましょうか。

package.jsonとindex.jsを作ります。

eslint-plugin-fooという文字列があれば、.eslintrc2.ymlを使うようにします。

ソース

'use strict';
var eslint = require('eslint');
var alternativeCLIEngine = new eslint.CLIEngine({
  configFile: './.eslintrc2.yml',
});

function preprocess(text, filename) {
  if (!/eslint-plugin-foo/.test(text)) {
    return [text];
  }

  var config = alternativeCLIEngine.getConfigForFile(filename);

  var eslintRules = '/*eslint ' + Object.keys(config.rules).map(function(rule) {
    return rule + ':' + JSON.stringify(config.rules[rule]);
  }).join(',') + '*/';

  return [eslintRules + text];
}

function postprocess(messages) {
  return messages[0];
}

module.exports = {
  processors: {
    '.js': {
      preprocess: preprocess,
      postprocess: postprocess,
    },
  },
};

こんな感じ。

https://github.com/yukidarake/eslint-plugin-foo

ソースは↑にあげました。

仕組み

ファイルのどこかにeslint-plugin-fooがあれば、行頭に/*eslint no-var:0*/みたいに付けるという超力技。

動かしてみる

必要なモジュールのインストール

使いたいファイルのあるディレクトリで

npm i eslint
npm i yukidarake/eslint-plugin-foo

してください。

.eslintrcを2つ用意

.eslintrc.yml

---
root: true
plugins:
  - foo
rules:
  no-var: 2

.eslintrc2.yml

---
root: true
rules:
  no-var: 0

実行

これで準備は整いました!

a.js

// eslint-plugin-foo
var a = 1;

というファイルを使って、コメント行の文字列を消したり、戻したりしながら実行してみてください。

./node_modules/.bin/eslint a.js

結果

/private/tmp/a.js
  2:1  error  Unexpected var, use let or const instead  no-var

✖ 1 problem (1 error, 0 warnings)

と出たり出なかったり・・・

ソース中のテキストの有無によって.eslintrc.ymlと.eslintrc2.ymlを切り替えできているようです。

まとめ

この方法をうまいこと使えば同じディレクトリ内でES5とES2015のJSファイルが混在していてもうまいことチェックできたりするのでは?

というアイデアでした。

もっと良い方法や指摘事項等あればぜひ教えてください・・・

SVNの.svnディレクトリを一発で消す

2016年にSVN!?

しかも、Subversion 1.7より前の話!?
(1.7以降はルートにのみ.svnディレクトリがあるので今回みたいなことは起きない)

というのはさておき、困っていたデザイナーさんがいたので救いました
(あと、特に目新しい技術ネタもなかったので。。)

現象

他のディレクトリをまるっとコピーしたことで余計な.svnディレクトリが付いてきて、新しく作ったはずのディレクトリがコミットができない。

A/.svn
A/dir1
A/dir1/.svn
A/dir1/file1
A/dir1/file2

↑みたいなAディレクトリをBディレクトリとしてコピーしたら、.svnまでコピーしちゃったという感じ。

対応

一緒にコピーしてしまった.svnディレクトリだけを消してやると。

ターミナルでサクッと。

find . -type d -name '.svn' | xargs rm -r

本当は

find . -type d -name '.svn' -print0 | xargs -0 rm -r

とやったほうが安全だけど今回は端折りました。

上記のfindとxargsのコマンドの各オプションの意味は↓の記事が解説がしっかりしているのでオススメです。

findとxargsの基本的な使い方 -- ぺけみさお

Ansibleのshellモジュールでヒアドキュメントが使いたいときー

が、あると思います。

shellモジュールでヒアドキュメントを使うと・・・

github.com

コチラのissueにコメントがありましたが、

- shell: |
    cat <<EOT
    a
    b
    EOT

の結果は

 a
 b

(半角スペースがaとbの前に入る)

という。。

大半のケースでは大丈夫でしょうが、困る場合もあります。

対策

Ansibleのコアディベロッパーが推奨しているらしい方法

scriptモジュールを使う。

http://docs.ansible.com/ansible/script_module.html

ローカルにあるファイルをリモートに転送して実行してくれます。

例えば、

roles/common/file/script.sh
roles/common/task/main.yml

な構成をとっていた場合、roles/common/task/main.ymlでは

- script: script.sh

みたいに使えます。

これならAnsible特有の問題で嵌ることもないでしょう。

ワークアラウンド

発想の転換に感心してしまったのですが、sedを使って空白を取り除きますw

- shell: |
    sed 's/^ //' <<EOT | cat
    a
    b
    EOT

これで普通にヒアドキュメントをcatしたのと同じになると。

まとめ

ま、ほんとうは冪等性確保のために、shellモジュールもscriptモジュールも使うなということなのでしょうが・・・

どなたかの参考になれば幸いです。

Google Cloud Vision APIを試してみた

画像を送ったら、画像の中身を解析して、顔とか物とかを判別してJSONで返してくれるというヤツです。

昼休みにざっくりと触ってみたのでメモ。

下準備

こちらのブログが詳しく、大変参考にさせていただいたのでみてください(雑)

syncer.jp

ざっくりいうと

  1. GCPのプロジェクトを作成
  2. API ManagerからCloud Vision APIを有効化
  3. API キーを作成

というくらい。

料金表によると、月1000リクエストまでは無料っぽいですが、クラウド破産が怖い場合、上記の記事を参考にアラートを飛ぶようにしたほうがよいでしょう(私はアラートが飛ぶようにしましたw)

プログラム

APIキーを付けたCloud Vision APIのURLにbase64エンコードした画像ファイルをJSON形式でPOSTするだけです。

ワンライナーでもいけますが、見づらいのでシェルスクリプトにしておきました。

今回使用した画像はこちら(私のネット上でのアイコンです。スクリプト中のyukidarake.jpeg

f:id:nakimura:20160511192234j:plain

なお、風景写真から物を認識させるとか、人物写真から顔を認識させるのはfeaturesに指定した項目で変わるよう。

今回はLABEL_DETECTIONにしてみました(顔っぽいので、FACE_DETECTIONにしたら結果は空だった・・・)

#!/bin/bash
set -ue

BODY=$(cat <<JSON
{
  "requests": {
    "image":{
      "content": "$(base64 yukidarake.jpeg)"
    },
    "features": [
      {
        "type": "LABEL_DETECTION",
        "maxResults": 20
      }
    ]
  }
}
JSON
)

echo $BODY | curl \
  -H "Accept: application/json" \
  -H "Content-type: application/json" \
  -X POST \
  -d @- \
  https://vision.googleapis.com/v1/images:annotate?key=API_KEY

実行すると・・・

./vision.sh

こんな結果が。

{
  "responses": [
    {
      "labelAnnotations": [
        {
          "mid": "/m/0j272k5",
          "description": "eyewear",
          "score": 0.95789468
        },
        {
          "mid": "/m/0h8jxfl",
          "description": "vision care",
          "score": 0.93333292
        },
        {
          "mid": "/m/0jyfg",
          "description": "glasses",
          "score": 0.89535505
        },
        {
          "mid": "/m/0c_jw",
          "description": "furniture",
          "score": 0.84084433
        },
        {
          "mid": "/m/0b_rs",
          "description": "swimming pool",
          "score": 0.82729644
        },
        {
          "mid": "/m/04f6rz",
          "description": "turquoise",
          "score": 0.82495272
        },
        {
          "mid": "/m/0h8lg0g",
          "description": "eye glass accessory",
          "score": 0.799998
        },
        {
          "mid": "/m/02_n6y",
          "description": "goggles",
          "score": 0.77193254
        },
        {
          "mid": "/m/02crq1",
          "description": "couch",
          "score": 0.62357479
        },
        {
          "mid": "/m/01mzpv",
          "description": "chair",
          "score": 0.59412205
        }
      ]
    }
  ]
}

メガネは認識できているよう。

swimming pool って・・・

青っぽい画像のシマシマがスイムレーンだと誤って検出されたのでしょう。

まとめ

あんま例がよくなかった気がしますが、いろんな可能性が感じられて楽しいです。

実は、他の画像ではもうちょいうまく検出できました(著作権が気になったので自分のアイコンにしてしまいました。。)

興味持った方は、ぜひ、一度お試しください。