【個人開発】ペットのぶさかわを投稿するアプリ「ぶさかわフォト」をリリースしました。

## はじめに
プログラミングスクール「RUNTEQ」を卒業し、Webエンジニアとして転職活動をしているにしかわです。
今回、「ぶさかわフォト」をリリースしました。
読みづらい箇所もあるかと存じますが、ぜひご覧いただけると幸いです。

## 開発した理由
ペットで可愛いといえば、小さくて目がクリクリしている、モフモフしているイメージが浮かびませんか？
確かに可愛いですが、別の可愛さもあります。
私は、22kgのピットブルを飼っており、世間での可愛いイメージとは正反対の犬を飼っていますが、可愛いシーンがたくさんあります。　それが「ぶさかわ」です。
この「ぶさかわ」を共有したく今回サービスを開発しました。

## どんなサービスか
[![Image from Gyazo](https://i.gyazo.com/8d39b43ae264f8ffb80ec5586e174be6.png)](https://gyazo.com/8d39b43ae264f8ffb80ec5586e174be6)

サービス　[ぶさかわフォト](https://busakawa.com/)
Github　[Github](https://github.com/nishikawa-na/my_app)


| 投稿機能 | 投稿一覧 |
| ---- | ---- |
| <a href="https://gyazo.com/aa7792f0e4a660a8bd5b9cf0cde949e1"><img src="https://i.gyazo.com/aa7792f0e4a660a8bd5b9cf0cde949e1.png" alt="Image from Gyazo" width=100%"/></a>| <a href="https://gyazo.com/9170bbd84d1df329bd1897351bdb83af"><img src="https://i.gyazo.com/9170bbd84d1df329bd1897351bdb83af.gif" alt="Image from Gyazo" width="853.3333333333334"/></a> |
| 投稿詳細| ランキング機能 |
| <a href="https://gyazo.com/3f02f285b9a9b79c12783f0726ce7bf2"><img src="https://i.gyazo.com/3f02f285b9a9b79c12783f0726ce7bf2.gif" alt="Image from Gyazo" width="853.3333333333334"/></a> |<a href="https://gyazo.com/a13beda68c3e54acaaa851f13b58f277"><img src="https://i.gyazo.com/a13beda68c3e54acaaa851f13b58f277.gif" alt="Image from Gyazo" width="853.3333333333334"/></a> |
| 投稿編集 | 動的OGP|
| <a href="https://gyazo.com/39ad6844ac90e34224c945c062ca45da"><img src="https://i.gyazo.com/39ad6844ac90e34224c945c062ca45da.gif" alt="Image from Gyazo" width="853.3333333333334"/></a> | <a href="https://gyazo.com/b4c3fd2b9a7af2a159d017df340c8aea"><img src="https://i.gyazo.com/b4c3fd2b9a7af2a159d017df340c8aea.gif" alt="Image from Gyazo" width="853.3333333333334"/></a>|
| オートコンプリート検索機能 | フォロー機能 |
| <a href="https://gyazo.com/01b68db034c697e33c32673fb7b1d6f0"><img src="https://i.gyazo.com/01b68db034c697e33c32673fb7b1d6f0.gif" alt="Image from Gyazo" width="768"/></a> | [![Image from Gyazo](https://i.gyazo.com/b68ddf8b4948fd3829909393b9b35155.gif)](https://gyazo.com/b68ddf8b4948fd3829909393b9b35155) |
| コメント機能 | いいね機能|
| [![Image from Gyazo](https://i.gyazo.com/62580cca8976be4878cff0f6f9cfc609.gif)](https://gyazo.com/62580cca8976be4878cff0f6f9cfc609)| [![Image from Gyazo](https://i.gyazo.com/b47021b81050bcc8857fd71f63bcd2de.gif)](https://gyazo.com/b47021b81050bcc8857fd71f63bcd2de) |
|LINE通知機能|
| [![Image from Gyazo](https://i.gyazo.com/16b02d7a2e32d3a7e2b9c643db3b6e84.png)](https://gyazo.com/16b02d7a2e32d3a7e2b9c643db3b6e84) ||
|LINE連携(sorcery)①| LINE連携(sorcery)②|
| [![Image from Gyazo](https://i.gyazo.com/44a7134bba274ebc3edd37e0c9d84216.png)](https://gyazo.com/44a7134bba274ebc3edd37e0c9d84216) | [![Image from Gyazo](https://i.gyazo.com/ad0dd2a4e44ee51a3f1a4b548a61ee83.gif)](https://gyazo.com/ad0dd2a4e44ee51a3f1a4b548a61ee83) |
|LINE連携(sorcery)③ |LINE連携(sorcery)④|
|[![Image from Gyazo](https://i.gyazo.com/200bcd3e4fe0a7f0aaf45c6d4c8d4eda.png)](https://gyazo.com/200bcd3e4fe0a7f0aaf45c6d4c8d4eda)|![73dc370713a417fc411df0038a363fe9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3556908/1d37c814-6613-66f7-2e79-1d6a3fe51f86.png)|
|LINE連携(sorcery)⑤|ユーザー情報変更|
|[![Image from Gyazo](https://i.gyazo.com/29a4c32a468722d216d7d4e0cdaaedc2.gif)](https://gyazo.com/29a4c32a468722d216d7d4e0cdaaedc2) | [![Image from Gyazo](https://i.gyazo.com/01db4872eb7855055f3ec6a5ea7b9cf5.gif)](https://gyazo.com/01db4872eb7855055f3ec6a5ea7b9cf5)|
|LINEログイン①|LINEログイン②|
| [![Image from Gyazo](https://i.gyazo.com/de0b6c932e49e614d973343b3a4df9df.gif)](https://gyazo.com/de0b6c932e49e614d973343b3a4df9df) | ![ab7d2b53cae62f12049dc28936b0fd8a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3556908/51dd47dc-edec-9b1b-7c38-b076d4a21442.png) |
|LINEログイン③|
|[![Image from Gyazo](https://i.gyazo.com/ee6de9b82543b4ddfbbe24fc0b90cb85.png)](https://gyazo.com/ee6de9b82543b4ddfbbe24fc0b90cb85)|
|パスワード変更|メールのURLよりパスワード変更|
|[![Image from Gyazo](https://i.gyazo.com/3d60bc9d32faa7e3046f5deaa926dc64.png)](https://gyazo.com/3d60bc9d32faa7e3046f5deaa926dc64) | [![Image from Gyazo](https://i.gyazo.com/b6d85d68ba27f95c0cf19ee5010b0e93.png)](https://gyazo.com/b6d85d68ba27f95c0cf19ee5010b0e93) |

## 技術構成

| カテゴリ | 使用技術 |
| ---- | ---- |
| フロントエンド| HTML＆CSS , Rails(Hotwire/Turbo/Stimulus) |
| バックエンド | Ruby (3.2.3)|
| フレームワーク | Rails(7.1.3.4) |
|CSSフレームワーク| Bootstrap(5.3.3) |
|開発環境| docker |
|インフラ| render |
|ファイルサーバー|aws s3|
|データーベース|Postgresql |
|バージョン管理ツール| Github |
|CI| GithubActions(Rspec Rubocop bundler-audit Brakeman)

## 工夫した点
①LINEログインによるOauth認証
sorceryにて新たにアカウントを作成せずに、Wenアプリを触れるように導入しました。
②LINE通知
ブサかわフォト内でユーザーをフォローし、そのユーザーが投稿したときにLINE通知がくるようにしました。
LINEログインした場合、sorceryにてログインした場合それぞれに対応して、LINEIDをDBに保存するようにしました。
この内容は苦戦したため、別の記事に書きたいと思います。
③動的OGP
ユーザーにて投稿した「ぶさかわ」を共有できるように動的OGPを設定しました。

## おわりに
今回初めて０からWebアプリを作成しました。
タスク管理や、様々なエラーがありましたが、無事にリリースすることができました。
今後もより、開発をしていこうと思います。！

ありがとうございました。