Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

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.

@icchankun

【個人開発】スムーズに会話を進めたいが、会話を上手く進められない人のためのアプリ「bilbil」を紹介します。

Last updated at Posted at 2022-11-08

はじめに :partly_sunny:

はじめまして！ @icchankunです。24卒エンジニア就活生です。
お忙しい中、この記事を見ていただき、ありがとうございます:bow:
個人でアプリを開発いたしましたので、それに関する記録を残したいと思います。

追加機能や不具合につきましては、随時開発・改善を行い、それについても今後この記事でまとめていきます!

アプリ概要

｢bilbil｣ ("ビルビル")はスムーズに会話を進めたいけど、会話がなかなか上手くいかない人のために ｢ルーレット｣ を使って、トークテーマや話す順番などを提案してくれる会話サポートアプリです。

bilbil_ロゴ.jpg

｢bilbil｣ とは私が考えた造語で、二つのbilを組み合わせで出来ています。

bilとは 英単語buildの省略形です。bilがbuildの省略形というのは私が勝手に決めました:yum:

このアプリが提供した会話サポートによって、スムーズに会話が進み、会話の参加者間で良い雰囲気ができることを願っているので、このアプリの会話サポートによる会話の流れのbil(作成) と会話の参加者間の良い雰囲気のbil(作る) を組み合わせてbilbilとしました。

アプリURL :
https://bil-bil.herokuapp.com/

GitHub :
https://github.com/icchankun/bilbil.git

開発しようと思ったきっかけ

以前、類似のアプリを使った際に会話がスムーズに進み、盛り上がったのですが、そのアプリで提供されているものはトークテーマルーレットのみでした。
トークテーマルーレットに加え、話す順番や話を回す人などを決める機能も付け加えると、より会話のサポートになるのではないかと考えたため、このアプリを開発しました:grin:

使用技術

フロントエンド
HTML/CSS/Bootstrap5
Vue.js 3.2.36 (JavaScript)

バックエンド
Ruby 3.1.2
Ruby on Rails 6.1.7

データベース
開発環境： Sqlite 3.31.1
本番環境： PostgreSQL 14.5

インフラ
Heroku (PaaS)

テスト
RSpec

バージョン管理
Git 2.25.1
GitHub

開発OS
Ubuntu20.04 (Windows Subsystem for Linux 2)

技術選定理由

フロントエンド

  • Bootstrap

  • Vue.js

    • 今まで私が説明を受けた会社(約10社)のほとんどで、Vue.jsを使用しており、今後も需要のある技術だと感じたため。
    • 公式ドキュメントが日本語化されており、学習しやすいと感じたため。
      https://jp.vuejs.org/index.html
    • Ruby on RailsとVue.jsを使用したWebアプリの作成のチュートリアルの記事が多くあったため、学習しやすいと感じたため。

バックエンド

  • Ruby, Ruby on Rails
    • インターンシップやRailsチュートリアルでの学習で、他のバックエンド言語よりも理解が深いため、素早く開発に取りかかれると感じたから。
    • Ruby on RailsをAPIとして利用方法に関する記事が多くあり、学習しやすいと感じたため。

インフラ

  • Heroku
    • インフラの知識が浅くても、比較的容易かつ素早くデプロイができるため。
    • 以前Herokuを利用し、デプロイを行った経験があり、確実にデプロイができる自信があったため。
    • 料金を比較的抑えることができるため。

学生の場合、GitHub Student Developer Packに登録すれば、一年間毎月\$13分のクレジットがもらえます（一年間で$156分）。Herokuを使用している学生の方は是非登録してみてください！
https://jp.heroku.com/github-students

設計

モックアップ

ER図

bilbil_ER図_色付き.png

テーブル設計
  • admins ｢管理者登録情報｣
  • categories ｢カテゴリー登録情報｣
  • talk_themes｢トークテーマ登録情報｣
  • likes｢トークテーマのいいね登録情報｣

ルーティング・追加gem/package

機能一覧

管理者認証機能

  • 管理者はログイン、ログアウトが可能です。

エンドユーザーはログインなしでサービスを使用できるようにしたかったので、エンドユーザーの認証機能は実装しておりません。

トークテーマ・カテゴリーのCRAD機能

  • 管理者はトークテーマ・カテゴリーの新規登録、閲覧、編集、削除が可能です。

トークテーマ・カテゴリーの管理をしやすくするため、エンドユーザーは閲覧のみ可能です。

トークテーマいいね機能

  • ログインなしでトークテーマにいいねを付けることが可能です。
  • いいねをしたトークテーマは各カテゴリーのトークテーマ一覧の上部に表示されます。

ルーレット機能

  • トークテーマルーレット
    トークテーマをルーレットによって、提供します。
    各カテゴリーボタンを押すと、そのカテゴリーに関するトークテーマにルーレットの内容が変化します。

  • 会話サポートルーレット
    会話サポートをルーレットによって、提供します。
    トーク人数ボタンの人数によって、番号指定/トーク順番/司会者・話し手指定ルーレットの内容が変化します。

