JavaScriptで画像を動的に作る
画像URLを配列に入れてひとつずつimgを作っていくコードの例です
コード.gsfunction doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
| 意訳この機能がやること 指定したHTMLファイルを表示する |
index.html<!DOCTYPE html>
<html>
<body>
<div id="main_div"></div>
<script>
var urls = [
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga3Fcpgp5CT7O9R4ONOzYsI9lrIOVDFQ0FLsMC30iQaxdcMnVTkB0QJX52IKfL6K46lRtODkt_7UCz9jbUIV_3vhML0j8WAMS2wk0hXBaU7DYLpwV53iLYJP3PMvo8rbsSR7WD8SAhboY/s1600/icon-1.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhajFqhOMT7TgABeKxj2UtMKJMFXiEpUCM2uK9Whav_Q1ZAW8L1xk9wc_VFpUis_sWDT7vH0dI7zHz5H59uSWrF-WjNYFS7flqpGuxi5mIooHmo-j1XLvSW1MP5VlUOGaJ5RdqmZ9ZeVgo/s400/240.png",
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTCGGI_SliWp6PJXMXx30LZD7j-TNrI5bFadCahelZqkHn6cvk-q8wz5vK5arOHMQDsWSNb6I4KlLOa3Vgz8WzrHFYAmImajBajytM-S1IuB_KwC0dz0BWqG8cZHZak7ZQzGjv8am9l-0/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/
