LINE botのリッチメニュー + LIFF + AWS Amplifyで、LINEのユーザー情報をWeb画面に表示させてみた

## はじめに
この度、ANGEL Calendarの企画に参加しています～！！
本日は12日目です:angel_tone2:
こちらのANGEL Calendarの企画では、AWSに限らず色々な技術記事が投稿されていますので、是非チェックしてみてください:point_down:

https://qiita.com/organizations/2024-angel-dojo


## 記事の内容
この記事では、**LINE botのリッチメニュー + LIFF + AWS Amplify**で、LINEのユーザー名とアイコンを取得し、Amplifyで構築したWeb画面に表示させる方法について記載しています。

完成すると以下のように表示できます:point_down:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/dc7f4404-a4e4-8f8a-edae-db2c2c671a8f.png)




###### LINE Front-end Framework（LIFF）とは：
LINEヤフー株式会社が提供するウェブアプリのプラットフォーム。ウェブアプリにLIFF SDKを組み込むと、LINEプラットフォーム上の情報やLINEアプリと連携した機能を扱うことができる。

## 手順
1. Amplifyの環境構築
2. LINE側の設定を行う
・Messaging APIの作成
・Messaging APIにリッチメニューを追加する
・LINEログインの作成
・LIFFアプリの作成
・リッチメニューのURL修正
3. Amplifyのソースを修正

## Amplifyの環境構築
今回は、クイックスタートで、Amplifyの環境構築を行い、開発を進めていきました:point_down:

https://docs.amplify.aws/react/start/quickstart/

クイックスタートの内容については、ANGEL Calendar 6日目の記事で、やってみた投稿されています。とても分かりやすいので、ぜひこちらを読んでいただければと思います。

https://qiita.com/hohe096/items/94caf06a39ba80db2a3e




## LINE側の設定を行う
今回は、LINE bot用のMessaging APIとLIFF設定用のLINEログインの２つのチャネルを作成します。
LIFFを使用しない場合は、LINEログインは作成しなくても、AWS LambdaなどAWSサービスとLINEをつなげることができます。

###### Messaging APIの作成
まずは、LINE bot用のMessaging APIを作成します。
- [LINE Developers](https://developers.line.biz/console/provider/2003652268)のコンソールにログインします。
- ログイン後、コンソール（ホーム）からプロバイダーを作成します。
（プロバイダー名は任意の名前を入力）
- 作成するとプロバイダー一覧に作成したプロバイダーの名前が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/9b77fdbe-fdab-87d3-1c40-893b47f0c0fa.png)

- プロバイダーのチャネル設定にある「新規チャネル作成」からMessaging APIを選択後、以下内容を入力し、作成します。
【入力内容】
・チャネル名：任意の名称
・チャネルの説明：任意の説明
・ 大業種・小業種：選択肢からマッチするものを選択する
・メールアドレス：自身のメールアドレスを入力

これで、Messaging APIが作成できました。
作成するとプロバイダーのチャネル設定に作成したMessaging APIが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/430823fe-c44e-61aa-eab2-3fe9741a62d3.png)

Messaging APIのチャネルに移動し、Messaging APIのタブ「Massagin API設定」にあるQRコードを読み込めば、実際に作成したbotを友達登録することができます。


###### Messaging APIにリッチメニューを追加する
- リッチメニューの作成方法には、以下2種類あり、今回は①の方法で進めています。
①LINE LINE Official Account Managerのメニューからコンソール上で作成する
②Messaging APIを使ってコマンドで作成する
　→こちら詳しくは[LINE Developersのドキュメント](https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/)をご覧ください。
※①と②の方法で１つのbotに２つのリッチメニューを設定した場合は、②の設定が優先されるので注意してください
- まずは、Messaging APIの「チャネル基本設定」にあるLINE Official Account Managerをクリックし、遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/4dfc11ad-eed2-da17-7594-eb26749dd790.png)
- 遷移後、左上のホームタブに遷移し、トークルーム管理 ＞リッチメニューをクリックします。
- 必要事項を入力し、リッチメニューを作成します。
 ・テンプレートから好きなフォーマットを選択します。
・アクションの部分は、**リンク**を選択します。URLは後で編集しますので、一旦仮のURLを設定しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/8bad47eb-a527-c684-cfe1-a0812f173a9e.png)

作成するとLINE botの画面にリッチメニューが現れ、リッチメニューをクリックするとアクションで設定したURLに飛べるようになります。

###### LINEログインの作成
次にLIFFアプリを使用するためにLINEログインのチャネルを作成します。
- プロバイダーのチャネル設定にある「新規チャネル作成」をクリック後、LINEログインを選択し、以下内容を登録して、LINEログインチャネルを作成します。
【登録内容】
・チャネル名：任意の名前
・チャネルの説明：任意の説明
・アプリタイプ：ウェブアプリ
- 作成すると、プロバイダーのチャネル設定に先ほど作成したLINEログインが出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/7e52e3f0-a106-5a09-1097-a0d4535d268d.png)

