LoginSignup
6
8
@saku_it(Saku)

【個人開発】VTuberの発見と布教が出来るWebアプリを作りました

Posted at

はじめに

初めてのWebアプリケーション開発をしてみました。
名前はにゅーぶい！です。

どのようなものか書きます。

どのようなアプリか

簡単な紹介

ファンは自分がまだ知らないVTuberの発見と布教、VTuberはファンの獲得が出来ることを目指したサービスです。

想い

VTuberという文化が生まれてから久しく、現在では数えきれないほどVTuberがいます。
そのため、自分のタイプや好みに合うまだ知らないVTuberがきっと多くいます。
そこで、VTuberのプロフィール閲覧/作成を行えるサービスがあれば、より楽しい推し活に繋がると思い、本アプリの開発をしました。

使い方

文字のみ

一部ユーザー登録の必要なものがありますが、登録やログイン等の記述は割愛します。

最低限の使い方は下記の2つです。
①　一覧から気になるVTuberを押す
②　プロフィールを見る

上記に加えて、下記の使い方もすると少し豊かになります。
・　ご自身の好きなVTuberのプロフィールが無い場合は作成する（要ユーザー登録）
・　VTuberのプロフィールに変更や誤りがあった場合に編集する（要ユーザー登録）
・　ご自身が気にするワードで、それに当てはまるVTuberを検索する
・　気になるVTuberを、そのプロフィールページで「いいね」する（要ユーザー登録）
・　プロフィールページでコメントを投稿する（要ユーザー登録）

文字 + 画像

上記のそれぞれについてもう少し触れた内容を、開発環境ではありますが実際の画面のスクリーンショットを添えて改めて書きます。

一覧から気になるVTuberを押す

トップページです。
ここにVTuberのアイコン画像と名前が表示されます。
ここから気になる方を押します。
0ade119979c66cb2a2fa3d417565e25b.png

プロフィールを見る

配信場所やX、プロフィール項目が表示されるので、ここでどういったVTuberかを知ることが出来ます。
64352424e1662d7c676520db8199916f.png

ご自身の好きなVTuberのプロフィールが無い場合は作成する

プロフィールはユーザ様が作成しますので、ご自身の推しがまだ登録されていないこともあります。
その時は、ご自身でプロフィールを作成して布教することが出来ます。
これはユーザ登録をしていただく必要があり、ログインまでした状態で行います。

1.　右上の設定を押します。
7846db1c8f26787e856cb872d1c18d1c.png

2.　対象者のお名前を入力します。
6f7c9f55edf2a94edff9ecbc2b43eafb.png

3.　プロフィール項目を入力して保存します。
b456afee3f064a09e6699b6083fd6657.png

VTuberのプロフィールに変更や誤りがあった場合に編集する

作成時と同様にログイン状態で行います。
お名前入力時に、既に登録されている方の名前が表示されます。
7e081954e1d36b179b4a9d78bf529cf6.png

ご自身が気にするワードで、それに当てはまるVTuberを検索する

ヘッダーに検索欄がありますので、そこにワードを入れて検索します。
例えばプロフィール項目に性別がありますが、男とすると男性の方が表示されます。
ddc35e1fd38fbbbfd1cb600cadc5df79.png

気になるVTuberを、そのプロフィールページで「いいね」する

こちらはユーザ登録/ログインが必要です。
プロフィールページに「いいね」のボタンがありますので、気になった方がいたら押してリストに入れることが出来ます。

1.　押す
0630e61445d38b1dde006ebac52d6a14.png

2.　右上のマイページ（ユーザー情報が表示されます）を押します。
27c553478ebd0ddf06a4c1e83b3fb4e0.png

3.　一覧からプロフィールページの確認/いいねの解除が出来ます。
95b278c1f4c10109ee89104d36570735.png

プロフィールページでコメントを投稿する

同様にログインが必要です。
プロフィールページの下部にコメント欄がありますので、自由に書き込むことが出来ます。
8bb8b55a0cf075a7eaddb5bfd756823b.png
削除/編集も出来ます。

環境

・ Ruby 3.2.2
・ Ruby on Rails 7.1.2
・ JavaScript
・ Bootstrap 5.3.2
・ PostgreSQL 16.1
・ Fly.io

GitHub

画面遷移図

c10dbf3a629a2e9336c0a5c17ddde781.png

ER図

cc2495d26627e40ca96dbbda0659e4d6.png

実装に時間が掛かったところ

プロフィール設定時の名前入力に自動補完機能を付けていますが、ここで大変な時間を掛けました。
7e081954e1d36b179b4a9d78bf529cf6.png

