2016-12-25

パーキンソン病などの手の震えを軽減させるウェアラブルデバイス

エンジニアプログラミング

パーキンソン病や本態性振戦の主な症状として「手の震え」があります。
食事の際には、食べ物を口に運ぶことが困難となり、それがストレスになり、食事が楽しめなくなってしまいます。

原因が不明の手のふるえや、パーキンソン病、脳梗塞などによる手の震えに悩んでいる方々は、日本国内だけでも数百万人いるといわれています。これらの症状に対して治療方法はまだ確立されていません。

手の震えに対して、テクノロジーを使ってサポートしている事例を２つご紹介します。

2016-08-25

node.jsでサブディレクトリまで一度に作成してくれるmkdirpが便利

javascript プログラミング

node.jsでディレクトリを再帰的に作成してくれるモジュールです。
"mkdir -p"コマンドを実行するのと同じです。

インストールは簡単。

npm install mkdirp

ディレクトリを作成するサンプルです。

const mkdirp = require('mkdirp');

mkdirp('./foo/bar/baz', err => {
    if (err) console.error(err)
    else console.log('success!')
});

地味に便利です。
github.com

2016-08-16

WebBluetoothAPIのW3Cドキュメントを翻訳しました

プログラミング WebBluetooth javascript

Web Bluetooth API 日本語ドキュメント
https://tkybpp.github.io/web-bluetooth-jp/

WebBluetoothAPIとは

このAPIは、ブラウザ上からBluetoothLE(BLE)デバイスを操作することが出来るAPIです。

2016-08-10

gitプロトコルをhttpsに固定して接続する(社内環境で便利)

プログラミング

gitに接続する時に下記のエラーが出る時の対処法

$ git clone git://github.com/xxx/xxx.git
fatal: unable to connect to github.com:
github.com[0: 192.30.252.130]: errno=Operation timed out

社内環境のファイアーウォールでgitプロトコルが許可されてない場合など、このエラーが発生します。
gitプロトコルを利用するとエラーが発生してしまうので、httpsを利用して接続するようgit configを設定します。

git config --global url."https://".insteadOf git://

または、.gitconfigに直接指定もできます。

~/.gitconfig

[url "https://"]
    insteadOf = git://

2016-07-29

Elixir/Phoenix で SSL をローカルホストから利用する手順

プログラミング Elixir

調べたのでメモしておきます。

1.証明書の作成

# generate key
$ openssl genrsa -out localhost.key 2048
# generate cert
$ openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost

2016-07-26

ドナルド・トランプ氏をイメージしたプログラミング言語「TrumpScript」が滅茶苦茶すぎる

小ネタプログラミング

アメリカ大統領選挙候補者であるドナルド・トランプ氏をイメージした
Pythonベースのプログラミング言語「TrumpScript」が公開されています。
特徴が滅茶苦茶だったのでご紹介します。
GitHub - samshadwell/TrumpScript: Make Python great again

どうやら米ライス大学の24時間ハッカソンで作られたようです。
ハッカソンでの優勝は逃したものの、日々issueにバグ報告が上がっており、
よりトランプ氏らしくなるように改善がされているようです。

特徴

浮動小数点型は使えず整数のみ。アメリカは中途半端なことはしない。
数値は100万より大きくなくてはいけない。それより小さい数字は取るに足らない。
importは使えない。全てのコードはアメリカ製でなければならない。
True,Falseの代わりにfact,lieを使う。
変数名に使えるのは最も一般的な英単語、トランプ氏の好きな単語、現在の政治家の名前のみ。
エラーメッセージはトランプ氏の言葉からの引用。
全てのプログラムは"America is great"で終わる必要がある。
45億は100億に自動的に修正される。
Windowsでは動かない。なぜならトランプ氏はPCを信じるような人ではないから。（PC：パソコンとPolitically Correct：政治的正しさ、のかけ）
大文字と小文字は区別しない。
中国やメキシコから実行してもコンパイルされない。アメリカの秘密事項を盗まれたくないからだ。
共産主義のなりすまし(中国製のSSL証明書)がシステムにあると警告される。
root権限では動かない。アメリカに必要なのはトランプ氏だけである。

