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

自分専用のパーソナルトレーナー!「めんどくさい」を解消した究極の食事記録Webアプリ

Last updated at Posted at 2025-10-16

こんにちは、萬年ダイエッターおみえです。

みなさん、食事管理アプリは使ったことがありますか?
私も体重管理のために、サブスク型食事管理アプリを使っていました。
でも、だんだん「めんどくさい…」が積み重なり、記録もサボり気味。

意を決して、再度食事管理を徹底しよう!と思い立ち
デジタルを学び続け、「これ自分で作れるかも!?」を実践!
自分で食事記録アプリを作ることにしました!

名付けて:apple:「KARORECO」:apple:

image.png

1. なぜ私がアプリを自作したのか?

:one: 有料アプリの限界と「めんどくさい」体験

当初はサブスクの食事管理アプリを使っていました。
年間で5,900円・・・・・。高!
サボってたまに開くと「おかえりなさい!」とまた1から設定。
無駄なお金...と思い、サブスクをキャンセル。
無料でも使い続けられますが、無料だと食品を登録するたび「有料プラン案内」がしつこく表示されて、記録のたびにげんなり。
機能も「これ使いたい!」と思うと、結局課金が必要でためらいばかり。

:two: カロリー情報の信頼性の問題

食品マスタは、各ユーザーが自由に食品を登録できるため、同じ食品でも複数データが存在し、カロリーやPFC値や表示もバラバラ。
「どの情報が本当かわからない…」と再検索する手間も増えて、イライラ。

:three: 私自身の食生活の特性

私の食生活は食べるものがほぼ毎日同じものばかり。
なのに、いちいち食品を毎日検索してカロリーやPFCを調べる作業が無駄に感じるようになりました。

2. 「仕組みづくり」に挑戦

これまで感じた不満をすべて解決するには「自分で作る」しかない!と考えました。

目指した条件は:

  • 広告や有料案内が一切ない
  • 信頼できるカロリー情報(自分で登録したデータのみで集計)
  • 圧倒的にラクな記録方法

💡 解決の鍵は「自分だけの食品マスタ」

「自分が食べる食品はほぼ決まっている」

  • よく食べる食品の栄養情報(カロリー・PFC・塩分など)は一度調べて“マスタ”に登録
  • それ以降、検索や手打ちは不要
  • データは自分で精査したものなので、完璧な精度

1人でやってると挫折する!自分だけのパーソナルトレーナーシステム

私の過去の経験上、1人でダイエットやってても「まっいっか」になりがちです。
そんなときに、誰かが見てくれてるとモチベーションも上がる!
ということで、1日の終わりに今日の記録とコメントをLINEでくれるパーソナルトレーナーシステムを追加します!

3. 開発プロセス:Apps Script×HTML/CSSで実現

使用するツール

:black_small_square:Googleスプレッドシート
:black_small_square:Google Apps Script
:black_small_square:生成AI(お好きなAIを使用してください)
:black_small_square:LINE Developers
:black_small_square:Google AI Studio

Google Apps Script(GAS)で「自分専用データベース」

  • WEBアプリ上から食品マスタ・食事記録データを保存。

  • 保存されたデータはスプレッドシートに記録されます。

  • GASを使って「食品追加」「記録」「自動計算」「集計」などを一括管理

  • これだけで、完全オリジナルデータベースが出来上がり!編集も削除も可能!

多くの食品の裏を見ると、栄養成分が書いてあると思います。
(萬年ダイエッターの私は何か買う時、ひっくり返す癖がついてしまいました)
だいたい、100gあたりだったり1食あたり(〇gあたり)と書いてあると思います。なので、登録は100gあたりなのか1食あたりなのかで登録できるように。

4. 制作過程でこだわった3つのポイント+デザイン調整

:one: 瞬間的な記録を実現する「マスタ機能」
登録済み食品リストから選んで摂取量(g)を入れるだけで
カロリー・PFC・塩分など全てが自動計算されフォームに入力
記録はほぼ“5秒”で完了します。
マスタから選択だけでなく直接入力も可能にし、買った食材の栄養素もそのまま入力すればOK。

image.png

:two: 視覚的にわかりやすい「集計とグラフ」
日々の合計カロリーやPFCバランスが棒グラフで表示され、達成度・不足が一目でわかる
目標値までの進捗も視覚的に把握できるので、モチベーションUP!

:three: 食べたものも一目瞭然!
朝・昼・夜・間食 何を食べたかはリスト化し、各総kcalも見えるようにし、食べすぎ防止。自分が何をどんだけ食べているのか、どの食材にどのぐらいのカロリーがあるのか日々、知識の積み重ねにも!

5. 1日の終わりにLINEに今日の記録とコメントを送信

ここでパーソナルトレーナーの登場です!

1日の記録とコメントをつけてLINEに送信

設定するのはLINE Developersで取得したチャネルアクセストークンとユーザーIDのみ。
こちらから送信することはないのでWebhookは不要です。

コメントはGemini AIで記録に応じて自動生成