とはいえ、実際のコードは下記の記事を参考にさせて頂いております。
jQueryUI オートコンプリート機能の実装
Rails, jQuery-ui, Autocompleteで語句候補ドロップダウン
Rails 5 Auto completeを実装してみた

今回時間が掛かったのは、コード前の実装方法を決める部分です。
Railsのバーションは7.1.2ですが、なぜか標準で入っているはずの「importmap-rails」や「turbo-rails」等のgemが入っておらず、JavaScriptもSprocketsで管理していました。
そして、調査結果ではImport mapsを使用して実装する記事が多くありました。
そのため、いずれImport mapsに移行するのであれば今が良い機会だと思い、実装のための準備として移行に際して必要なことや周りの予備知識の学習をしていました。
ただ、あまり残された時間がないことと、初学者でもある自分にとっては難易度が高いと判断したため、今回の移行は断念して現状で実装できる方法を調べました。
すると、jQueryで実装できる方法が見つかり、自分でも出来そうであったためこちらでなんとか実装しました。
使用したのはjQuery UIというjQueryのライブラリです。
以下は実際のコードです。（jQueryは導入済みです）

Gemfile
gem 'jquery-ui-rails'
view
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= form_with url: '/vtubers/name_input', local: true do |f| %>
          <div class="mb-3">
            <%= f.label :name, "設定するVTuberのお名前", class: "form-label" %>
            <%= f.text_field :name, class: "form-control list-unstyled", id: "name-setting" %>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">やめる</button>
            <%= f.submit "設定する", class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
routes.rb
Rails.application.routes.draw do

  get '/vtubers/autocomplete_names', to: 'vtubers#autocomplete_names'

end
controller
class VtubersController < ApplicationController

  def autocomplete_names
    term = params[:term]
    names = Vtuber.where('name LIKE ?', "%#{term}%").pluck(:name)
    render json: names
  end
  
end
JavaScript
//= require jquery-ui

$(document).on('turbolinks:load', function() {
  $('#name-setting').autocomplete({
    source: '/vtubers/autocomplete_names',
    minLength: 2,
  });
});
SCSS
@import "jquery-ui";

ul.ui-autocomplete {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  border: solid 1px #999;
  cursor: default;
  z-index: 1000000000;
  li {
    background-color: #FFF;
    border-top: solid 1px #DDD;
    margin: 0;
    padding: 2px 15px;
    color: #000;
    display: block;
    padding: 3px;
  }
  li:hover, li:focus {
    background-color: #99ffcc;
  }
}

その他

プロフィール設定について

本来はVTuberご本人様にて設定/管理していただく内容にしたかったのですが、ユーザー様が少ないと成立しないため、トップページが少しでも充実するよう視聴者配信者問わず誰もがプロフィール設定をできるようにしました。
そのため、現行では1人のプロフィールを不特定多数の方で更新していく形となります。

名前の由来

英語表記はNewVtuberです。
繰り返しになりますが、このアプリにはファンは今まで知らなかった新しいVTuberを知る、VTuberは新しいファンに自分の存在を知ってもらうというコンセプトがあります。
そこで新しい = newを名前にお借りし、平仮名で「にゅーぶいちゅーばー！」として略しました。

favicon

自作しました。
icon-128x128.png
プロの方に依頼することも考えたのですが、お金もあまりなかったので初めは自分で作ってみようと思いました。
アプリ名がにゅーぶい！なので、νとvと繋げました。
色が緑なのは、繋げたところ形がw = 草に見えたのでそのようにしました。
ページの色が全体的に緑なのもそれ故です。

利用規約/プライバシーポリシー

KIYAC様で作成しました。
有料プランに入る必要がありましたが、法律について何も知らない私でも作成できましたので感謝しています。

最後に

ご覧頂きましてありがとうございます。

Q.　YouTubeのチャンネル登録者数/投稿動画本数等の情報は無いのですか？
A. 申し訳ございません、必要であると思いますのでAPIの学習をして今後実装します。

Q.　プロフィール項目が少ないです。
A. 申し訳ございません、私もそう思いますので今後充実したのものにしていきます。

Q.　デザインがダサいです。
A.　申し訳ございません、第一印象の大切さは私も理解していますので、少しずつおしゃれにしていけたらと思います。

課題が山積していますが、アップデートを重ねて良いものにしていきます。
アプリについてご意見ご感想等ございましたら、フッターのお問い合わせまたはXの専用アカウントもありますので、そちらからお願いいたします。

6
8
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
Sign upLogin
6
8