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/