スプラトゥーンのブキ抽選ツール「イカすロット」を作った with Meteor
全国100万人のスプラトゥーンガチ勢の皆さん、イカがお過ごしでしょうか。
僕はここ最近プラベ・タッグをよくやっています。
特にプラベ、いいですよね。
VCしながらワイワイ、勝っても負けても楽しくって、味方ガー!って胃に穴が空くこともない(戦犯は自分)。
今回そのプラベを更に楽しむための、スプラトゥーンのブキ抽選ツール「イカすロット」をリリースしました。
作った
画面はこんな感じ。
イカすロットの特徴は次の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のスタンプの様に。
この辺については去年のアドカレでも触れられているのですがまた別のアプローチで攻めてみたいと思います。
というわけで作った
インストール
$ 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)>
例としてはこんな感じ。
登録したスタンプを表示させる時は
hubot stamp <name(a-z,0-9,_,-)>
とします。
さっき登録したmarieちゃんを呼び出してみましょう。
いい感じですね!!
動作原理
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のカスタマイズページに行くと分割された画像が登録されているのがわかりますね。
苦労した点、課題
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窓を作る自分用メモ
僕が使ってるチャットツールはずーっと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部屋が作れるそうです。
えっ。
その方法はどこの部屋でもいいからチャット欄に以下のコマンドを打つだけ。
/createmoderatedchat
空の部屋ができるのでそこにbotを呼びましょう。
そしたらあら不思議。
久しぶりじゃねぇかおめえ。
このあと滅茶苦茶(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 &
ドンキルミー!ドンキルミー!
phpスクリプトが最終行まで到達しているのにSEGVる件
全く意味がわからず糞ハマってしまった。
phpでバッチ処理を書いてたら突如「セグメンテーション違反です」と言われる。
にも関わらず処理は完了している???という謎の状況。
どうやらスクリプト自体は最終行まで到達しているようだが・・・。
Segmentation fault at end of PHP script | LogikDevelopment
色々探した結果上記のサイトに辿り着いた。
要はPHPがsoファイルを読み込むとき、mysql.soの前にcurl.soを読むと最後にSEGVる、と。
自分はRedshift使ってる時にハマったので試しにpgsql.soの後にcurl.soを読み込むようにしたところセグメンテーション違反は発生しなくなった。
単純にファイル名順に読み込んでるっぽいので下記で対応。
$ cd /etc/php.d $ cat {mysql,pgsql,curl}.ini > zz_mysql_pgsql_curl.ini $ mv curl.ini{,_bk} $ mv mysql.ini{,_bk} $ mv pgsql.ini{,_bk}
なんでこんなドバグな挙動が残っているんだろうかよくわからんけど、とりあえずよし。