大道無門(パソコンとインターネット)

大道無門(パソコンとインターネット)

PR

×

楽天カード

カレンダー

バックナンバー

2026.05
2026.04
2026.03
2026.02
2026.01

< 新しい記事

新着記事一覧(全4146件)

過去の記事 >

2025.10.02
XML

Geminiの助けを借りて、写真にタイトルを入れるWebアプリを作成しました

カテゴリ： AI
最近、Gemini 2.5 Pro を活用して、簡単なPythonプログラムの作成に挑戦しています。今回は、写真の下部にタイトルを挿入するWebアプリを開発してみました。

準備段階：Flaskの基本を習得 💡
開発に取り掛かる前に、まずは「Flaskを使ったWebアプリ作成の基本」という動画を視聴し、基礎知識を習得しました。基本的な知識が不足していると、後々のプログラミングで無駄な時間を費やしてしまうと考えたからです。

動画をただ見るだけでなく、実際にコードを説明通りに作成し、動作確認を行いました。コードの入力には、Googleレンズを使って動画画面からコード部分をコピーする方法を取りました。この方法だと、非常に効率的に作業を進めることができました。

この動画を通して、PythonとFlaskを使ったWebアプリ作成の基本的な流れを理解することができました。


Gemini 2.5 Proとの協業でWebアプリ開発を開始 🤝
その後、いよいよGemini 2.5 Pro を使ってWebアプリ作成に取り組みました。

Geminiには、汎用的な「2.5 Flash」と、プログラミングなどの特定のタスクに適した「2.5 Pro」の2種類のモデルがあります。今回は、プログラミングに特化した「2.5 Pro」を選択しました。

まず、Geminiの入力欄に以下の指示を入力しました。
その場合、Flaskを使用してください。
画像にタイトルと名前を入力する手順は以下のとおりです。
１．Webが開かれると、その画面に「瞬彩クラブ」というホームページのタイトルと、「写真にタイトルと名前の入力」というラベルが表示されている。
２．「写真にタイトルと名前の入力」をクリックすると、画像をパソコンから選択する画面が表示される。パソコン内の画像を選択してクリックする。
３．画像がパソコンの画面に表示される。画像の縦の長さを５％広げ、広げた部分は白色とする。
４．広げた白色の部分に、画像のタイトルと名前を書き込む準備を開始する。まず、画像のタイトルを入力する欄を作成し、表示する。入力時にまず、使用する文字フォントを指定する。フォントは主要な日本語のフォントをいくつか（例えばメイリオ、明朝体、ゴチック体、など）を選択できるようにする。文字のフォントのサイズは白色の部分の高さの0.8の高さとする。
５．タイトルは追加した白色の部分の縦横中央に配置する。
6．次に名前の入力を入力する欄を作成し表示する。名前は白色の部分の一文字分右端を空けた位置に、縦方向の中央に配置する。文字のフォントは、タイトルと同じものを使用する。
７.作成した画像を書き込むフォルダーを指定して、パソコンに書き込む。画像のfile名は取り込んだ画像のfile名の後ろに、「title」を追加した名前にする。
Geminiからは、以下の内容が回答として提示されました。
  1. 準備段階 ：必要なフォルダーの作成やライブラリのインストール方法の説明。
  2. プログラム ：Pythonファイル2つとHTMLファイル1つ、計3つのコード。
  3. フォルダー構成 ：作成したファイルを配置するフォルダー構造の説明。
  4. 実行方法 ：実際のプログラムの実行手順の説明。
エラーからの学びと解決 🐞✅
指示通りにプログラムを実行してみたところ、エラーメッセージが表示されました。そのエラーメッセージをGeminiに提示したところ、すぐに解決策が返ってきました。原因は、ファイルのコードが「UTF-8」形式ではなかったことのようでした。

修正後、再度実行したところ、無事に自分のPC上でWebアプリを動作させることができました！

アプリの公開とPythonAnywhereの活用 🌐
自分のPCで動くだけでは本当のWebアプリとは言えません。そこで、「このアプリを登録するのにおすすめの無料Webサイト、あるいは方法を教えてください」とGeminiに尋ねてみました。

Geminiは、PythonAnywhere を使う方法を紹介してくれました。

PythonAnywhereをおすすめする理由
  • とにかく簡単: 専門的な知識（GitやDockerなど）が不要で、ブラウザ上の操作だけで完結します。
  • 無料プランで十分: 今回作成したアプリくらいの規模であれば、無料プランで十分に動作します。
  • ファイル管理が楽: ご自身のPCからファイルを直接アップロードできるので、直感的に作業できます。
さらに、Geminiは「PythonAnywhereを使った公開手順」を具体的に提示してくれました。

フォントファイルの設定など、いくつか改善点がありましたが、それらをクリアすると、PythonAnywhereのサイトでWebアプリを登録し、公開することができました。


まとめ：Geminiが実現した迅速な開発 ⏱️
ここまでの作業に要した時間は、2日間で合計5〜6時間ほどでした。もしGeminiの助けがなければ、これほど短い時間でWebアプリを作成することは不可能だったでしょう。Geminiのサポートによって、効率的かつスムーズに開発を進めることができ、大変満足しています。






お気に入りの記事を「いいね！」で応援しよう

最終更新日  2025.10.02 09:42:44
コメント(0) | コメントを書く

もっと見る



■コメント

お名前
タイトル
メッセージ
画像認証
別の画像を表示
上の画像で表示されている数字を入力して下さい。


利用規約 に同意してコメントを
※コメントに関するよくある質問は、 こちら をご確認ください。


【毎日開催】
15記事にいいね！で1ポイント
10秒滞在
いいね! -- / --
次の日記を探す
おめでとうございます！
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
X
© Rakuten Group, Inc.
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: