ChatGPTが作る便利ツール:Tableau背景イメージの座標をCSVにエクスポート
はじめに
Tableauでフロアの滞在時間などを可視化するのに、滞在時間を計測した位置について画像データ上の座標が欲しい時があるかと思います。
この座標の取得方法ですが、Tableauのヘルプとかを見ると手作業になっていたりして、結構手間のかかる作業です。
そこでこれを簡単にやる方法をChatGPTに教えてもらいました。
ChatGPTとのやりとり
Q:画像をアップロードして、表示された画像をクリックしたら、そのクリックした箇所の座標をCSVで出力したい。
ChatGPT:プログラミング言語としてJavaScriptとHTMLを使用して、画像をアップロードし、クリックした座標をCSV形式で出力する方法を説明します。まず、HTMLファイルを作成して、画像のアップロードとキャンバス表示ができるようにします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Coordinate Exporter</title>
</head>
<body>
<input type="file" id="imageUpload" />
<canvas id="imageCanvas"></canvas>
<button id="downloadCSV">CSVダウンロード</button>
<script src="app.js"></script>
</body>
</html>
次に、app.jsという名前のJavaScriptファイルを作成し、画像のアップロード、表示、座標の取得、およびCSV出力を実装します。
const imageUpload = document.getElementById("imageUpload");
const imageCanvas = document.getElementById("imageCanvas");
const downloadCSV = document.getElementById("downloadCSV");
const ctx = imageCanvas.getContext("2d");
const coordinates = [];
imageUpload.addEventListener("change", (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => {
imageCanvas.width = img.width;
imageCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
};
});
imageCanvas.addEventListener("click", (event) => {
const rect = event.target.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
coordinates.push({ x, y });
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
});
downloadCSV.addEventListener("click", () => {
const csvContent = "data:text/csv;charset=utf-8," + coordinates.map((coord) => `${coord.x},${coord.y}`).join("\n");
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "coordinates.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
このコードでは、画像をアップロードし、キャンバスに表示します。次に、画像上をクリックすると座標が記録され、CSVダウンロードボタンを押すと、CSV形式で座標データがダウンロードされます。
Q:それぞれのファイルは、どういう名称で、どこに保存したらいい?
ChatGPT:それぞれのファイル名と保存場所について説明します。
HTMLファイル: このファイルはindex.htmlという名前で保存し、プロジェクトのルートディレクトリ(メインフォルダ)に保存します。
JavaScriptファイル: このファイルはapp.jsという名前で保存し、同じくプロジェクトのルートディレクトリに保存します。
ディレクトリ構造は以下のようになります。
プロジェクトフォルダ
|-- index.html
|-- app.js
プロジェクトフォルダは任意の名前で構いません。フォルダを作成し、その中にindex.htmlとapp.jsを保存してください。その後、Webブラウザでindex.htmlを開いて、プログラムを実行できます。
Q:出力したCSVの1列目にヘッダーを入れてほしい。各列の名称はおまかせします。あと、1列目には、クリックした順番に連番を振って。
ChatGPT:CSVファイルにヘッダーとクリックした順番の連番を追加するには、app.jsのdownloadCSVイベントリスナーを以下のように修正してください。
downloadCSV.addEventListener("click", () => {
const header = "No,CoordinateX,CoordinateY";
const csvContent = coordinates.map((coord, index) => `${index + 1},${coord.x},${coord.y}`).join("\n");
const encodedUri = encodeURI("data:text/csv;charset=utf-8," + header + "\n" + csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "coordinates.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
ここでは、headerという変数を作成して、CSVファイルの各列の名前(No, CoordinateX, CoordinateY)を指定しました。また、coordinates.map関数の中で連番をインデックスに追加しました。これで、CSVファイルにヘッダーと連番が追加されます。
結果
できました。
ChatGPTに教えてもらったコードをコピペするだけで完成。便利です。他にも色々ラクにできることがありそうです。(ちなみにこの記事のタイトルもChatGPTに考えてもらいました。)
※ 記事で紹介したツールは、あくまで著者自身の利用を目的として作成されたものです。ご利用される場合は、全て自己責任において行っていただくようお願いいたします。ツールの使用により生じた損害について、一切の責任を負いかねます。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?