こんにちは！
Yuki (@yukibnb) です。
今回はLINE Messaging APIのFlex Message Simulatorを使ってFlex Messageを作成する方法を紹介します。
CSSなど細かいことがわからなくても見栄えのいいFlex Messageを作成することができます。
作成したFlex MessageはそのままLINE Botにも使用できるのでとても便利です。
では見ていきましょう！
- はじめに
- Flex Message Simulatorの概要
- Flex Messageを作成しよう (初級編)
- Flex Messageを作成しよう (中級編)
- JSONのエクスポートと読み取り
- まとめ
はじめに
Flex Messageとは？
Flex Messageとは上記画像のようにレイアウトをカスタマイズしたメッセージです。
ご覧のようにデザインの自由度はかなり高く、伝えたいことをわかりやすく効果的に伝えることができます。
例えば関西国際空港からYuki's Hotelという架空のホテルまでの道順案内を想定してみましょう。
Flex Messageとテキストを並べてみると違いは一目瞭然ですね。
テキストだけでもある程度わかりやすいですが、Flex Messageを使用すればより視覚的にわかりやすくなります。
たとえばOsaka Metroの御堂筋線のラインカラーは赤です。Flex Messageでも御堂筋線に赤を使用することで、初めて大阪に来る人でも乗り換え時に迷いにくくなります。
このようにFlex Messageは単に見栄えが良いだけでなく、工夫次第で利用者の体験価値を向上させることができます。
Flex Messageが常にテキストより優れているわけではありませんので、「テキストは一切使わずFlex Messageだけ使う」というのはおすすめしません。
内容や場面によってはテキストだけの方がわかりやすいこともあるため、どのような表現が利用者にとってよりわかりやすいかを考えて使い分けることをおすすめします。
Flex Message作成の難易度
Flex Messageはすごく自由度が高いので「あんな表現もしたい」「こんな表現もしたい」と想像が膨らんでワクワクしますね。
ですが自由度が高いということは、それだけ細かな点を作成時に指定する必要があるということです。
「ここの背景色は〇色」「あの文字の大きさは〇pxで〇色」「そこの余白は〇px」というようなものです。
先程紹介した道順案内のFlex Messageとテキストの比較をしてみましょう。
まずテキストの場合、メッセージ部分は以下のように記述します。テキストだけなのでとてもシンプルです。(見やすいように改行しています)
{"type"="text",
"text"="関西国際空港からYuki's Hotelまでの道順
《所要時間: 約1時間》
●関西国際空港駅 (NK32)
｜
[南海電鉄 空港急行: 45分]
↓
●難波駅 (NK01)
｜
[地下鉄なんば駅に乗り換え: 徒歩3分]
↓
●なんば駅 (M20)
｜
[Osaka Metro 御堂筋線: 1分]
↓
●心斎橋駅 (M19)
｜
[徒歩5分]
↓
●Yuki's Hotel"}
ではFlex Messageの場合どのように記述するかというと、以下のようになります。
{
"type": "bubble",
"size": "mega",
"header": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "FROM",
"color": "#ffffff66",
"size": "sm"
},
{
"type": "text",
"text": "関西国際空港",
"color": "#ffffff",
"size": "xl",
"flex": 4,
"weight": "bold"
}
]
},
/*
大幅省略
*/
{
"type": "text",
"text": "Yuki's Hotel",
"gravity": "center",
"flex": 4,
"size": "sm"
}
],
"spacing": "lg",
"cornerRadius": "30px"
}
]
}
}あまりにも長いので途中で大幅省略しましたが、省略しなければ516行もあります。
たったひとつのFlex Messageを作成するために516行もコードを書かないといけない、しかも見るからにややこしそうです。
初心者の方にとってこれをゼロから書くのはすごく難易度が高いです。僕もゼロから書きたくありません。
「Flex Messageを使いたかったけど難しそうだからあきらめてテキストを使おう」と思うかもしれません。
しかしそんな悩みを解決してくれるとても便利なサービスがあります。LINEが公式で無料提供しているFlex Message Simulatorです。
Flex Message Simulatorの概要
Flex Message Simulatorとは
Flex Message Simulatorとは難しい知識が不要で、コードを書かずに画面を見ながらFlex Messageを作成できるサービスです。
豊富なテンプレートが用意されており、テンプレートの文字を置き換えたり、コピペしたりするだけで簡単にFlex Messageを作成できます。
そして作成したFlex MessageをLINE Botで使用できるようにJSONというフォーマットに自動変換してくれます。(先ほど紹介した516行あるコードです)
Flex Message Simulatorの画面を見ながらコピペやクリックでポチポチ調整してFlex Messageを作成するだけで、面倒な長いコードは僕たちの代わりに書いてくれるという素晴らしいサービスです。
Flex Message Simulatorの画面構成
Flex Message Simulatorの画面はざっくりこのように分けることができます。
- メニュー: 新しいFlex Messageを作成したり、JSONを作成・読み取りしたりできます。
- プレビューエリア: Flex Messageの編集結果をリアルタイムで確認できます
- ツリービューエリア: 階層(親子関係)を確認したり、項目を選択、追加、削除できます。
- プロパティエリア: 選択した項目を細かく編集できます。
メニュー、プレビューエリア、ツリービューエリア、プロパティエリアそれぞれを活用してFlex Messageを作成し、LINE Botで使用できるJSONフォーマットで書き出すまでの手順を詳しく見ていましょう。
Flex Messageを作成しよう (初級編)
Flex Message Simulatorを開く
以下のURLにアクセスし、Flex Message Simulatorを開いてください。
https://developers.line.biz/flex-simulator/
ウェブブラウザ上でFlex Messageを作成できますので、ソフトウェアのインストールは不要です。
LINE Developersコンソールへのログインを求められるのでログインしてください。
もしLINEの開発者アカウントを持っていない場合、[アカウントを作成]をクリックし開発者アカウントを作成してください。
開発者アカウントの作成手順はこちらの記事で紹介しています。
テンプレートから好みのFlex Messageを選択する
Flex Message Simulatorを開いたら、右上のメニューにある以下どちらかのボタンをクリックします。
- [New]: ゼロから作成したい方
- [Showcase]: テンプレートから選んで作成したい方 (おすすめ！)
ある程度慣れている方は[New]ボタンから新しいFlex Messageを作成するのもありですが、初めてFlex Messageを作成する方は[Showcase]ボタンをクリックしてテンプレートから選んで作成することをおすすめします。
[Showcase]ボタンをクリックすると様々なデザインのテンプレートが表示されます。
お好きなテンプレートを選択し、右下の[Create]ボタンをクリックするとFlex Message Simulatorにそのテンプレートが表示されます。
この記事では「Transit」テンプレートを選択しました。
4つのブロックを理解する
Flex Messageは大きく分けて4つのブロックと呼ばれる単位で構成されています。
- header: メッセージの件名や見出しを表示するブロック
- hero: 画像などの主要なコンテンツを表示するブロック
- body: 主要なメッセージコンテンツを表示するブロック
- footer: ボタンや補足情報を表示するブロック
それぞれのブロックの中にテキスト、画像、ボタンなどを格納し、デザインを整えていきます。Flex Messageがタンスだとすれば、ブロックは4つの引き出しのようなイメージです。
なお「画像はheroにしか入れられない」、「ボタンはfooterにしか入れられない」というわけではありません。
画像をbodyに入れることもできますし、ボタンをheroに入れることもできます。ただ基本としてそれぞれのブロックがどのような目的で存在しているかを覚えておくと編集がスムーズになります。
階層 (親子関係) を理解する
Flex Messageには4つのブロックがあることがわかりました。
次にそれぞれのブロックの中にテキストや画像、ボタンなど様々な要素を格納していきますが、その際に重要となるのが階層 (親子関係) です。
例えば上記画像のheaderを見てみましょう。
headerの中に大きなbox [vertical]がひとつあり、さらにその中に小さなbox [vertical]がふたつ並列で入っています。
小さなふたつのbox [vertical]の中にはそれぞれテキストが入っています。
headerがタンスの引き出しだとすれば、引き出しの中にさらに収納トレーを入れて整理しやすくするようなイメージです。
ツリービューエリアを見ればどの要素が親でどの要素が子かをすぐ判断できます。左側にある要素が親、右側にある要素が子です。
そして「FROM Akihabara」と「TO Shinjuku」が入っているふたつのbox [vertical]は、親子関係ではなく兄弟です。
それぞれの要素の関係性を理解すると、頭で思い描いた通りの場所に要素を配置しやすくなります。
ブロックと階層についてわかりましたので、いよいよ「Transit」テンプレートを編集していきましょう！
編集したい要素を選択する
ツリービューエリアをぱっと見ただけではそれぞれの親子関係はわかっても、実際にプレビューエリアのどの部分を指すかわかりにくいです。
しかしツリービューエリアの要素にカーソルを合わせるとその要素に該当するプレビューエリアの場所がグレーで強調されます。
おかげでツリービューエリアをひとつひとつ読み進めなくても上記GIF動画のようにカーソルを上から順に動かしていけばすぐに目当ての要素を見つけることができます。
編集したい要素を見つけたらその要素をクリックします。
今回はheader内の「Akihabara」を「関西国際空港」に変更したいので、text [Akihabara]をクリックして選択しました。
プロパティエリアで編集する
ツリービューエリアで要素を選択すると、その右のプロパティエリアに編集できる項目(フィールドと呼びます)が表示されます。
プロパティエリアに表示されるフィールドは要素の種類(テキスト、画像、ボタンなど)によって異なります。
フィールドは数が多いためすべて覚えるのではなく、まずは基本的なものだけ覚えて徐々に慣れていくのが良いと思います。例えばテキストだと以下フィールドです。
- text: 文字を変更する
- margin: 余白を変更する
- size: 文字サイズを変更する
- color: 文字色を変更する
- weight: 文字の太さを変更する
- align: 配置方向を変更する
- wrap: 文字を折り返すか(改行するか)を設定する
今回は「Akihabara」を「関西国際空港」に変更したいので、textフィールドに入力されている「Akihabara」を「関西国際空港」に書き換えます。
反映結果をすぐ確認する
プロパティエリアのフィールドを書き換えるとすぐにプレビューエリアのFlex Messageに反映されます。
またツリービューエリアの要素名もtext [Akihabara]からtext [関西国際空港]に変更されました。
このようにFlex Message Simulatorを使えばすぐに結果がわかるため、以下のような流れでどんどん編集を進めていきます。
- ツリービューエリアで変更したい要素を見つけて選択する。
- プロパティエリアでフィールドを編集する。
- プレビューエリアで結果を確認する。
- (1)～(3)を繰り返す。
これでテンプレートのデザインを利用しつつ、テキストや画像、色などを自分好みのものに変更してFlex Messageを作成できます。
作りたいFlex Messageがシンプルなものであればこの時点でFlex Messageの作成は完了です。
ただテンプレート内のこの要素をもう一つ増やしたい、減らしたい、全く新しい要素を追加したいという場合もあると思います。
例えば「Transit」テンプレートでは「秋葉原→お茶の水→新宿」という3駅が標準設定されていますが、4駅以上表示させたい場合もあります。
ここからはテンプレートのデザインを活かしつつより柔軟なカスタマイズをする方法を見ていきましょう。
Flex Messageを作成しよう (中級編)
ツリービューエリアのボタンを理解する
ツリービューエリアの上部には複数のボタンがあります。
いろんなITソフトでよく見るタイプのボタンですが、一部のボタンの操作にはコツがあります。
左のボタンからそれぞれ見てみましょう。
選択している要素に新しい子要素を追加する
新しい要素を追加したいときに一番左の青いプラスボタンを使用します。
以下の流れで新しい要素を追加できます。
- 要素を追加したい場所の親要素を選択する
- 青いプラスボタンをクリックする
- 追加したい要素を選択する
- (1)で選択した要素に子要素が追加される
上記画像のように「FROM Akihabara」と「TO Shinjuku」が入っているふたつのbox [vertical]の兄弟としてみっつめのbox [vertical]を追加したい場合、まず追加したい場所の親要素を選択します。
親要素を選択し、青いプラスボタンをクリックすると子要素として追加できる要素が表示されます。追加したい要素を選択しましょう。
box (ボックス)、image (画像)、text (テキスト)、button (ボタン) など様々です。
親要素の種類によって、追加できる要素の種類はことなります。例えばboxの子要素には多くの種類を追加できますが、textの子要素にはspanしか追加できません。
青いプラスボタンをクリックすると、追加できる要素しか表示されませんので迷うことはありません。
今回はbox [vertical]を追加したいのでboxを選択します。
box [vertical]を思い通りの場所に追加できました。
要素を上下に移動する
選択した要素を上下に移動して表示順を変更したい時に使用します。
Flex Message Simulatorでは要素をドラッグして移動できないため、これらふたつのボタンの使用頻度は高いです。
選択した要素は同一階層内でのみ上下に移動できます。別階層に移動させたい場合、後述するカットとペーストを使用してください。
要素をコピー・カット・ペーストする
選択した要素をコピー・カット・ペーストすることができます。
以下の流れで使用します。
- コピーもしくはカットしたい要素を選択する
- コピーもしくはカットボタンをクリックする
- ペーストしたい場所の親要素を選択する
- ペーストボタンをクリックする
- (4)で選択した要素に子要素が追加される
ポイントはコピーもしくはカットボタンをクリックした後に、ペーストしたい場所の親要素を選択することです。
思った場所にペーストできないと感じた場合、親要素の選択が間違っていないか確認してください。
動作を取り消す・やり直す
直前の動作を取り消したり、やり直したりできます。
Flex Message Simulatorを使えばコードを書かずにFlex Messageを作成できますが、一定の慣れはどうしても必要です。
あれこれ考えるより積極的に編集をしてみて、思い通りにいかなければ取り消すボタンややり直すボタンを使って試行錯誤することをおすすめします。
要素を削除する
選択した要素を削除することができます。
もし誤って削除してしまっても、先ほどの取り消すボタンをクリックすれば削除を取り消すことができるので安心です。
テンプレートで使用されている要素を参考にする
テンプレートで使用されている要素は参考になることがたくさんあります。
例えば「テキストを右揃えにしたいけどプロパティエリアのどのフィールドを編集すればいいかわからない」という場合、右揃えされたテキストを使用しているテンプレート(「Receipt」や「Menu」など)を開いてその要素のプロパティエリアを観察してみます。
するとalignフィールドが[end]になっていることを発見しました。
試しに[end]を[start]や[center]に変更するとテキストが左揃え、中央揃えになることをプレビューで確認できました。
このようにテンプレートの既存要素を参考にすることで「テキストを右揃えにしたい場合、alignフィールドを[end]にする」ということを覚えることができました。
テンプレートは良い教科書になりますので、困ったらまず似たような表現がないか複数のテンプレートの中から探してみましょう。
その他ポイント
プロパティエリアのフィールドを編集する際のポイントをいくつか紹介します。
色はカラーコードで指定する
colorやbackgroundColorのような色に関するフィールドではHEX6桁、もしくはHEX8桁というカラーコードで色を指定します。
それぞれ#から始まる6桁、もしくは8桁のカラーコードです。
例: #f28972
HEX6桁のカラーコードは以下のようなサイトで確認するとよいでしょう。
www.color-sample.com
フィールドに入力する際、頭の#がないとエラーになりますので忘れず入力しましょう。
テキストを改行する方法
以下の手順でテキストを改行できます。
改行したいテキストを含むtext要素を選択します。
プロパティエリア内のwrapフィールドで[true]を選択します。
同じプロパティエリア内のtextフィールドで改行したい場所に[\n]を入力します。
プレビューエリアを見ると[\n]の位置で改行されていることがわかります。
JSONのエクスポートと読み取り
JSONのエクスポート
Flex Message Simulatorを駆使して思い通りのFlex Messageを作成できたら、プログラムで使用できるようにJSONというフォーマットでエクスポートします。
エクスポートしたJSONをプログラム内で使用することで、プレビューエリアに表示されているものと同じデザインのFlex MessageをLINE Botから送信できます。
JSONのエクスポートはとても簡単です。
まず画面右上のメニュー内の[View as JSON]をクリックします。するとポップアップが表示されます。
ポップアップ内に表示されている長いコードがJSONです。
ポップアップの一番下にある[コピー]をクリックしてください。
これでJSONのエクスポートが完了です。あとはプログラム内の必要箇所にペーストして使用できます。
コピーしたJSONはメモ帳などにペーストして保存しておくと便利です。
JSONの読み取り
Flex Message Simulatorには作成したFlex Messageの保存機能がありません。そのためFlex Message Simulatorを開いているウェブブラウザのタブを閉じると作成したFlex Messageが消えてしまいます。
「続きは明日したい」ということもしばしばあります。
そんな時に使える機能がJSONの読み取りです。
作成したJSONを読み取ればFlex Message Simulatorに反映されるため、いつでも作成作業を再開できます。
「作成完了したけど気になる点があるから○○を修正したい」「作成中のFlex Messageを上司に確認してもらいたい」というような場合にもJSONの読み取り機能を活用できます。
JSONの読み取りは簡単です。
画面右上のメニュー内の[View as JSON]をクリックします。するとポップアップが表示されます。
ポップアップ内に表示されているJSONを削除し、読み取りたいJSONをペーストします。
ポップアップの一番下にある[適用]をクリックしてください。
これでJSONの読み取りが完了です。Flex Message Simulatorで編集をすることができます。
JSONの内容が正しくない場合エラーとなり読み取りができず、Flex Message Simulatorに反映されません。
まとめ
今回はLINE Messaging APIのFlex Message Simulatorを使ってFlex Messageを作成する方法を紹介しました。
ゼロからFlex MessageのJSONを書くのは困難ですが、Flex Message Simulatorを使用すれば初心者の方でも簡単にFlex Messageを作成でき、プログラムで使えるJSONも取得できます。
Flex Message Simulatorの使い方につまづいた時に本記事が参考になれば幸いです。
次回はGoogle Apps Scriptとスプレッドシートを使って、Flex Messageを返信するLINE Botの作り方を紹介します。
ご期待ください！
