画像解像度変換ツール
ローカルに保存した画像ファイルを解像度変換して出力するツールです。
縦横比固定で、横か縦のピクセル数を指定して出力します。
生成AIをもちいた制作
なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。
ほとんど修正なく、一発で合格レベルのプログラムができました。ツールとしては、ほぼ思い描いていたものが一発出力できました。使い込んでいくと、いろいろ修正点が見えてくるでしょう。初期リリースとしては合格。
ちなみに、書いたプロンプトは以下のような感じです。
1回目
javascriptで、ローカルにある写真データを取得して解像度を変更し出力するプログラムを書いてください。ただし、詳細仕様は以下によります。
○写真データ取得に関して
・ローカルにあるファイルをダイアログ形式で取得できるものとします。
・取得できるファイルは、jpg、png形式とします。
・jpg、png形式以外のファイルを選択したときは、その旨をダイアログで警告します。
・一度に取得できるファイルは、1つまでとします。
・取得したファイルは、サムネイルを画面に表示します。
・サムネイル表示は、もとの縦横比を維持したまま、横を200pxとし、縦は元の縦横比に合うように計算して求めます。
○解像度変換について
・解像度変換は、横または縦のpx数を数値で指定します。
・解像度を指定するための入力部分を作成してください。なお、スピンボタンとスライダーをつけてください。
・スライダーの最大値は下の画像のpx数、最小値は0pxとしてください。
・縦横比は、元の画像のまま変更してはいけません。
・指定できる解像度は、横または縦のどちらかとします。操作する要素は、ラジオボタンで指定します。
・ラジオボタンで指定していない要素は、グレーアウトして操作できないようにします。
○ファイル出力について
・変換ボタンを画面に表示し、クリックすると指定した解像度でダウンロードが始まります。
・ファイル名は、当日の日付と時刻を用いて「yyyymmdd_hhmmss_photo.jpg」または「yyyymmdd_hhmmss_photo.png」とします。
・ファイル名の拡張子は、もとのファイルの拡張子と同一にしてください。
2回目
以下のコードをベースに改良してください。 ・jpeg形式で出力するときの拡張子は、jpgとしてください。
～コード省略～
当サイトに移植するときに、HTML・CSSを調整しています。移植のときに、スライダーの表示がきれいにできないのは、わたしの環境の問題です。別途調査して修正します。
