概要

Google Apps Script(以下GAS）の練習も兼ねてAnkiという有名な暗記アプリのインポートを楽にしたいので作成。筆者はHTMLやCSSは苦手なのでChatGPTを介し作成。

機能

リスト形式での単語追加
- リストの長さはボタンで行を追加して可変的に対応可能
リストごとの削除ボタン
CSV出力機能
- 出力前に確認メッセージ
- 出力CSV名は"Anki_import.csv"

main.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .container {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
      }
      .row {
        display: flex;
        align-items: center; /* 縦方向に中央揃え */
        margin-bottom: 15px;
      }
      .textbox {
        width: 10%;
        margin-right: 10px;
      }
      .add-button, .csv-button {
        margin-top: 20px;
      }
      .delete-button {
        margin-left: 10px; /* 左側にスペースを追加 */
      }
    </style>
  </head>
  <body>
    <h2>Ankiデータ作成</h2>
    <button class="add-button" onclick="addTextbox()">テキストボックスを追加</button>
    <button class="csv-button" onclick="exportCSV()">CSV形式で出力</button>
    <div class="container" id="textboxContainer">
      <div class="row">
        <input type="text" class="textbox" placeholder="表">
        <input type="text" class="textbox" placeholder="裏">
      </div>
    </div>
    
    <div id="output"></div>

    <script>
      function addTextbox() {
        const container = document.getElementById("textboxContainer");
        const newRow = document.createElement("div");
        newRow.className = "row";
        newRow.innerHTML = `
          <input type="text" class="textbox" placeholder="表">
          <input type="text" class="textbox" placeholder="裏">
          <button class="delete-button" onclick="deleteTextbox(this)">削除</button>
        `;
        container.appendChild(newRow);
      }

      function deleteTextbox(button) {
        const row = button.parentElement; // ボタンの親要素（行）を取得
        row.remove(); // 行を削除
      }

      function exportCSV() {
        const confirmation = confirm("CSVを出力しますか？"); // 確認メッセージを表示
        if (!confirmation) return; // ユーザーが「いいえ」を選択したら処理を中止

        const rows = document.querySelectorAll(".row");
        const csvData = [];

        rows.forEach(row => {
          const inputs = row.querySelectorAll(".textbox");
          const rowData = [];
          inputs.forEach(input => {
            rowData.push(input.value);
          });
          csvData.push(rowData);
        });

        const csvContent = csvData.map(e => e.join(",")).join("\n");
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement("a");
        const url = URL.createObjectURL(blob);
        link.setAttribute("href", url);
        link.setAttribute("download", "Anki_import.csv");
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    </script>
  </body>
</html>