LINE と AWS Lambda function URLs を活用してデジタル会員証を実現
Author : 河本 貴史 (LINE 株式会社)
皆さんこんにちは、LINE 株式会社 テクニカルエバンジェリストの河本と申します。
AWS ではアプリケーション開発に必要な機能が全て備わっています。また、LINE ではメッセージングの機能以外にもWEBアプリケーションで柔軟に使えるフレームワーク (LINE Front-end Framework) が提供されており、非常にクイックに高いクオリティのアプリケーションを作成することが可能です。また LINE は AWS を活用したアプリケーション開発において、そのユーザーインターフェースを簡単に開発する機能をそなえています。
今回は LINE が開発者向けに提供しているテクノロジーも活用して、デジタル会員証アプリケーションを作ってみます。AWS と LINE のテクノロジーの組み合わせがもたらすメリットを是非感じてみてください。
完成後のアプリのデモ
目次
1. 全体のアーキテクチャー
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 を削除
8. まとめ
9. 参考情報
ご注意
本記事で紹介する AWS サービスを起動する際には、料金がかかります。builders.flash メールメンバー特典の、クラウドレシピ向けクレジットコードプレゼントの入手をお勧めします。
![](https://d1.awsstatic.com/Digital%20Marketing/sitemerch/banners/reInvent19%20Midpage%20Banner/Site-Merch_Builders-Library_MidPage-Banner.348357fe27fe87372a78753be2f02bbaec7eb9a9.png)
このクラウドレシピ (ハンズオン記事) を無料でお試しいただけます »
毎月提供されるクラウドレシピのアップデート情報とともに、クレジットコードを受け取ることができます。
1. 全体のアーキテクチャ
![](https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/2022/img_line-digital-membership-card_01.fdf85ac762c5a31bd7ced42018bfe578fcc2a023.png)
2. 利用する 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 にアクセスして、「今すぐはじめよう」のボタンをクリックします。
「メールアドレス」の欄に有効なメールアドレスを入力します。
「プライバシーポリシー URL」、「サービス利用規約 URL」の欄は今回はハンズオンのため、空欄にしていますが、実際は必要に応じて入力ください。
次の確認画面で「OK」をクリックします。
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
チャネル作成を行います。
こちら にアクセスして、「今すぐはじめよう」のボタンをクリックします。
「メールアドレス」に有効なメールアドレスを入力します。
今回はハンズオンのため、「プライバシーポリシー URL]、「サービス利用規約 URL」は空欄にしていますが、実際は必要に応じて入力します。
画面下部にスクロールして、「リンクされたボット」でさきほど作成した Messaging API のチャネルを選択し、更新を行います。(同じプロバイダーに存在するチャネルと関連付けられたボットのみをリンクできます。)
「ボットリンク機能」では、LINE ログイン時に、作成した Messaging API を友だち追加できるよう設定します。
「On (aggressive)」にチェックをつけ、最後に「追加」ボタンをクリックします。
※ボットリンク機能の詳細は こちらのドキュメント をご覧ください。
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
AWS Lambda にアクセスし、AWS Lambda 関数を作成します。
下記を設定し、「関数の作成」ボタンをクリックします。
- オプション : 一から作成
- 関数名 : digital-members-card
- ランタイム : Python 3.9
AWS Cloud9 からローカルへダウンロードした Zip ファイルを AWS Lambda へアップロードします。
アップロード後、次の画面で「保存」ボタンをクリックします。
LINE 側セットアップでメモした値を入力し、保存します。
- LIFF_CHANNEL_ID : メモしておいたチャネル ID
- CHANNEL_ACCESS_TOKEN : メモしておいたアクセストークン
次に 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」と入力します。
入力後、「バケットを作成」ボタンをクリックします。
Amazon CloudFront コンソールにアクセスします。
こちらのように設定し、「ディストリビューションを作成」ボタンを押します。
LINE 側セットアップで行った、LINE ログインチャネルの LIFF に戻り、LIFF の「エンドポイント URL」に先ほどメモした「ディストリビューションドメイン名」を入力して、「更新」ボタンをクリックします。
「オリジン間リソース共有 (CORS) を設定」にチェックを入れて、「許可オリジン」に同じく先ほどメモした「ディストリビューションドメイン名」を入力します。
入力したら「保存」ボタンをクリックします。
最後にユーザー情報を保存するテーブルを作成します。
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 技術事例ピックアップ)】
筆者プロフィール
![](https://d1.awsstatic.com/Developer%20Marketing/jp/magazine/profile/photo_kawamoto-takashi.6b9e66d1b2bc2d1fe9eadc0aebd57eda8b17872e.jpg)
河本 貴史
LINE株式会社 テクニカルエバンジェリスト / Solution Architect
JAWS DAYS 2019 スピーカー、JAWS DAYS 2021 サポーター。JAWS-UG 金沢支部、JAWS-UG 初心者支部、Amplify Japan User Group のオーガナイザーの方々と一緒にイベントを開催したりしています。
AWS を無料でお試しいただけます