ErgoDox買ったったった(そしてハウツーConfigurator)

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

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

nippondanji.blogspot.jp

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

続きを読む

スプラトゥーンのブキ抽選ツール「イカすロット」を作った with 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も楽しいよ!

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

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

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

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

: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!!!!!

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

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

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

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 &

ドンキルミー!ドンキルミー!