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/