番号指定ルーレット
このルーレットの指示で各参加者に番号を振ります。

トーク順番ルーレット
このルーレットの指示と番号指定ルーレットによって決めた番号をもとにトークする順番を決めます。

司会者・話し手指定ルーレット
このルーレットの指示と番号指定ルーレットによって決めた番号をもとに司会者や話し手を決めることもできます。

開発期間

デプロイまでの期間は1ヶ月半で、所要時間は150～200時間です:sunny:
現在も、随時新規機能追加・機能改善を行っています。

苦労した点

フロントエンド

  • UIの調整
    モックアップのデザインを実現することに苦労しました。

  • いいね機能部分
    いいねを行うための関数、いいねによるトークテーマの並び替えの関数の作成に苦労しました。

  • ルーレット機能部分
    ルーレットの動きをさせる関数の作成に苦労しました。

今回のルーレットの作成方法
① ルーレットで表示させる内容を配列にする。
② その配列からランダムに1つ表示させる関数を作成する。
③ ②の関数を0.1秒ごとに繰り返す関数を作成する。
④ ③の作業を止める関数を作成する。

バックエンド

  • Ruby on Rails APIの扱い方の理解
    このアプリを作成するまで、Ruby on RailsをAPIとして利用したことがなかったため、その扱い方を理解することに苦労しました。

インフラ

  • Herokuデプロイ時のエラー解決
    コンパイルエラーやアプリケーションエラー、CSSが反映されない問題などの解決に苦労しました。

現在妥協している点

Vue3の記法(Compostion API)ではなく、Vue2の記法(Opitons API)での実装
今回、開発で参考にさせていただいた記事ではVue2の記法を用いた説明が多かったので、現状はそれにならいVue2の記法で実装しています。
しかし、Vue3の記法のほうが、Vue2の記法と比較した時、より記述量が少なく済み、読みやすくなるというメリットがあるため、今後Vue3の記法を学習し、Vue2の記法をVue3の記法に変えていきます。

トークテーマの数の分、APIを叩いてしまっている問題
今回トークテーマのいいねボタンをコンポーネントにして実装しているのですが、このコンポーネントを読み込む際に、APIを叩くように設定しており、トークテーマの数の分APIが叩かれてしまうという問題が発生しています。しかし、APIを叩かないようにすると希望通りの挙動にならない状態です。現在解決策を模索中です:sweat:

トークテーマの数の分、APIを叩いてしまっている問題は無事解決できました。どのように解決したのかは下のリンク先で見ることができます。
https://github.com/icchan-webapp/bilbil/issues/56

Dockerの使用
Dockerに関してはYoutubeの動画でチュートリアルを一通り行ったことはありますが、Dockerを用いての開発に確実性がなく、自信が持てなかったため、今回はOSに構築した環境で開発を行いました。

これから学んでいきたいこと

Web技術
今回アプリ開発でCSRF対策のためのコードを書き入れたり、ipアドレスを使用したりしていますが、正直なんとなく利用している状態です:sweat_smile:
これは、webのネットワーク・セキュリティ技術についての理解がまだ浅いことが原因だと思われます。これらの部分もしっかりと理解した上で利用したいと考えているため、今後書籍等の学習教材を用いて学習していきます。

テストコード
TDD(テスト駆動設計)という開発手法があるぐらい、テストはアプリを開発する上で必要なものだとと考えられますが、テストに関する知識がまだまだ浅いので、学習が必要だと感じています。

Vue3(Compostion API)の記法
setup関数を用いた記法を学習し、このアプリのコードの記述量を削減し、管理しやすいようにしていければと考えています。

Ruby以外のバックエンド言語
現在バックエンドの開発においてはRubyでの開発しか行ったことがないため、Ruby以外のバックエンド言語でも開発をしてみて、言語の比較ができるようになりたいと考えています。
現状、次に学習したいバックエンド言語は多くの企業で扱われており、学習教材が豊富かつ開発環境が容易であると言われているPHPです。

Docker, IaaS(AWS, GCP等)
新人エンジニアに、これらの構築を一から任せることはないと考えられるため、優先的に学習をしておく必要はないと思いますが、多くのWeb開発企業で使用されている技術なのに加え、自分自身インフラを触った経験がなく、学習に対する興味があるため、基礎部分は抑えられるよう学習していきます。

終わりに :crescent_moon:

自分で考えたものが形になっていき、実現することの嬉しさとやりがい改めて感じました:laughing:

また、機能に関しては、なんとか形になっており、とりあえず動くという状態のため、コードの改善がまだまだ必要だと考えています。
また不具合が発生している部分があるので、その部分は直ちに修正していきます。

最後まで読んでいただき、ありがとうございました:bow:
少しでもこのアプリに興味を持っていただければ、幸いです。

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?