LINE と AWS Lambda function URLs を活用してデジタル会員証を実現

2022-08-02

デベロッパーのためのクラウド活用方法

Author : 河本貴史 (LINE 株式会社)

無料クーポン特典の詳細 »

ツイート »

シェア »

はてブ »

皆さんこんにちは、LINE 株式会社テクニカルエバンジェリストの河本と申します。

AWS ではアプリケーション開発に必要な機能が全て備わっています。また、LINE ではメッセージングの機能以外にもWEBアプリケーションで柔軟に使えるフレームワーク (LINE Front-end Framework) が提供されており、非常にクイックに高いクオリティのアプリケーションを作成することが可能です。また LINE は AWS を活用したアプリケーション開発において、そのユーザーインターフェースを簡単に開発する機能をそなえています。

今回は LINE が開発者向けに提供しているテクノロジーも活用して、デジタル会員証アプリケーションを作ってみます。AWS と LINE のテクノロジーの組み合わせがもたらすメリットを是非感じてみてください。

完成後のアプリのデモ

目次

1. 全体のアーキテクチャー

2. 利用する AWS サービス

3. AWS Lambda function URLs の説明

4. LINE 側セットアップ

4-1. Messaging API チャネルの作成
4-2. LINE ログインチャネルの作成
4-3. リッチメニューの作成

5. AWS 側セットアップ

5-1. AWS Cloud9 の作成
5-2. AWS のサービス構築

5-2-1. AWS CDK
5-2-2. AWS Management Console

6. アプリの動作確認

7. リソース削除

7-1. AWS CDK で作成したものを削除
7-2. AWS Management Console で作成したものを削除
7-3. AWS Cloud9 を削除

9. 参考情報

ご注意

本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。

*ハンズオン記事およびソースコードにおける免責事項 »

このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »

毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。

今すぐ特典を受け取る »

1. 全体のアーキテクチャ

2. 利用する AWS サービス

このハンズオンでは、以下の AWS サービスを利用します。

3. AWS Lambda function URLs について

AWS Lambda function URLs は、Lambda 関数のための専用 HTTP エンドポイントです。Lambda function URLs の作成と設定には、Lambda コンソールまたは Lambda API を使用します。Lambda function URLs を作成すると、一意の URL エンドポイントが Lambda により自動的に生成されます。

詳細はこちらの公式ドキュメントをご覧ください。

4. LINE 側セットアップ

ここからアプリケーション・サービス利用時のユーザーの体験をより良いものにできるよう、LINE でデジタル会員証をどのように実現するか試していきましょう。

4-1. Messaging API チャネルの作成

デジタル会員証の利用時に送受信する通知の仕組みを実現するため、Messaging API チャネルを作成します。開発者用のコンソール画面 (LINE Developers) を使用します。

LINE Developers の Messaging API にアクセスして、「今すぐはじめよう」のボタンをクリックします。

クリックすると拡大します

「LINE アカウントでログイン」をクリックします。

次の画面で LINE のログイン情報を入力し、「ログイン」ボタンをクリックします。

クリックすると拡大します

「チャネルの種類」が「Messaging API」になっているか確認します。

クリックすると拡大します

「プロバイダー」選択画面では、既にプロバイダーを作っている場合、利用するプロバイダーを選択します。

クリックすると拡大します

初めての場合は、「新規プロバイダー作成」を選択しプロバイダー名を入力します。

注 : LINE という文字は含められません。

クリックすると拡大します

「会社・事業者の所在国・地域」の選択で「日本」を選択します。

クリックすると拡大します

チャネルアイコンを登録します。(今回は必須ではありません)

クリックすると拡大します

「チャネル名、チャネル説明」の画面で下記を入力します。

チャネル名 : デジタル会員証
チャネル説明 : デジタル会員証を AWS x LINE で実現

クリックすると拡大します

「大業種、小業種」の選択画面では、今回は「個人」を選択します。(リスト下の方にあります。)

