8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

11月末にリリースされたばかりのReactベースの最新フルスタックフレームワーク「Remix」を使って、小規模アプリを作ってみたかった

Last updated at Posted at 2021-12-08

はじめに

はじめまして!
会社員やりつつ、趣味で個人開発を行っております。
フロントエンジニアのふぁると申します。

【Twitterリンク】
https://twitter.com/@fal_engineer

Remixについて

Remixとは、2021/11/23にOSSとしてリリースされたばかりの、Reactをベースにした新しいフルスタックフレームワークです。
Reactベースのフレームワークというと、Next.jsがスタンダードですが、RemixはNext.jsやGatsbyとは一線を画す設計思想となっています。
具体的には、SSG(静的HTMLを予めジェネレートし、ブラウザにはHTMLを配信する形式)を撤廃し、SSR(サーバーにレンダリングの責務を持たせる方式)、ブラウザのFetchAPI等のエコシステムを利用し処理・描画速度の向上を図っています。

作ったアプリ

動画を「探す」のではなく、「見つける」サービス

image.png
image.png

テキストボックスに八文字の文字を入力し、「動画を見つける」をクリックすることで、Youtubeから適当な動画を一つ拾ってくるというアプリです。
YouTubeAPIv3を利用しています。

入力された文字と、ヒットする動画に関連性はないのですが、ヒットする動画はランダムではありません。
入力された八文字を全て文字コードにコンバートし、文字コード同士の四則演算を行い、最終的に五文字の「サーチワード」を生成しています。

動画がヒットした場合は、取得した動画のVideoIdというパラメータをiframeにセットし再生ウィンドウを生成します。

設計思想

imgurという画像のアップローダがあります。
imgurは某掲示板ではデファクトスタンダードとして利用されていたのですが、アップロードされているファイルのimgur内でのURLのid部分に適当な文字を入れて、「一番面白い画像出てきた奴の勝ちな!」みたいなゲームが盛り上がっていたことを思い出しました。
あれをやりたかったんです。

なぜクソアプリとなったのか。作り込まなかったのか。

YoutubeAPIv3は、APIキーをgoogleアカウントに紐づけて利用するのですが、
APIを利用するにあたり、週あたりの利用限度が設けられています。
利用限度が週では10,000クォーターで、チャンネルの情報の取得や、idから動画を見つける、といったAPIは1クォーター程度しか使われません。
しかし、このTubeMixで使っているAPIは検索ワードを元にsearchするもので、それだけなんと100クォーターも消費されてしまうのです。
TubeMixは、動画がヒットするとも限らないのに、100回使えば一週間誰も使えなくなるという仕様なのです。

本当はランキング機能を実装してみたり、イベントを開催したりして遊びたかったのですが、これではいけません。
そもそもの仕様に問題があるのです。

タイトルの意味

Remixの話を最初に挙げましたが、もちろんこのアプリもRemixで作り始めました。
Remixの開発サーバーではきちんと動いたのですが、なんと、Netlifyにデプロイしようとすると何度やり直してもコケるのです。
Vercelや別のサーバーにデプロイ等も考えはしたのですが、収益化も大して望んでいない(YoutubeAPIの利用規約では、動画がメインのコンテンツであるサービスでの商用利用は出来ない事になっています)小規模アプリですし、結局そんなことするくらいならReactにコンバートしてさっさと安全にNetlifyにデプロイしてしまおうと思いました。
結局、「imgurスレみたいに皆で面白い動画見つける遊びやりたい」、「Remixでサービスをローンチまで持っていきたい」の片方すら叶わなかったのです。

クォーター上限を引き上げる申請プラットフォームもあるにはあるのですが、中々承認されにくいと聞きますし、そこまで育てたいサービスでも無いので、クソアプリアドベントカレンダーのネタとして供養しようと思いました。

以上です。お目汚し失礼しました!

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?