【LIFF v2】テンプレートメッセージのサンプル【LINE】|AWSやシステム・アプリ開発

今回はテンプレートメッセージを紹介します。

文字だけのメッセージとは違い、完全にコンテンツと呼べるレベルのメッセージが送信できるので

使いこなせばLINEマスターと名乗れるかもしれません。

テンプレートボタンを使う

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            if (!liff.isInClient()) {
              document.getElementById('log').value += 'ng\n';
            } else {
              liff.sendMessages([{
                'type': 'template',
                'altText': document.getElementById('AltText').value,
                'template': {
                  'type': 'buttons',
                  'thumbnailImageUrl': document.getElementById('ThumbnailImageUrl').value,
                  'imageAspectRatio': document.getElementById('ImageAspectRatio').value,
                  'imageSize': document.getElementById('ImageSize').value,
                  'imageBackgroundColor': document.getElementById('ImageBackgroundColor').value,
                  'title': document.getElementById('Title').value,
                  'text': document.getElementById('Text').value,
                  'defaultAction': {
                    'type': 'uri',
                    'label': document.getElementById('Label0').value,
                    'uri': document.getElementById('Uri0').value
                  },
                  'actions': [{
                    'type': 'uri',
                    'label': document.getElementById('Label1').value,
                    'uri': document.getElementById('Uri1').value
                  },{
                    'type': 'uri',
                    'label': document.getElementById('Label2').value,
                    'uri': document.getElementById('Uri2').value
                  },{
                    'type': 'uri',
                    'label': document.getElementById('Label3').value,
                    'uri': document.getElementById('Uri3').value
                  },{
                    'type': 'uri',
                    'label': document.getElementById('Label4').value,
                    'uri': document.getElementById('Uri4').value
                  }]
                }
              }]).then(function() {
                document.getElementById('log').value += 'completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>テンプレートボタン</h3>
      <div>altText<input type="text" id="AltText" value="CrossPower"/></div>
      <div>thumbnailImageUrl<input type="text" id="ThumbnailImageUrl" value="https://www.x-power.co.jp/images/header/logo.png"/></div>
      <div>imageAspectRatio
        <select id="ImageAspectRatio">
          <option value="rectangle" selected>rectangle：1.51:1</option>
          <option value="square">square：1:1</option>
        </select>
      </div>
      <div>imageSize
        <select id="ImageSize">
          <option value="cover">cover</option>
          <option value="contain" selected>contain</option>
        </select>
      </div>
      <div>imageBackgroundColor<input type="text" id="ImageBackgroundColor" value="#333333"/></div>
      <div>title<input type="text" id="Title" value="クロスパワー"/></div>
      <div>text<input type="text" id="Text" value="Solution to your future"/></div>
      <div>デフォルトラベル<input type="text" id="Label0" value="TOP"/></div>
      <div>デフォルトURI<input type="text" id="Uri0" value="https://www.x-power.co.jp/"/></div>
      <div>label1<input type="text" id="Label1" value="事業内容"/></div>
      <div>uri1<input type="text" id="Uri1" value="https://www.x-power.co.jp/service.html"/></div>
      <div>label2<input type="text" id="Label2" value="導入事例"/></div>
      <div>uri2<input type="text" id="Uri2" value="https://www.x-power.co.jp/case.html"/></div>
      <div>label3<input type="text" id="Label3" value="会社概要"/></div>
      <div>uri3<input type="text" id="Uri3" value="https://www.x-power.co.jp/about.html#company"/></div>
      <div>label4<input type="text" id="Label4" value="沿革"/></div>
      <div>uri4<input type="text" id="Uri4" value="https://www.x-power.co.jp/about.html#history"/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

イメージ

LINE上にボタンを配置することができ、

ボタンを押した時にWebサイトへジャンプすることができます。

確認ボタンを使う

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            if (!liff.isInClient()) {
              document.getElementById('log').value += 'ng\n';
            } else {
              liff.sendMessages([{
                'type': 'template',
                'altText': document.getElementById('AltText').value,
                'template': {
                  'type': 'confirm',
                  'text': document.getElementById('Text').value,
                  'actions': [{
                    'type': 'uri',
                    'label': document.getElementById('Label1').value,
                    'uri': document.getElementById('Uri1').value
                  },{
                    'type': 'uri',
                    'label': document.getElementById('Label2').value,
                    'uri': document.getElementById('Uri2').value
                  }]
                }
              }]).then(function() {
                document.getElementById('log').value += 'completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>確認</h3>
      <div>altText<input type="text" id="AltText" value="確認"/></div>
      <div>text<input type="text" id="Text" value="Googleを開きますか？"/></div>
      <div>label1<input type="text" id="Label1" value="はい"/></div>
      <div>uri1<input type="text" id="Uri1" value="https://www.google.co.jp"/></div>
      <div>label2<input type="text" id="Label2" value="いいえ"/></div>
      <div>uri2<input type="text" id="Uri2" value="https://www.x-power.co.jp/"/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

イメージ

２つしかボタンの無いシンプルな確認フォームが作れます。

画像が使えないので注意が必要です。

カルーセルを使う

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            if (!liff.isInClient()) {
              document.getElementById('log').value += 'ng\n';
            } else {
              liff.sendMessages([{
                'type': 'template',
                'altText': document.getElementById('AltText').value,
                'template': {
                  'type': 'carousel',
                  'columns': [{
                    'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlA').value,
                    'imageBackgroundColor': document.getElementById('ImageBackgroundColorA').value,
                    'title': document.getElementById('TitleA').value,
                    'text': document.getElementById('TextA').value,
                    'defaultAction': {
                      'type': 'uri',
                      'label': document.getElementById('LabelA').value,
                      'uri': document.getElementById('UriA').value
                    },
                    'actions': [{
                      'type': 'uri',
                      'label': document.getElementById('LabelA1').value,
                      'uri': document.getElementById('UriA1').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelA2').value,
                      'uri': document.getElementById('UriA2').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelA3').value,
                      'uri': document.getElementById('UriA3').value
                    }]
                  }, {
                    'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlB').value,
                    'imageBackgroundColor': document.getElementById('ImageBackgroundColorB').value,
                    'title': document.getElementById('TitleB').value,
                    'text': document.getElementById('TextB').value,
                    'defaultAction': {
                      'type': 'uri',
                      'label': document.getElementById('LabelB').value,
                      'uri': document.getElementById('UriB').value
                    },
                    'actions': [{
                      'type': 'uri',
                      'label': document.getElementById('LabelB1').value,
                      'uri': document.getElementById('UriB1').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelB2').value,
                      'uri': document.getElementById('UriB2').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelB3').value,
                      'uri': document.getElementById('UriB3').value
                    }]
                  }, {
                    'thumbnailImageUrl': document.getElementById('ThumbnailImageUrlC').value,
                    'imageBackgroundColor': document.getElementById('ImageBackgroundColorC').value,
                    'title': document.getElementById('TitleC').value,
                    'text': document.getElementById('TextC').value,
                    'defaultAction': {
                      'type': 'uri',
                      'label': document.getElementById('LabelC').value,
                      'uri': document.getElementById('UriC').value
                    },
                    'actions': [{
                      'type': 'uri',
                      'label': document.getElementById('LabelC1').value,
                      'uri': document.getElementById('UriC1').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelC2').value,
                      'uri': document.getElementById('UriC2').value
                    },{
                      'type': 'uri',
                      'label': document.getElementById('LabelC3').value,
                      'uri': document.getElementById('UriC3').value
                    }]
                  }],
                  'imageAspectRatio': document.getElementById('ImageAspectRatio').value,
                  'imageSize': document.getElementById('ImageSize').value
                }
              }]).then(function() {
                document.getElementById('log').value += 'completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>カルーセル</h3>
      <div>altText<input type="text" id="AltText" value="カルーセル"/></div>
      <h4>1列目</h4>
      <div>thumbnailImageUrlA<input type="text" id="ThumbnailImageUrlA" value="https://3.bp.blogspot.com/-p41t8kD9ChE/UacVdY0mD4I/AAAAAAAAUZ8/q271mQQTWPo/s320/banner_season.jpg"/></div>
      <div>imageBackgroundColorA<input type="text" id="ImageBackgroundColorA" value="#880000"/></div>
      <div>titleA<input type="text" id="TitleA" value="祝日・行事"/></div>
      <div>textA<input type="text" id="TextA" value="季節ごとのイラスト"/></div>
      <div>labelA<input type="text" id="LabelA" value="ラベルA"/></div>
      <div>UriA<input type="text" id="UriA" value="https://www.irasutoya.com/p/seasons.html"/></div>
      <div>labelA1<input type="text" id="LabelA1" value="コタツでくつろぐぴょこ"/></div>
      <div>uriA1<input type="text" id="UriA1" value="https://www.irasutoya.com/2020/01/blog-post.html"/></div>
      <div>labelA2<input type="text" id="LabelA2" value="福男選び"/></div>
      <div>uriA2<input type="text" id="UriA2" value="https://www.irasutoya.com/2019/06/blog-post_260.html"/></div>
      <div>labelA3<input type="text" id="LabelA3" value="綺麗に色が出るプリンター"/></div>
      <div>uriA3<input type="text" id="UriA3" value="https://www.irasutoya.com/2019/12/blog-post_700.html"/></div>
      <h4>2列目</h4>
      <div>thumbnailImageUrlB<input type="text" id="ThumbnailImageUrlB" value="https://3.bp.blogspot.com/-Ysg9gD0BSWg/UNrdB2zjPMI/AAAAAAAAJkA/3v15_io6FmQ/s320/banner_food_cooking.jpg"/></div>
      <div>imageBackgroundColorB<input type="text" id="ImageBackgroundColorB" value="#008800"/></div>
      <div>titleB<input type="text" id="TitleB" value="食べ物・料理"/></div>
      <div>textB<input type="text" id="TextB" value="食べ物のイラスト"/></div>
      <div>labelB<input type="text" id="LabelB" value="ラベルB"/></div>
      <div>UriB<input type="text" id="UriB" value="https://www.irasutoya.com/p/food.html"/></div>
      <div>labelB1<input type="text" id="LabelB1" value="円盤餃子"/></div>
      <div>uriB1<input type="text" id="UriB1" value="https://www.irasutoya.com/2019/11/blog-post_936.html"/></div>
      <div>labelB2<input type="text" id="LabelB2" value="ラクサラーメン"/></div>
      <div>uriB2<input type="text" id="UriB2" value="https://www.irasutoya.com/2019/11/blog-post_53.html"/></div>
      <div>labelB3<input type="text" id="LabelB3" value="カレーライス"/></div>
      <div>uriB3<input type="text" id="UriB3" value="https://www.irasutoya.com/2019/10/blog-post_725.html"/></div>
      <h4>3列目</h4>
      <div>thumbnailImageUrlC<input type="text" id="ThumbnailImageUrlC" value="https://2.bp.blogspot.com/-Q1rLID5m0aA/UOzk8GDG5JI/AAAAAAAAKcs/q9eNBXbELeg/s1600/banner_seikatsu.jpg"/></div>
      <div>imageBackgroundColorC<input type="text" id="ImageBackgroundColorC" value="#000088"/></div>
      <div>titleC<input type="text" id="TitleC" value="生活"/></div>
      <div>textC<input type="text" id="TextC" value="家事のイラスト"/></div>
      <div>labelC<input type="text" id="LabelC" value="ラベルC"/></div>
      <div>UriC<input type="text" id="UriC" value="https://www.irasutoya.com/p/life.html"/></div>
      <div>labelC1<input type="text" id="LabelC1" value="皿洗い"/></div>
      <div>uriC1<input type="text" id="UriC1" value="https://www.irasutoya.com/2019/12/blog-post_783.html"/></div>
      <div>labelC2<input type="text" id="LabelC2" value="粘着ローラーがけ"/></div>
      <div>uriC2<input type="text" id="UriC2" value="https://www.irasutoya.com/2019/12/blog-post_25.html"/></div>
      <div>labelC3<input type="text" id="LabelC3" value="雑巾を絞る人"/></div>
      <div>uriC3<input type="text" id="UriC3" value="https://www.irasutoya.com/2019/09/blog-post_641.html"/></div>
      <h4>全般</h4>
      <div>imageAspectRatio
        <select id="ImageAspectRatio">
          <option value="rectangle" selected>rectangle：1.51:1</option>
          <option value="square">square：1:1</option>
        </select>
      </div>
      <div>imageSize
        <select id="ImageSize">
          <option value="cover">cover</option>
          <option value="contain" selected>contain</option>
        </select>
      </div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

イメージ

テンプレートボタンを横に並べたような物が作れます。

ボタンや画像の数が多いので、かなりの量のリンクを設定できます。

画像カルーセルを使う

<!DOCTYPE html>
<html lang="jp" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XP LIFF</title>
    <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            if (!liff.isInClient()) {
              document.getElementById('log').value += 'ng\n';
            } else {
              liff.sendMessages([{
                'type': 'template',
                'altText': document.getElementById('AltText').value,
                'template': {
                  'type': 'image_carousel',
                  'columns': [{
                    'imageUrl': document.getElementById('ImageUrl1').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label1').value,
                      'uri': document.getElementById('Uri1').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl2').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label2').value,
                      'uri': document.getElementById('Uri2').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl3').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label3').value,
                      'uri': document.getElementById('Uri3').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl4').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label4').value,
                      'uri': document.getElementById('Uri4').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl5').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label5').value,
                      'uri': document.getElementById('Uri5').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl6').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label6').value,
                      'uri': document.getElementById('Uri6').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl7').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label7').value,
                      'uri': document.getElementById('Uri7').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl8').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label8').value,
                      'uri': document.getElementById('Uri8').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl9').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label9').value,
                      'uri': document.getElementById('Uri9').value
                    }
                  }, {
                    'imageUrl': document.getElementById('ImageUrl10').value,
                    'action': {
                      'type': 'uri',
                      'label': document.getElementById('Label10').value,
                      'uri': document.getElementById('Uri10').value
                    }
                  }]
                }
              }]).then(function() {
                document.getElementById('log').value += 'completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>画像カルーセル</h3>
      <div>altText<input type="text" id="AltText" value="画像カルーセル"/></div>
      <h4>1つ目</h4>
      <div>ImageUrl1<input type="text" id="ImageUrl1" value="https://1.bp.blogspot.com/-bvhr8OjNEMU/XkZdVMKXOBI/AAAAAAABXWc/g_U8e9jfcEYF9KmjqggRzt3uwQbdTtbRQCNcBGAsYHQ/s1600/yuudou_people.png"/></div>
      <div>label1<input type="text" id="Label1" value="誘導する人のイラスト"/></div>
      <div>Uri1<input type="text" id="Uri1" value="https://www.irasutoya.com/2020/03/blog-post_67.html"/></div>
      <h4>2つ目</h4>
      <div>ImageUrl2<input type="text" id="ImageUrl2" value="https://1.bp.blogspot.com/-g8SvoaWXsu4/WxvKcz2XKGI/AAAAAAABMpQ/bINODvUI3M40fVxhbD8XOHi0fj-R4TI2gCLcBGAs/s800/swimming_life_jacket_boy.png"/></div>
      <div>label2<input type="text" id="Label2" value="ライフジャケットを着た男"/></div>
      <div>Uri2<input type="text" id="Uri2" value="https://www.irasutoya.com/2018/07/blog-post_90.html"/></div>
      <h4>3つ目</h4>
      <div>ImageUrl3<input type="text" id="ImageUrl3" value="https://3.bp.blogspot.com/-ul85IZ7jhKI/WaPvZiTEkII/AAAAAAABGMY/H69DFdgjGXU5jhiexESg11fJXKMFcWVhQCLcBGAs/s800/bowling_foul.png"/></div>
      <div>label3<input type="text" id="Label3" value="ファウルラインを超える人"/></div>
      <div>Uri3<input type="text" id="Uri3" value="https://www.irasutoya.com/2017/09/blog-post_735.html"/></div>
      <h4>4つ目</h4>
      <div>ImageUrl4<input type="text" id="ImageUrl4" value="https://2.bp.blogspot.com/-GuJM5cIi3K8/VHbNOnnoEzI/AAAAAAAApU8/VAa2CK1C360/s800/hyousyou_sports_man.png"/></div>
      <div>label4<input type="text" id="Label4" value="表彰台に乗る選手"/></div>
      <div>Uri4<input type="text" id="Uri4" value="https://www.irasutoya.com/2014/11/blog-post_364.html"/></div>
      <h4>5つ目</h4>
      <div>ImageUrl5<input type="text" id="ImageUrl5" value="https://1.bp.blogspot.com/-de2ZDEAGNh8/VGX8hctsIgI/AAAAAAAApII/s84UVJQkhbs/s800/futago_coodinate.png"/></div>
      <div>label5<input type="text" id="Label5" value="女性のペアルック"/></div>
      <div>Uri5<input type="text" id="Uri5" value="https://www.irasutoya.com/2014/11/blog-post_863.html"/></div>
      <h4>6つ目</h4>
      <div>ImageUrl6<input type="text" id="ImageUrl6" value="https://4.bp.blogspot.com/-nunrFXJRg90/Ufj1CjzyVuI/AAAAAAAAWk0/vNpna3tGLfY/s800/baikin_komatta.png"/></div>
      <div>label6<input type="text" id="Label6" value="細菌・ばい菌"/></div>
      <div>Uri6<input type="text" id="Uri6" value="https://www.irasutoya.com/2013/08/blog-post_5302.html"/></div>
      <h4>7つ目</h4>
      <div>ImageUrl7<input type="text" id="ImageUrl7" value="https://1.bp.blogspot.com/-MAhXVeGjWx4/UxbLt9zgQeI/AAAAAAAAeDQ/7WLOXCCYOx4/s800/tsumekiri.png"/></div>
      <div>label7<input type="text" id="Label7" value="爪切り"/></div>
      <div>Uri7<input type="text" id="Uri7" value="https://www.irasutoya.com/2014/03/blog-post_4200.html"/></div>
      <h4>8つ目</h4>
      <div>ImageUrl8<input type="text" id="ImageUrl8" value="https://1.bp.blogspot.com/-BR1SuUW6Kvg/U8XlRUHfpEI/AAAAAAAAi70/1K7ewvNtssc/s800/music_Ravel.png"/></div>
      <div>label8<input type="text" id="Label8" value="ラヴェルの似顔絵"/></div>
      <div>Uri8<input type="text" id="Uri8" value="https://www.irasutoya.com/2014/08/blog-post_151.html"/></div>
      <h4>9つ目</h4>
      <div>ImageUrl9<input type="text" id="ImageUrl9" value="https://4.bp.blogspot.com/-nAGQDv5nIUs/V8VE-Ky1QVI/AAAAAAAA9WQ/ovw-efNG6Yc-dYQ3l2oHiK5n954zriaIwCLcB/s800/flower_chinchouge.png"/></div>
      <div>label9<input type="text" id="Label9" value="沈丁花"/></div>
      <div>Uri9<input type="text" id="Uri9" value="https://www.irasutoya.com/2016/09/blog-post_34.html"/></div>
      <h4>10つ目</h4>
      <div>ImageUrl10<input type="text" id="ImageUrl10" value="https://1.bp.blogspot.com/-70jrzLRUA3c/XjEjSPTvbyI/AAAAAAABXKk/57c9UsmuLA4wu7-DIlIL43eRnOADaBKdQCNcBGAsYHQ/s1600/mark_eye_uruuru.png"/></div>
      <div>label10<input type="text" id="Label10" value="うるうるした目"/></div>
      <div>Uri10<input type="text" id="Uri10" value="https://www.irasutoya.com/2020/02/blog-post_83.html"/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>