巷ではＡＩが大モテでありまして、アプリ開発もＡＩでできちゃいますよ、なんてぇ話があります。
大昔にはプログラマとしてアプリ開発をやっていたりした私ですが、数十年もの間、プログラム開発の現場からは離れておりました。せいぜいエクセルのＶＢＡでマクロを少し組む程度。webアプリ開発なんてほぼ無経験です。
ですがＡＩと会話しながらならできるかも…と思ってやってみたところ。
マジでできてしまいました。ＡＩすご。
そのアプリというのはこちらです。→色紙メーカー
色紙のような背景の上に、任意のテキストを縦書きで入れる、というもの。本文と署名、ハンコもどきを入力する欄があり、署名とハンコもどきの位置は色紙背景の左端のほうに固定になっています。実は位置を変えられるようにしようとしてクチャクチャになっちゃったので諦めたんですが;;;
このwebアプリによってできるのはこんな画像↓
世の中に似たようなアプリを数個お見掛けしまして、私も以前から使わせてもらっていたんですが、何となくこれなら作れるかも…なんて思いましたところ、マジで作れてしまいました。
使用言語はPythonです。でもって私、Pythonは全く経験がありません。
今回は、HTMLの部分も含めて全てＡＩ（ChatGPT）にコードを書いてもらいました。まぁ位置調整とかで少しコードの中身を直接弄った部分はありますが、ほとんど中身なんか理解できていません。Pythonってこんなに短いコードで実現できるんだって驚いたくらいでして。
ちなみにプログラム作成だけじゃなくて、ネット上に公開する上の設定でもどっぷりとＡＩのお世話になってしまいました。何しろ一つコマンド叩く度にトラブルになるんだもの。でもエラーメッセージとかをコピペして聞いてやると、ＡＩが結果を分析して対処すべきことを指示してくれます。
マジですげぇ。
もちろん、いくら古いとはいえ多少の経験はありますので、ちっとは山勘が働くって面はあると思います。ですがおそらく、全く経験が無い人であっても、きちんとＡＩさえ使いこなせれば、かなりスムースにアプリ開発ができそうです。
これでいいのか？とは思うものの、生産性が高いってのはこーゆーことなのかも…とも思ったり。
ちょいと前まではドキュメントの案を作ったり、アイデア出しの手伝いをしてもらったり…って使い方しかしてなかったんですが、これはもっと使い方の幅が広いもんなんですなぁ。
ちなみに、今回アプリを作った際のプロンプトはこんな感じです↓
——————————————–
Pythonでテキストボックスに入力したテキストを縦書きのjpeg画像ファイルにするwebアプリケーションを、次の条件の下で作成してください。
アプリケーションの名称は「色紙メーカー」です。
webのURLは「https://www.ogiyang.jp/4ki4mkr/」の下にします。背景画像はこのディレクトリの下にbackgroundというフォルダを設け、そこに01muji.jpg、02muji2.jpg、03sakura.jpg、04sasa.jpg、05momiji.jpgを格納しておきます。
文字フォントについては4ki4mkrの下にfontsというフォルダを設けてフォントファイルを格納しておきます。
入力用の画面の構成は以下のとおりです。
最初にプレビュー画像としてbackgroundに保存されている01muji.jpgを表示します。これは常に表示することでリアルタイムプレビューにします。
改行し、ドロップダウンリストで、白を選んだら01muji.jpg、無地を選んだら02muji2.jpg、桜を選んだら03sakura.jpg、笹を選んだら04sasa.jpg、紅葉を選んだら05momiji.jpgに、プレビュー画像の背景を差し替えます。
改行して、ラベルを太字で「本文」としたテキストボックスを配置します。高さは10行分、幅は画面一杯とします。入力文字数は800字まで、テキストは途中で改行や空白も入力可能とします。
改行して、ラベルを細字で「フォント」とした、文字フォントの選択をするためのリストボックスを配置します。選択肢はfontsというフォルダに入れてあるものを使います。
改行して、ラベルを細字で「サイズ」と記載し文字サイズを入力するボックスを配置します。ボックスの幅は4桁とし、ボックスの左側に下向き矢印ボタン、右側に上向き矢印ボタンを設け、それらのボタンをクリックすることでサイズを変更できるようにします。数字はは10～120までの間とし、デフォルトを40とします。
次に、２回改行します。
ハンコを入力するため、ラベルを太字で「ハンコ」と記載したテキストボックスを配置します。ボックスの高さは1行、幅は全角２文字分とします。入力可能なのは全角1文字だけです。
改行して、ラベルを細字で「フォント」とした、文字フォントの選択をするためのリストボックスを配置します。選択肢はfontsというフォルダに入れてあるものを使います。
改行して、ラベルを細字で「サイズ」と記載し文字サイズを入力するボックスを配置します。ボックスの幅は4桁とし、ボックスの左側に下向き矢印ボタン、右側に上向き矢印ボタンを設け、それらのボタンをクリックすることでサイズを変更できるようにします。数字はは10～120までの間とし、デフォルトを40とします。
次に、２回改行します。
「色紙画像ダウンロード」ボタンを設置します。
画面の構成は以上のとおりです。
アプリケーションの機能は以下のとおりです。
本文、落款のそれぞれのデータが変更されたら、以下のように縦書きの画像データにして、プレビューに表示します。
縦書きの描画エリアは、プレビューで表示されている背景画像の上に重ね、縦横共に20ピクセル背景画像より小さい矩形とし、その矩形の左上の角の位置は、背景画像の左上の角の右10ピクセル、下10ピクセルとします。
この矩形の描画エリアに、本文のテキストを、指定されたフォントとサイズ、色は黒で縦書きにします。文字は右上の角から、矩形エリアからはみ出ないように、上から下に並べます。文字の間は5ピクセルあけます。矩形エリアの下の端まできて文字が切れてしまわないように、左側へ改行します。改行した際の行と行の間は少しあけてください。
本文テキストに改行が入力されたら、描画エリアでも改行してください。
長音記号の「ー」と「～」と「…」の色は黒、これらは90度回転させて縦方向に向くようにし、横方向は列の中で前の文字と中心線を一致させ、縦方向は前（上）の文字から少し開けて配置します。
促音や拗音、及び句読点については前（上）の字と右端を合わせ、下方向に少し間を開けて、上の字にくっつきすぎないようにします。その次にくる文字は、促音や拗音の前の文字と中心線を合わせ、縦位置は促音・拗音から少し間を開けて配置します。これらの文字の色は全て黒です。
ハンコは、テキストデータが入力されたら初めて描画します。
ハンコの文字を5ピクセルの幅の線で、角が丸い矩形で囲み、画像にします。色はR:220、G:15、B:15です。
落款のテキストデータがある場合は、そのテキストを縦書き方向に変更し、角を丸めた四角で囲って、画像にします。その矩形は文字部分以外をR:220、G:15、B:15の色で塗りつぶします。この画像をハンコ画像と称します。
ハンコ画像を背景画像に重ねて描画します。ハンコ画像の左下角の位置を、背景画像の左下の位置から縦・横それぞれ５０ピクセルの位置になるように配置してください。
以上の内容を実現できるPythonのコード、及びそれに必要なindex.html、ディレクトリ構成、ローカルPCへの展開の手順、さくらインターネットのレンタルサーバへのデプロイの手順を、webアプリケーション開発に初めて挑戦する初学者にも簡単にわかるように、必要なものを全て示してください。開発環境はwindows11です。
——————————————–
これでもって必要なものを一旦全部作らせて、ものは試しで動かしてみて、ＡＩと会話しながら微調整を繰り返しました。調整を続けていると、どうやら重くなりすぎてしまい、反応が悪くなるような気がします。こいつぁ仕方ないかもしれませんな。
そーなったらいったんチャットを終了して、それまでに作成したものを保存しておき、新しいチャットにそれを読ませて再度調整を繰り返す、みたいなことを繰り返しました。なので最終的な仕上がりは、上のプロンプトとは少し違うものになっています。
ＡＩ、おもしろ。
コメント