少し前にも「画像形式変換サイトを作った」で書いたのですが、新たにアップデートしたので、またその進捗を書こうと思います。
以前は、画像形式、AAA.JPGからAAA.PNGなど画像の変換をする物でした。
作った経緯としては、Twitter等で配布されている壁紙とかが何故か、Jfif形式の画像で保存される事が有るのですが、結構使いにくい画像形式なのでぱっと、変換出来たら便利かなと言う事で作りました。
他のWEBサイトでも変換サイトはあるのですが、微妙に動作が重かったり広告が異常に多いことなどがあるので、自分で作った方が使い易いかも、と言う事で作り始めました。
chatGPTでどうやったら作れるか訊いた所、HTML(WEBコード(タグ))とJavaScript(WEBサイトを動的するコード)で出来るとの事だったので作ってみる事に、一応、私もJavaScriptが書けると迄は言いませんが、コードを紹介しているサイトからのコピペ等で動的サイト位は作れるので、全くJavaScriptがわからないと言う事は無くもないのですが、面倒臭そうだったので、ChatGPTでの実験も兼ねてChatGPT主体で作ってみる事にしました。
当初はほぼ一発で、付けて欲しい機能と大まかなデザインで完成、そこに私がWEBサイト用のアイキャッチ画像サムネや各リンク、広告を少々でアレンジした物が、以前の画像形式変換サイトです。
そこに、まず画像のリサイズと圧縮の機能を付けました。
これもすんなり作ってくれました。
複数の画像を一括でアスペクト比を保ったまま、リサイズと圧縮と画像形式変換が出来たら、より便利だろうと言う事で付けてみました。
次につけたのが、複数の画像を一括返還すると、10画像だと10回連続でダウンロードされるので、2画像以上の場合はZIPファイルに纏めてダウンロード出来る様に変更。
これもすんなり、作ってくれました。
ただ、ZIPファイル化の時、ネット上(https:)では正常に画像変換できるのですが、ローカル上(file:)で画像変換するとWindows側で不審なファイルとして認識する様でZIPファイルの解凍や画像表示が出来なくなっていました(この時は気付かなかった)。
そして、画像変換やリサイズ、圧縮等の機能を付けた弊害で変換時間がかかる様になり、普通に変換処理をすると、数秒から数十秒で内部変換しているものの表示上は無反応に見えるので、フリーズしたような感覚になるので、変換処理を視覚化する為に変換率の％とバーで見える様にする事にしました。
また、ChatGPTに頼みましたが、各コードが3万文字以上とかなり重くなっていたので、無料使用分が直ぐに使い切ってしまい数時間、使用できない様なりChatGPTとのやり取りが長引く様に。
そこで、同じAIであるGeminiにも手伝って貰おうと、JavaScriptとCSS(デザインシート)を含んだHTMLをGeminiに解析して貰う事に、どうも、ChatGPTとはまた違う仕様に変更する様で、そのコードに置き換えてみました。
そうすると、ファイルを選択するボタンが機能しなくなったり、ZIPファイルが安全ではないファイルと認識したり等の不具合が起こる様になり、Geminiは中止する事に、その後、Geminiに手伝ってもらったHTMLコードをChatGPTに開設して貰いました。
Geminiで置き換えたコードに準拠したまま、対策コードを出して貰ったのですが、一向に改善されません。
Geminiが悪いと言うよりは仕様の違うAI間を挟まない方がスムーズに行くのかも知れませんね。
どうしても、改善し無いので、問題なかった頃のHTMLコードからやり直す事に、ZIPファイルが解凍できないのは画像変換時に不具合がある可能性が高いとChatGPTが言うので、提案されたコードに置き換え、画像変換率のバー表示はスムーズだったので、一旦テストファイルとしてアップロードした所、ZIPファイルも正常に開けたので直ったのかと思いましたが、ローカル上のHTMLファイルで画像変換した所、ZIPファイルが解凍できない。
その事を、ChatGPTに相談すると、ローカル上で生成されたZIPファイルは安全ではないとWindows側が判断する事もあると言う事なので、JavaScriptでは改善できる領域ではないと判断し、ローカル仕様は諦める事に。
その後、WEB上、ローカル上でもテストした所、今度は、BMPファイル(多分何の画像でも)からPDFに変換するとどうも画像形式が”.img”となってしまって、開けない画像形式に。
それを再度、ChatGPTに相談、どうもJavaScriptの変換処理で上手く行っていない模様で、その部分のコードを置き換えて、やっと改善しました。
この間何度か、無料使用分を使い切ってしまい、土日の合間に少しづつChatGPTに改善して貰っていました。
その後、より見やすくする為に、画像ファイル名が異常に長い場合、<DIV>(WEBサイト上のブロック)からファイル名がはみ出すのが、デザイン的に崩れて嫌だったので、aaaabbbbcccc.jpgと言う様なファイル名の場合aa…ccと短縮させる様にしました。
そして、画像個別で拡張子(JPGやPNG等)が表示された方が便利だろうと思いファイル名末に拡張子を表示させる様にしました。aa…cc.jpgの様な感じです。
これで大分、多機能且つ使い易くなったと思います。
あと簡易的な取説もクリックですれば開く様に改善。
そして、現在の画像形式ブラウザ変換ツール3.1.0となりました。
また、何らかの改善、付けて欲しい機能などあれば、このブログのコメント欄、またはTwitter(新X)等で書いて頂ければ検討します。
私の技術力や知識、ChatGPTの能力により出来ない場合もありますが、これからも何かあればアップデートして行きたいと思っています。
追記：そう言えば、該当ページのリンクを載せていませんでした。
現在は、3.2.0アップデートしました。
3.1.2
リサイズ時反映されていなかったのを修正。
変換率の表示バーと％をスムーズに表示される様に修正。
3.2.0
複数の画像からPDFに変換する際、個別のPDFにするか、纏めて1個の複数ページのPDFにするか選べるようにしました。
そして、選択した画像のサムネイルの順番を入れ替えれる様にしました。
複数のJPG画像の漫画等の場合、ページを整理して1個のPDFに出来るので便利だと思います。
Image Converter — 画像形式ブラウザ変換ツール
コメント