LINE Botのリッチメニューを作成するVisual Studio拡張「XAML Rich Menu Maker」をリリースしました

はじめに

以前このブログで紹介したLINE BOTのリッチメニューをXAMLでデザインするツールをVisual Studioの拡張機能としてリリースしました！

LINE Developer Community

ソースコードはGitHubの「LINE Developer Community」というOrganization で公開しています。 github.com github.com

ここには他にも、 LINE BOTやClovaスキル等 LINE プラットフォームを利用したアプリケーションの開発に使えるC#（ .Net Standard ）のライブラリが多数収録されています。こちらも合わせてご活用ください！

LINE Messaging API
LINE Pay
LINE Login
Clova Extensions Kit
LIFF (LINE Front-end Framework のBlazor用C#ラッパー)

※ なお、現在はC#のライブラリ・ツールがメインですが、他の言語・開発環境のリポジトリも随時追加して行く予定です。
「自分のライブラリ・ツール等も登録してほしい」という方も募集中です！
興味のある方はLINE Developer Communityまで！

インストール

Visual Studio Market Place からVSIXファイルをダウンロードしてインストールする場合

以下のサイトにアクセスして[Download]ボタンをクリックしてVSIXファイル（XRMMVsixProject.vsix）をダウンロードします。 marketplace.visualstudio.com
ダウンロードしたVSIXファイルをそのまま実行してください。（起動中のVisual Studioがある場合はいったん終了してください）

Visual Stdio 2019 の「拡張機能の管理」を利用してインストールする場合

Visual Studioのメニューバーで[拡張機能]-[拡張機能の管理]をクリックし、「Manage Extensions」ダイアログを開きます
メニューバー
ダイアログ右上の検索エリアに「XAML Rich Menu Maker」と入力して検索
Manage Extensions
検索結果に「XAML Rich Menu Maker」が表示されたら「Download」ボタンをクリックします

使い方

XAML Ritch Menu Makerプロジェクトを作成する

Visual Studio のメニューバーで[ファイル]-[新規作成]-[プロジェクト]をクリックし、「新しいプロジェクトの作成」ダイアログで「LINE Ritch Menu Maker」を選択して「次へ」をクリック
プロジェクト作成ウィザード
任意のプロジェクト名を入力して「作成」をクリックするとXAML Ritch Menu Makerのプロジェクトが作成されます。
プロジェクトが作成されたら、メニュー[ビルド]-[ソリューションのビルド]で一度だけビルドを実行します。

BOTアカウントの設定を行う

リッチメニューを利用するBOTアカウントの設定を行います。

ソリューションエクスプローラで「appsettings.json」をクリックして編集画面を開き、LINE Bot のチャネルアクセストークンを入力します。
また「DebugUserId」には、LINE Developers の「チャネル基本設定」画面の「その他」「Your user ID」に記載されている自分のユーザーIDを設定します（こちらは必須ではないです）。

{
    "AppSettings": {
        "ChannelAccessToken": "+CiR37Hw0xxxxxxxxxxxxxxxxx",
        "DebugUserId": "U28aa2xxxxxxxxxxxxxxxxx"
    }
}

XAMLエディタでリッチメニューをデザインする

リッチメニュー定義ファイル（XAML）を作成する

ソリューションエクスプローラで「RichMenuDefs」フォルダを右クリック
表示されるメニューで[追加 ▶] [新しい項目...]をクリック
新しい項目の追加ダイアログで「LINE Rich Menu Definition (XAML)」を選択、ファイル名を入力して「追加」

f:id:pierre3:20191123155107p:plain:w640 — 新しい項目の追加

以下のXAMLファイルが作成されます。これを編集してリッチメニューのデザインを行います。

<local:RichMenuDefsControl 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:XamlRichMenuMaker;assembly=XamlRichMenuMaker"
             xmlns:system="clr-namespace:System;assembly=System.Runtime"
             mc:Ignorable="d" 
             d:DesignHeight="1000" d:DesignWidth="2600">
    <UserControl.Resources>
        <system:Double x:Key="RichMenuWidth">2500</system:Double>
        <system:Double x:Key="RichMenuShortHeight">843</system:Double>
        <system:Double x:Key="RichMenuNormalHeight">1686</system:Double>
    </UserControl.Resources>

    <Grid Width="{StaticResource RichMenuWidth}" 
                  Height="{StaticResource RichMenuShortHeight}" >
        <Grid x:Name="menu_body" Background="LightGray">
            <local:RichMenuProperties.Settings>
                <local:RichMenuSettings Name="" ChatBarText="" Selected="True"/>
            </local:RichMenuProperties.Settings>

            <!-- Design your rich menu layout here. -->

        </Grid>
    </Grid>
</local:RichMenuDefsControl>

リッチメニューの設定

リッチメニューの高さ

リッチメニューのサイズは一番外側のGridのWidth,Heightで指定されています。
ファイルを作成した段階では、Shortサイズの高さが指定されています。大きいサイズのリッチメニューを作成したい場合はHeightをRichMenuNormalHeightに変更してください。

<Grid Width="{StaticResource RichMenuWidth}" 
                  Height="{StaticResource RichMenuNormalHeight}" >

</Grid>

リッチメニュー全体の設定を行う

リッチメニューの画像として保存されるのは、”x:Name=menu_body”とタグ付けされたGridコントロールです。このGridに対して以下の値を設定します。

Grid の Background プロパティにGridの背景色を指定します。
メニュー登録時の各種設定を添付プロパティRichMenuProperties.Settings で指定します。指定する項目には以下があります。
- Name: リッチメニュー名
- ChatBarText: LINEのチャット画面下のメニューバーに表示されるテキスト
- Selected: デフォルトでリッチメニューを表示状態にする場合にTrueを指定

リッチメニューの外観をデザインする

リッチメニューの外観は Grid ”menu_body" の中にコントロールを配置することでデザインします。

ここからは作成したプロジェクトのRichMenuDefsフォルダに入っているSampleMenu.xmlを例に説明します。 f:id:pierre3:20191123164143p:plain:w800

まずGridで2つのボタン領域を決め、そこにImageコントロールでアイコン画像を、TextBlockでボタンのキャプションを設定します。

<!-- 列を2つ作り、1つ目と2つ目の幅の比を２：１に設定 -->
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>

<!-- 1つ目のボタンの画像とキャプション -->
<Image Source="../Resources/cat.png"
            VerticalAlignment="Top"
            Margin="0,150,0,0" Width="420" Height="420"/>
<TextBlock Margin="0,0,0,80" VerticalAlignment="Bottom" 
                HorizontalAlignment="Center" 
                FontSize="80">
        Hello! LINE BOT!
</TextBlock>

<!-- 2つ目のボタンの画像とキャプション -->
<Image Grid.Column="1"  Source="../Resources/web.png"
            VerticalAlignment="Top"
            Margin="236.333,180,237,0" Width="360" Height="360"/>
<TextBlock Grid.Column="1" Margin="0,0,0,80" VerticalAlignment="Bottom" 
                HorizontalAlignment="Center" 
                FontSize="80">Web Site
</TextBlock>

アクションエリアを設定する

次に、リッチメニューの中でボタンとして機能する領域（=アクションエリア）を定義します。定義する項目は以下の2つです。

Bounds: アクションエリアの座標
Action: エリアをタップした際に動作するアクション

Boundsには、x:Name="area_{n}" (nには１～20の番号を指定)でタグ付けしたコントロールの座標をそのまま使用します。
サンプルの例では、ボタンの境界の表示も兼ねてRectangle コントロールを使用していますが、別のコントロールでも構いません。

領域をタップした際に動作するActionは上記コントロールに添付プロパティRichMenuProperties.Actionを指定することで定義します。

<!-- Action Area 1 -->
<Rectangle x:Name="area_1"
        Stroke="DarkGray" StrokeThickness="4">
    <local:RichMenuProperties.Action>
        <local:RichMenuAction Type="Postback" Label="Hello!" Data="Hello!" Text="Hello! LINE BOT!"/>
    </local:RichMenuProperties.Action>
</Rectangle>

Actionには次の４タイプが指定できます。

Postback
Message
URI
Datetimepicker

各アクションに必要な設定項目については以下をご参照ください。
アクションオブジェクト: Messaging API リファレンス

Messaging APIを用いてリッチメニューを作成する

XAMLでのデザインが完了したら、LINE Messaging APIを使用してリッチメニューを作成します。

[Ctrl]+[F5]キーを押してアプリケーションを実行します。
アプリケーションが起動すると、以下の様にXAMLでデザインしたリッチメニューの画像と、Messaging APIでLINE側に送信するJSONの内容が表示されます。 f:id:pierre3:20191123171414p:plain:w640