LANG SELRCT

コードを書く場所についてはこちら

2018年1月19日金曜日

HTML要素を動的に作りたい(画像)


JavaScriptで画像を動的に作る

画像URLを配列に入れてひとつずつimgを作っていくコードの例です





コード.gs
function 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/