ChatGPTで簡単！ファイル名を一括変更＆ダウンロードできるシングルページWebアプリケーションの作り方
はじめに
ChatGPT o1-miniの強力なコード生成機能を活用して、シンプルかつ便利なシングルページWebアプリケーションを作成する方法をご紹介します。このアプリケーションは、複数のファイルを一括でリネームし、ダウンロードする機能を持っています。サーバーサイドの技術を一切使わず、フロントエンドのみで動作するため、誰でも簡単に利用・カスタマイズできます。
アプリケーションの活用場面
現在、さまざまな画像生成AIや生成AIが登場していますが、OpenAIのDALLE3以外の多くのサービスでは、生成されたファイルの名前が適切に設定されず、「file1.png」や「image2.jpg」などのように連番のみで命名されることが一般的です。これでは、複数のファイルを管理する際にどのファイルがどの生成物なのか把握しづらく、管理が煩雑になるという問題があります。
特に、以下のような場面でこのアプリケーションが役立ちます：
複数の画像を生成した際の整理: 例えば、異なるプロンプトや設定で複数の画像を生成した場合、それぞれのファイルに意味のある名前を付けることで、後からの整理や検索が容易になります。
プロジェクトごとのファイル管理: デザインプロジェクトや研究プロジェクトなどで多くの画像ファイルを扱う際、一括でファイル名を変更することで、プロジェクトごとの整理がスムーズになります。
他の画像再生サービスとの連携: 各種画像再生サービスを利用している方は、生成されたファイル名が統一されていないために管理が煩雑になりがちです。このアプリを活用することで、ファイル名を一括で整理し、効率的に管理することが可能です。
このような課題を解決するために、この一括ファイル名変更Webアプリケーションのアイディアを思いつきました。さまざまな画像生成サービスを利用している方には、ぜひこのツールを活用していただきたいと思います。
アプリケーションの概要
このWebアプリケーションは、以下の機能を提供します：
複数ファイルのアップロード: ユーザーは一度に複数のファイルを選択・アップロードできます。
ファイル名の一括変更: ユーザーが指定したベース名に基づき、各ファイルに通し番号を付加して新しい名前に変更します（例: `xyz_1.png`, `xyz_2.png`）。
自動ダウンロード: リネームされたファイルが自動的にダウンロードされます。
これにより、大量のファイルを効率的に管理・整理することが可能になります。
使用したプロンプト
役割: あなたはシングルページ Web アプリケーション開発の専⾨家です。
指⽰: 複数のファイルをアップロードし、ファイル名(xyz)を入力すると、ファイル名が一括して通し番号付き（example: xyz_1.png）で変更されて、自動的にダウンロードする機能を持つシングルペー ジ Web アプリケーションのコードを出⼒してください
条件:
• フロントエンドのみで動作する Web アプリケーションにし てください。サーバーサイドの機能は使⽤しません
• スタイリッシュでモダンなデザインにしてください
• htmlには、使⽤⽅法と注意事項を記載してください
• 出⼒内容: htmlコードの中にCSS,JavaScriptコードを含めて ください
• 出⼒形式: コードブロックに出⼒してくださいアプリケーションのコード
以下に、HTML、CSS、JavaScriptを一つのファイルにまとめたコードを掲載します。このコードをコピーして、お手持ちのテキストエディタに貼り付け、`.html`ファイルとして保存すれば、すぐに動作するアプリケーションが完成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ファイル名一括変更ダウンローダー</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
max-width: 400px;
width: 100%;
}
h1 {
text-align: center;
margin-bottom: 24px;
color: #333333;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #555555;
}
input[type="text"], input[type="file"] {
width: 100%;
padding: 10px 15px;
border: 1px solid #cccccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
}
input[type="file"] {
padding: 5px 15px;
}
button {
width: 100%;
padding: 12px;
background-color: #4CAF50;
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #45a049;
}
.instructions {
background: #f9f9f9;
padding: 15px;
border-left: 4px solid #4CAF50;
margin-bottom: 20px;
border-radius: 4px;
}
.instructions h2 {
margin-top: 0;
font-size: 18px;
color: #333333;
}
.instructions ul {
padding-left: 20px;
color: #555555;
}
.error-message {
color: #D8000C;
background-color: #FFBABA;
border: 1px solid #D8000C;
padding: 10px;
border-radius: 4px;
margin-bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>ファイル名一括変更</h1>
<div class="instructions">
<h2>使用方法:</h2>
<ul>
<li>「ファイルを選択」ボタンをクリックして、変更したいファイルを複数選択してください。</li>
<li>「新しいファイル名」を入力してください（例: xyz）。</li>
<li>「ダウンロード開始」ボタンをクリックすると、ファイル名が変更されてダウンロードが開始されます。</li>
</ul>
<h2>注意事項:</h2>
<ul>
<li>ファイルの数が多い場合、ダウンロードに時間がかかることがあります。</li>
<li>ブラウザのセキュリティ設定により、自動ダウンロードがブロックされる場合があります。</li>
<li>大きなファイルや特定のファイル形式には対応していない場合があります。</li>
</ul>
</div>
<div id="errorMessage" class="error-message"></div>
<div class="input-group">
<label for="fileInput">ファイルを選択:</label>
<input type="file" id="fileInput" multiple>
</div>
<div class="input-group">
<label for="baseName">新しいファイル名:</label>
<input type="text" id="baseName" placeholder="例: xyz">
</div>
<button id="downloadBtn">ダウンロード開始</button>
</div>
<script>
// 新しいファイル名のバリデーション関数
function validateBaseName(name) {
// 禁止文字を定義
const forbiddenChars = /[\\/:*?"<>|]/;
if (forbiddenChars.test(name)) {
return { valid: false, message: 'ファイル名に使用できない特殊文字が含まれています。\\ / : * ? " < > |' };
}
// 長さのチェック（例: 最大50文字）
if (name.length === 0) {
return { valid: false, message: 'ファイル名を入力してください。' };
}
if (name.length > 50) {
return { valid: false, message: 'ファイル名は50文字以内で入力してください。' };
}
return { valid: true };
}
// エラーメッセージの表示関数
function showError(message) {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = message;
errorDiv.style.display = 'block';
}
// エラーメッセージの非表示関数
function hideError() {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = '';
errorDiv.style.display = 'none';
}
document.getElementById('downloadBtn').addEventListener('click', function() {
hideError(); // エラーメッセージを隠す
const files = document.getElementById('fileInput').files;
const baseName = document.getElementById('baseName').value.trim();
if (files.length === 0) {
showError('ファイルを選択してください。');
return;
}
const validation = validateBaseName(baseName);
if (!validation.valid) {
showError(validation.message);
return;
}
Array.from(files).forEach((file, index) => {
const extension = file.name.substring(file.name.lastIndexOf('.'));
const newFileName = `${baseName}_${index + 1}${extension}`;
const blob = file.slice(0, file.size, file.type);
const newBlob = new Blob([blob], { type: file.type });
const url = URL.createObjectURL(newBlob);
const a = document.createElement('a');
a.href = url;
a.download = newFileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
alert('ダウンロードが開始されました。');
});
</script>
</body>
</html>
HTML部分
構造: `div.container` 内に、タイトル、使用方法と注意事項の説明、ファイル選択フィールド、新しいファイル名の入力フィールド、そしてダウンロードボタンが配置されています。
指示文: `.instructions` クラス内に、ユーザーがアプリを正しく使用するための手順と注意事項が記載されています。
CSS部分
デザイン: モダンでスタイリッシュなデザインを実現するために、フラットな色使いと柔らかなボーダー、シャドウ効果を使用しています。
レスポンシブ: `.container` の最大幅を設定し、中央揃えにすることで、さまざまなデバイスでの表示に対応しています。
JavaScript部分
イベントリスナー: ダウンロードボタンがクリックされた際に、ファイルの選択状態と新しいファイル名の入力を確認します。
ファイル処理: 各ファイルに対して、新しい名前を生成し（例: `xyz_1.png`）、Blobオブジェクトを作成してダウンロードリンクを生成・クリックします。
ユーザー通知: 処理が完了すると、ダウンロードが開始された旨をアラートで通知します。
アプリケーションの利用方法
ファイルの選択: 「ファイルを選択」ボタンをクリックし、リネームしたい複数のファイルを選択します。
新しいファイル名の入力: 「新しいファイル名」フィールドに、希望するベース名を入力します（例: `xyz`）。
ダウンロードの開始: 「ダウンロード開始」ボタンをクリックすると、各ファイルが指定したベース名に基づきリネームされ、自動的にダウンロードが開始されます。
デモとダウンロードリンク
実際にこのアプリケーションを試してみたい方は、以下のリンクからアクセスしてください。ご利用（無料）、ダウンロード（無料）はご自由に行ってください。：
アプリケーションデモURL:
こちらからご利用いただけます。複数のファイルを一括アップロードできます。
コードのダウンロード:
デスクトップにダウンロードしてご自身のPCでご利用いただけます。
ChatGPTを活用した開発のメリット
今回のアプリケーション開発では、ChatGPTのコード生成機能を活用することで、以下のようなメリットを享受しました：
迅速なプロトタイピング: 短時間で基本的な機能を持つアプリケーションの骨組みを作成できました。
学習と理解の支援: 各コード部分の解説を通じて、どのように動作するのかを理解しやすくなりました。
カスタマイズの容易さ: 必要に応じてコードを修正・拡張する際の参考として役立ちます。
ChatGPTを活用することで、プログラミング初心者から経験者まで、効率的にWebアプリケーションを開発・カスタマイズすることが可能です。ぜひ、皆さんもChatGPTを活用して、便利なツールを作成してみてください！
まとめ
今回は、ChatGPTを利用して、複数のファイル名を一括で変更し、自動的にダウンロードするシングルページWebアプリケーションの作成方法をご紹介しました。サーバーサイドの知識がなくても、フロントエンドの技術だけで実現できるこのアプリケーションは、日常の業務効率化に大いに役立つことでしょう。
【重版出来】AIアプリをプログラミング不要で開発する書籍
ChatGPTでAIアプリを作って仕事で使いたい方と世界に公開したい方へ！