見出し画像

LIFF × AWS Amplify でアプリを作ってみた

tomomi☆親子ラボ

先日のオンラインイベント【LIFF/ミニアプリ】LINE × kintoneでアンケートシステムを作ってみよう！に参加して、LIFF アプリに興味が湧きました。少し調べるとAWS Amplifyを使うとより楽にLIFFアプリが作れそうと思ったので試してみました。

AWS Amplifyとは

AWS Amplify は、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するための開発プラットフォームです。ユーザーの認証、データとユーザーのメタデータのセキュアな保存、データへの選択的なアクセスの許可、機械学習の統合、アプリケーションのメトリクスの分析、サーバー側コードの実行するといった作業を容易にします。

Amplifyで使った機能

下記の機能を使用して認証認可、データの保存や検索、ホスティングを行っています。
・Auth (Amazon Cognito)
・API（API Gateway）
・Function（Lambda）
・Storage（DynamoDB）
・Hosting（AWS Amplify Console ）

他の機能は下記を参考にしてください。
https://aws-amplify.github.io/

Amplifyでの構成図は下記のようになります。

画像1

LIFF で使った機能

主に下記の機能を使用してユーザー情報の取得、メッセージ送信（LIFF アプリ内と選択した相手に）を行っています。
・liff.getProfile()
・liff.sendMessages()
・liff.shareTargetPicker()

他の機能は下記を参考にしてください。
https://developers.line.biz/ja/reference/liff/#page-title

できたLIFF アプリはこちら

簡単にですが、日々のエクササイズの成果を記録するアプリ【エクササイズ成果帳Bot】を作ってみました。認証はLINEのユーザーIDを使用して、Amazon Cognitoへログイン情報を保管しています。Amplifyはウェブアプリケーションを構築するために必要なバックエンドを簡単に（Amplify CLIのコマンドで）作ることができます。
コードはこちらで公開しています。

また、１つハマりそうな点を載せておきます。
・Amplify Console でデプロイした SPA が403エラーになった原因と対策 http://blog.serverworks.co.jp/tech/2020/03/02/amplify-console-redirect/

さいごに

AWS Amplify を使うと、バックエンドの構築、アプリケーションとの統合を簡略化し、開発者は本質的な機能の開発に集中することができるようになります。実際に使ってみてLIFFアプリの開発にも活用できると思いました。他にも色々試してまたブログにしていきますね。（最近のWebアプリ開発周りは結構充実していてずいぶん楽になってますね）


参考資料
https://blog.u-chan-chi.com/post/amplify-oidc-line-vue/
https://day-journal.com/memo/try-035/

追記
LIFFアプリでOGPタグが利用できるようになっています！
シェアしたときに、下記のように任意のタイトルや説明文、サムネイル画像を表示できるようになりました。

画像2

この記事が気に入ったらサポートをしてみませんか？