2016-07-13

jsでスクリーンショットを比較してデザインデグレの自動検出をする

javascript プログラミング

E2Eテストの自動化にトライしてみました。
今回はUIの細かい挙動のテストではなく、デザインのデグレ検出にフォーカスをしています。

Webデザインにおいて1pxへのこだわりは非常に重要です。大規模なサービスになると、1pxの違いで数億円の売上に影響することも珍しくありません。
www.nikkei.com

複数人のチームで開発を進めていて、意図せずデザインのデグレが発生していまうことがあります。この時、1px単位のごくわずかな差分の場合、肉眼では見落としてしまいがちです。しかしながら1pxの差が事業に影響を与える可能性があるので、デザインのデグレは防ぐ必要があります。

今回はUIの差分を自動検知する簡易ツールを作成してみます。
nightwatch.jsとresemble.jsを利用します。
・Nightwatch.js | Node.js powered End-to-End testing framework
・Resemble.js : Image analysis

実装に入る前に、どれほどの精度で差分が検出できるのかお見せします。

nightwatch.jsの公式サイトでサンプルを用意してみました。
（今回はサンプルのため意図的に変更しています。）
beforeとafterで5箇所の差分が発生していますが、わかりますか？

# before

f:id:tky_bpp:20160712170619p:plain

# after

f:id:tky_bpp:20160712170609p:plain

いかがでしょうか？
ここで、beforeとafterの画像をresemble.jsを使って比較をしてみます。
そうすると、2つの画像の差分をこのように検出することができるのです。

# answer

f:id:tky_bpp:20160712170554p:plain

５つの差分は

左上のロゴの位置が2pxずれた
右上のHomeリンクからアンダーラインが消えた
画面中央の「Write End-to-End〜」の文章がボールドになった
Downloadボタンの幅が狭くなった
画面下部の「Nightwatch.js is an easy〜」の文章のフォントカラーが変わった

でした。

細かい。

こんな細かい差分なら放っておいてもいいじゃん、という人もいます。
しかしながら、インターネットの世界では1pxの差分が数億円を左右することに繋がるのです。
とはいえ、こんな細かいところまで差分が無いか人力で確認しようとすればとても労力が必要になります。
肉眼だと気付きにくい差分でも自動化してしまえば一瞬ですね。

実装

２つの要素から構成しています。
nighwatch.js　→　画面のスクリーンショットを保存する
resemble →　スクリーンショットを比較して差分を検出する

スクリーンショットの保存はnighwatch.jsを利用すれば簡単にできます。
対象のURLを指定して、saveScreenshotを実行するだけです。

'Sample test' : function (browser) {
    browser
      .url('http://nightwatchjs.org/')
      .saveScreenshot('example.png')
      .end();
}

これを日次やコミット毎など定期的に実行するようにすれば便利です。

そして、画像ファイルの比較はresembleを利用してこのように書きます。

const fs = require('fs');
const resemble = require('node-resemble-js');

const file1 = Buffer(fs.readFileSync('file_path_to_before.png'));
const file2 = Buffer(fs.readFileSync('file_path_to_after.png'));

resemble.outputSettings({ transparency: 0.1 });
resemble(file1).compareTo(file2).onComplete( data => {
    if(data.misMatchPercentage >= 0.01) {
        data.getDiffImage().pack().pipe(fs.createWriteStream('file_path_to_diff.png'));
    }
});

比較結果はonComplete()の中で扱うことが出来ます。
差分の割合がmisMatchPercentageとして格納されているので、一定の割合で差分があった場合のみ処理をすることも簡単に出来ます。
また、差分の画像データもgetDiffImage()を利用して取得できるので、外部ファイルとして保存することが出来ます。