JavaScriptで画像を動的に作る
画像URLを配列に入れてひとつずつimgを作っていくコードの例です
コード.gsfunction doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<body>
<div id="main_div"></div>
<script>
var urls = [
"http://3.bp.blogspot.com/-e5Z1Y01JXlc/WmEezR-iguI/AAAAAAAACOs/FNpAyocnKhw48cRyzzN1axtbuhEpyORIQCK4BGAYYCw/s1600/icon-1.png",
"https://1.bp.blogspot.com/-6BMSmbbtD_c/WmEelL_VjCI/AAAAAAAACOc/JaHV2_oFD2wIP4UVBAQoDv05LBn_7pomwCK4BGAYYCw/s400/240.png",
"http://1.bp.blogspot.com/-hJhCRILOxu8/WmEenklv37I/AAAAAAAACOk/kGFx9SrGGMUEyJrShTUd38LwrZIeaGzFgCK4BGAYYCw/s1600/linebot_imagefile.png"
];
create_imgs()
function create_imgs() {
var main_div = document.getElementById("main_div");
for (var i = 0; i < urls.length; i++) {
var link = document.createElement("a");
var img = document.createElement("img");
link.setAttribute("href", urls[i]);
link.setAttribute("target", "_blank");
img.setAttribute("src", urls[i]);
img.setAttribute("width", 128);
img.setAttribute("height", 128);
link.appendChild(img);
main_div.appendChild(link);
}
}
</script>
</body>
</html>
| 意訳これはHTML5文書です main_divというidのdivを置く 画像のURLを配列にして用意しておく create_imgs()を実行する この機能がやること idがmain_divの要素を取得して 画像URLの数だけ以下を繰り返す a要素を作って img要素を作って リンク先URLをひとつずつ設定して リンクは新規タブで開くようにして srcにURLをひとつずつ設定して 幅を128にして 高さを128にして a要素にimg要素を追加して main_divにa要素を追加する |
参考
HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/
