# チュートリアル - Flex Message Simulatorでデジタル名刺を作成する
Flex Messageは、CSS Flexible box (CSS Flexbox) (opens new window)を基盤に自由にカスタマイズできるメッセージです。必要に応じて、メッセージのサイズを調整したり、特定の場所にテキスト、画像、アイコンを割り当てたり、インタラクティブなボタンを追加したりできます。
このチュートリアルでは、Flex Message Simulatorを使ったデジタル名刺の作り方を紹介します。Flex Message Simulatorはコードを記述せずにFlex Messageのブレインストーミング、設計、プロトタイプ作成ができるツールです。Flex Messageを初めて使う場合は、まず「Flex Messageを送信する」を参照してください。
# 目標
このチュートリアルを最後まで進めると、次の画像のようなデジタル名刺が完成します。また、このダウンロードリンクから、JSONで定義された結果を取得できます。しかし、このチュートリアルを通してFlex Message Simulatorに慣れることをお勧めします。このツールは、Flex Messageのさまざまなユースケースに対処するのにとても便利だからです。
# はじめる前に
チュートリアルをスムーズに進めるために、「Messaging APIの概要」および「Flex Messageを送信する」を読んでおくことをお勧めします。また、初めてFlex Message Simulatorを使う場合は、このセクションから読み進めてFlex Message Simulatorについて学んでいきましょう。もし、すでにFlex Message Simulatorに慣れているなら、チュートリアル本編から始めてください。
# Flex Message Simulatorについて知ろう
Flex Message Simulatorは、Flex Messageを作成し、プレビューできるツールです。開発環境を用意したりコードを書いたりすることなく、Flex Messageを作成し、Flex Messageを送信してプレビューできます。
まず、Flex Message Simulatorを開いてください。LINE Developersコンソールにログインしていない場合は、ログインを求められます。LINE Developersコンソールの開発者アカウントを持っている場合、ログインしてください。アカウントを持っていない場合、[アカウントを作成]をクリックし、手順に従ってアカウントを作成してください。
Flex Message Simulatorの画面は3つの部分で構成されています。
- プレビューエリア:ツリービューエリアとプロパティエリアで入力したデータを元にしたFlex Messageが表示される部分。
- ツリービューエリア:Flex Messageのデータ構造を編集したり表示したりする部分。
- プロパティエリア:ツリービューエリアで選択した項目のプロパティを設定する部分。この領域で入力したデータを基に、Flex Message SimulatorはFlex Messageを生成します。
ツリービューエリアの項目の上にマウスを置くと、該当する部分がプレビューエリアでハイライトされます。この動作は次の動画で確認できます。
# 定義済みのFlex Messageレイアウトを使用できます
Flex Message Simulatorでは、定義済みのFlex Messageレイアウトが提供されています。
定義済みのレイアウトを使用するには、ページの右上にある[Showcase]をクリックします。使いたいレイアウトをクリックし、画面右下の[作成]をクリックします。
このチュートリアルでは、定義済みのレイアウトを使用せずに、Flex Messageを最初から作成します。
# 作成したFlex MessageのJSONをコピーできます
生成されたJSONデータをコピーするには、ページの右上にある[</>View as JSON]をクリックし、[コピー]をクリックします。
# チュートリアルをショートカットする
手順を読まずに飛ばして結果だけを見たい場合は、Flex MessageオブジェクトのJSONデータをダウンロードできます。Flex Message Simulatorでは、次の手順で結果をプレビューできます。
- [ </>View as JSON]をクリックします。JSONデータのモーダルが表示されます。
- モーダル内のコードを削除します。
- ダウンロードしたJSONファイルの中身をコピーし、モーダルにペーストします。
- [適用]をクリックして変更を保存します。ペーストしたFlex Messageがプレビューエリアに表示されます。
# 1. コンテナタイプを選ぶ
それでは、Flex Message Simulatorを学ぶために、デジタル名刺の作成を始めましょう。名刺を作るのに必要なのはバブル1つだけですから、Flex Messageコンテナのタイプはバブルになります。
バブルタイプのFlex Messageコンテナを作成するには、右上の[New]をクリックし、ドロップダウンメニューから[bubble]を選択します。
ドロップダウンメニューから[bubble]を選択すると、プレビューエリアの下に「OK」メッセージがポップアップ表示されます。これは、編集内容がプレビューエリアに正常に反映されたことを意味します。
コンテナのタイプの詳細については、「コンテナ」を参照してください。
# 2. ヘッダーを追加する
作成したコンテナに、会社名を表示するヘッダーを追加しましょう。ヘッダーは「ブロック」のタイプの一つで、ほかにヒーロー、ボディおよびフッターがあります。ヘッダーは主にメッセージの件名やコンテンツの見出しの表示に使用されます。
ヘッダーを追加するために、ツリービューエリアで[header]を選択します。上部の[+]をクリックし、[box]を選択します。
ヘッダーの背景色を設定します。プロパティエリアの[backgroundColor]フィールドに、16進数カラーコードの背景色(このチュートリアルでは
#00B900
)を入力し、Enterキーを押します。これで、ヘッダーがボディブロックと視覚的に区別できるようになりました。入力内容を反映するにはEnterキーを押しますプロパティエリアで項目を編集または選択し、キーボードのEnterキーを押すと、プレビューエリアに反映されます。これ以降の説明では、Enterキーの操作は省略します。
ヘッダーにテキストを追加します。
ツリービューで、[header]の下の[box [vertical]]をクリックします。
ヒントVertical box(垂直ボックス)は、Flex Messageのレイアウト方式の一つです。子要素を配置する向きを決定します。詳しくは、ボックスコンポーネントの向きを参照してください。
ツリービューの[+]をクリックし、ドロップダウンメニューから[text]を選択します。[text]が[box [vertical]]の下に作成されます。
ツリービューで、作成したtext要素をクリックします。
プロパティエリアの[text]フィールドで、値を「hello, world」から「Flex Message Corp」に書き換えます。
背景色を変更したのでヘッダーが目立つようになりましたが、テキストが少し読みづらくなりました。それでは、テキストの色とフォントの太さを変更して見やすくしましょう。ツリービューエリアで[text]をクリックし、プロパティエリアの[color]フィールドを#FFFFFF
に、[weight]フィールドの値をbold
に設定します。
これで、次のような表示になったか確認しましょう。テキストがはっきり見える、目立つヘッダーになりました。
# 3. 画像を追加する
デジタル名刺の見栄えをよくする方法の一つに、画像の追加があります。Flex Message Simulatorを使うと、画像の追加やスタイル設定が簡単にできます。画像を追加するには、主に画像コンテンツの表示に使用するヒーローブロックを使います。
ツリービューエリアの[hero]をクリックします。
左上の[+]をクリックし、ドロップダウンメニューから[image]を選択します。デフォルト画像がプレビューエリアに表示されます。
画像を変更するために、ツリービューエリアで[image]をクリックします。プロパティエリアの[url]フィールドに、名刺のポートレート画像のURLを入力します。このチュートリアルでは、こちらの画像を使用します。
画像に関する要件Flex Message Simulatorに画像ファイルはアップロードできません。すでにウェブ上にアップロードされている画像のURLを指定してください。画像とそのURLは、以下の条件を満たす必要があります。
- プロトコル:HTTPS(TLS 1.2以降)
- 画像フォーマット:JPEGまたはPNG
- 最大画像サイズ:1024 x 1024ピクセル
- 最大ファイルサイズ:10MB
推奨ファイルサイズ表示の遅延を防ぐために、個々の画像ファイルサイズを1MB以下にすることを推奨しています。
画像はうまく反映されましたが、背景と比較すると少し小さいようです。サイズを調整しましょう。
画像サイズを変更するには、ツリービューで[image]をクリックし、[size]プロパティで画像の幅を指定します。このチュートリアルではフィールドの右隣のボタンをクリックして、ドロップダウンメニューからxl
を選択します。あるいは、値を入力してピクセルまたは%
で指定することも可能です。詳しくは、Messaging API リファレンスの『画像』の「size」欄を参照してください。
これで名刺の画像が大きくなりました。
# 4. 名前を追加する
名刺に名前は必須です。名前などの重要な情報は、目立ちやすいスタイルで提示するのが効果的です。画像の下に名前を入れる手順は次のとおりです。
- ツリービューエリアで、[body]の下の[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[text]を選択します。テキストの要素がボックスの下に作成されます。
- ツリービューエリアで、[text]をクリックします。
- プロパティエリアで、[text]フィールドのテキストの内容を「hello, world」から名前に変更します。
ヘッダーテキストと同じように、名前にもスタイルを追加しましょう。フォントサイズを大きくして太字にし、テキストを中央揃えにします。
- サイズ:[size]フィールドで
xl
を選択(デフォルトのサイズはmd
です) - 太字:[weight]フィールドで
bold
を選択 - 中央揃え:[align]フィールドで
center
を選択
次のように、名刺に名前が入りました。
# 5. 役職を追加する
名刺に記載される内容で名前と同じくらい重要な情報は、役職です。名前の下に役職を追加しましょう。
- ツリービューエリアで、[body]の下にある1つ目の[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[text]を選択します。これで新しいテキスト欄ができました。
- ツリービューエリアで、作成した[text]要素をクリックします。
- プロパティエリアに、textフィールドが表示されます。テキストの内容を「hello, world」から役職に変更します。
先ほど名前を中央揃えにしたので、役職も同様に中央揃えにしましょう。プロパティエリアで、[align]フィールドをcenter
に設定します。
これで、名刺に役職が追加されました。
# 6. セパレータを追加する
この後、名刺をインタラクティブにするためのボタンを追加する予定です。その前に、セパレータを追加して、情報セクションとインタラクティブセクションを視覚的に分離しましょう。
- ツリービューエリアで、[body]の下にある1つ目の[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[separator]を選択します。役職のすぐ下にセパレータが追加されます。
セパレータとその上の役職の間隔が狭く見えます。セパレータにマージンを設定して、両者の間に空間を作りましょう。マージンついて詳しくは、『Messaging APIリファレンス』の「セパレータ」を参照してください。
- ツリービューエリアで、[separator]をクリックします。
- プロパティエリアで、[margin]フィールドを
md
に設定します。
これで、余裕を持ったセパレータが追加されました。
# 7. ボタンを追加する
手順6で述べたように、名刺をインタラクティブにするために、ボタンを追加しましょう。セパレータの下に2つのボタンを追加したいと思います。まず、ボタンをグループ化するためのコンポーネントが必要です。
- [body]の下の最初の[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[box]を選択します。これにより、ボタンを追加できる新しい垂直ボックスが作成できました。
それでは、押すとアクションが実行されるボタンを作っていきます。ボタンに使用できるアクションのタイプは、URIアクションやポストバックアクションなどです。このチュートリアルでは次の2つのボタンを追加します。
# 7-1. 会社のウェブサイトに移動する
次の手順で、会社のウェブサイトに移動するようにボタンを設定します。
- ツリービューエリアで、先ほど作成したボタンを追加するための[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[button]を選択します。
- [button [action]]をクリックします。
- プロパティエリアを一番下までスクロールすると[Action]セクションがあります。[type]プロパティのデフォルトは
uri
です。今回設定するのはウェブサイトのURLなので、値はこのままにしておきます。 - 同じ[Action]セクションで、[label]プロパティに「Flex Message Corp 公式サイト」と入力します。これがボタンのラベルになります。
- ウェブサイトを開くために、[uri]プロパティにウェブサイトのURIを入力します。
[uri]フィールドのドメイン名、パス、クエリパラメータ、フラグメントはUTF-8を用いてパーセントエンコード (opens new window)してください。たとえば、以下の構成要素を持つURIを指定する場合は、https://example.com/path?q=%E3%81%8A%E3%81%AF%E3%82%88%E3%81%86#%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF
とします。
スキーム | ドメイン名 | パス | クエリパラメータ | フラグメント | |
---|---|---|---|---|---|
キー | 値 | ||||
https | example.com | /path | q | おはよう | こんにちは |
これで、タップすると会社のウェブサイトに移動するボタンが名刺に追加されました。
ヘッダーテキストや名前、役職で実施したように、ボタンにもスタイルを追加しましょう。ボタンに色を追加することで、タップ可能な領域がわかりやすくなります。次の3種類の定義済みのボタンスタイルから選んで色をつけることができます。
- primary:濃色のボタン向けのスタイル
- secondary:淡色のボタン向けのスタイル
- link:HTMLのテキストリンクのスタイル
このチュートリアルのように、コンポーネント内で複数のボタンを縦に重ねて配置する場合、link
スタイルの使用を推奨します。背景に色を付ける代わりに、linkスタイルを適用しましょう。
- ツリービューエリアで、[button]をクリックします。
- プロパティーエリアで、[style]プロパティを
link
に設定します。
ボタンが次のように表示されます。
# 7-2. LINE Front-end Framework(LIFF)で作成された登録フォームを開く
それでは、残りのボタンを追加していきましょう。2つ目のボタンには、ビジネスの登録フォームにLINE Front-end Framework(LIFF)URLを追加します。LIFFで登録フォームを作成すると、そのフォームで取得した情報を元に、後でユーザーに新しいメッセージを送信できます。LIFFについて詳しくは、「LIFFアプリを開発する」および「LIFFスターターアプリを試してみる」を参照してください。
次の手順で2つ目のボタンを追加します。
- ツリービューエリアで、1つ目のボタンを作成した[box [vertical]]をクリックします。
- [+]をクリックし、ドロップダウンメニューから[button]を選択します。これでボタンが作成されます。
- プロパティエリアで以下を設定します。
- styleプロパティを
link
に設定 - labelプロパティを「利用者登録する」に変更
- typeプロパティを
uri
のままにする - uriプロパティにLIFFアプリのURLを入力
- styleプロパティを
これで、LIFFアプリを設定した2つ目のボタンができました。
# 7-3. ボタンの配置を調整する
2つのボタンは、距離が近過ぎます。見た目はそうでもないのですが、ボタンのスタイルをprimary
やsecondary
に変更すると、よく分かります。間に余裕を持たせてボタンを配置する場合は、親要素であるボックスコンポーネントにマージンまたはパディングが使えます。このチュートリアルではパディングを追加します。
- ツリービューで、作成した2つのボタンが含まれる[box [vertical]]を選択します。
- プロパティエリアで、[Padding]の中の[paddingTop]を
10px
に設定します。
これでボタンの間のスペースが広がりました。
以上で、デジタル名刺を作成するチュートリアルは完了です!
# 次のステップ
Flex Messageを構築したら、「作成したFlex MessageのJSONをコピーできます」の説明に従って、構築したFlex MessageのJSONデータをエクスポートできます。このJSONデータを利用することで、Messaging APIでFlex Messageをメッセージとして送信できます。詳しくは、「Messaging APIで送信する」を参照してください。
# 最後に
Flex Message Simulatorは、コードを記述せずに、Flex Messageのブレインストーミング、設計、プロトタイプ作成ができるツールです。このチュートリアルで示したように、Flex Messageの使用例は無限にあります。Flex Message Simulatorを使うと、技術的な障壁をなくして、気軽にアイディアを具体化したり、プロトタイプをテストしたりしてFlex Messageを素早く作れます。ぜひみなさん独自のFlex Messageを作ってみてください。
# 関連ページ
- Flex Messageを送信する
- Flex Messageの要素
- Flex Messageのレイアウト
- Flex Message(Messaging APIリファレンス)