LINE BOT のリッチメニューをXAMLでデザインするツール

LINE でBotを作成する上で欠かせない機能にリッチメニューがあります。

リッチメニューを使う

非常に便利で強力な機能なのですが、メニューに使用する画像を用意する必要があります。
絵心の無い私にとっては、ここが一番のハードルだったりします。

ということで

XamlRichMenuMaker

LINE Bot のリッチメニューをXAMLでデザインして、そのままLINEサーバーへアップロードできるツールを作りました！

github.com

WPFプロジェクトをVisual Studioで開いて使用します。

リッチメニューのデザインをXAMLで行います。

f:id:pierre3:20180506105716p:plain

デザインが完成したら、プロジェクトをビルドし、アプリケーションを実行すると「リッチメニューの画像」と「アップロード用のJSON」が自動生成されます。
あとは「Create Rich Menu」ボタンをクリックしてLINEサーバーにアップロードするだけ！

f:id:pierre3:20180511232529p:plain:w600

使い方

ソリューションを取得する

まずはXamlRichMenuMaker のソリューション一式を取得します。
GithubからCloneしてくるのが手っ取り早いです。

> git clone https://github.com/pierre3/XamlRichMenuMaker.git

ソリューションを開き、デザイン用のXAMLファイルを作成する

Visual Studio 2017 で XamlRichMenuMaker.sln を開きます。
ソリューションエクスプローラを確認し、RichMenuDefsフォルダにある__template.xamlをコピーします。

f:id:pierre3:20180506105631p:plain

コピーしたファイルを任意の名前にリネームします。
ファイル名を右クリックしてプロパティを開き、ビルドアクションを「なし」出力ディレクトリにコピーを「常にコピーする」に設定します。

f:id:pierre3:20180512160437p:plain

このファイルを編集してリッチメニューをデザインします。

XAML編集の手順

__template.xamlファイルの中身は以下の通りです。
UserControlクラスを継承したRichMenuDefsControlの中身を編集していきます。

<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:system="clr-namespace:System;assembly=mscorlib"
             xmlns:local="clr-namespace:XamlRichMenuMaker;assembly=XamlRichMenuMaker"
             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>

1. リッチメニューのサイズを指定する

リッチメニューには高さの異なる2種類のサイズがあります。

Normal :2500×1686
short:2500×843

これらは、テンプレートではリソースとして定義されています。
それを最上位のGridコントロールのWidth、Heightに設定します。

 <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>

2. リッチメニューの各種設置値を指定する

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

Grid の Background プロパティにGridの背景色を指定します。
メニュー登録時の各種設定を添付プロパティRichMenuProperties.Settings で指定します。

指定する項目には以下があります。

Name: リッチメニュー名
ChatBarText: LINEのチャット画面下のメニューバーに表示されるテキスト
Selected: デフォルトでリッチメニューを表示状態にする場合にTrueを指定

<Grid x:Name="menu_body" Background="LightGray">
        <local:RichMenuProperties.Settings>
            <local:RichMenuSettings 
                Name="My Rich Menu" 
                ChatBarText="MY メニュー" 
                Selected="True"/>
        </local:RichMenuProperties.Settings>

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

</Grid>

3.リッチメニューの見た目を自由にデザインする

リッチメニューの外観は Grid ”menu_body" の中にコントロールを配置して行います。
今回の例では、Gridで3つあるボタンの配置を決めて、そこにImageコントロールでアイコン画像を、TextBlockでボタンのキャプションを設定しています。

<!-- ボタンの幅を2：1：1の割合で配置 -->
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="2*"/>
    <ColumnDefinition/>
    <ColumnDefinition/>
</Grid.ColumnDefinitions>

<!-- 1つ目のボタン -->
<Image Grid.Column="0"  Source="../Resources/userinfo.png"
       VerticalAlignment="Top"
       Margin="0,150,0,0" Width="420" Height="420"/>
<TextBlock Grid.Column="0"  Margin="0,0,0,80" VerticalAlignment="Bottom" 
        HorizontalAlignment="Center" 
        FontSize="80">ユーザー情報確認
</TextBlock>

アイコン画像は、以下のサイトで公開されているものを使用させていただきました。
icon-rainbow.com

シンプルで使い勝手の良いアイコンを無償で提供してくださっています。アイコンの種類も豊富で、お勧めのサイトです。

4. アクションエリアを定義する

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

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

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

<!-- Action Area 1 -->
<Rectangle Grid.Column="0" x:Name="area_1"
                    Stroke="DarkGray" StrokeThickness="4">

</Rectangle>

Actionは上記コントロールに添付プロパティRichMenuProperties.Actionを指定することで定義します。

<!-- Action Area 1 -->
<Rectangle Grid.Column="0" x:Name="area_1"
                    Stroke="DarkGray" StrokeThickness="4">
    <local:RichMenuProperties.Action>
           <local:RichMenuAction Type="Postback" Label="get user info" Data="API(UserInfo)"  Text="ユーザー情報確認"/>
     </local:RichMenuProperties.Action>
</Rectangle>

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

Postback
Message
URI
Datetimepicker

各アクションに必要な設定項目については以下をご参照ください。

アクションオブジェクト：APIリファレンス

これで、XAMLの編集方法の説明は終わりです。サンプルのXAMLファイルの全体像は以下で確認できます。

/RichMenuDefs/UnlinkMenu.xaml

リッチメニューを作成・アップロードする

アプリケーションを実行する

実行前にまず、Visual Studioでプロジェクトをビルドします。（これは最初の1回のみで大丈夫です）
次に、メニューで[プロジェクト]-[XamlRichMenuMakerのプロパティ]を選択してプロジェクトのプロパティを開きます。
[デバッグ]-[開始オプション]-[コマンドライン引数]に以下の情報を設定します。