コメントは何がくるかわからないほうが楽しみなので、生成AIで作成します。
GASコード内にどんなパーソナルトレーナーであるかをプロンプトで指定します。

  // 目標PFC比率を変数としてプロンプトに挿入
const PROMPT = `あなたは、**見た目は怖いが、中身は優しいドS系トレーナー**です。
以下の【今日の栄養データ】に基づき、ユーザーを**データに応じて褒めるか煽る**メッセージを送ってください。

## コメントのルール
1. メッセージの最初は「**今日の記録、お疲れ様でした!**」で始めること。
2. 総カロリーが0.0 kcal(記録サボり)の場合、**サボりを強烈に皮肉るメッセージ**を生成し、すぐに終了すること。この際、ペナルティをにおわせるユーモアのある表現(腹筋1000回追加など)を必ず含めること。
3. 総カロリーが1200 kcalから1800 kcalの範囲内、かつPFC比率が目標P:${TARGET_P_RATIO}%, F:${TARGET_F_RATIO}%, C:${TARGET_C_RATIO}%に**±5%以内**で収まっていたら、**「完璧すぎる」「よくやった」と大げさに称賛**し、ツッコミは入れずに激励の言葉で締めくくること。
4. 上記の称賛条件を満たさない場合(カロリーが範囲外、またはPFCバランスが崩れている場合)は、PFCバランスやカロリーについて**必ずどこかに笑える、または大げさな表現のツッコミ**を含めること。
5. **具体的な栄養素**(特に目標から外れているP, F, C)に触れ、**行動を促す**メッセージにすること。
6. 口調は親しみやすい愛情あるタメ口(丁寧さも少し含む)。**メッセージの最後に絵文字を一つだけ**含めること。
7. **メッセージは10行以内(最大150文字程度)**にしてください。

// ここに【今日の栄養データ】が続く
【今日の栄養データ】
日付: ${date}
総カロリー: ${kcal} kcal
PFC比率: P=${p}%, F=${f}%, C=${c}%
総塩分量: ${salt} g`;

Gemini AIは無料枠でも使用が可能です。
Google AI StudioからAPIキーを取得します。左側メニューからGet API Keyを取得。

image.png
APIキーは従量課金制ですが、Gemini 2.5 Flashであれば、数回使用するだけなら無料枠で使用できます。今回は1日1回送信するだけなので無料枠で余裕です。
GASのトリガーで22時にLINE配信されるように設定しました。
いつくるのかわからないので毎日が楽しみに!

image.png


パーソナルトレーナーからのコメント
プロンプトのキャラクター設定を変更すればお好みのパーソナルトレーナーに!

image.png

6. 自作アプリ使ってみた!

image.png

視覚的にもわかりやすくなりました!
パーソナルトレーナーからのコメントは自動生成なので、1日の終わりに何て言われるかなとドキドキ:scream:

自作した「KARORECO」を使うようになって、得られたメリット
・「めんどくさい」からの完全解放
・記録がワンタップで完了し、無理なく毎日続けられる。
・究極のパーソナルアプリ

自分の食生活に完全最適化した、世界に一つだけの食事管理ツール。
データの信頼性も使い心地もパーフェクト
他人の不確かなデータや煩わしい広告、有料案内に悩むこともゼロ。

デメリットとしては、Webアプリの為、スマホサイズでの設定が難しく、画面が間延びしてしまって入力する度に拡大されてしまって、縮小しなければならないのが少し煩わしい。デザインも今後検討が必要です。

おまけ

今回のWebアプリを作るにあたって、私はコードがまったく書けないので
生成AIを使用してコードを作成しています。
WEBアプリなのでHTML/CSSを使用しなければなりません。UIやデザインにもこだわりたい。
そんな時に、ChatGPT・Gemini・Copilot。それぞれでコードを書いてもらって比較してみました。

:star::star::star:Gemini
コードはエラーも少なく、HTMLやCSS設定も自動で見やすいデザイン作成してくれて、色やフォントをを変更するぐらいで自分好みのデザインが作りやすかった!

:star::star:ChatGPT
コードが長くなるにつれ、エラーが多くでるように。GASの方でつまづく...デザインはそこそこ自動で作ってくれるけどシンプルかな

:star:Copilot
コードは何となくできてたけど、デザインがお話にならなかった💦

アプリを作成してくれるAIも今たくさんありますが、手当たり次第使ってみたけど、無料でできる枠が限られる、デザインがしにくいと断念。
結局、自分で作った方が早い!やっぱGASが早い!
Googleのアカウントがあれば工夫次第で自作アプリが簡単に作成できます。

最後に:ダイエットの基本は食事管理!

無料の食事管理アプリもたくさんありますが、課金が必要だったりする場合も...
自分に合わない、めんどくさいなと感じるときは、習慣になりにくいです。
単純な使いやすい“自分専用アプリ”という選択肢も全然アリです!

そんなダイエットおたくな私がダイエットに関する記事をnoteに書いています。
是非そちらも合わせてご覧ください。

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