【個人開発】ジョージアを認識し魅力を持つためのジョージア料理診断アプリを作成しました

# 初めに
初めまして！
私はプログラミングスクールRUNTEQでRuby on Railsを学習しているいとけんと申します。
この度、卒業制作として 「ガマルジョバ/გამარჯობა」 というアプリを本リリースしました！
おすすめのジョージア料理を紹介して作り方のサイトに遷移し、Xで共有できるジョージア料理診断サービスWebアプリです。
アプリを使うことで、下記のことを可能にするのを目指しています。
##### 1: 多くの人が:flag_ge:ジョージア:flag_ge:に関心、興味を持つこと
##### 2: ログイン機能を用いて、コメント投稿機能、各料理の口コミに対していいね できる機能をつけて、ジョージア料理の楽しさを体験出来るようにすること
##### 3: ジョージア:flag_ge:と日本の交流の懸け橋を作ること

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

### サービスのURL
URL: https://gamarjoba.jp/

### Github
URL: https://github.com/Itok1000/master

![ジョージア料理診断アプリ ガマルジョバ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3872156/0d4b67ca-59a8-a6c3-bdc5-f0748a6349fd.png)

# 「ガマルジョバ/გამარჯობა」を開発した理由
私の趣味は旅行:earth_americas:でこれまでに31の国と地域を訪問しています。
ジョージア:flag_ge:は2年ほど前にプライベートで訪問しました。実はこの国、幾度の内乱と戦争で衰退した国を第３次産業で経済発展させるために日本のパスポートなどに対して**１年以内ならビザ申請不要**で入国することができます。そのため以前からノマドワーカー、リモートワーカーから注目されていました。
実際に訪問してコーカサス山脈の南側、黒海の東岸に位置し、アジアとヨーロッパをつなぐ交通の要衝であることから、アジアとヨーロッパの文化が融合したエキゾチックな雰囲気に魅力を感じました。
しかし、実際に訪問している日本人の多くは前述でも記載したように**１年以内ならビザ申請不要**という魅力で訪問したノマドワーカー、リモートワーカーであり、**観光で訪問する日本人は少ない印象を覚えました。**
一方、ジョージア側:flag_ge:は第3次産業における観光事業に力を注ぎ経済発展させたいという理由から国を挙げて:flag_ge:について多角的に発信していますが、**観光どころか認識できない人が多い現状です。(名前のせいか缶コーヒーのイメージのほうが強い現実です)**
ではどうすれば魅力を持ってくれるか認識してくれる人が出てくるかと考えた際、**食文化が魅力を持って訪れる人を生み出すきっかけになるのではないか**と考えました。
私も以前松屋でシュクメルリという鶏肉のガーリック煮込みを口にしたことをきっかけに:flag_ge:訪問へつながり、この味を自宅で表現したいと感じていました。
その時下記のサイトに出会い、これなら自宅でも作れると思いました。
また下記の方の認知度をさらに高めていきたいと感じこのようなサービスコンセプトにたどり着きました。
https://ca-voir.com/topics/nobuyo-kitchen/
実際に作ってみて、豊富な調味料と料理の多様性、日本人の口に合う味、アレンジがしやすい、 懐の深さを感じました。
このことから各個人が作ると味と見た目も変わります。
そのため、各個人で作ったのを共有できるようにするため、ログインしてからコメント投稿機能、各料理の口コミに対していいね、レビュー評価できる機能をつけて、ジョージア料理の楽しさを体験出来るようにしようと決めました。

※Xでジョージア:flag_ge:を知りたい場合は下記をご確認ください。

https://x.com/TeimurazLezhava

https://x.com/GeorgiainJapan

https://x.com/nobuyo5696

# アプリの機能一覧
|ログインなしで利用可能|
| -------- |
|位置情報(「ジョージアって何？」におけるジョージアの位置情報を表示させるため)|
| クイズ機能 |
| 診断機能|
| 診断結果を表示|
| Xにてシェア共有|
| 下記のサイトに遷移
・ANSWER1の場合
・https://ca-voir.com/nobuyo-kitchen-ojakhuri-jp/
・ANSWER2の場合
・https://ca-voir.com/nobuyo-kitchen-badrijani-jp/
・ANSWER3の場合
・https://ca-voir.com/nobuyo-kitchen-sokos-chashushuli-jp/
・ANSWER4の場合
・https://ca-voir.com/nobuyo-kitchen-pkhali-jp/
・ANSWER5の場合
・https://ca-voir.com/nobuyo-kitchen-ostri-jp/
・ANSWER6の場合
・https://ca-voir.com/nobuyo-kitchen-chikhirtma-jp/
・ANSWER7の場合
・https://ca-voir.com/nobuyo-kitchen-shkmeruli-jp/|
| OGP（動的）|

