ChatGPTが作る便利ツール：Tableau背景イメージの座標をCSVにエクスポート

2023年3月18日 16:13

はじめに

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ファイルにヘッダーと連番が追加されます。

結果

できました。

index.htmlをダブルクリック > ファイルを選択 > 画像をクリック > CSVダウンロード

ChatGPTに教えてもらったコードをコピペするだけで完成。便利です。他にも色々ラクにできることがありそうです。（ちなみにこの記事のタイトルもChatGPTに考えてもらいました。）

※ 記事で紹介したツールは、あくまで著者自身の利用を目的として作成されたものです。ご利用される場合は、全て自己責任において行っていただくようお願いいたします。ツールの使用により生じた損害について、一切の責任を負いかねます。

この記事が参加している募集

AIとやってみた

25,434件

この記事が気に入ったらサポートをしてみませんか？