コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<input type="text" list="colors" id="color">
<datalist id="colors">
<option value="blue">
<option value="green">
</datalist>
<form id="radios">
<label><input type="radio" name="radio1" id="blue">blue</label><br>
<label><input type="radio" name="radio1" id="green">green</label>
</form>
<script>
document.getElementById("color").onchange = selectRadio;
function selectRadio() {
var color = document.getElementById("color").value;
var radios = document.getElementById("radios");
var labels = radios.getElementsByTagName("label");
for(var i = 0; i < labels.length; i++) {
if(labels[i].textContent === color) {
labels[i].click();
}
}
}
</script>
</body>
</html>
|
意訳テキストボックス テキストボックスにサジェストするリスト blue green formを配置する blueのラジオボタン greenのラジオボタン ここからJavaScript idが"color"の値が変わったらselectRadioを実行する この機能がやること idが"color"の値を取得する idが"radios"の要素を取得して その中のlabel要素を取得する label要素の数だけ繰り返す label要素のテキストがcolorと同じなら label要素をクリックする |
コード.gs var objs = [
{"en": "Aries", "ja": "おひつじ座"},
{"en": "Taurus", "ja": "おうし座"},
{"en": "Gemini", "ja": "ふたご座"},
{"en": "Cancer", "ja": "かに座"},
{"en": "Leo", "ja": "しし座"},
{"en": "Virgo", "ja": "おとめ座"},
{"en": "Libra", "ja": "てんびん座"},
{"en": "Scorpius", "ja": "さそり座"},
{"en": "Sagittarius", "ja": "いて座"},
{"en": "Capriconus", "ja": "やぎ座"},
{"en": "Aquarius", "ja": "みずがめ座"},
{"en": "Pisces", "ja": "うお座"}
]
function myFunction() {
var value = "Leo";
var result = hasValue(value);
Logger.log(result);
}
function hasValue(value) {
for(var i = 0; i < objs.length; i++) {
var obj = objs[i];
if(obj["en"] === value) {
return true;
}
}
return false;
}
| 意訳オブジェクトたちを入れた配列を用意する この機能がやること 探す値を決めて hasValueに渡して 結果をログに出す この機能がやること objsの要素の数だけ繰り返す objsの要素をひとつずつ取り出して valueと同じなら true返す 途中でtrueを返さなければfalseを返す |
コード2.gs
var objs = [
{"en": "Aries", "ja": "おひつじ座"},
{"en": "Taurus", "ja": "おうし座"},
{"en": "Gemini", "ja": "ふたご座"},
{"en": "Cancer", "ja": "かに座"},
{"en": "Leo", "ja": "しし座"},
{"en": "Virgo", "ja": "おとめ座"},
{"en": "Libra", "ja": "てんびん座"},
{"en": "Scorpius", "ja": "さそり座"},
{"en": "Sagittarius", "ja": "いて座"},
{"en": "Capriconus", "ja": "やぎ座"},
{"en": "Aquarius", "ja": "みずがめ座"},
{"en": "Pisces", "ja": "うお座"}
]
function myFunction() {
var value = "Leo";
var result = hasValue(value);
Logger.log(result);
}
function hasValue(value) {
var result;
for(var i = 0; i < objs.length; i++) {
var obj = objs[i];
if(obj["en"] === value) {
result = true
return result;
} else {
result = false
}
}
return result
}
|
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<div id="main">
<input type="text" id="input_text" list="data_list">
<datalist id="data_list">
<option>あめ</option>
<option>ちょこ</option>
<option>がむ</option>
</datalist>
</div>
<script>
document.getElementById('input_text').onchange = checkDataList;
function checkDataList() {
var dataList = document.getElementById('data_list');
var inputValue = document.getElementById('input_text').value;
var array = [];
for(var i = 0; i < dataList.options.length; i++) {
var value = dataList.options[i].value;
array.push(value);
}
if(array.indexOf(inputValue) === -1) {
alert("リストの中から選択してください");
document.getElementById('input_text').focus();
}
}
</script>
</body>
</html>
|
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.label1 {
border: solid 1px lightgray;
white-space: nowrap;
padding: 10px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 50vw;
}
</style>
</head>
<body>
<label class="label1">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</label>
</body>
</html>
|
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<script>
console.log("Console %cmessage", "color: blue;");
</script>
</body>
</html>
|
index2.html<!DOCTYPE html>
<html>
<body>
<script>
consoleStyled();
function consoleStyled() {
// 一行で書く場合
console.log("Console %cmessage", "color: white; background-color: blue;");
// 代入する場合
var color = "color: blue;";
console.log("Console %cmessage", color);
// 複数を配列で用意してjoinして代入する場合
var props = [
"color: white",
"background-color: blue",
"padding: 2px",
"font-size: 15px"
];
var style = props.join("; ");
console.log("Console %cmessage", style);
// 異なるスタイルを適用する場合はさらに%cで区切って、引数にスタイルを追加する
console.log("Console %cmessage %cgreen", "color: blue;", "color: green");
}
</script>
</body>
</html>
|
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<body>
<select id="voiceSelect"></select>
<script>
document.getElementById("voiceSelect").onclick = getVoiceIndex
speechSynthesis.onvoiceschanged = getVoices;
var voices;
function getVoices() {
voices = speechSynthesis.getVoices();
var select = document.getElementById("voiceSelect");
var values = "";
for(var i = 0; i < voices.length ; i++) {
var option = document.createElement('option');
var lang = voices[i].lang;
var value = voices[i].name
option.textContent = value;
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
select.appendChild(option);
}
select.setAttribute('size', 12);
}
function getVoiceIndex() {
var name = document.getElementById("voiceSelect").value;
var voiceIndex;
for(var i = 0; i < voices.length; i++) {
if(voices[i]["name"] === name) {
voiceIndex = i;
break;
}
}
alert(voiceIndex);
}
</script>
</body>
</html>
|