7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[初心者向け] LINE Messaging APIでWebサイトからメッセージ送信してみる

Posted at

はじめに

メールを使って業務通知を行っている会社が多いと思いますが、LINEを使って一部の重要な通知を行えないか検証してみました。

本記事の対象者

・基本的なプログラミングを理解している方
・AWS Lambda,API Gatewayのサービスを理解している方

準備

・LINEアカウント登録
・AWSアカウント登録

注意点

・メッセージ送信ごとに料金が発生する(無料枠あり)

Messaging APIとは

・作成したチャネルに対し、API経由でメッセージ送信できる
・メッセージの種類は単純なテキストから画像など様々
・ユーザーからの返答を受け取り、返答内容に応じたメッセージ送信が可能…等々

検証

LINE Developersのアカウント登録

LINE Developersトップを開き、右上の「ログイン」をクリックします。
アカウント登録画面に遷移できるので、使用したいアカウント(LINEアプリで登録したメールアドレスとパスワード)でログインします。
image.png

Messaging APIの設定

Developerサイトにログインした状態で、トップページからプロバイダー「新規作成」をクリックし、プロバイダー名を入力します。
image.png

作成したプロバイダーを選択し、「新規チャネル作成」>[Messaging API]をクリックします。
image.png

新規チャネル作成に必要なアイコンやチャネル名等々を設定します。
image.png

作成したチャネルの[Messaging API設定]タブよりチャネル参加用のQRコードが表示されるので、LINEの友だち追加からQRを読み込み、友だち追加します。
QR.png

[Messaging API設定]タブの下部よりアクセストークンを発行し、トークンをメモしておきます。
チャネルアクセストークン.png

[チャネル基本設定]の下部より表示されている
[あなたのユーザーID]をメモしておます。
あなたのユーザーID.png

AWS Lambdaで関数を設定

Messaging APIを実行する関数を設定します。
AWSマネジメントコンソールにログインし、Lambdaページに遷移します。

[関数の作成]より[ランタイム]でPythonを選択し、関数を新規作成します。
image.png

以下のサンプルプログラムをデプロイします。
[ユーザーID][チャネルアクセストークン]はご自身で発行したものに差し替えてください。

import json
import requests
from pprint import pprint

def lambda_handler(event, context):
    #===========================
    # LINEへのPUSHメッセージ作成
    #===========================
    resmessage = [
        {'type':'text','text':event["key1"]}
    ]
    payload = {'to': 'ユーザーID', 'messages': resmessage}
    # カスタムヘッダーの生成(dict形式)
    headers = {'content-type': 'application/json', 'Authorization': 'Bearer <チャネルアクセストークン>'}
    # headersにカスタムヘッダーを指定
    r = requests.post("https://api.line.me/v2/bot/message/push", headers=headers, data=json.dumps(payload))
    print("LINEレスポンス:" + r.text)
    return "送信完了"

Line Messaging APIの公式ドキュメントは以下になります。
https://developers.line.biz/ja/docs/messaging-api/sending-messages/#send-messages-at-any-time

ちなみに、この時点で作成した関数をテスト実行するとメッセージ送信可能です。

AWS API GatewayでREST APIを設定

RestAPIとリクエスト先のLambda関数を設定します。
AWSマネジメントコンソールより、API Gatewayページに遷移します。

[API作成]で[REST API]を選択し、API名等を入力してAPIを作成します。
image.png

[メソッドを作成]でPOST、[統合タイプ]にLambda関数を選択してメソッドを作成します。
image.png

[CORSを有効にする]でPOSTメソッドに関してCORSを有効化します。
image.png

[APIをデプロイ]をクリックし、[Create stage]よりURLを発行します。
URLをメモしておきます。
APIGatewayステージ.png

Webサイトを作成

静的なWebサイトを作成します。
ちなみに、HTMLは後述の参考サイトのサンプルプログラムを参考にさせて頂きました。
以下のHTMLに先ほど発行したURLを設定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebフォームからLineにメッセージ通知する</title>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function(){
        $("#response").html("Response Values");

        $("#button").click( function(){
            // ここのURLはAPIのデプロイ時に表示されるURLに差し替える
            var url = "APIGatewayのURL";
                var JSONdata = {
                    "key1": $("#text").val()
                };

            $.ajax({
                type : 'post',
                url : url,
                data : JSON.stringify(JSONdata),
                contentType: 'application/json',
                dataType : 'json',
                scriptCharset: 'utf-8',
                success : function(data) {

                    // Success
                    alert("success");
                    //alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                },
                error : function(data) {

                    // Error
                    alert("error");
                    alert(JSON.stringify(data));
                    $("#response").html(JSON.stringify(data));
                }
            });
        })
    })
</script>

</head>
<body>
    <h1>【テスト】Lineのチャンネルにメッセージを通知する</h1>
    <h2>テキスト入力+送信</h2>
    <p>入力テキスト: <input type="text" id="text" size="30" placeholder="テキストを入力してください"></p>
    <p><button id="button" type="button">送信</button></p>
    <textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>

ブラウザで表示したサイト
image.png

結果

Webフォームから入力したテキストが無事メッセージ送信されました。
・Webフォーム
image.png

・メッセージ
Screenshot_20240209_121924_LINE.jpg

感想

単純なテキストのメッセージ送信は簡単に実装できそうだと思いました。
LINE Messaging APIは様々な種類があり、ユーザーからの応答メッセージをトリガーに別の仕組みを実行したり、いろいろな活用方法がありそうと感じました。

参考サイト

以下の方の記事を参考に試しました。
ありがとうございました。

・LINE Messaging API で「プッシュメッセージ」を簡単に試してみた
https://dev.classmethod.jp/articles/line-messaging-api-push-message/

・API GatewayとLambdaで簡易Webアプリを作ってみる
https://qiita.com/moufuyu/items/340048eef98d98f11187

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?