クリックすると拡大します

「メールアドレス」の欄に有効なメールアドレスを入力します。

「プライバシーポリシー URL」、「サービス利用規約 URL」の欄は今回はハンズオンのため、空欄にしていますが、実際は必要に応じて入力ください。

次の確認画面で「OK」をクリックします。

クリックすると拡大します

内容を確認の上、「同意する」をクリックします。

これで、チャネルが作成できました。

クリックすると拡大します

作成したチャネルの「Messaging API 設定」タブに移動し、QR コードで LINE Bot (LINE 公式アカウント) を友だち追加します。

クリックすると拡大します

下部にスクロールして、「アクセストークン」を発行します。発行したアクセストークンは後で使用するので、メモしましょう。

クリックすると拡大します

4-2. LINE ログインチャネルの作成

次に、デジタル会員証を表示できるよう、LINE ログインチャネルと LIFF を作成していきましょう。

LINE Front-end Framework (LIFF) は、LINE が提供するウェブアプリのプラットフォームです。LINE ミニアプリにも関連する技術でもあります。詳細は下記の URL 先をご覧ください。

・https://developers.line.biz/ja/docs/liff/overview/
・https://www.youtube.com/watch?v=QD_M52ATbb8

チャネル作成を行います。
こちらにアクセスして、「今すぐはじめよう」のボタンをクリックします。

クリックすると拡大します

「チャネルの種類」で「LINE ログイン」になっているか確認しましょう。

クリックすると拡大します

「プロバイダー」選択では、Messaging API チャネルで使用したプロバイダーを選択します。

クリックすると拡大します

「サービスを提供する地域」、「会社・事業者の所在国・地域」で「日本」を選択します。

クリックすると拡大します

チャネルアイコンを登録します。(今回はハンズオンのため必須ではありません)

クリックすると拡大します

「チャネル名」、「チャネル説明」で下記を入力します。

チャネル名 : デジタル会員証
チャネル説明 : デジタル会員証を AWS x LINE で実現

クリックすると拡大します

「アプリタイプ」は「ウェブアプリ」にチェックを入れます。

クリックすると拡大します

「メールアドレス」に有効なメールアドレスを入力します。

今回はハンズオンのため、「プライバシーポリシー URL]、「サービス利用規約 URL」は空欄にしていますが、実際は必要に応じて入力します。

クリックすると拡大します

「LINE 開発者契約」の内容を確認の上チェックを入れ、「作成」ボタンをクリックします。

クリックすると拡大します

これでチャネルが作成できました。

作成したチャネルの「チャネル ID」をメモしておきます。

クリックすると拡大します

画面下部にスクロールして、「リンクされたボット」でさきほど作成した Messaging API のチャネルを選択し、更新を行います。(同じプロバイダーに存在するチャネルと関連付けられたボットのみをリンクできます。)

クリックすると拡大します

LIFF の作成を行います。

「LIFF」タブに移動して「追加」ボタンをクリックします。

クリックすると拡大します

基本情報を入力します。

「LIFF アプリ名」には「デジタル会員証」と入力し、サイズは「Full」を選択します。

クリックすると拡大します

「Scope」の選択で、「openid」にチェックをつけます。

クリックすると拡大します

「ボットリンク機能」では、LINE ログイン時に、作成した Messaging API を友だち追加できるよう設定します。

「On (aggressive)」にチェックをつけ、最後に「追加」ボタンをクリックします。

※ボットリンク機能の詳細はこちらのドキュメントをご覧ください。

クリックすると拡大します

LIFF が作成できました。

後ほど使用するので、「LIFF ID」と「LIFF URL」をメモしましょう。

クリックすると拡大します

4-3. リッチメニューの作成

Messaging API から LIFF が呼び出せるように、LINE 公式アカウントの管理画面にアクセスし、リッチメニューを作成していきます。

作成した Messaging API チャネルに戻り、「LINE Official Account Manager」にアクセスします。

