はじめに
クリップボードから画像を貼り付けてPNG形式でダウンロードできるWebツールを作りました。今回は、このツールに「画像を貼り付けた瞬間の日時をファイル名に自動追加する機能」を実装しました。
スクリーンショットを何枚も保存していると、ファイル名の管理が面倒になります。ファイル名が重複すると、移動時にファイル名を変更する操作が必要になるからです。そこで、ダウンロード時にファイル名に日時を含めることにしました。
実装の要件
今回実装したい機能は次のとおりです。
画像をクリップボードから貼り付けた瞬間に、その時刻を記録します。ファイル名は、ユーザーが入力した名前の後ろに、記録した日時を自動で追加します。たとえば、入力欄に「clipng」と入力して、2025年9月29日14時30分25秒に画像を貼り付けた場合、ダウンロードされるファイル名は「clipng_2025-09-29_143025.png」となります。
ユーザーは入力欄の名前を後から変更できます。たとえば「myimage」に変更すると、ダウンロード時のファイル名は「myimage_2025-09-29_143025.png」になります。日時の部分は、画像を貼り付けた時のまま変わりません。
タイムスタンプ生成関数の実装
まず、日時を文字列に変換する関数を作ります。JavaScriptのDateオブジェクトから年月日と時分秒を取り出し、指定した形式の文字列を作ります。
function generateTimestamp() {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `_${year}-${month}-${day}_${hours}${minutes}${seconds}`;
}
Code language: JavaScript (javascript)padStart(2, '0')は、数値が1桁の場合に先頭に0を追加するメソッドです。たとえば、月が3月なら「03」に、時が9時なら「09」になります。これにより、常に2桁の表示になります。
関数の戻り値は「_2025-09-29_143025」という形式の文字列です。先頭にアンダースコアを付けることで、ファイル名の本体部分と日時部分を区切ります。
画像データへのタイムスタンプ保存
画像をクリップボードから読み込んだ時、画像の情報を保存するオブジェクトにタイムスタンプを追加します。
currentImageData = {
blob: blob,
url: imageUrl,
width: imgWidth,
height: imgHeight,
timestamp: generateTimestamp() // この行を追加
};
Code language: JavaScript (javascript)currentImageDataは画像の情報を保存するグローバル変数です。画像本体のデータ（blob）、プレビュー用のURL、画像の幅と高さに加えて、今回新たにtimestampプロパティを追加しました。
この時点でgenerateTimestamp()を呼び出すことがポイントです。画像を貼り付けた瞬間の日時が記録されます。
ダウンロード時のファイル名生成
ダウンロードボタンを押した時、保存されたタイムスタンプを使ってファイル名を組み立てます。
link.download = `${fileName.value || 'clipng'}${currentImageData.timestamp}.png`;
Code language: JavaScript (javascript)fileName.valueはユーザーが入力欄に入力した文字列です。もし空欄なら「clipng」をデフォルト値として使います。その後ろに、currentImageData.timestampを結合し、最後に拡張子「.png」を付けます。
テンプレートリテラル（バッククォートで囲まれた文字列）を使うと、変数を${}で埋め込めます。複数の文字列を連結する時に便利です。
UIの調整
ファイル名入力欄のデフォルト値を「clipng」に変更しました。
<input type="text" id="fileName" value="clipng" placeholder="ファイル名を入力（拡張子なし）">
Code language: HTML, XML (xml)また、入力欄のラベルに「[ファイル名]_YYYY-MM-DD_hhmmss.png」という形式例を表示しました。ユーザーは、実際にダウンロードされるファイル名の形式を確認できます。
動作の流れ
実際の動作を順を追って見てみます。
ユーザーがクリップボードから画像を貼り付けます。その瞬間、handleImageBlob関数が実行され、generateTimestamp()が呼ばれます。たとえば「_2025-09-29_143025」というタイムスタンプが生成され、currentImageData.timestampに保存されます。
ユーザーは入力欄のファイル名を自由に変更できます。「clipng」のままでも、「screenshot」や「memo」に変えても構いません。
ダウンロードボタンを押すと、入力欄の文字列と保存されたタイムスタンプが結合されます。「myimage」と入力していれば「myimage_2025-09-29_143025.png」となります。タイムスタンプは貼り付け時のままです。
技術的なポイント
JavaScriptのDateオブジェクトは、現在の日時を取得するための標準的な方法です。getFullYear()で年、getMonth()で月（0始まりなので+1が必要）、getDate()で日を取得できます。同様にgetHours()、getMinutes()、getSeconds()で時分秒を取得します。
padStart()メソッドは文字列の先頭を指定した長さまで埋めるメソッドです。数値を文字列に変換した後、2桁に揃えるために使います。
オブジェクトにプロパティを追加する時は、単純に新しいキーと値を指定するだけです。既存のコードへの影響を最小限にしながら、機能を拡張できます。
まとめ
クリップボード画像変換ツールに、タイムスタンプ付きファイル名機能を実装しました。画像貼り付け時に日時を記録し、ダウンロード時にユーザー入力のファイル名と結合する仕組みです。generateTimestamp()関数で日時を整形し、currentImageDataオブジェクトに保存します。ダウンロード処理では、テンプレートリテラルを使って「ファイル名_日時.png」の形式を生成します。