テキストを入力して
JSON作成ボタンをクリックしたら
JSON文字列が作成される
というアプリケーション
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.ta {
width: 360px;
height: 120px;
}
</style>
</head>
<body>
<textarea id="input_text" class="ta"></textarea><br>
<button id="create_json_bt">JSON作成</button><br>
<textarea id="json_text" class="ta"></textarea><br>
<script>
var input_text = document.getElementById("input_text");
var json_text = document.getElementById("json_text");
var create_json_bt = document.getElementById("create_json_bt");
create_json_bt.onclick = create_json_bt_clicked;
function create_json_bt_clicked() {
var text = input_text.value;
var text_split = text.split("\n");
var array = [];
for (var i = 0; i < text_split.length; i++) {
var obj = {}
obj["text"] = text_split[i];
array.push(obj);
}
var json = JSON.stringify(array);
json_text.value = json;
}
</script>
</body>
</html>
|
意訳
taのスタイル
幅
高さ
入力エリア
JSON作成ボタン
JSON出力エリア
idがinput_textの要素を取得する
idがjson_textの要素を取得する
idがcreate_json_btの要素を取得する
create_json_btがクリックされたらcreate_json_bt_clickedを実行する
この機能がやること
input_textの値を取得して
改行で区切って
結果を入れる配列を用意して
区切った値の数だけ以下を繰り返す
オブジェクトの入れ物を用意して
{"text": text_split[i]の値}を作って
arrayに追加する
arrayをJSONに変換して
JSONの出力エリアに入れる
|