プログラミングって何だか難しそう…
AIアプリ開発なんて、専門家じゃないと無理なのでは？
プログラミングに興味を持ち始めたばかりのころは、誰もがそう感じるかもしれません。しかし、実はPythonというプログラミング言語を使えば、簡単にAIを使ったアプリを開発できます。
この記事では、プログラミングが初めての方向けに、Googleの最新AI「Gemini」を使った画像認識アプリをゼロから開発する方法を解説します。
記事の手順に沿ってコードをコピー＆ペーストしていくだけで、AIアプリを完成できるので、ぜひ一緒にやってみてください。
※本記事の内容は2025年6月25日時点のものです。本記事で紹介したツール・機能を利用する際には、必ず最新情報をご確認ください。
今回作成するAI画像認識アプリ
今回作成するのは「料理カロリー診断アプリ」です。
- 「ファイルを選択」ボタンから、診断したい料理の画像を選ぶ
- 「診断する」ボタンをクリックする
たったこれだけで、AIが画像を瞬時に解析し、画面にその料理名・カロリー・タンパク質・脂質といった栄養情報を表示してくれます。
例えば、下記の画像のようにカレーライスをアップロードすれば、AIが「カレーライス」と認識し、そのカロリーや栄養素を教えてくれます。
もちろん、カレー以外のさまざまな料理にも対応可能です。とんかつも、AIがしっかりと判別してくれます。
STEP1：開発環境の準備をしよう
本格的なアプリ開発を始めるには、通常「環境構築」という作業が必要です。
これは、プログラミングを行うためのツールやソフトウェアを自分のPCにインストール・設定する作業で、初心者にとっては最初のつまずきポイントになりがちです。
しかし、今回はReplit（レプリット）というオンラインの開発ツールを使います。
Replitを使えば、Webブラウザ上で直接コードを書いてアプリを動かせるため、難しい環境構築は必要ありません。
それでは、Replitを使って開発の準備を始めましょう。
Replitのアカウント登録
まずは、Replitの公式サイトにアクセスしてください。
アカウントをまだ持っていない方は、サイトの指示に従って新規登録を済ませてください。
Pythonプロジェクトの作成手順
アカウント登録とログインが完了したら、早速アプリ開発の土台となる「プロジェクト」を作成します。
ホーム画面の左上にある「+ Create App」ボタンをクリックします。
テンプレート（Template）の検索窓に「Python」と入力し、表示された候補の中から「Python」を選択します。
Titleには、好きなプロジェクト名を入力します。今回は「VisionAI」と入力しましょう。
無料プランの場合、PrivacyはPublic（公開）のままにしておきます。
最後に「Create App」ボタンをクリックします。
しばらく待つと、自動的にPythonでアプリを開発するための画面が表示されます。
STEP2：アプリの見た目を作成する
開発環境の準備ができたので、次はいよいよアプリの「見た目」を作っていきます。
Webアプリにおいて、ユーザーが直接目にするボタンやテキストなどの画面要素は、HTMLという言語で作成します。
今回は、あらかじめ用意されたサンプルコードを利用して、画面を作成していきましょう。
サンプルコードの準備
まず、アプリの見た目を作るためのHTMLコードが書かれたサンプルコードを入手します。
以下のリンクからサンプルコードのページを開いてください。
https://replit.com/@daytra/AIImageSample
ページを開いたら、その中からtemplatesフォルダにあるindex.htmlファイルをクリックして開いてください。
HTMLファイルの作成とコードの貼り付け
次に、入手したサンプルコードを、先ほど作成したReplitのプロジェクトに反映させます。
Replitの画面に戻り、左側のファイル一覧エリアにある「New folder」アイコンをクリックして、templatesという名前のフォルダを作成します。
作成したtemplatesフォルダを選択した状態で、「New file」アイコンをクリックし、index.htmlという名前のファイルを作成します。
ここに、先ほど開いたサンプルコードの内容をすべてコピーし、貼り付けます。
これで、ユーザーが画像を選択し、「診断する」ボタンを押すための画面の骨格が完成しました。
STEP3：アプリを動かす仕組みを作る
先ほど作成したHTMLファイルは、いわばWebページの「設計図」です。
この設計図を元に、実際にWebページとして表示させるためのエンジンの役割を果たすのが、これから作成するバックエンドのプログラムです。
今回は、PythonでWebアプリを開発するための人気のフレームワークである「Flask（フラスク）」を使います。
Flaskを使うことで、少ないコードで簡単にWebサーバーを動かすことができます。
main.pyの編集
Replitのプロジェクトを最初に作成したときからあるmain.pyファイルに、Flaskを動かすためのコードを書いていきましょう。
main.pyを開き、以下のコードをすべてコピーして貼り付けてください。
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route(‘/’, methods=[‘GET’])
def index():
result = “”
image_url = “”
return render_template(‘index.html’, result=result, image_url=image_url)
if __name__ == ‘__main__’:
app.run(host=’0.0.0.0′, port=3000)
貼り付けたコードの意味は次のとおりです。
| コード | 解説 |
|---|---|
from flask import ... |
Flaskという道具箱から、Webアプリを作るのに必要なFlask本体やrender_templateといった部品を取り出している |
app = Flask(__name__) |
Flaskを使ったアプリケーション本体を作成するお決まりの書き方 |
@app.route('/', methods=['GET']) |
Webサイトのトップページ（/で表される）にアクセスがあったときに、すぐ下にある def index() という関数を実行しなさい、という命令 |
return render_template('index.html', ...) |
templates フォルダの中にある index.html ファイルを探し出し、Webページとして表示させるための命令。 これにより、STEP2で作った画面が表示される。 |
if __name__ == '__main__': |
「この main.py ファイルが直接実行された場合に、Webサーバーを起動してください」というスイッチの役割を果たす決まり文句 |
動作を確認する
コードが正しく書けているか確認してみましょう。画面上部にある緑色の「▶ Run」ボタンをクリックしてください。
コードに問題がなければ、画面の右側にプレビューウィンドウが開き、先ほど作成した「料理カロリー診断」のページが表示されるはずです。
STEP4：AIと連携する準備をする
Webページの表示ができるようになったので、いよいよこのアプリの主役であるAI、Googleの「Gemini」と連携する準備を進めていきます。
外部のAIサービスを利用するには、通常「APIキー」という特別な鍵が必要になります。
これは、誰がAIを使っているのかを識別するためのパスワードのようなものです。
ここでは、Geminiを使うためのAPIキーを取得し、安全にアプリに設定する方法を解説します。
Gemini APIキーの取得方法
まず、「Google AI Studio」にアクセスし、Googleアカウントでログインしてください。
画面左側のメニューから「APIキーを取得」をクリックします。
次に「新しいAPIキーを作成」ボタンをクリックします。
すると、自動的にAPIキーが生成されます。この文字列が、AIを動かすための大切な鍵になります。
後で使うので、「コピー」ボタンをクリックしてAPIキーをコピーしておきましょう。
絶対に他人に教えたり、インターネット上で公開したりしないでください。
万が一漏洩すると、不正に利用され、高額な料金が請求される可能性があります。
APIキーを安全に保管する
取得したAPIキーですが、プログラムのコードの中に直接書き込むのは危険です。
そこで、Replitに備わっているSecrets機能を使って、APIキーを安全な場所に保管します。
Replitの画面に戻り、左側のメニューから鍵のアイコン（Secrets）をクリックします。
「New secret」ボタンをクリックし、キー（Key）とバリュー（Value）を入力する欄が表示されたら、以下のように設定してください。
- Key：GEMINI_API_KEY
- Value：先ほどコピーしたAPIキーを貼り付けます。
入力が終わったら、「Add secret」ボタンをクリックして保存します。
これで、APIキーを安全な場所に保管することができました。
PythonコードからAPIキーを読み込む設定
最後に、Secretsに保管したAPIキーをPythonコードから読み込めるように設定します。
main.pyファイルを開き、import os の下に、Gemini APIを初期化するためのコードを追加します。
GEMINI_API_KEY = os.environ.get[‘GEMINI_API_KEY’]
genai.configure(api_key=GEMINI_API_KEY’)
STEP5：AIによる画像認識機能を実装する
いよいよ、AIによる画像認識機能を実装していきます。ここでの作業は大きく分けて3つです。
- AIや画像を扱うためのライブラリ（便利な道具）をPythonに読み込む
- 画像と指示文をAIに送り、分析結果を受け取るための「関数」を作る
- ユーザーがアップロードしたファイルをこの関数に渡し、結果を画面に表示させる
必要なライブラリのインポート
まず、main.pyファイルを開き、AIや画像を扱うための便利な機能をプログラムに読み込むためのコードを追記します。
ファイルの先頭部分に、以下のコードを追加・編集してください。
from flask import Flask, request, render_template
import os
import uuid # ファイル名を一意にするために追加する
from PIL import Image # 画像を扱うために追加する
import google.generativeai as genAI # Geminiを使うために追加する
AIに質問を投げる関数を作成する
次に、AIに分析をお願いするための専用の関数 ask_gemini を作ります。
この関数は、画像の場所（パス）を教えると、AIからの分析結果を返してくれる便利な命令です。
main.pyの中に、以下のコードを貼り付けてください。
# SecretsからAPIキーを取得して設定
GEMINI_API_KEY = os.environ.get[‘GEMINI_API_KEY’]
genai.configure(api_key=GEMINI_API_KEY’)
# Geminiに質問を投げる関数
def ask_gemini(image_path):
# 使用するAIモデルを指定
model = genai.GenerativeModel(“gemini-2.0-flash-”)
# AIへの指示文（プロンプト）
prompt = “この料理1食分のカロリー、タンパク質、脂質を教えてください。ただし、料理名と数値と単位だけを簡潔に答えてください。”
# 画像をプログラムで開く
img = Image.open(image_path)
# AIに画像と指示文を送って、回答を生成してもらう
response = model.generate_content([prompt, img])
stream=False
# AIからの回答のうち、人間が読めるテキスト部分だけを返す
return response.text
ファイルアップロード処理とAI関数を連携させる
最後に、ユーザーが「診断する」ボタンを押したときの処理を書いていきます。
具体的には、アップロードされた画像をサーバーに保存し、その画像のパスを先ほど作った ask_gemini 関数に渡して、返ってきた結果を画面に表示させます。
# アップロードされた画像を保存するフォルダを設定
UPLOAD_FOLDER = ‘static/uploads’
app.config[‘UPLOAD_FOLDER’] = UPLOAD_FOLDER
# トップページへのアクセスがあったときの処理
@app.route(‘/’, methods=[‘GET’, ‘POST’])
def index():
result = “”
image_url = “”
# AIに画像を分析させる
result = ask_gemini(filepath)
image_url = f”/static/uploads/{filename}”
# index.htmlを結果とともに表示
return render_template(‘index.html’, result=result, image_url=image_url)
この変更により、「診断する」ボタンが押されると、アップロードされた画像がstatic/uploadsフォルダに保存され、その画像がAIによって分析され、結果（result）と画像の場所（image_url）がHTMLに渡されるようになりました。
STEP6：アプリの最終動作を確認する
最後は、アプリが正しく動作するかを確認していきましょう。
実行前に必要なライブラリをインストール
Replit画面の左側メニューから、「Shell」タブをクリックします。
Shellが開いたら、カーソルが点滅しているところに、以下のコマンドを入力してEnterキーを押します。
pip install pillow
これでインストールが完了しました。
アプリを動かしてみよう
それでは、いよいよアプリを動かして、AIの画像認識を体験してみましょう。
画面上部にある緑色の「▶ Run」ボタンをクリックして、アプリを起動します。
右側のプレビュー画面に「料理カロリー診断」ページが表示されたら、「ファイルを選択」ボタンをクリックして、好きな料理の画像を選びます。
画像が選択されたことを確認したら、「診断する」ボタンをクリックします。
このように、アップロードした画像の下に、AIが分析した料理名や栄養情報が表示されれば大成功です！
まとめ：PythonとGeminiを使うとAI画像認識アプリを開発できる
今回は、PythonとGoogleのAI「Gemini」を使って、本格的なAI画像認識アプリを開発しました。
「AIアプリ開発」と聞くと難しく感じるかもしれませんが、一つ一つのステップを積み重ねていけば、初心者でも十分に形にすることが可能です。
今回学んだ知識は、プロンプトを変えて画像から別の情報を引き出したり、全く違う機能を持つWebアプリを開発したりと、さまざまな場面で応用が可能です。
ぜひ、他のWebアプリ開発にも挑戦してみてください。
未経験からWebアプリ開発を学ぶならデイトラWebアプリ開発コースがおすすめ！
デイトラWebアプリ開発コースは、率先力として開発を進められるエンジニアを目指す方におすすめのコースです。
多くのプログラミングスクールではバックエンド開発に重点を置いていますが、デイトラはフロントエンドからバックエンドまでを網羅した充実のカリキュラムを提供しています。
そのため、バックエンドエンジニアだけでなく、フロントエンドエンジニアも目指す事が可能です。
また、本コースではWebサービス開発に必要な要素を網羅。Webアプリケーション開発からリリースまでの一連の流れを体系的に学ぶことで、モダンなWebアプリケーションを一人で開発できる実践的なスキルが身につきます。
Webアプリ開発のスキルを身につけたい方は、ぜひデイトラWebアプリ開発コースをチェックしてみてください！
▶デイトラWebアプリ開発コースを受講する！
小林さん（@mightysosuke32）
Webエンジニア歴5年のフリーランスエンジニア。デイトラWebアプリ開発コースでメンターを務めている。