ErgoDox買ったったった（そしてハウツーConfigurator）

ergodox

巷で話題のセパレートキーボード、ErgoDox買っちゃった俺マジ異端児。
こんばんわ、saihooooooooです。
フリースタイルラップのTV番組を見ながら記事を書いてしまいました。

という訳でErgoDoxですが、ご存知でしょうか。
ErgoDox is 何？という方は下記サイトを御覧ください。
自分もこの記事に触発されて買ったクチです。

nippondanji.blogspot.jp

もともと自分も無駄にガタイが良いためか肩こりがひどく、エルゴノミクスキーボードというものを知ってからは同じくセパレート型キーボードであるKinesis Freestyleを愛用していました。
Kinesis Freestyleはとても良い製品で特に不満も無かったのですが、ErgoDoxの「オープンソースキーボード」というイケてる響きにミーハーな僕は飛びついてしまいました。

買う

本来3Dプリンタやハンダごてを駆使して作り上げるErgoDoxですが、工作経験のない自分が一から組み立てるのは無理なので組み立てまでを行ってくれるFalbaTech社（在ポーランド）から買うことにしました。

falbatech.pl

あとキーキャップが売り切れだったため（今見たら普通に売ってた、、）PIMP MY KEYBOARDというサイトから別途買いました。

pimpmykeyboard.com

上記から「ErgoDox Base set」と「ErgoDox Modifier set」をそれぞれ購入。
青が好きなので選ぼうと思ったら同じ青でも4種類あったので、この辺の色見本を参考に「Blue (BDJ)」を選びました。

糞マニアックなキーボードにも理解ある妻からのバレンタインデープレゼントという名目だったので2/14に注文後、ErgoDox本体は2/26に、キーキャップの方は2/29にそれぞれ到着。
わりかし早かったでしょうか。

そして届いたのがこちら。

f:id:saihoooooooo:20160302010319j:plain:w600

THE・雑！！！！！
とりあえず剥いてみる。

f:id:saihoooooooo:20160302010333j:plain:w600

それっぽい箱が出てきました！
若干凹んですが気にしません！

f:id:saihoooooooo:20160302010346j:plain:w600

そしてついにErgoDoxとの対面！
ウォオォォォォォォ、テンションMAXXXXXXXXX！！！！

f:id:saihoooooooo:20160302010431j:plain:w300

あとなぜかおまけのおやつが同梱されていました！
不味そう！！！

この勢いでキーキャップを付けていきます。
チェリー軸なので＋に合うようにはめていくだけです。

f:id:saihoooooooo:20160302010405j:plain:w300

ホームポジションとなるFとJのキーは若干深め？に作られているようなので注意してください。
ちょっとわかりにくいですが、右がFとJ用のキーです。
そして、、。

f:id:saihoooooooo:20160302010415j:plain:w600

完成しました！！！！！
どうですかこの21世紀感。
やっぱり時代はオープンソースキーボードですね。
オープンソース最高。

設定する

さて、ここからはぼくがかんがえたさいきょうのキー設定を行っていきたいと思います。
ErgoDoxはキー設定を自由に入れ替えられることも大きな特徴です。

キー設定の手順は以下の通りです。

PCにTeensy Loaderをインストール
.hexファイルを生成
PCにErgoDoxを繋ぐ
Teensy LoaderにてErgoDoxに.hexファイルを読み込み＆再起動

まずここからTeensy Loaderをインストールします。
ご自身の環境に合ったものを選んでください。
Teensy Loader Application - available for Windows, Linux and Macintosh systems

で.hexファイルっていうのはあんまり聞いたことないですが、どうやら何かのテキストファイルを何かのコンパイラに通すことで出来上がるようです。
よくわからないので自動作成してくれるサービスを利用しました。

keyboard-configurator.massdrop.com

共同購入サイトのMassdropのアカウントさえあれば、設定を保存したりロードしたり.hexファイルをダウンロードしたり色々できるようです。
win用、mac用なんかを別々に保存しておけば都度サクッと書き換えや更新ができるので便利度高めです。

f:id:saihoooooooo:20160302031230p:plain:w600

僕はとりあえずこんな感じで設定しました。
これからもちょいちょい自分の手に馴染むように更新していくと思います。

.hexファイルをダウンロードしたら、PCにErgoDoxを繋いでTeensy Loaderを起動します。

f:id:saihoooooooo:20160302032049p:plain

