[小ネタ]API GatewayとLambdaでLIFFアプリを開発する #LINE_API

はじめに

こんにちは、中村です。 本日は、API GatewayとLambdaでLIFFアプリを構築します。CloudfrontやS3を使ったホスティングなどいろんな方法がありますが、APIリクエストしてデータを取得する仕組みの構築等が必要になります。しかし、API GatewayとLambdaを利用した方法であれば、LambdaからDynamoDBへアクセスしデータを取得する等で済みます。

Lambdaのコードはこちらから

API GatewayとLambdaでLIFFアプリを構築する

まずは、Lambdaを作成します。githubを参照してもらうとわかりますが、Lambdaのレスポンスは簡単なHTMLデータです。Lambdaプロキシ統合を利用するため、このようなレスポンスになります。

    return {
        statusCode: 200,
        isBase64Encoded: false,
        headers: {
            'Content-Type': 'text/html'
        },
        body: html
    }

次にAPI Gatewayです。API Gatewayのダッシュボードから、APIの作成をクリックして作成してください。作成が完了したら、GETメソッドを追加します。

リクエストの検証については、LIFFアプリ上で行なっているので特段設定はしません。統合リクエストでは、Lambdaプロキシ統合の使用にチェックを入れてください。

メソッドレスポンスにてLambdaのレスポンス本文はtext/htmlなのでコンテンツタイプを変更しておきます。

ここまで設定が完了したら、ステージを作成しAPIをデプロイしてください。デプロイ後はステージからAPIのURLを確認します。これを元にLIFFを設定するのでメモしておいてください。

次に、LINEボットへLIFFを紐づけていきます。LINE開発者コンソールにて紐付けたいボットのメニューからLIFFを開いてください。

LIFFの画面に遷移したら、追加ボタンをクリックし情報を入力していきます。完成すると、LIFFのURLが払い出されます。このURLにアクセスするとLIFFが起動します。

テスト

LINEでLIFFを開いてみましょう。まずは、アプリを承認するフローがあります。LIFFではAPIでメッセージ送信やプロフィールの確認が出来てしまうためです。同意するとLIFFが開きます。今回はわかりやすいようにLINEのユーザーIDをポップアップで表示しています。

API GatewayとLambdaでLIFFを表示することができました！

まとめ

LIFFのベースができました。Lambdaをバックエンドにすることでデータ取得方法が簡単に構築できると思います。

チャットボット開発は弊社にご相談ください。

またAmazon Connectのキャンペーンを行なっております。こちらもご相談お待ちしております。