|認証|
| -------- |
|ユーザー新規登録|
|ログイン機能(Sorcery, Googleログイン)|
|パスワードリセット機能|
|ログアウト機能|

|ログイン後の機能|
| -------- |
|診断機能|
|診断結果を表示|
|口コミ投稿|
|いいね機能|
|コメント|
|いいねと投稿したものを保存する機能|
|タイトルを動的に出力|
|ファビコン機能|
|デコレーターの導入|
|Minimagick系の画像加工（アップ時に画像を指定のサイズに加工・webp化する）|
|レーティング機能(raty.js使用)|
|独自ドメイン|
|i18n機能を生かして英語とジョージア語の翻訳機能を追加|
|オートコンプリート検索機能|

# サービスの利用イメージ
| クイズ機能 |
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/ddd2e03d3a6a09de008b2218f70c66a9.png)](https://gyazo.com/ddd2e03d3a6a09de008b2218f70c66a9)
|<p align="left">25年の4月に追加した機能です。ジョージアに関する問題を10問用意いたしました。選択肢方式で回答し結果表示後、Xにてシェアも可能です。問題はネタバレ防止のためREADMEには伏せていただきます。|


| 診断機能、診断結果を表示 |
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/dbeb05a225d249684ff0d24f7db29494.gif)](https://gyazo.com/dbeb05a225d249684ff0d24f7db29494)
|<p align="left">ユーザーがこのサービスをログインなしでいくつかの質問を診断することができます。この診断は、YESNO方式を用いて、ユーザーの好み、ユーザーの状況に基づいて診断結果を表示します。|

| Xにてシェア共有|
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/020872b963df6db8e7a421851251c9f1.gif)](https://gyazo.com/020872b963df6db8e7a421851251c9f1)
[![Image from Gyazo](https://i.gyazo.com/88975322fdb03ee8f1df6c058798b620.png)](https://gyazo.com/88975322fdb03ee8f1df6c058798b620)
|<p align="left">また、Xでのシェア機能を用いて、多くの人に共有できます。診断は**ログインの有無関係なく**可能です。ユーザー登録しログインすると、各料理の掲示板にとびます|

| 口コミ投稿,コメント,レーティング機能|
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/714c0a7829cd9e4385083bff0c850e25.gif)](https://gyazo.com/714c0a7829cd9e4385083bff0c850e25)[![Image from Gyazo](https://i.gyazo.com/d8e53ab13039a02ce4751f4243d5c4a3.gif)](https://gyazo.com/d8e53ab13039a02ce4751f4243d5c4a3)[![Image from Gyazo](https://i.gyazo.com/82ed38aa4fc0c4a8ab40a6117f87da18.gif)](https://gyazo.com/82ed38aa4fc0c4a8ab40a6117f87da18)
|<p align="left">ここでは自ら作った物を各料理掲示板の中で口コミや５つ星の評価をすることができ、画像アップロードして投稿することもできます|


| レーティング機能|
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/f8098900a78af4abf9ce74265874f539.gif)](https://gyazo.com/f8098900a78af4abf9ce74265874f539)
|<p align="left">各口コミ詳細を見るとレビュー評価も確認できます|

| いいね機能|
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/a2e00bfdf0185eb9ef63a0d81f7408ed.gif)](https://gyazo.com/a2e00bfdf0185eb9ef63a0d81f7408ed)
|<p align="left">参考になった口コミに関しては、「いいね」をすることが可能です|

| いいねと投稿したものを保存する機能|
| :------------------------------------------------------------------------------------------------: |
[![Image from Gyazo](https://i.gyazo.com/343a58ce1cbdee6461bc4500aabe5a0e.gif)](https://gyazo.com/343a58ce1cbdee6461bc4500aabe5a0e)
|<p align="left">いいねした投稿、ユーザー自身が投稿した口コミはヘッダー上でにアクセスできます|


# 使用技術
|ツール| 内容 |
| -------- | -------- |
| フロントエンド|Ruby on Rails,Node.js 20.17.0|
| バックエンド| Rails 7.2.1, (ruby 3.2.3 (2024-01-18 revision 52bb2ac0a6) [x86_64-linux])|
| CSSフレームワーク|Bootstrap, CANVA, 農民イラスト，CannonEOS M6(過去に自分が撮影した写真を使用していることから), BecassoApp|
| インフラ| fly.io,AWS S3,Google Cloud|
| データベース| PostgreSQL|
| 認証|Sorcery|
| 開発環境|Docker|
| その他|rubocop,CarrierWave,mini magick,letter opener web,Maps JavaScript API/Geolocation API|
| バージョン管理|GitHub|

# 工夫した点
### ①診断時の質問数を最低限にする
企画時の画面遷移図において診断時質問数は5つにする予定でしたが、これを3つに減らしました。
理由は実際に先輩方の診断アプリ、クイズアプリを触ってみた際設問数が多すぎるとユーザーが飽きる、疲れる印象を覚えたからです。またYESNO方式の質問を5つにすると32通りになります。これだと個人開発する側としては32通りのジョージア料理を準備しないといけません。そこでおすすめのレシピを下記の基準で選定し8つの料理に絞りました
・私自身が:flag_ge:で口にし、日本人の口によく合う料理
・日本でも手軽に作れて、下記のサイトで本格的に再現できる料理

https://ca-voir.com/topics/nobuyo-kitchen/

各種料理の作り方を特定のページへの遷移ではなく、クックパット検索結果を表示するなどに変更する提案も技術講師側からいただきましたが、ジョージア料理の作り方の資料が少ないこととそのやり方(APIを用いた対応)をすると、**実際の作り方と全くかけ離れた料理ができてしまい魅力につながらなくなる**といったリスクがあると考えました。
また特定のページへの遷移をすることでブロガーの人の認知度をさらに高める効果があり、お互いがWinWinになる効果があると認識しているので、この機能は取り下げています。

https://www.figma.com/design/7mF5VkcFrHRPTxVFbwi1wh/%E7%84%A1%E9%A1%8C?node-id=0-1

### ②診断前にジョージアの基礎知識のコーナーを設ける
マイナーなトピックを使った診断アプリですので、ユーザーが最初にジョージア料理や使い方、ジョージアの基本情報についてを診断前に置くことでユーザーが興味をひかせるよう意識しております。
実際先輩方のポートフォリオ(診断アプリなど)に触れた際、いきなり**診断してもそれ自体がわからないとアプリの魅力に繋がらないのではないか**と思ったからです。
また、そのコーナーに繋がるリンクボタン、コーナーの写真などは2年前ジョージア訪問時に撮影した写真をAI加工アプリBecassoAppで加工し、興味を引かせるようにしています。


### ③レーティング機能を用いてデータを可視化する
レーティング機能を導入することでユーザーがこの料理に対する評価してデータを可視化し、各料理の総合平均値として設定することでどの料理が好まれるのかをユーザーが把握できるようにします。
またraty.jsを使用して、ユーザーが星型評価のアイコン表示・入力が簡単にできるよう工夫しています。
[![Image from Gyazo](https://i.gyazo.com/f9797b4a29349bbd29f5d4d740af4c59.gif)](https://gyazo.com/f9797b4a29349bbd29f5d4d740af4c59)

[![Image from Gyazo](https://i.gyazo.com/3337a57254d3c321c78b34ad920fbe34.png)](https://gyazo.com/3337a57254d3c321c78b34ad920fbe34)


# 今後の展望

下記の機能を検討しています

|今後予定してる機能|
| -------- |
|・ランキング機能|

・ランキング機能
各料理の総合平均値として出ているものをランキングとしてログインなしで表示し、どの料理が好まれているのかを分かりやすくしようと思います

# アプリ本リリースを通して
まずはこのアプリを作成するにあたり、RUNTEQの講師の方やスクールの先輩方および同期生には数々の相談に乗って頂き本当にありがとうございました。
入学前及びカリキュラム学習中は私自身が個人開発なんてできるのだろうかリリースして誰かに喜んでくれるだろうかと悩み苦しみ自暴自棄、挫折していたこともありました。
それでも周りの同期生の活躍を見て「私自身も頑張らないと後悔だけ残る」と感じ、こちらの個人開発に一日もめげず諦めずに実装し続け、講師の方のアドバイスとヒント、サポートのおかげでリリースすることができました。
本リリースはできましたが、最終的なこのアプリの理想としては、**多くの人が:flag_ge:ジョージア:flag_ge:に関心、興味を持ち、:flag_ge:に訪れる人が1人でも多く増やせるアプリにすることです。**
最近の結果ですが、**駐日ジョージア大使からリポストの反応をいただき、本リリースか1ヶ月でPV数1859回、ユーザー数180人超えることができました。**
これに関しては私にとって大きな一歩になると考えてます。

https://x.com/TeimurazLezhava/status/1886937659672850570

そのためにも今後もパブリックコメントを通して、機能の修正、追加、削除なども進める方針です。
このアプリを通して、一人でも多くの人が:flag_ge:ジョージア:flag_ge:を知るきっかけになれたら本当に嬉しいです。
最後までご覧いただきありがとうございました:flag_ge: :flag_ge: :flag_ge: