0
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.

悩みを解決するアプリ”MeyasuBako”(目安箱)

Posted at

本記事について

スクールの卒業課題で作成しましたオリジナルアプリ、”MeyasuBako”についてご紹介します。

スクリーンショット 2023-09-13 11.55.31.png

概要・制作背景

このアプリは一言で言うと、
日頃の悩みを整理し、相談して解決するアプリです。
まず作成に至った経緯ですが、「悩みを解決する際、同じ悩みを経験した人なら共感してもらえるし、解決する可能性は上がるのでは」と考えたからです。

拘った点としましては、誰でも簡単に使えるシンプルな機能となっています。

使用方法

まずはトップページからログインします。
※まだアカウントを作成していない方は新規登録してください。または、新規登録しなくとも、管理者用と閲覧用のゲストログインを用意しています。

スクリーンショット 2023-09-13 11.56.26.png

ログインをすると、投稿の一覧画面が表示され、悩みの新規投稿、詳細、編集、削除、優先度・カテゴリーごとの並び替えを行えます。

スクリーンショット 2023-09-13 11.59.19.png

ちなみに新規投稿でカテゴリー、優先度、公開・非公開の設定ができます。(非公開の状態だと他のユーザーに表示されません)

次に一覧画面下にある、コンテンツ検索についてご説明します。

スクリーンショット 2023-09-13 12.10.00.png

ここには調べたいキーワードを入力して右隣の”検索”を押すと、キーワードの同じお悩み投稿をしたユーザーの投稿にヒットします。

スクリーンショット 2023-09-13 12.12.43.png

投稿者のところがリンク表示となっているので、リンクを押すと該当したユーザーとメッセージのやり取りができます。

スクリーンショット 2023-09-13 12.18.06.png

またトークを改めて行う際、再度検索してユーザーを表示させるのは面倒なので、一覧画面からトークを継続しているユーザーを”メッセージ一覧”から一覧表示させることができます。

スクリーンショット 2023-09-13 12.20.39.png

開発環境

サーバーサイド:Ruby on Rails

フロントサイド:HTML, CSS, Bootstrap

テスト:RSpec

インフラ:AWSEC2

エディタ:VScode

今後の目標

インフラ:Docker
フロントサイド:React、Vue.js
バックサイド:各APIの使用
レスポンシブデザイン化(スマホ・タブレット対応)

などに挑戦し、技術力の向上に務めていきたいです。

最後までお読みいただき、ありがとうございました。

0
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
0
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?