リッチメニューで LINE ボットの UX を向上

2017 年に LINE ボットの UX 新機能としてリッチメニューの拡張が発表されました。概要は[こちら](https://developers.line.me/ja/docs/messaging-api/using-rich-menus)をご覧ください。これまで 1 つだけ設定できたリッチメニューが API 経由で操作できるようになっています。

- 最大 10 のリッチメニューが作成可能。また各メニュー毎に 20 のエリアが設定可能。
- 任意のリッチメニューを任意のユーザーに設定可能。</li>

これにより、ユーザーの状態やキャンペーン期間中など動的にリッチメニューを差し替えることができるため面白いシナリオを実装出来そうです。

# リッチメニューマネージャー

リッチメニューを使うためには、まずは作成しないといけません。作成用の API が公開されていますが、GUI で簡単にできるようにツールを作りました。

## 前提条件

- Node.js: バージョン 8.7 で検証済
- ブラウザ: Chrome で検証済

## インストール

1\. 以下コマンドでインストール。macOS の場合は必要に応じて sudo 実行。

```shell
npm install –g line-richmenus-manager
or
sudo npm install –g line-richmenus-manager
```
2\. ツールがインストールできたら以下コマンドで実行。

```
line-richmenus-manager –port:3000
```
ポート番号を省略した場合はポート 3000 で起動します。

3\. Chrome で http://localhost:3000 にアクセス。

4\. Channel Access Token を指定して OK をクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image67.png"><img  title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb67.png" border="0" /></a>

## リッチメニューの作成

1\. 画面上部の [+] アイコンをクリック。

2\. Name と ChatBar Text を入力。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image68.png"><img  title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb68.png" border="0" /></a>

3\. Choose File ボタンからファイルを選択。ファイルはサイズ 2500×1686 または 2500×843 ピクセルで、PNG か JPEG 形式が必須。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image69.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb69.png" border="0" /></a>

4\. マウスで画像上に領域を指定。指定後に x/y/width/height を直接変更して微調整可能。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image70.png"><img  title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb70.png" border="0" /></a>

5\. タイプと必要な値を入力して、Add Area をクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image71.png"><img  title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb71.png" border="0" /></a>

6\. 追加したエリアは番号から画面上のどこに紐づいているか確認可能。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image72.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb72.png" border="0" /></a>

7\. 削除アイコンをクリックして削除が可能。または追加後も値を変更が可能。

8\. 全てのエリアを追加したら、CREATE RICHMENU をクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image73.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb73.png" border="0" /></a>

## 詳細を確認

メイン画面では全てのリッチメニューの一覧と詳細を確認できます。

1\. 左のリッチメニュー一覧より詳細を確認したいメニューをクリック。一覧の更新は画面上部からリロードアイコンをクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image74.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb74.png" border="0" /></a>

2\. 右ペインに詳細が表示。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image75.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb75.png" border="0" /></a>

3\. 削除したい場合、DELETE RICH MENU をクリック。

4\. 任意のユーザーに対して紐づけおよび解除が可能。メニューをクリック後 UserID を入力して、OK をクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image76.png"><img  title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb76.png" border="0" /></a>

## ユーザーに紐づいたリッチメニューを検索

あるユーザーに紐づいているリッチメニューを確認したい場合は検索ができます。

1\. 画面上部の検索アイコンをクリック。

2\. UserId を入力して Enter を押下。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image77.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb77.png" border="0" /></a>

## チャネルトークンの更新

トークンを更新する必要がある場合は、以下の手順で更新できます。

1\. 画面上部の設定アイコンをクリック。

2\. チャネルアクセストークンを入力して OK をクリック。

リッチメニューを作成してユーザーに紐づけたら、実機かシミュレーターで動作を確認してください。

# シミュレーターで確認

シミュレーターの詳細は<a href="https://blogs.msdn.microsoft.com/kenakamu/2017/12/14/improve-line-bot-development-productivity-with-simulator-ja/">こちらの記事</a>を確認してください。

## リッチメニューのシミュレーション

1\. シミュレーターを起動したら、リッチメニューアイコンをクリック。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image78.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb78.png" border="0" /></a>

2\. リッチメニューが表示されたら、設定したエリアをクリックして動作を確認。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image79.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb79.png" border="0" /></a>

3\. 以下はポストバックを設定した場合の動作。

<a href="https://msdnshared.blob.core.windows.net/media/2018/01/image80.png"><img title="image" alt="image" src="https://msdnshared.blob.core.windows.net/media/2018/01/image_thumb80.png" border="0" /></a>

# まとめ

リッチメニューを使うと UX を大幅に向上できますので、是非使ってみてください。

中村 憲一郎