AI・Shiori 「Bing AI」に簡単なプログラムを書いてもらった（画像一覧表示）
画像生成をしていると毎日膨大な数の画像ファイルが生成され、収拾がつかなくなります。
フォルダを開いて一覧表示で確認する作業もなかなか面倒なので、今日は、画像一覧表示の簡単なプログラムを「BingAI」に作成してもらいました。
今日のファイルは、javascriptを使用した「画像一覧のプログラム」です。
以下のような条件を「BingAI」に投げかけて作成してもらいました。
１．作成するファイル：
フォルダ内にあるpngファイル（ファイル名は一定ではない）を一覧表示するプログラムをHTML/CSS/Javascriptを使用して作成する。
２．条件
・表示する画像のサイズは縦200PXで、元画像の画像サイズ比率で表示する。
・画像と画像の間には空白を入れる
・画像にマウスを乗せるとファイル名を表示し、二倍のサイズに拡大する。
・拡大した画像は最前面に表示するようにする。
この条件で依頼して、あとは何度かAIとやり取りをして出来上がったコードが下記です。
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Graffiti+Classic);
h1 {
font-family: 'Graffiti Classic', cursive;
font-size: 24px; /* フォントサイズを変更 */
color: Blue; /* フォント色を変更 */
}
img {
/*height: 200px; /* 縦のサイズを固定 */
width: auto; /* 横のサイズを自動調整 */
margin: 10px; /* 余白を設定 */
transform: scale(1.0); /* 拡大率を設定 */
transition: 0.5s; /* 拡大にかかる時間を設定 */
position: relative; /* positionプロパティをstatic以外に設定 */
z-index: 1; /* z-indexプロパティを初期値に設定 */
}
</style>
</head>
<body>
<h1>画像一覧</h1>
<!-- ファイル選択ボタンとheight属性の値を設定するボックスをdivタグで囲む -->
<div>
<!-- ファイル選択ボタン -->
<input type="file" id="file-input" multiple webkitdirectory directory />
<!-- height属性の値を設定するボックス -->
<input type="number" id="height-input" value="200" min="0"> px
</div>
<div id="image-container"></div>
<script>
// ファイル選択ボタンを取得
var fileInput = document.getElementById("file-input");
// height属性の値を設定するボックスを取得
var heightInput = document.getElementById("height-input");
// 画像を表示するコンテナを取得
var imageContainer = document.getElementById("image-container");
// ファイル選択ボタンにchangeイベントリスナーを設定
fileInput.addEventListener("change", function() {
// 選択されたファイルのリストを取得
var files = fileInput.files;
// コンテナの中身を空にする
imageContainer.innerHTML = "";
// ファイルの数だけ繰り返す
for (var i = 0; i < files.length; i++) {
// ファイル名を取得
var fileName = files[i].name;
// ファイル名がpngで終わるかどうかチェック
if (fileName.endsWith(".png")) {
// imgタグを作成
var img = document.createElement("img");
// src属性にファイルのURLを設定
img.src = URL.createObjectURL(files[i]);
// title属性にファイル名を設定
img.title = fileName;
// height属性にボックスの値を設定
img.height = heightInput.value;
// width属性にautoを設定
img.width = "auto";
// margin属性に余白値を設定
img.margin = 10;
// transform属性とtransition属性を設定
img.style.transform = "scale(1.0)";
img.style.transition = "0.5s";
// mouseoverイベントリスナーを設定
img.addEventListener("mouseover", function() {
// transform属性の値を変更
this.style.transform = "scale(2)";
// z-indexプロパティの値を変更
this.style.zIndex = 100;
});
// mouseoutイベントリスナーを設定
img.addEventListener("mouseout", function() {
// transform属性の値を元の値に戻す
this.style.transform = "scale(1.0)";
// z-indexプロパティの値を元の値に戻す
this.style.zIndex = 1;
});
// コンテナに追加
imageContainer.appendChild(img);
}
}
});
// height属性の値を設定するボックスにinputイベントリスナーを設定
heightInput.addEventListener("input", function() {
// コンテナ内のimgタグのリストを取得
var imgs = imageContainer.getElementsByTagName("img");
// imgタグの数だけ繰り返す
for (var i = 0; i < imgs.length; i++) {
// height属性にボックスの値を設定
imgs[i].height = heightInput.value;
}
});
</script>
</body>
</html>
HTMLファイルを作成する
上記のコードをコピーしてWindowsのメモ帳に貼り付け、保存する際にファイルの種類を「すべてのファイル」にして、ファイル名に「index.html」と書いて保存すると、HTMLファイルが出来上がります。
プログラムを起動する
１．出来上がったindex.htmlをクリックすると最初に下記の画面が表示されます。
２．ファイル選択ボタンを押すと以下の画面が出ます。
３．画像が入っているフォルダを選択すると下記のメッセージが出ます。
「ファイルがアップロードされる」と表示されますが、実際にはブラウザ上にデータが送られるだけなのでどこかのサーバーにアップロードされるわけではありません。
４．画像が一覧で表示されます。試しにマウスを画像の上に乗せるとその画像が拡大します。
これを使うと、画像を一覧で確認しながら気になる画像を簡単に拡大して確認でき、良いものがあれば簡単にコピーしてnoteの記事に貼ることが出来てとても便利です。
HTMLに記述された拡大表示サイズは２倍になっていますが、この数値を変えれば、好きな倍率に設定もできます。
AIは、本当に賢くて便利ですね。
ついでなので、AIが作成したWEBデザイン案（512ｘ1024）を紹介します。
2023/10/23追記
上のコードは「png」ファイルしか表示できないので、その他の画像ファイルも表示できるように修正しました。
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Graffiti+Classic);
h1 {
font-family: 'Graffiti Classic', cursive;
font-size: 24px;
color: Blue;
}
img {
width: auto;
margin: 10px;
transform: scale(1.0);
transition: 0.5s;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<h1>画像一覧</h1>
<div>
<input type="file" id="file-input" multiple webkitdirectory directory />
<input type="number" id="height-input" value="200" min="0"> px
</div>
<div id="image-container"></div>
<script>
var fileInput = document.getElementById("file-input");
var heightInput = document.getElementById("height-input");
var imageContainer = document.getElementById("image-container");
fileInput.addEventListener("change", function() {
var files = fileInput.files;
imageContainer.innerHTML = "";
for (var i = 0; i < files.length; i++) {
var fileName = files[i].name;
var img = document.createElement("img");
img.src = URL.createObjectURL(files[i]);
img.title = fileName;
img.height = heightInput.value;
img.width = "auto";
img.margin = 10;
img.style.transform = "scale(1.0)";
img.style.transition = "0.5s";
img.addEventListener("mouseover", function() {
this.style.transform = "scale(2)";
this.style.zIndex = 100;
});
img.addEventListener("mouseout", function() {
this.style.transform = "scale(1.0)";
this.style.zIndex = 1;
});
imageContainer.appendChild(img);
}
});
heightInput.addEventListener("input", function() {
var imgs = imageContainer.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].height = heightInput.value;
}
});
</script>
</body>
</html>
この記事が気に入ったらサポートをしてみませんか？