Google Apps ScriptのHTML Serviceで、e.shiftKey のtrue / false を判定し、ボタンの処理を分岐する仕組みを作ったときに書いたコードです。
I tried code in Google Apps Script's HTML Service to check whether e.shiftKey is true or false and handle the button's actions accordingly.
Demo
下記のApps ScriptをデプロイしてWebアプリを起動すると、テキストエリアが横に2つ、左下にsubmitボタンが表示されます。
After launching the deployed web app, two text areas will be displayed side by side, with a submit button in the lower left corner.
左のinputテキストエリアに任意の英文を入力します。
Input any English text into the left text area.
submitボタンをクリックすると、その下に英文内の単語がボタンに分かれて表示されます。
After clicking the submit button, the words from the English text will be displayed as individual buttons below it.
単語のボタンをクリックすると、ボタンがハイライトされて右のテキストエリアにその単語が入力されます。
After clicking a word button, the button will be highlighted, and the word will be input into the right text area.
Shiftキーを押しながらボタンをクリックすると、その単語が右のテキストエリアに入力されます。
The words clicked while holding the Shift key will be input into the right text area.
Shiftキーを押さずに別の単語ボタンをクリックすると、ハイライトと右のテキストエリアがクリアされ、クリックした単語が入力されます
Clicking another word button without Shift clears the highlight and the right text area, then inputs the clicked word.
Apps Script
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.setTitle("Title");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
index.html
<!DOCTYPE html>
<html>
<head>
<?!= include("css"); ?>
</head>
<body>
<textarea id="input"></textarea>
<textarea id="result"></textarea>
<br>
<button id="submit">submit</button>
<br>
<div id="wordButtons"></div>
<?!= include("javascript"); ?>
</body>
</html>
css.html
<style>
textarea {
width: 30vw;
height: 20vh;
font-size: 20px;
}
.wordButtons {
font-size: 18px;
background-color: white;
border: solid 1px gray;
border-radius: 2px;
margin: 5px;
padding: 5px;
cursor: pointer;
}
.buttonHighlight {
background-color: aqua;
}
</style>
javascript.html
<script>
function elem(id) {
return document.getElementById(id);
}
elem("submit").onclick = createButtonsClicked;
function createButtonsClicked() {
const value = elem("input").value.trim();
const records = value.split("\n");
for(let i = 0; i < records.length; i++) {
const record = records[i].trim();
const words = record.split(" ");
createWordButtons(words);
}
}
function createWordButtons(words) {
const parent = elem("wordButtons");
const span = document.createElement("span");
const br = document.createElement("br");
for(let i = 0; i < words.length; i++) {
const word = words[i].match(/[a-zA-Z0-9'\s-]/g, "").join("");
const button = document.createElement("button");
button.textContent = word;
button.setAttribute("class", "wordButtons");
button.onclick = function(e){ wordButtonClicked(e, this)}
span.appendChild(button);
}
span.setAttribute("data-words", words.join(" "));
parent.appendChild(span);
parent.appendChild(br);
}
function wordButtonClicked(e, button) {
button.classList.add("buttonHighlight");
if(e.shiftKey) {
elem("result").value = elem("result").value + " " + button.textContent;
} else {
elem("result").value = button.textContent;
clearHighlight();
button.classList.add("buttonHighlight");
}
}
function clearHighlight() {
const parent = elem("wordButtons");
const buttons = parent.getElementsByTagName("button");
for(let i = 0; i < buttons.length; i++) {
buttons[i].classList.remove("buttonHighlight");
}
}
</script>
Reference
