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