LINE BOT のリッチメニューをXAMLでデザインするツール
LINE でBotを作成する上で欠かせない機能にリッチメニューがあります。
非常に便利で強力な機能なのですが、メニューに使用する画像を用意する必要があります。
絵心の無い私にとっては、ここが一番のハードルだったりします。
ということで
XamlRichMenuMaker
LINE Bot のリッチメニューをXAMLでデザインして、そのままLINEサーバーへアップロードできるツールを作りました!
WPFプロジェクトをVisual Studioで開いて使用します。
- リッチメニューのデザインをXAMLで行います。
デザインが完成したら、プロジェクトをビルドし、アプリケーションを実行すると「リッチメニューの画像」と「アップロード用のJSON」が自動生成されます。
あとは「Create Rich Menu」ボタンをクリックしてLINEサーバーにアップロードするだけ!
使い方
ソリューションを取得する
まずはXamlRichMenuMaker のソリューション一式を取得します。
GithubからCloneしてくるのが手っ取り早いです。
> git clone https://github.com/pierre3/XamlRichMenuMaker.git
ソリューションを開き、デザイン用のXAMLファイルを作成する
- Visual Studio 2017 で
XamlRichMenuMaker.sln
を開きます。 - ソリューションエクスプローラを確認し、RichMenuDefsフォルダにある
__template.xaml
をコピーします。
- コピーしたファイルを任意の名前にリネームします。
- ファイル名を右クリックしてプロパティを開き、ビルドアクションを「なし」出力ディレクトリにコピーを「常にコピーする」に設定します。
- このファイルを編集してリッチメニューをデザインします。
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には1~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には次の4タイプが指定できます。
- Postback
- Message
- URI
- Datetimepicker
各アクションに必要な設定項目については以下をご参照ください。
これで、XAMLの編集方法の説明は終わりです。 サンプルのXAMLファイルの全体像は以下で確認できます。
リッチメニューを作成・アップロードする
アプリケーションを実行する
実行前にまず、Visual Studioでプロジェクトをビルドします。(これは最初の1回のみで大丈夫です)
次に、メニューで[プロジェクト]-[XamlRichMenuMakerのプロパティ]を選択してプロジェクトのプロパティを開きます。
[デバッグ]-[開始オプション]-[コマンドライン引数]に以下の情報を設定します。
[Ctrl]+[F5]キーを押してアプリケーションを実行します。
リッチメニューを作成する
アプリケーションが起動すると、以下の様にXAMLででサインしたリッチメニューの画像と、Messaging APIでLINE側に送信するJSONの内容が表示されます。
内容を確認してOKなら「Create Rich Menu」ボタンをクリックします。
これでリッチメニューの作成とアップロードの完了です!
作成・登録済みのリッチメニューを確認する
[Create Rich Menu]ボタンの右側にあるコンボボックスを開くと、XAMLファイルで定義したリッチメニュー名(XAMLファイル名)の下に既に登録済みのリッチメニューID(”richmenu-”で始まる文字列)が表示されます。
これらを選択することで、リッチメニューの内容(画像、JSON)を確認することができます。
また、選択したリッチメニューに対して以下操作が可能です。
- [Delete Rich Menu] : リッチメニューを削除します
- [Link to User] : (コマンドライン引数で指定した)デバッグ用のLINEユーザーに関連付けします
- [Unlink from User]: デバッグ用のLINEユーザーから関連付けを外します
まとめ
Visual Studio とXAMLを使うので、使用環境は限られてしまいますが、非常に簡単にリッチメニューを作成できるので是非試してみてください!