###### LIFFアプリの作成
- LINEログインのタブ「LIFF」にあるLIFFアプリを追加をクリックし、以下内容でLIFFアプリを作成します。
【登録内容】
・LIFFアプリ名：任意の名前
・サイズ：好きなサイズを選択
・エンドポイントURL：**Amplifyで作成したWebページのURLを入力**（URLは後で変更できますので、URLが決まっていなければ一旦仮のURLを入れておきます。）
  ・Scope：すべて選択します
  ・友だち追加オプション：On
- 作成するとLIFFアプリ一覧に作成したアプリが表示されます。
**ここに書かれているLIFF IDとLIFF URLは後で使うので、メモしておきます。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/ab3f0993-9658-1a69-47da-7e4e0b53483c.png)

また、LINEログインのアカウントを**公開済み**にすることを忘れないでください。
公開済みでないとLINEからページに飛べなくなってしまいます。

###### リッチメニューのURL修正
次にリッチメニューのURLを修正します。
- LINE Official Account Managerに遷移し、リッチメニューのタブから作成済みのリッチメニューを選択し、編集ボタンを押します。
- アクションのURLを先ほど作成したLIFF URLに置き換えます。

これでリッチメニューからLIFFを経由してWeb画面を表示させることができます。
以上でLINE側の設定は完了です。

## Amplify側のソースを修正する
ここからはLIFFからLINEのユーザー情報を取得するコードを書いていきます。
まずは、LIFFを使用するために、以下コマンドでLIFF CLIをインストールします。
```
npm install -g @line/liff-cli
```
インストール後、npm installを実行し、実際にコードを書いていきます。
今回は、src/components/user.tsx作成し、編集しましたが、App.tsxなどに記載しても問題ないです。
コードは以下です。
```
import { useEffect, useState } from 'react';
import "./user.css";
import liff from '@line/liff'

export default function App() {
  useEffect(() => {
    liff.init({ liffId: '作成したLIFF ID' }).then(async () => {
      if (!liff.isLoggedIn()) {
        await liff.login();
      }
      const profile = await liff.getProfile();
      setProfile({
        avatorImageSrc: profile.pictureUrl === undefined ? '' :  profile.pictureUrl,
        userName: profile.displayName,
      });
    }).catch((error) => {
      console.error(error);
    });
  }, [])
  const [profile, setProfile] = useState({
    avatorImageSrc: '',
    userName: 'user name',
  })

  return (
    <div>
      {/* ヘッダー */}
      <div className='header'>
        <div className='header-logo'>
          マイページ
        </div>
      </div>
      {/* メイン */}
      <div  className="body">
        <img src={ profile.avatorImageSrc } className="avatorImage"></img>
        <div className="form">
          <p className="label">ユーザー名</p>
          <p  className="content">{ profile.userName }</p>
        </div>
        <div className="form">
          <p className="label">性別</p>
          <p className="content">〇〇</p>
        </div>
        <div className="form">
        <p className="label">生年月日</p>
        <p className="content">YYYY年 MM月 DD日</p>
        </div>
        <div className="form">
        <p className="label">身長</p>
        <p className="content">××cm</p>
        </div>
        <div className="form">
        <p className="label">体重</p>
        <p className="content">〇〇kg</p>
        </div>
        <div className="form">
        <p className="label">普段の運動量</p>
        <p className="content">週に1,2回</p>
        </div>
      </div>
    </div>
  );
}

```
###### コードの補足
```
if (!liff.isLoggedIn()) {
await liff.login();
}
```
ここでは、Webページを開いたユーザーがLINE未ログインだった場合、LINEのログインフォームに飛ばす処理を書いています。
```
liff.init({ liffId: 'ここは作成したLIFFIDを入力' })
```
'ここは作成したLIFFIDを入力'には先ほどメモしたLIFF IDを入力します。
```
liff.getProfile()
```
上記コードで、ログインユーザーの情報を取得しています。
【liff.getProfile()で取得できる項目】
  ・"userId": ユーザーのID,
  ・"displayName": ユーザー名,
  ・"pictureUrl": ユーザーアイコン
  　　※ユーザーが設定していない場合取得できません。
  ・"statusMessage": ステータスメッセージ
  　　※ユーザーが設定していない場合取得できません。
- LIFFは、ユーザー情報を取得するだけでなく、ユーザーにメッセージを送信するトリガなどもありますので、詳しくは[LIFF v2 APIリファレンス](https://developers.line.biz/ja/reference/liff/)をご覧ください


## 完成
デプロイが完了すると、LINEのリッチメニューからWeb画面に遷移し、ログインユーザーの名前とアイコンを画面に表示できました！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868620/8529bf4b-50b8-3e1c-f6c5-7e69a2aaa33e.png)


## おわりに
今回初めてAmplifyとLIFFを使用して開発を行いました。
Reactにも初挑戦で、初めは実装できるかなと不安でしたが、想像以上に簡単に実装できてびっくりしました！
業務で触らない技術を触ってみるのとても楽しかったです。
ご興味のある方の参考になれば幸いです！！