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

【個人開発】育てた観葉植物を共有できるアプリを開発しました。

0
Posted at

初めに

私は、プログラミングスクールRUNTEQの52期生のアマノと申します。
この度Ruby on Railsを使って、観葉植物の共有できるWebアプリ「みどりのへや」を開発しました。このWebアプリはご自宅で育てられている観葉植物の写真を手軽に投稿することができるアプリです。

読みづらい箇所もあるかと存じますが、ぜひご覧いただけると幸いです。

サービスのURL

URL: https://midorino-heya.onrender.com

Github

URL: https://github.com/amanotaro52a/midorino_heya

開発した理由

大学時代は農学部に所属していたことがきっかけで、育てた野菜などを共有できるアプリを開発したいなと考えていたのですが、構想段階にて1つの投稿物が完成するまで最短でも1ヶ月はかかるため、この案は断念しました。そこで、観葉植物であれば、購入してすぐに投稿が可能な事に気がつきこのアイディアで開発しました。

機能紹介

植物名のオートコンプリート検索
オートコンプリート動画gif

『植物名』の検索欄にはオートコンプリート機能が実装されているため、最初の一文字を入力するだけで投稿されている植物名を割り出すことができます。(未ログイン時でも使用できます。)


投稿画像の拡大表示
画像ライトボックス

投稿詳細画面で表示されている画像をクリックすることで、ライトボックスでの画像拡大表示ができます。(投稿されているすべての画像が拡大できます。)


植物判定
植物判定APIgif

万が一植物名を忘れてしまっても大丈夫です。添付した画像から植物判定APIを使えば割り出すことができます。(葉・茎など植物体が大きく写っていると認識がスムーズに行えます。)


使用技術と選定理由

開発環境

Docker

->Dockerfileとcompose.ymlの2つのファイルで簡単に環境を構築できます。

サーバーサイド

Ruby 3.1.4 / Ruby on Rails 7.0.4

->最大の強みはコードが短く書けることです。初学者に優しいフレームワークです。

フロントエンド

Rails(Hotwire: Turbo / Stimulus)・JavaScript

->複数箇所のHTML要素を同時に更新するのがスムーズになります。

CSSフレームワーク

Bootstrap 5

->ナビゲーションバーやカード、フォームなど、様々なWebデザインのテンプレートが準備されているため、デザイン性に優れたWebサイトを簡単に構築できます。

データベースサーバー

PostgreSQL

->将来新機能を開発する際に起こりうるテーブルの規模拡大に対して高い拡張性と柔軟性を確保できます。

ファイルサーバー

AWS S3(CarrierWave + fog)

->本番環境で投稿した画像をクラウド保存することができます。

アプリケーションサーバー

Render

->GitHubと連携した簡単な自動デプロイ、無料プランから使える手軽さ、そしてWebやデータベースをまとめて公開できます。

外部API

植物判別API(Pl@ntNet)

-> 送信された植物の写真(葉、花、果実など)を人工知能・深層学習モデルが解析し、特徴量を抽出しながら植物の種を特定します。無料枠での導入が可能です。

データベースの設計

image.png

設計ポイント

投稿することが本アプリの根本的な機能なので、過度に複雑化しないシンプルな設計にしました。

各テーブルの役割

users

->会員登録する際のユーザーのレコードを管理します。

posts

->観葉植物の投稿内容のレコードはここで管理されます。

bookmarks

->他のユーザーの投稿をブックマークするときに使用します。

likes

->他のユーザーのいいね機能の管理を担っています。

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