【個人開発】デスク環境を色彩の観点から改善する診断サービス

はじめに

こんにちは、佐々木と申します。
この度、プログラミングスクールにて学習する中で個人開発アプリを作成しました。
また、先日そのスクールも無事卒業することができましたので、書くと宣言して放置してた個人開発アプリの記事をようやく書きました。
仕事や勉強の息抜きの時とかに読んでみてください。

目次

1. Webアプリ紹介
2. 使用技術
3. こだわりポイント
4. 改善点
5. まとめ

Webアプリ紹介

このサービスはデスク環境の写真を診断し、人間が作業する上で最適な環境になるよう色彩の観点から改善案を提案することでデスク環境改善のきっかけを提供します。

アプリURL（レスポンシブ対応済みですが、PC推奨）

GitHub

このサービスへの思い・作ろうと思った理由

前職はオフィス空間（働く空間）を提案・提供する業界で働いており、様々な働き方改革を間近で見てきました。中でも一番大きな変化として、リモートワークの導入が世の中で大きく進んだということが挙げられます。私自身も約3年ほどリモートワークをしました。
その時は「いかに出社時より生産性を下げないか」を皆で考えて試行錯誤しました。

現在、プログラミング学習をしながら思うことがあります。

• 「自分と同じプログラミング学習をしている方のデスク環境はどうなっているのだろう？」
• 「デスク環境を何か手を加えて改善するといった行動は頻度としては少ないのではないだろうか?」

そこで、「デスク写真を共有するにあたりデスク環境改善のきっかけを与える」 というサービスを作ってしまおうと考えました。
今回のサービスでは、投稿するデスク環境の写真を解析することで、その人が作業する上てより最適なデスク環境になれるアドバイスを提供します。

機能一覧

🔍デスク環境の色彩診断機能

• 当アプリのメイン機能です。普段デスクワークをしているデスク環境の写真を投稿することで、普段の作業効率をより上げるための環境になるよう色彩の観点から診断します。

診断画面	診断結果
デスク写真を添付→作業場選択→主なデスクでの作業内容を入力→後は診断開始を押すだけです。	色彩の観点からあなたのデスク環境を評価し、より良い作業環境になるためのアドバイスを提案します。

🔍診断結果に応じたデスクアイテムのレコメンド機能

• 診断結果（どの色をデスク環境に加えるべきか）に応じて、ユーザーが登録したデスクアイテム＋楽天市場商品のデスクアイテムを提案します。

ユーザー登録アイテム提案	楽天市場商品提案
ユーザーが登録したデスクアイテムからオススメを提案します。	楽天市場商品からおすすめのアイテムを提案します。

💻ユーザーが使っているデスクアイテム登録機能

• ユーザー自身が使っているおすすめのデスクアイテムを登録できます。登録時に色分類を指定することで、誰かのデスク環境診断結果におすすめのアイテムとして紹介されます。

アイテム登録画面	登録完了
自身の使っているデスクアイテムを登録できます。	登録したデスクアイテムは誰かのデスク環境を改善するおすすめアイテムとして提案されます。

🔍ユーザーが使っているデスクアイテム登録機能

• 診断結果およびユーザー登録デスクアイテムはそれぞれの一覧画面から確認できます。診断結果のお気に入り一覧、デスクアイテムのブックマーク機能もあります。

診断結果一覧	登録アイテム一覧
他の人のデスク環境診断結果を確認できます。取り入れたい診断結果があればお気に入りリストに追加しましょう。	他の人が登録したデスクアイテムを確認できます。気になるアイテムがあればブックマークしておきましょう。

使用技術

カテゴリ	技術
フロントエンド	TailwindCSS, JavaScript
バックエンド	Ruby 3.2.2, Rails 7.0.8
使用API	Google Cloud Vision API, DeepL API, OpenAI API, 楽天API
環境構築	Docker
データベース	PostgreSQL
ストレージ	AWS(S3)
プラットフォーム	Render

こだわりポイント

・ 写真を用いた診断機能

メインの診断機能は、デスク環境に関する何問かのアンケートに回答して、その回答結果から診断結果を導き出すというものではなく、実際の作業しているデスク環境の写真を元に診断できるよう実装しました。

実装の大まかな流れは下記の通りです。

1, Google Cloud Vision API にデスク環境写真のデータを渡して画像解析する。

2, 解析結果から「ラベル情報」と「プロパティ情報（色情報）」を取得する。

3, ラベル情報に「desk」又は「table」が含まれ、スコアが90以上であれば次の処理に移す。条件を満たさなければ「写真から十分なデスク領域が見つかりませんでした。」とエラーメッセージを表示させる。

4, プロパティ情報から「color」情報を抽出。

5, 初期のプロンプト設定済みのOpenAI APIに色情報を渡して診断文章を生成する。

6, 生成された診断結果をDeepL APIに渡して翻訳する。

・ 診断文章生成を英語で処理してから最後に翻訳する。

OpenAI APIの利用料金の計算が「リクエスト・レスポンスに使用した文字のトークン数」で計算されることを知りました。また、日本語だと英語に比べて余分にトークン数が発生するということも調べて分りました。そこで、OpenAI APIでのプロンプトは全て英語にし、生成された診断文章をDeepL APIで翻訳して表示することでOpneAI APIの使用料を抑える工夫をしました。

・ デスクアイテムのレコメンド機能

このアプリにはユーザーが是非周りにおすすめしたいデスクアイテムを色部類別に登録することができ、デスク環境の診断結果の表示画面に、診断結果に応じてそれらのデスクアイテムをおすすめとして表示するレコメンド機能を実装しました。また、ユーザーが登録したアイテムとは別に、楽天市場のアイテムからも診断結果に応じていくつか提案するようにしました。

改善点

・ スマホで診断実施時に502エラーが出る時がある。

こちらは最近になって現れ始めた現象であり、現在も原因調査中です・・・
タイムアウトエラーとは別に以下の問題が考えられますが、調査中です。

• 画像データのサイズ：
  スマホで撮影した画像は高解像度でデータサイズが大きくなることが多い。大きなデータを送ると、通信時間がかかり、タイムアウトによって502エラーが発生する場合がある。

対策案

• Google Cloud Vision API に渡す前に画像ファイルサイズを小さくする。
• OpenAI APIの文章生成時の文字数上限を減らす。

まとめ

2023年6月に異業種からプログラミングの勉強を１から始め、何度も挫折しそうになりました。しかし、諦めずに勉強を続けて半年後に個人開発として１つの成果物を自分の手で作れたことは本当に嬉しかったです（改善点はまだ残ってますが！！）。
スクールの周りは本当にすごい方達ばかりで「自分には才能ないのかなぁ」と思う方も多いかと思います（自分もそうでした）。
周りではなく過去の自分と比べて 「成長してるゾォぉぉ！！！」 精神で続けることが大事かと思います。
１ヶ月前は全然理解できなかったことも、復習するとサクサク理解できた時のあの感覚の積み重ねが大事なのです。
こんな自分でも個人開発できたので、みんな大丈夫です。
この記事が少しでも参考・勇気づけになればと思います。

最後まで読んでいただき、ありがとうございました！
※就活頑張ります🏃