起動するとまず「Press Button To Activate」と表示されます。
本来ならここで物理ボタンを押す必要があるのですが、ErgoDoxはキー押下で同じ命令を出すことが出来るようです。
さきほど.hexファイルを生成したレイアウト上で「Teensy」となっているキーを押します。
初期設定ではレイヤー2の一番左上のキーになります。

ちなみに新しいキー配置でこのキーを押せるように設定しておかないと次回から物理ボタンを押さなければならなくなるので要注意です。
僕が注文したケースは穴が開いてるのでボールペンとかで押せそうですが、ケースによっては分解しないといけないかも、、。

f:id:saihoooooooo:20160302032139p:plain

これで準備が整いました。

f:id:saihoooooooo:20160302032116p:plain

つづいて上記のボタンで.hexファイルを開きます。

f:id:saihoooooooo:20160302032204p:plain

開いたら上記のボタンでErgoDoxに読み込み。

f:id:saihoooooooo:20160302032217p:plain

読み込みdone。

f:id:saihoooooooo:20160302032225p:plain

その後上記のボタンで再起動を行います。

f:id:saihoooooooo:20160302032234p:plain

これで無事キー設定が完了しました！
お疲れ様でした。
思う存分キーを叩いてください。

まとめ

まだ使い始めて1日そこらなので不慣れなことも多いですが、とにかくすごく捗りそうです。
キーボードによる肩こりの激しい方、自由なキー配置を求めてやまない方は幸せになること間違いなしです。
ErgoDoxマジでヤバイYO！（サーセン）

2016-02-06

スプラトゥーンのブキ抽選ツール「イカすロット」を作った with Meteor

splatoon meteor

全国100万人のスプラトゥーンガチ勢の皆さん、イカがお過ごしでしょうか。

僕はここ最近プラベ・タッグをよくやっています。
特にプラベ、いいですよね。
VCしながらワイワイ、勝っても負けても楽しくって、味方ガー！って胃に穴が空くこともない（戦犯は自分）。

今回そのプラベを更に楽しむための、スプラトゥーンのブキ抽選ツール「イカすロット」をリリースしました。

作った

ikasu-lot.saihoooooooo.org

画面はこんな感じ。

f:id:saihoooooooo:20160206113344p:plain

イカすロットの特徴は次の4点です。

最大8人同時のブキ抽選
全ブキ、サブウェポンベース、スペシャルウェポンベース、カテゴリの4種類の抽選タイプ
ルール抽選機能もあり
部屋のURLを共有することで同じページを見ている人とは抽選結果がリアルタイムに更新される

特に気に入ってるのが4番目の「部屋のURLを共有することで同じページを見ている人とは抽選結果がリアルタイムに更新される」です。
似たようなツールは既に存在していて、おおこれは便利と思ったものの共有の方法がスクリーンショットを撮って送る、とかでちょっと使いづらいなと思っていました。

また応用的な使い方として名前欄に「アルファチーム」、「ブラボーチーム」などと入力すればチーム単位でのブキ縛りをすることも可能です。
チャージャー4人vsローラー4人とか面白いんじゃないでしょうか。
もちろん名前をひとつだけ入力して、おみくじ感覚で今日のガチ仕様ブキを選んでいただいても構いません。

プラベ楽しいけど若干マンネリを感じている方、得意ブキに拘らず色んなブキを使ってみたい方は是非使ってみてください。

・
・
・

Meteorでの開発

さて、ここからは開発の話。
特に興味のない方は読む必要ありません。

使った技術

Meteor

これだけ、さすがフルスタック。
あとは強いて言うならデザインにMaterializeを使っているぐらいでしょうか。
Meteorは存在だけは知ってて使ってみたいなとは思ってたところ、今回の要件にバッチシはまったので採用することにしました。
（最初はexpress＋socket.ioとかでやろうかとやんわり考えていました。）

Meteorの良いところ

フルスタック（さらにMongoDBも内蔵！）なのでインストールしてすぐ使える
DBやセッションのデータを更新するだけでviewにはリアクティブに反映される
ライブリロードも設定いらず
PaaSも用意されてる（！）ので小さいサービスならHerokuとかに金払わなくていい
専用のパッケージシステム（Atmosphere）も用意されてる

Meteorの悪いところ

フルスタックなのでMeteor全てに依存する
デプロイが差分更新でないのでちょっとの修正でも時間がかかる（browserifyのWatchifyみたいなのが欲しい）
npmがそのまま使えない（使えるようにするパッケージはある）
日本語の記事が少ないので英語力が低いとつらい

まぁ今回は極小サービスなので特に目立ったデメリットもなく楽しく開発できました。
実際の製品としての開発ならどうなんだろう、もうちょっと使い倒してみないとなんとも言えないですが、まだ時は来ていないのかもしれない。
やっぱこれも規模によるかな。

使ったパッケージ

最後に使ったパッケージをちょろっと書いておきます。

iron:router

基本。
ルーティングに使います。

Router.configure({
  layoutTemplate: 'layout',
  notFoundTemplate: 'notfound'
});

Router.route('/', function () {
  this.render('home');
});

Router.route('/article/:_id', {
  loadingTemplate: 'loading',
  waitOn: function () {
    return Meteor.subscribe('articles', this.params._id);
  },
  action: function () {
    this.render('article', {data: Articles.findOne()});
  }
});

mrt:moment-timezone

moment-timezoneのMeteor版。
使い方は特に変わらず。

moment().tz('Asia/Tokyo').format(); // 2016-02-06T04:00:00+09:00

mrt:cron

Meteor内でcron処理を実現できるパッケージ。

Meteor.startup(function () {
  var helloWorld = function () {
    console.log('hello world');
  }
  new Meteor.Cron({
    events: {
      "0 * * * *": helloWorld
    }
  });
});

sacha:spin

spin.jsのMeteor版。
こんなテンプレートを作って、上記iron:routerのloadingTemplateに指定してます。

<template name="loading">
  <div class="container">
    {{>spinner}}
  </div>
</template>

random

ランダムに関するパッケージ。

Random.id(10); // "Jjwjg6gouW"

Random.choice([1, 2, 3, 4, 5, 6]); // 6

check

簡易な値チェック。

Meteor.publish("chats-in-room", function (roomId) {
  check(roomId, String);
  return Chats.find({room: roomId});
});

spiderable

Meteorは基本bodyタグの中身がなく、サーバからのレスポンスでbody内をレンダリングしています。
これをクローラが見るとbody内が空のページだと認識されてしまうので、回避するためにこのパッケージを導入します。
ローカルで試す場合はphantomjsが必要（デプロイ先には用意済み）。

<head>
  <title>simple-todos</title>
  <meta name="fragment" content="!">
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Welcome to Meteor!</h1>
</template>

この状態でhttp://your-domain.com/?_escaped_fragment_=にアクセスしてソースを確認した時にbodyタグ内が補完されていれば成功です。

materialize:materialize

MaterializeのMeteor用パッケージ。
特に何もしなくても入れさえすれば使えます。

まとめ

ダラダラと書いてきましたがイカすロット結構満足のいくものが出来たと思っております。
もしよければ使ってみてください！
Meteorも楽しいよ！

2015-12-25

hubotでslackにスタンプ機能を追加してみた

slack hubot

slack Advent Calendar 2015 の25日目の記事になります。

はじめに

つい最近触れる機会がありちょろちょろっと使っているのですがいいですねslack。
見た目もいいし、アプリとの連携とか、コードスニペットを貼れたりとか。
また僕が特に気に入ってるものとしてemoji機能があります。
感情を一発で表現できるし自分で好きなemojiを登録することもできます。

ただこれもうちょっと大きく表示したいなー、って時がありまして、そうLINEのスタンプの様に。
この辺については去年のアドカレでも触れられているのですがまた別のアプローチで攻めてみたいと思います。

というわけで作った

github.com

インストール

$ npm install hubot-slack-stamp
$ vim external-scripts.json # 配列内に"hubot-slack-stamp"を追加

必要なもの

hubot
Node.js >= v4.0.0 (or --harmony or --harmony-generators flag)
PhantomJS
ImageMagick

設定

HUBOT_SLACK_STAMP_TEAM_NAME - slackのチーム名
HUBOT_SLACK_STAMP_EMAIL - ログイン用のメールアドレス
HUBOT_SLACK_STAMP_PASSWORD - ログイン用のパスワード

使ってみよう

チャンネル内のhubotに対してスタンプ名と画像URL、そして分割数を入力することでスタンプが登録されます。

hubot makestamp <name(a-z,0-9,_,-)> <image_url> <split_num(2-10)>

例としてはこんな感じ。

f:id:saihoooooooo:20151225030624p:plain

登録したスタンプを表示させる時は

hubot stamp <name(a-z,0-9,_,-)>

とします。
さっき登録したmarieちゃんを呼び出してみましょう。

f:id:saihoooooooo:20151225030636p:plain

いい感じですね！！

動作原理

slackのemojiは連続で入力すると特にパディングやマージンもなくピッチリ隙間なく表示されます。
この動きを利用して、

指定されたURLの画像を取得
画像をタイル上に分割
分割した画像を一枚一枚登録
綺麗に並べて表示

ということを行っています。
今回の例でいうと実際の文字列は以下のようになっています。

:marie_3x3_1-1::marie_3x3_1-2::marie_3x3_1-3:
:marie_3x3_2-1::marie_3x3_2-2::marie_3x3_2-3:
:marie_3x3_3-1::marie_3x3_3-2::marie_3x3_3-3:

emojiのカスタマイズページに行くと分割された画像が登録されているのがわかりますね。

f:id:saihoooooooo:20151225030640p:plain

イラスト： http://seiga.nicovideo.jp/seiga/im4981228

苦労した点、課題

slackにはまだemoji登録のAPIがないのでphantomjsを使ってスクレイピングするのがちょっとつらみでした。
はよこいAPI。
参考URL：oti/slack-reaction-decomoji · GitHub

あと課題としては一応スタンプの削除機能も用意しているのですがこれがまた遅い。。
正直5x5枚の削除とかになってくると遅すぎて嫌になってきます。
この辺も整備したかったのですがちょっと時間が足りなかったのでまた公開後に。。

プルリクも絶賛お待ちしております。

おまけ

今回のスクリプトは企業対抗スプラトゥーン大会ことSplathon（スプラソン）の連絡事項をslack上で交わしている際に皆のemojiのやりとりを見て思いつきました。
githubのリポジトリもsplathon名義であげています。
スプラトゥーンも楽しめて開発も楽しめるsplathon、最高すぎるぜ！
第2回（締め切り済み？）、第3回と予定しているようなので気になった方はチェックしてみてください。

最後に

今日は楽しいクリスマス〜♪
ということで12/25になりました。
slack Advent Calendar 2015を書かれた皆さん、お疲れ様でした。
それではHave a nice Xmas!!!!!

2015-12-11

skypeでp2p窓を作る自分用メモ

hubot

f:id:saihoooooooo:20151210170706p:plain:w200

僕が使ってるチャットツールはずーっとskypeです。
slackとかhipchatではありません、skypeです。

skypeってアレです「I’m indifferent. Slack/Hipchat. I don’t give a shit as long as it’s not Skype.（私は無関心です。たるみ/Hipchat。それがSkypeでない限り、私は全然構いません。（Yahoo!翻訳ママ））」に27%も投票されてしまうアレです。
たるみよりはマシだろうと思ってたけどそうでもないみたいです。

まぁ個人的にはそこまで恨み辛みも無いんですが、bot周りに少々難がありまして。
以前まではチャットがp2pベースで動いていたのにいつの間にかクラウドベースになってるんですね。
僕はhubotが好きで使っているのですが、それによってskype用アダプタが使えなくなってしまいました。
README.mdの先頭にもでかでかとWARNINGって書いてますね。

p2p時代に作られた部屋なら正常に動くので、古い部屋を使いまわしたりしてたんですがそのうち限界が出てきます。
そんなある日、ふとgoogle先生に聞いてみるとなんと今でもp2p部屋が作れるそうです。
えっ。

community.skype.com

その方法はどこの部屋でもいいからチャット欄に以下のコマンドを打つだけ。

/createmoderatedchat

空の部屋ができるのでそこにbotを呼びましょう。
そしたらあら不思議。

f:id:saihoooooooo:20151210165747p:plain

久しぶりじゃねぇかおめえ。
このあと滅茶苦茶（ｒｙ

2015-12-10

jenkinsでデーモン的な

jenkins

#!/bin/bash -ex

# nohupで起動したプロセスを殺さないようにBUILD_ID=dontKillMeをつける
# https://wiki.jenkins-ci.org/display/JENKINS/ProcessTreeKiller
BUILD_ID=dontKillMe nohup java -jar hogehoge.jar >/dev/null 2>&1 &

ドンキルミー！ドンキルミー！