概要
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>