2025年10月1日水曜日

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

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

準備段階:Flaskの基本を習得 💡

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

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の入力欄に以下の指示を入力しました。

Pythonを使用して、画像にタイトルと名前を入力するWebアプリを作成してください。

その場合、Flaskを使用してください。

画像にタイトルと名前を入力する手順は以下のとおりです。

1.Webが開かれると、その画面に「瞬彩クラブ」というホームページのタイトルと、「写真にタイトルと名前の入力」というラベルが表示されている。

2.「写真にタイトルと名前の入力」をクリックすると、画像をパソコンから選択する画面が表示される。パソコン内の画像を選択してクリックする。

3.画像がパソコンの画面に表示される。画像の縦の長さを5%広げ、広げた部分は白色とする。

4.広げた白色の部分に、画像のタイトルと名前を書き込む準備を開始する。まず、画像のタイトルを入力する欄を作成し、表示する。入力時にまず、使用する文字フォントを指定する。フォントは主要な日本語のフォントをいくつか(例えばメイリオ、明朝体、ゴチック体、など)を選択できるようにする。文字のフォントのサイズは白色の部分の高さの0.8の高さとする。

5.タイトルは追加した白色の部分の縦横中央に配置する。

6.次に名前の入力を入力する欄を作成し表示する。名前は白色の部分の一文字分右端を空けた位置に、縦方向の中央に配置する。文字のフォントは、タイトルと同じものを使用する。

7.作成した画像を書き込むフォルダーを指定して、パソコンに書き込む。画像の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のサポートによって、効率的かつスムーズに開発を進めることができ、大変満足しています。


0 件のコメント:

コメントを投稿

GoogleのNotebookLMでサイトのインフォグラフィックを作ってみました

 最近、NotebookLMの機能が充実してきています。 今回は、その機能の中でインフォグラフィックを作成してみました。NotebookLMを開いて、新規のプロジェクトを選択すると、以下のような機能がリストアップがされます。 その中のひとつ、インフォグラフィックをクリックして使っ...