トップ > AWS > 【LIFF v2】メッセージ送信のサンプル【LINE】

【LIFF v2】メッセージ送信のサンプル【LINE】

AWS AWS-S3 LINE LINE-LIFFアプリ

LIFFから色々なメッセージを送る方法をお伝えします。

今回は比較的シンプルなメッセージについてお伝えします。

 

メッセージを送る

<!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 += 'sendMessagesText ng\n';
            } else {
              liff.sendMessages([{
                'type': 'text',
                'text': document.getElementById('sendMessagesTextText').value
              }]).then(function() {
                document.getElementById('log').value += 'sendMessagesText completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += 'sendMessagesText()=' + error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>メッセージを送信する</h3>
      <div>text<input type="text" id="sendMessagesTextText" placeholder="text" value=""/></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 += 'sendMessagesImage ng\n';
            } else {
              liff.sendMessages([{
                'type': 'image',
                'originalContentUrl': document.getElementById('sendMessagesImageOriginalContentUrl').value,
                'previewImageUrl': document.getElementById('sendMessagesImagePreviewImageUrl').value
              }]).then(function() {
                document.getElementById('log').value += 'sendMessagesImage completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += 'sendMessagesImage()=' + error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>画像を送信する</h3>
      <div>originalContentUrl<input type="text" id="sendMessagesImageOriginalContentUrl" value=""/></div>
      <div>previewImageUrl<input type="text" id="sendMessagesImagePreviewImageUrl" value=""/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

画像を送信する

LINEでいつも画像を送信してると思いますが、LIFFを使うとWeb上の画像を直接送信することができます。

今回はクロスパワーのHPからロゴ画像のURLを拝借しました。

 

いらすとや さんとかの画像をDLしないで、スタンプ感覚で使うことができるようになるので、かなり便利な機能だと思います。

逆に自分のスマホ内の画像をアップロードすることはできないので注意してください。

 

動画を送信する

 

<!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 += 'sendMessagesVideo ng\n';
            } else {
              liff.sendMessages([{
                'type': 'video',
                'originalContentUrl': document.getElementById('sendMessagesVideoOriginalContentUrl').value,
                'previewImageUrl': document.getElementById('sendMessagesVideoPreviewImageUrl').value
              }]).then(function() {
                document.getElementById('log').value += 'sendMessagesVideo completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += 'sendMessagesVideo()=' + error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>動画を送信する</h3>
      <div>originalContentUrl<input type="text" id="sendMessagesVideoOriginalContentUrl" value="https://xxxxxMVI_5380_1.mp4"/></div>
      <div>previewImageUrl<input type="text" id="sendMessagesVideoPreviewImageUrl" value="https://xxxxx/logo_sp.png"/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

試しに Amazon S3 に置いたこちらの動画とサムネ用の画像を使います。

サムネ用の画像

動画を送信する

こちらもWeb上の動画を直接メッセージで送れます。

サムネ用の画像は必須で指定しなくてはいけません。

しかし画像では無いURL、例えば動画と同じmp4なんかのURLを指定した場合は、

画像は表示されませんが動画メッセージとしては送れます。

 

音声を送信する

 

<!DOCTYPE html>
<html lang=&quot;jp&quot; dir=&quot;ltr&quot;>
  <head>
    <meta charset=&quot;utf-8&quot;>
    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>
    <title>XP LIFF</title>
    <script src=&quot;https://static.line-scdn.net/liff/edge/2.1/sdk.js&quot;></script>
    <script type=&quot;text/javascript&quot;>
    document.addEventListener(&quot;DOMContentLoaded&quot;, () => {
      liff
        .init({
          liffId: '<LIFF_ID>'
        })
        .then(() => {
          document.getElementById('go').addEventListener('click', () => {
            if (!liff.isInClient()) {
              document.getElementById('log').value += 'sendMessagesAudio ng\n';
            } else {
              liff.sendMessages([{
                'type': 'audio',
                'originalContentUrl': document.getElementById('sendMessagesAudioOriginalContentUrl').value,
                'duration': document.getElementById('sendMessagesAudioDuration').value
              }]).then(function() {
                document.getElementById('log').value += 'sendMessagesAudio completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += 'sendMessagesAudio()=' + error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>音声を送信する</h3>
      <div>originalContentUrl<input type=&quot;text&quot; id=&quot;sendMessagesAudioOriginalContentUrl&quot; value=&quot;https://xxxxx/sample.mp3&quot;/></div>
      <div>duration(長さミリ秒)<input type=&quot;text&quot; id=&quot;sendMessagesAudioDuration&quot; value=&quot;&quot;/></div>
      <input type=&quot;button&quot; id=&quot;go&quot; value=&quot;実行&quot;/>
      <textarea id=&quot;log&quot; style=&quot;width:96%;height:100px;&quot;></textarea>
    </div>
  </body>
</html>

 

試しに Amazon S3 に置いたこちらのmp3を送ります。

音声を送信する

durationは音声ファイルの長さを指定します。

今回使ったmp3は10秒のファイルなのですが5秒を指定してみました。

 

再生しカウントが0:00になってもしばらく再生中になっているのが確認できます。

カウントとは関係なしに最後まで再生してくれるようです。

なのでdurationは正確に指定してやるか、諦めて0ミリ秒にしちゃうのが良いと思います。

 

また、このAPIのURLにはmp4等の動画ファイルを指定していしてやることもできます。

その場合も音声のみに自動的に変換されます。

 

位置情報を送信する

 

<!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 += 'sendMessagesLocation ng\n';
            } else {
              liff.sendMessages([{
                'type': 'location',
                'title': document.getElementById('sendMessagesLocationTitle').value,
                'address': document.getElementById('sendMessagesLocationAddress').value,
                'latitude': document.getElementById('sendMessagesLocationLatitude').value,
                'longitude': document.getElementById('sendMessagesLocationLongitude').value
              }]).then(function() {
                document.getElementById('log').value += 'sendMessagesLocation completed\n';
              }).catch(function(error) {
                document.getElementById('log').value += 'sendMessagesLocation()=' + error + '\n';
              });
            }
          });
        })
        .catch((err) => {
          document.getElementById('log').value = 'init ng\n' + err;
        });
    });
    </script>
  </head>
  <body>
    <div>
      <h3>位置情報を送信する</h3>
      <div>title<input type="text" id="sendMessagesLocationTitle" value="NY"/></div>
      <div>address<input type="text" id="sendMessagesLocationAddress" value="〒150-0002 東京都渋谷区渋谷２丁目２１−１"/></div>
      <div>latitude<input type="text" id="sendMessagesLocationLatitude" value="40.6971494"/></div>
      <div>longitude<input type="text" id="sendMessagesLocationLongitude" value="-74.2598633"/></div>
      <input type="button" id="go" value="実行"/>
      <textarea id="log" style="width:96%;height:100px;"></textarea>
    </div>
  </body>
</html>

位置情報を送信する

サンプルとして分かりやすくするためにでたらめな情報を指定してみました。

title、address は画面下のラベルに表示される文字

latitude、longitude は地図内の座標に当たるようです。

なのでtitle、address は正式な住所である必要はなく、自分で考えた分かりやすい書き方で大丈夫です。

 

 

アプリケーション開発バナー AWS相談会バナー