【個人開発】おもしろTikTok動画とにらめっこするアプリを作りました

はじめに

笑ってはいけない場面で笑いを堪えるのが苦手なので、耐性をつけるためにおもしろ動画とにらめっこするアプリを作りました。
短時間で笑えるゲームになっているので、気分転換に遊んでみて頂けると嬉しいです！

概要

1. にらめっこゲーム機能

おもしろTikTok動画とにらめっこするゲーム機能です。
3〜5個の動画でプレイリストが組まれるので、笑いを堪えながら順に再生していきます。
現在以下3つのモードがあります。

• ノーマルモード：ランダムな5つの動画でプレイリストが組まれ、最終スコアを競うモード。
• 道場モード：最も笑われている最新ベストに挑むモード(※1)。
• リベンジモード：過去に笑ってしまった動画に再挑戦するモード(※1 ※2)。

2. おもしろ動画共有機能

笑えるTikTok動画を共有する機能です(※2)。
おもしろ動画を見つけて共有しましょう！
投稿した動画が最新ベスト入りを果たすと、総スコア(後述)が加算されます。

---

※1 一定値以上笑うとゲームオーバーになります。
※2 要ユーザー登録

使い方

にらめっこゲーム

ユーザー登録するとできること

1. おもしろビデオの投稿

2. ゲーム成績の振り返り

ユーザーページにはこれまでのゲームの総スコアと、取得タイトルとその数が表示され、振り返りができます。
また投稿したビデオが最新ベスト入りを果たすと、そのビデオが平均して笑われた程度に応じてスコアが加算されます。

他にも投稿ビデオ一覧表示、削除、ビデオの非表示設定などができるようになります。

主な使用技術

• フロントエンド
• Nuxt.js (v2.15.8)
• face-api.js (v0.22.2)
• vue-chartjs (v3.5.1)
• バックエンド
• Ruby on Rails (v6.1.4)
• omniauth(gem) (v1.9.1)

ER図

メインのテーブル

users：ユーザー情報
videos：TikTokビデオ情報

ゲーム関連

game_results：ゲーム結果
laughed_videos：どのユーザーがどの動画を見てどのくらい笑ったかを格納
hidden_videos：非表示設定動画情報

ユーザー通知関連

user_notifications：ユーザー通知内容
latest_top_records：最新ベスト入りした動画の投稿ユーザーにスコアを付与する用

その他

contacts：ご意見・ご要望

技術面の工夫

1. TikTok動画の表示切り替え

ゲームで次のTikTok動画を表示する際にTikTok埋め込み用JSを再読み込みしないとうまく表示されませんでした。
vuexで表示中アイテムのポインタを保持しておき、以下のようにフラグを用意して、scriptのasync bodyのtrue falseを切り替えることで再読み込みさせています。

<script>
export default {
  head() {
    const flg = this.itemsPointer % 2 == 0;
	return {
	  script: [
        {
		  type: "text/javascript",
		  src: "https://www.tiktok.com/embed.js",
		  async: flg,
		  body: flg,
		},
	  ],
	};
  },
  computed: {
	...mapGetters({
		itemsPointer: "video/itemsPointer",
	}),
  },
};
</script>

2. ゲーム結果の登録処理

ゲーム関連のテーブルのうち、game_resultsは1ゲームごとに必ず1レコードのみインサートされますが、その他2つのテーブルに関しては複数レコードをインサートする可能性があります。レコード数分フロント・バック間の通信が発生してしまうのを避けるため、それぞれに対応するCollectionモデルを用意し、一度の通信で複数レコードを登録しています。以下の記事を参考にしました。

3. ログイン機能

Omniauthを使っているので、フロントエンド、バックエンド間をリダイレクトで繋いでいるのですが、バックエンドで保存したセッションがうまく引き継がれなくて苦戦しました(axiosであれば問題なし)。セッションやクッキーの設定を色々変更したり、フロント、バックのサブドメインを揃えたりと試してみたのですが、うまく行きませんでした。一旦、外部プロバイダの認証後、フロントにリダイレクトしてから再度バックエンドにaxios通信した上でセッション情報を格納するようにしています。

おわりに

追加したい機能がいくつかあるので、改善しつつ運用していければと思っています。
ご要望、ご意見、不具合等ございましたらこちらからメッセージを頂けると助かります。よろしくお願いします！