【チーム開発】お笑いWebサービス「Tendon」を公開します！ 〜一般編〜

はじめに

こんにちは、@yomo93 です。
今回は友人達とチームを組み、独学でお笑いについてのWebサービスを開発してきました！

メンバーは3人程度(@tkryy , @KokumaruGarasu , @yomo93)でそのうち2人(私を含む)が開発初心者だったので、勉強も兼ねてという形での公開です、温かい目で見てください...
経験者である@KokumaruGarasu氏に教えてもらう形でした。ありがとう！！！
この記事を読んでくださっている皆さんからもアドバイス等あれば是非教えていただきたいです！お願いします。

【チーム開発】お笑いWebサービス「Tendon」を公開します！　〜技術編〜も合わせてご覧いただけると幸いです。

概要

今回開発したサービスはお笑い芸人紹介サービス「Tendon」です！
(リンクはこちら: https://tendon-psi.vercel.app/)

このサービスは 「好きなお笑い芸人はいるけど、その芸人以外わからない」 という人向けに、芸人さんの傾向から別の芸人さんを紹介することで好きな芸人さんを増やしてもらうことを目的としています！
ロゴ作成: @KokumaruGarasu

ターゲット

• お笑いファンになりたての人(お笑い芸人の知識がない)
• お笑いライト勢(お笑い芸人の知識が少ない)

解決できる課題

• お笑い芸人側: 若手芸人さんが知ってもらう機会が少ないという課題
• コンテンツ利用者側: 好きな芸人さんを増やしたいという課題

使い方

主な機能は以下の4つです。

1. おすすめ機能 (メイン)
2. 検索機能
3. お気に入り機能
4. お問い合わせ機能

お気に入り機能はGoogleアカウントでログインすることで各機能が使えるようになります。

1. おすすめ機能

(正確な)芸人名を入力するとその芸人に類似した芸風の芸人を出力してくれます！

下のように入力し、実行を押します。

すると、以下のように類似芸人を紹介してくれます！

2. 検索機能

キーワードを入力するとそのキーワードを芸名に含む芸人を出力します！さらに、芸風絞りボタンによって、芸風を絞った検索ができます。

• 漫才/漫談 ボタン
  漫才をしているコンビ(トリオ)または漫談をするピン芸人に絞ることができます。
• コント ボタン
  コントをするコンビ(トリオ)またはピン芸人に絞ることができます。
• ピン芸 ボタン
  ピン芸人または1人でもピン芸で結果を残しているコンビ(トリオ)に絞ることができます。
  (ここはややこしいので仕様変更する可能性があります)
• リズム/歌 ボタン
  リズムネタ・歌ネタを得意とする芸人絞ることができます。
• ギャグ ボタン
  ギャグが得意な芸人に絞ることができます。
• 大喜利 ボタン
  大喜利が得意な芸人に絞ることができます。
• ものまね ボタン
  ものまねが得意な芸人に絞ることができます。
  どんなに似ていないものまねでも、笑いを取れるものまねを対象としています。
• トーク ボタン
  平場でのトークやラジオで実力を発揮している芸人に絞ることができます。
• SNS ボタン
  SNSでバズっていたり、YouTube・TikTokの登録者数が多い芸人に絞ることができます。

検索の流れ

下のようにキーワードを入れます

次に芸風を選択し、検索ボタンを押します

キーワードと芸風にマッチした結果が表示されます！検索はひらがなで探索しています。今回ならば「こう」という音が名前に入った芸人さんが出力されます。

3. お気に入り機能

自分の好きな芸人を記録しておくためのお気に入り機能も作成しました！
Googleアカウント登録してログインしている人だけがこの機能を使うことができます。

以下のように、各機能でお気に入りボタンを使えるようにしています。
ボタンを押すと塗りつぶされるのでお気に入りページへ移動してみましょう！

お気に入りページでは自分がお気に入り登録した芸人さんのリストを見ることができます。

芸人さんの名前を押すと、個別ページへ進むことができます！
ここでは芸人さんのネタ動画、紹介、SNSへのリンクなどが確認できます。
まだデータ数が足りていない部分もあるので、その場合は随時追加されるのをお待ちいただけると幸いです。

4. お問い合わせ機能

芸人データベースを作っているとはいえ、流石に世の中の芸人全てをカバーできません。そこで、ユーザが芸人さんについての情報を提供できるようにすることが品質向上に必須だと思い、この機能にも力を入れました。
また、サイト上のバグなどの連絡ももらえるように"お問い合わせ"という形にしました。
ランディングページよりお問い合わせできます。

現時点で芸人データは主に以下の芸人を保存しています。

• 旧M-1 準決勝以上の結果を出している
• 新M-1 3回戦以上の結果を出している
• THE MANZAI(賞レース) 認定漫才師になっている
• KOC 準決勝以上の結果を出している(2019以降の準々決勝進出者)
• R-1 決勝進出している
• (大阪)吉本漫才劇場 翔・極メンバー

今後追加する予定の芸人

• 吉本新喜劇メンバー
• 漫才協会所属芸人
• KOC 準々決勝進出芸人 (2018以前)
• R-1 準決勝進出芸人 (2021以前)
• その他

技術的な話

ここからは実装等の技術についての話をします。
より詳しい内容は【チーム開発】お笑いWebサービス「Tendon」を公開します！　〜技術編〜に記載しています。

使用技術 ・ システム構成

• フロントエンド
  • Next.js 13 (TypeScript)
    選定理由は話題のNext.js 13が使ってみたかったから
  • Tailwind CSS
    選定理由は使い易い、便利と直感的に思ったから
• バックエンド
  • Python (Gradio)
    私達初心者がPythonに慣れているから
    おすすめ芸人を紹介する際の分類をPythonで行っているから
  • SQLite3
    SQLiteは無料でPythonと連携し易いから
    私が使用経験があったことも大きいです。でも、そのうちMySQLにするかも
  • Firebase
    ユーザ機能はGoogleアカウントが一番普及率が高いから
    Firebaseを使いたかったから

バックエンドではPythonとSQLite3の2つをGradioというサービスでAPI化させて、フロントエンドと連携させています。本来Gradioは機械学習モデルの共有に用いるためのサービスですが、その都合でPythonと相性が良かったので、このサービスを使うことにしました。このようにしてSQliteを無理やりバックエンド化させました。

おすすめ芸人紹介の仕組み

芸人さん達の傾向の類似性を出す必要があり、私が独自の項目を考えました。これは芸人個人として全てのネタに共通するものと漫才にだけ評価すべきもの、コントでだけ評価すべきもの、ピン芸の時だけ評価すべきものがそれぞれあると考えています。例えば漫才については正統派なネタをするか破天荒なネタをするかを評価することが出来ます。正統派を含めて7項目ほどを11段階(0~10)で評価しています。
評価項目は完全に素人考えなので、公開するのは恥ずかしいです！

これらの評価項目に対してクラスタリングやマンハッタン距離を用いて、類似芸人を選び出しました。詳しくは技術記事をご覧ください。

コントについて、ピン芸についての評価項目は現在検討中です。今はまだ機能として実装されていないので注意してください。

こだわりポイント

以下のような点にこだわって開発してきました。

1. UI・UX

結構細かくレスポンシブ対応しました。比較的みやすいサイトになったのかなと自負しています。
それ以外にもボタンを大きくしたり、見た目が気持ち悪くならないようにしたり、努力したつもりです。まだ気づかぬ使いにくさがあれば、どんどん修正していく所存ですので、お問い合わせください！

2. App Router

Next.js 13の目玉機能ですね。
サーバーサイドレダリングなど最初は意味がわからなかったのですが、Webの勉強をしていく中で革新的なことをしているのだなと気づいてちょっと感動しました。
他のシステムを使ったことがないので比較できないですが、全体的に速いです、画像の表示も早くて感動！

苦労した点

チームで開発していたので、それぞれ詰まった点は違いますが、地道に協力しながら解決していきました。
以下に示すものの他にもGitの扱いやGoogle認証機能の実装、アニメーション導入などで苦しんできました...

1.意思疎通

フロントエンド・バックエンドともに、個人開発と一番差があった点は処理などについての認識だと思います。他の人が書いた処理を理解するのに苦労しましたし、逆に説明するのにも苦労しました。
わかりやすいコーディング、大事...

2. API連携(Gradio)

Gradioはサイレントアップデートが多すぎる！
機能開発中にアップデートがあり、バージョン4系になった瞬間、環境変数を設定していても403で拒否される事態が発生しました。
それぞれの機能のバージョンを3系に揃えてやると上手く動作するようになりました。大変だった...

3. データ収集&作成

お笑いについてのデータ収集は私が一人で取り組みましたが、集めるべき情報が多すぎて大変でした。スクレイピングなども活用しましたが、サイトによって方法も変わるのであまり使い勝手は良くなかったです。ほとんど手作業でした...
なんならまだ全然データ足りていないので、今後もデータは追加していく予定です。

開発スパン

実際の企業とかだともっと早いのでしょうが、素人が開発にかかった期間として参考までに記録しておきます。7月は週1回、8月は週2回、9月以降は週1回、それぞれ3時間程度ミーティングをしました。それぞれが忙しかったため、作業時間がその3時間/週だけなんて週も結構にあったので、作業時間を確保できればもう少し早く公開できたという反省点はあります。

さいごに

今回は、お笑いWebサービス「Tendon」の紹介でした。
開発の中でたくさんの難しい壁にぶつかりましたが、チームで力を合わせて解決してきました！(主に@KokumaruGarasuの活躍が大きかったです) もちろん、それぞれの得意分野を活かしてそれぞれに活躍の場があって良かったです。チームに貢献できたら嬉しいんですよ...

一応、最低限の形として公開することはできましたが、まだまだ改善すべき点は多いと思います。特に、紹介機能と芸人データ数はまだまだ改善できます。これから運用していく中で定期的にアップデートしていくつもりなので、ぜひ何度も利用してみてください！
最終的にはお笑い界全体を包括するプラットフォームにしたい！！

アドバイス等もお待ちしております！
ここまで読んでくれてありがとうございました。

追伸
7月から開発ネタ会議を始めて12月まで開発に取り組んできたけど、@KokumaruGarasuが毎回オンラインミーティングにバ美肉してきてて、8月ごろには当たり前になって誰も触れなくなってたの、今思うとめっちゃおもろい。

参考文献

• 各芸人さんのWikipediaや所属事務所の個別ページ(膨大すぎてリンク貼れません)
• 各賞レース公式サイト(これもたくさんありすぎてリンク貼れません)
• 利用者は数十億人！？ SQLiteはどこが凄いデータベース管理システムなのか調べてみた -Qiita
• Next.jsで新規サービスを立ち上げるときの観点 - Zenn
• Next.jsのAPI Routesってどんなことができるのかを理解する
• Next.jsでカイブ画像を使用
• Next.js Imageコンポーネント
• Next.jsで外部リンクリダイレクトの実装方法
• Vercelにデプロイする方法
• 匿名でアニメの感想を話せるサイトを作ってみた - Zenn
• やり直しGit リモートリポジトリ - Zenn
• 【Git】ブランチの命名規則と開発効率化