LANG SELRCT

Apps Script Reference  (Create: Create new Spreadsheet | Create new Apps Script

Friday, January 19, 2018

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 = [
  "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/

Latest post

Extracting data from Google Sheets with regular expressions

Introduction Regular expressions are a powerful tool that can be used to extract data from text.  In Google Sheets, regular expressions ca...