クリックすると拡大します

「ホーム」→ 「リッチメニュー」→ 「リッチメニューを作成」の順に進みます。

クリックすると拡大します

リッチメニューの「表示設定」の項目を下記のように入力します。

タイトル : デジタル会員証
表示期間 : リッチメニューの表示開始日〜表示終了日
※ リッチメニューが表示され無い場合は、ここで指定している期間を見直してみてください
メニューバーのテキスト : 「メニュー」を選択
メニューのデフォルト表示 : 「表示する」を選択

クリックすると拡大します

コンテンツ設定で「テンプレートの選択」を行います。

クリックすると拡大します

次にリッチメニューに使用する画像を作成します。

「画像を作成」ボタンから、フレームに背景とテキストを入力し、文字色や配置を調整します。最後に右上の「適用」ボタンをクリックします。

※簡単な画像はこちらの画面上で作成可能です。もちろん、用意いただいた画像をアップロードして設定することもできます。

クリックすると拡大します

「アクション」の項目を下記のように設定します。最後に「保存」ボタンをクリックします。

タイプ :「リンク」を選択し、メモしておいた LIFF URL を入力 (例 : https://liff.line.me/xxxx)

アクションラベル : デジタル会員証

クリックすると拡大します

リッチメニューが設定されました。

クリックすると拡大します

5. AWS 側のセットアップ

アプリケーションを動かすプラットフォームとして AWS は非常にパワフルで高い信頼性をもちます。また、開発の各工程で必要な機能が全て備わっています。

今回、開発環境は AWS Cloud9 を使っていきます。そして AWS Cloud Development Kit (以下 AWS CDK)、または AWS Management Console を使って AWS のサービス構築をしていきます。

5-1. AWS Cloud9 の作成

AWS Cloud9 にアクセスして、作成を行います。

「Name」には「Digital membership card」と入力します。

他の設定はそのままで Step 1〜Step 3 まで進めます。

AWS CDK でサービスを構築する場合は、「5-2-1. AWS CDK」の手順をご覧ください。
AWS Management Console でサービスを構築する場合は、「5-2-2. AWS Management Console」の手順をご覧ください。

クリックすると拡大します

5-2. AWS のサービス構築

5-2-1. AWS CDK で構築する

ここから先は AWS Cloud9 上で作業を行います。

まず、AWS CDK 実行時に容量不足でエラーになってしまうので、事前に Amazon EBS ボリュームのサイズを増やしましょう。

※Amazon EBS ボリュームのサイズ変更の詳細情報はこちらのドキュメントをご覧ください。

Terminal でコマンドを実行します。

git clone https://github.com/liner-takashi-kawamoto/LINE-Digital-MembersCard-on-AWS.git
cd LINE-Digital-MembersCard-on-AWS
chmod +x resize.sh
./resize.sh 20

注意 :
今回使用するコードはハンズオン用を想定しており非常にシンプルな内容になっています。本番環境で利用する場合は適宜、必要なコードを追加・修正してください。

Lambda functions URLs は 2 種類の認証モードを提供します。認証なしモードと IAM 認証モードです。このハンズオンでは手順を簡略化させるため認証モードを用いていますが、本番環境での利用の際には、IAM 認証モードを検討いただくことで、リプレイ攻撃などに強いシステム構築が可能です。また、Amazon API Gateway との連携を行うことで AWS WAF (ウェブアプリケーションファイアウォール) との連携も可能となり、DDos 攻撃耐性を高めることができます。

必要なモジュールをインストール、LINE 側セットアップでメモした値を「cdk deploy」に入力し、Terminal でコマンドを実行します。
(途中「Do you wish to deploy these changes (y/n)?」と確認メッセージが出ますので「y」を入力します。)

npm install
cdk synth
cdk bootstrap

LIFF_CHANNEL_ID=メモしておいた[チャネルID]
CHANNEL_ACCESS_TOKEN=メモしておいた[アクセストークン]
cdk deploy \
-c LIFF_CHANNEL_ID=${LIFF_CHANNEL_ID} \
-c CHANNEL_ACCESS_TOKEN=${CHANNEL_ACCESS_TOKEN}

下記のような実行結果が出力されます。後で使うので、メモしましょう。

① CdkStack.BucketName の値
② CdkStack.EndpointUrl の値
③ CdkStack.FunctionUrl の値

クリックすると拡大します

LINE 側セットアップで行った、LINE ログインチャネルの LIFF に戻り、LIFF の「エンドポイント URL」に「② CdkStack.EndpointUrl」の値を入力し、更新します。

クリックすると拡大します

初期状態では開発中の状態なので公開の状態にしていきます。

まず「開発中」をクリックし、次の画面で「公開」をクリックします。

※「開発中」の状態では、Admin または Tester の権限を持つユーザーのみが LINE ログインを利用できます。詳細情報はこちらのドキュメントをご覧ください。

クリックすると拡大します

公開の状態になりました。

クリックすると拡大します

AWS Cloud9 に戻り、LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front/members_card.js の「FUNCTION_URL」と「liffId」に下記の値を入力します。

FUNCTION_URL : ③ CdkStack.FunctionUrl の値
liffId : メモしておいた LIFF ID の値

クリックすると拡大します

入力した内容を Amazon S3 へアップロードします。

Terminal で以下のコマンドを実行します。

BUCKET_NAME=[①CdkStack.BucketName]の値
aws s3 cp ./line-api-use-case-MembersCard/front s3://${BUCKET_NAME} --recursive

これで AWS CDK での構築は完了です。

「6. アプリの動作確認」を参考に動作確認を行いましょう。

5-2-2. AWS Management Console で構築する

GitHub からソースコードを取得し、必要なファイルを準備し、AWS Management Console で AWS のサービスを構築していきます。

ここから先は AWS Cloud9 上で作業を行います。Terminal でコマンドを実行します。

git clone https://github.com/liner-takashi-kawamoto/LINE-Digital-MembersCard-on-AWS.git
cd LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/backend

注意 :
今回使用するコードはハンズオン用を想定しており非常にシンプルな内容になっています。本番環境で利用する場合は適宜、必要なコードを追加・修正してください。

次に Backend である AWS Lambda へアップロードするファイルを作成します。

Terminal で以下のコマンドを実行します。

pip install -r requirements.txt -t package
cd package
zip -r ../my-deployment-package.zip .
cd ../
zip -g my-deployment-package.zip aws/dynamodb/base.py common/utils.py app.py members_card_user_info.py send_message.py

my-deployment-package.zip をローカルへダウンロードします。

クリックすると拡大します

AWS Lambda にアクセスし、AWS Lambda 関数を作成します。

下記を設定し、「関数の作成」ボタンをクリックします。

オプション : 一から作成
関数名 : digital-members-card
ランタイム : Python 3.9

クリックすると拡大します

AWS Cloud9 からローカルへダウンロードした Zip ファイルを AWS Lambda へアップロードします。

アップロード後、次の画面で「保存」ボタンをクリックします。

クリックすると拡大します

下にスクロールし、「ランタイム設定」の「編集」をクリックします。

「ハンドラ」に「app.lambda_handler」と入力し、「保存」ボタンをクリックします。

クリックすると拡大します

「設定」タブに移動し、「環境変数」画面で「編集」をクリックします。

クリックすると拡大します

LINE 側セットアップでメモした値を入力し、保存します。

LIFF_CHANNEL_ID : メモしておいたチャネル ID
CHANNEL_ACCESS_TOKEN : メモしておいたアクセストークン

クリックすると拡大します

関数 URL を作成します。

「設定」タブの「関数 URL - 新規」画面で「関数 URL を作成」をクリックします。

クリックすると拡大します

認証タイプで「NONE」を選択します。(CROS 設定は後ほど設定します。)

「保存」ボタンをクリックします。

クリックすると拡大します

「関数 URL」をメモしておきます。

クリックすると拡大します

次に Frontend である Amazon S3 と Amazon CloudFront を作成します。

AWS Cloud9 に戻り、LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front/members_card.js の「FUNCTION_URL」と「liffId」に値を入力します。

FUNCTION_URL : メモしておいた「関数 URL」
liffId : メモしておいた「LIFF ID」の値

クリックすると拡大します

入力した内容を Amazon S3 へアップロードします。

AWS Cloud9 から LINE-Digital-MembersCard-on-AWS/line-api-use-case-MembersCard/front をローカルへダウンロードします。

クリックすると拡大します

Amazon S3 を作成します。S3 コンソールにアクセスし、バケット名は「digital-members-card」と入力します。

入力後、「バケットを作成」ボタンをクリックします。

クリックすると拡大します

「アップロード」ボタンをクリックして、AWS Cloud9 からローカルへダウンロードしたファイルをアップロードします。

クリックすると拡大します

ダウンロードした圧縮ファイルを展開し、front フォルダの中身をドラッグ & ドロップし、バケットへアップロードします。

クリックすると拡大します

Amazon CloudFront コンソールにアクセスします。

こちらのように設定し、「ディストリビューションを作成」ボタンを押します。

クリックすると拡大します

「ディストリビューションドメイン名」をメモしておきます。

クリックすると拡大します

LINE 側セットアップで行った、LINE ログインチャネルの LIFF に戻り、LIFF の「エンドポイント URL」に先ほどメモした「ディストリビューションドメイン名」を入力して、「更新」ボタンをクリックします。

クリックすると拡大します

AWS Lambda 関数に戻り、CORS の設定をします。

「設定」タブから「関数 URL - 新規」メニューに移動し、「編集」ボタンをクリックします。

クリックすると拡大します

「オリジン間リソース共有 (CORS) を設定」にチェックを入れて、「許可オリジン」に同じく先ほどメモした「ディストリビューションドメイン名」を入力します。

入力したら「保存」ボタンをクリックします。

クリックすると拡大します

AWS Lambda にアクセス権限を設定します。

「ロール名」にアクセスします。

クリックすると拡大します

「ポリシーをアタッチ」をクリックして、「AmazonDynamoDBFullAccess」のポリシーをアタッチします。

クリックすると拡大します

最後にユーザー情報を保存するテーブルを作成します。

Amazon DynamoDB コンソールにアクセスし、下記のように作成します。

テーブル名 : MembersCardUserInfo
パーティションキー : userId

これで AWS Management Console でのサービス構築は完了です。
「6. アプリの動作確認」を参考に動作確認を行いましょう。

クリックすると拡大します

6. アプリの動作確認

リッチメニューから簡単にデジタル会員証を起動でき、ログインレスでも LINE の ID 管理の機構を活用してユーザーを識別することができます。。

また、各ユーザーにポイントの付与など様々なサービスを提供することもできます。もちろんアプリケーションのダウンロードは不要です。

7. リソース削除

ハンズオン後は必ずリソース削除を行っておきましょう。

AWS CDK でサービスの構築を行った場合は、「7-1. AWS CDK で作成したものを削除」をご覧ください。

AWS Management Console でサービスの構築を行った場合は、「7-2. AWS Management Consoleで作成したものを削除」をご覧ください。

7-1. AWS CDK で作成したものを削除

Terminal でコマンドを実行します。

WARN が出力されますが、Amaozon S3 を削除するために必要なので、そのまま「y」を入力します。

cdk destroy

WARN AWS_SOLUTIONS_CONSTRUCTS_WARNING:  An override has been provided for the property: removalPolicy. Default value: 'retain'. You provided: 'destroy'.
WARN AWS_SOLUTIONS_CONSTRUCTS_WARNING:  An override has been provided for the property: removalPolicy. Default value: 'retain'. You provided: 'destroy'.

Are you sure you want to delete: CdkStack (y/n)? y

AWS CDK で削除されなかった Amazon S3 を AWS Management Console から削除します。

Amazon S3 コンソールにアクセスし、「cdkstack」で検索し、中身を空にしてからバケットを削除します。

終わったら、「7-3. AWS Cloud9 を削除」に進みましょう。

クリックすると拡大します

7-2. AWS Management Console で作成したものを削除

AWS Lambda コンソールにアクセスし、関数を削除します。

クリックすると拡大します

AWS IAM コンソールにアクセスし、ロールを削除します。

クリックすると拡大します

Amazon DynamoDB コンソールにアクセスし、テーブルを削除します。

クリックすると拡大します

Amazon DynamoDB コンソールにアクセスし、テーブルを削除します。

クリックすると拡大します

Amazon S3 コンソールにアクセスし、バケットを空にしてから削除します。

クリックすると拡大します

Amazon CloudFront コンソールにアクセスし、ディストリビューションを無効にしてから削除します。

すべて削除したら、「7-3. AWS Cloud9 を削除」に進みましょう。

クリックすると拡大します

7-3. AWS Cloud9 を削除

AWS Cloud9 にアクセスし、作成した環境を削除します。

クリックすると拡大します

8. まとめ

バックエンドの API に Lambda function URLs を利用することで、構成を簡単に作成かつシンプルにすることができました。

アプリケーションの開発〜デプロイに至るまで AWS の充実した機能によるパワフルなサポートも感じていただけたのではないでしょうか。

また、LINE が提供しているテクノロジーにより本来、紙やカードで運用されていた会員証をデジタルの世界で簡単に実現することができました。

LINE は国内の多くの方がダウンロード済みのアプリです。そのため今回のハンズオンで作成したような LINE 上で展開するアプリケーションは、アプリのダウンロードがほぼ不要で、かつログインは LINE で簡単にできる。ユーザーにとって、すぐにサービスが受けられる状態を作り出すことができます。

そんな強力なテクノロジーの組み合わせで、優れたユーザー体験を実現できるアプリケーションをこれから皆さまが生み出されるのを楽しみにしております。

9. 参考情報

【LINE Developers サイト】
LINE では、外部の企業や開発者に向けて、LINE のサービスとの連携が可能になる API を提供しています。LINE Developers サイトでは、そうした LINE API の仕様や、開発手順を解説したドキュメントを開発者向けに提供しています。

【LINE API Use Case サイト】
LINE API を活用したデモアプリやユースケースを紹介しています。「自社の予約サービスを LINE 公式アカウント上で提供したい」「自社アプリをユーザーがインストールする手間を省きたい」「自社サービスのユーザーとのコミュニケーションチャネルとして LINE を使用したい」など、LINE プラットフォームを通じて、日常の様々な課題解決に役立つサイトを目指しています。こちらのサイトではユースケースの紹介とともに、実際にユースケースを体験できるデモアプリ、そしてサンプルコード (OSS) も用意していますので是非ご活用ください。

【TECHNICAL CASE (LINE x AWS 技術事例ピックアップ)】

builders.flash メールメンバーへ登録することで
AWS のベストプラクティスを毎月無料でお試しいただけます

メンバー特典を受け取る »

筆者プロフィール

河本貴史
LINE株式会社テクニカルエバンジェリスト / Solution Architect

JAWS DAYS 2019 スピーカー、JAWS DAYS 2021 サポーター。JAWS-UG 金沢支部、JAWS-UG 初心者支部、Amplify Japan User Group のオーガナイザーの方々と一緒にイベントを開催したりしています。

ツイート »

シェア »

はてブ »

AWS を無料でお試しいただけます

AWS 無料利用枠の詳細はこちら ≫

5 ステップでアカウント作成できます

無料サインアップ ≫

ご不明な点がおありですか?

日本担当チームへ相談する