【個人開発】旅行やデートのプランを共有するSNS「おでかけプランニング」を作成しました

はじめに

はじめまして3rararaと申します！

今回は旅行やデートのプランを共有するSNS「おでかけプランニング(GoOutPlanning)」を作成したため、
記事にまとめておこうと思います

これからポートフォリオを作成しようと考えている方などの一例として、作成の一助となれば幸いです！
機能を追加する度に記事をアップデートできたらと考えています！✨

7/11追記 GoogleVisionAPIを導入し、不適切な画像を投稿できないよう実装しました！

自己紹介

卸売業や不動産関係の経理事務を5年間従事していましたが、
プログラミングに興味が湧きエンジニアになることを決意しました
2024年4月よりDMM WEBCAMPさんでプログラミングの学習を開始し、
学習期間2ヶ月、開発期間は1ヶ月ほどです！

目次

1. ポートフォリオの紹介
2. 機能紹介
3. 実装のこだわりポイント
4. フリー素材等の紹介
5. 使用技術等
6. 今後の予定

1.ポートフォリオの紹介

サービス概要

「旅行やデートのプランをこれから考える人、頑張って考えた人」のための
"行き先"ではなく"プラン"を共有するSNSアプリです。

【サイトURL】

レスポンシブ対応済みのため、PCでもスマートフォンでもご利用いただけます

【Github URL】

本記事では、「Go out Planning」の概要やこだわりポイント、
苦労した点などについて書いていきます！
機能の実装については記載していませんのでご留意ください🙇

開発テーマを選んだきっかけ

旅行やデートのプランを練ることが苦手で、同行者に考えてもらうことが多くありました
いつもプランを考えてくれている同行者は私ではなく、「第三者に誉めてもらいたい！」とよく言っていました

旅行やデートの"行き先"ではなく"プラン"を共有するSNSアプリがあれば、 同行者のようなプランを練る側の方にも、私のようなプランを練ることが苦手な方にも役に立つのではないかと考え、 このサービスを思いつきました

2.機能紹介

検索機能

通常検索

マップ検索

投稿機能 (ユーザー登録必要)

スケジュールがいくつ増えても大丈夫なように、フォームの追加・削除を何度でも行えるようにしています！

実装方法はこちらの記事に詳しく書いています

GoogleVisionAPIを導入　※7/11追記

APIを導入して不適切な画像を検知し投稿できないよう実装しました
投稿しようとすると、下記のようにフラッシュメッセージが表示されます

実装時はこちらの記事を参考にしました！
ありがとうございます！

新規登録・ログイン認証をbootstrapモーダルで実装　※7/17追記

バリデーションはJavascriptで実装しました

3.実装のこだわりポイント

詳しい内容の記事がある場合はリンク貼っています！

• 未ログインユーザーをIPアドレスで特定し、閲覧数にカウントすること

• 通知が来ている時に視覚的に気づくようカウントアイコンを表示したこと

• 複数のワードの検索が可能かつ、投稿検索ではPlanとPlanDetail、Tag内の全てのカラムを検索していること

• GoogleMapを導入し、場所が視覚的にわかりやすいこと

• 下書き機能を実装し、作成を途中で保存できること

• コメント機能、いいね機能、フォロー機能、DM機能に非同期化をしていること

• タブメニューを作成することによって機能が多くてもシンプルなレイアウトにしたこと

4.フリー素材等の紹介

アイコンサイト

ロゴ作成サイト

イラストサイト

5.使用技術等

開発環境

• OS：Linux(CentOS)
• 言語：HTML,CSS,JavaScript,Ruby,SQL
• フレームワーク：Ruby on Rails
• JSライブラリ：jQuery
• IDE：Cloud9

その他

• GitHub Actions（自動テスト・デプロイ）
• draw.io(ER図)
• Figma(画面遷移図)

GitHub Actions（自動テスト・デプロイ）

・ RSpecテストの実装理由
計画段階では、多くの機能を実装することに気を取られてテストを軽視していました。
しかし、ポートフォリオについて多くの記事を読んでみると実装よりも遥かにテストが大事であることに気がつきました
どれだけ様々な機能が備わっていても動作しなければ意味がないからです
また、RSpecテストはアプリ根幹である機能のみ実装しています

・ RSpec自動化の理由
デプロイは段階的に複数回行われます
実際の現場でもリリースしてから一部を更新することは必ずあります
他の機能を実装した時に、根幹である機能に影響を及ぼしている可能性があります
そういった影響を気づかずにデプロイしてしまうことを防ぐために、
mainブランチにpushした段階でテストを走らせ、テストが全てクリアになればデプロイが実行されるように実装しました

ER図

画面遷移図

使用API

• Google Maps API
• Geocoding API

6.今後の予定

もっと良いアプリにするために、以下のような機能を順次追加を検討中です

• タグ入力保管機能をdatalist以外で実装する
  現在datalistを使用していますが、,で区切った２つ目のワード以降は入力保管されないため

• 画像圧縮をプログレッシブ方式に
  JPGとPNGのみ許可する形で、PNGはJPGに変換後プログレッシブ方式に、
  JPGはプログレッシブ方式に変換するよう実装を検討中

- ログイン認証画面をモーダルで実装する 実装済

- GoogleのVisionAPIかNaturalLanguageAPIを導入 実装済

さいごに

最後まで読んでいただきありがとうございました！
これからポートフォリオを作成しようと考えている方などの一例として、作成の一助となれば幸いです！