全速前進ヨーソローを共有できるサイト youwatana.be を公開しました
2〜3年ぐらい前から youwatana.be (You Watanabe と読む) というドメインを取得しているんですが、内容もコンテンツも思いつかなかったのでただ「全速前進ヨーソロー！」とツイートできるボタンがおいてあるだけのサイトだったのですが、ボタン連打系のプログラムをつくったのでこのドメインで公開しました。
なんやかんや今までやってきたことを網羅できた感じになっているのと、部分的には新しいことの挑戦にもなっていたので、そのことについて書ければと。
そもそもどういうものなのか
業務上で Nuxt.js を触る機会があり、せっかくなので少し研究も兼ねて新規アプリとして作ってみたのが今回のものです。構想自体は結構前からあったんですが、やる気のなさがにじみ出て数年間温めていたのを数ヶ月で突貫して世に出したという感じですね。
パクリ元よく似たウェブサイトというと にゃんぱすーボタン なわけですが、 youwatana.be はクリック数の取得のためにREST APIのポーリングではなく（ほぼ）リアルタイムに通信するために Rails の ActionCable を使っています。なんでタブを2つ以上開いて片方からクリックすると数秒後にもう片方から増加分のクリック数の通知が来るようになっています。
ちなみに GitHub 上にソースコードは全部載せてますので、気になる人はどうぞ。
バックエンド側の話
バックエンドは Ruby on Rails を使っています。といってもほぼ ActionCable とか ActiveJob の Rails の副次機能しか使ってません。というのもユーザーのログインとかがあるわけでもないので、データベース上にも大した情報を持たせておらず、念の為ユーザートークンなどは発行してますが、大体の情報は Redis に乗せています。
Redis 上でデータを扱うには redis-objects という Gem が便利でした。ただ Redis 側の仕様をよく理解しないといけないので、 redis-objects がどういったふうに挙動するのかを地道に Redis のドキュメントと照らし合わせながらやっていくということが必要です。
あと ActionCable をちゃんと使ってみたのは今回が初めてでしたが、便利な反面、もしProductionで同時接続が1000件あった場合のことを考えると分散させるの難しいなという気持ちになったのでした。
フロントエンド側の話
作っていた時期が実際に業務で Nuxt.js (TypeScript) を使って開発していた時期とかぶっていたので、業務での体験から「こうしたほうがいい」であるだとか、逆にこちらの経験を業務側にフィードバックするとかができて、よかったです。
一番の鬼門なのは ActionCable とのつなぎこみでしょうか。 Nuxt.js から ActionCable への接続自体はどうとでもできはするんですが、クライアントのリソースの管理がどうあるのが適切なのかを考えるのが非常に難しかったんですが結局今もこれで良かったのかよくわかってません（該当のソースはこのあたり）。
あと ActionCable のドキュメントが割と雰囲気で書かれていたり、フロント側のライブラリは Rails 外の使用をあまり考えてなさそうだったので、読み取るのが結構大変でした。
流れている音声について
流石に音声を取り出してサイトのリソースとして配置するのは憚られたので、いろいろな配慮より YouTube の埋め込み(iframe) を外から操作できる IFrame Player API を使って、ボタンを押した際や更新のタイミングで見えなくしている iframe 埋め込みの再生位置を操作して音声だけが流れているように見せています。
これで「完全に権利者問題を解決したホワイトだ！」とは言いませんが…。
まとめ
ぜひ 全速前進ヨーソロー！(> ᴗ •)ゞ してみてくださいね
