# Flex Message Simulatorでデジタル名刺を作成する
Flex Messageは、CSS Flexible box (CSS Flexbox) (opens new window)を基盤に自由にカスタマイズできるメッセージです。必要に応じて、メッセージのサイズを調整したり、特定の場所にテキスト、画像、アイコンを割り当てたり、インタラクティブなボタンを追加できます。Flex Message Simulatorは、コードを記述せずにFlex Messageのブレインストーミング、設計、プロトタイプ作成ができるツールです。
このチュートリアルでは、Flex Message Simulatorの使い方と、Flex Message Simulatorを使ったデジタル名刺の作り方を紹介します。
# 目標
このチュートリアルを最後まで進めると、Flex Message Simulatorの使い方を実践的に学べるとともに、Flex Messageを使用した次の画像のようなデジタル名刺が完成します。
# はじめる前に
このチュートリアルをスムーズに進めるために、Messaging APIの概要およびFlex Messageを送信するを読むことをお勧めします。
# Flex Message Simulatorって何？
Flex Message Simulatorは、Flex Messageを送信したり、開発環境を構築したり、コードを記述したりすることなく、Flex Messageを編集したりプレビューしたりするためのツールです。
# Flex Message Simulatorの構造
まず、Flex Message Simulatorを開いてください。LINE Developersコンソールにログインしていない場合、ログインを求められます。LINE Developersコンソールの開発者アカウントを持っている場合、ログインしてください。アカウントを持っていない場合、［アカウントを作成］をクリックし、手順に従ってアカウントを作成してください。
Flex Message Simulatorは3つの部分で構成されています:
- プレビューエリア：ツリービューエリアとプロパティエリアで入力したデータを元にしたFlex Messageが表示される部分。
- ツリービューエリア： 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］をクリックします。
ページ下部にある［コピー］をクリックします。
# 1. 作成するFlex Messageのタイプを選択する
Flex Messageの作成を始めましょう。
右上の［New］をクリックし、［bubble］を選択します。［bubble］を選択すると、bubbleタイプのFlex Messageコンテナが作成されます。
コンテナのタイプの詳細については、「コンテナ」を参照してください。
[bubble] を選択すると、プレビューエリアの下に「OK」メッセージがポップアップ表示されます。これは、編集内容がプレビューエリアに正常に反映されたことを意味します。
# 2. ヘッダーを追加する
Flex Messageの基礎ができたので、会社名を含むヘッダーを名刺に追加しましょう。
「Flex Messageの要素」の「ブロック」で詳細に説明されているように、Flex Messageバブルは、 ヘッダー、ヒーロー、ボディおよびフッターで構成されています。
ヘッダーは、メッセージの件名や見出しを表示する領域です。
ツリービューエリアでheaderを選択します。headerがハイライトされている事を確認し、ツリービューエリアの左上にある [+] をクリックし、boxを選択します。これにより、ヘッダーに新しいボックスが作成されます。
ヘッダーの背景色を設定しましょう。
プロパティエリアのbackgroundColorフィールドで、16進数カラーコードの背景色を入力し、Enterキーを押します（このチュートリアルでは、#00B900を使用します）。
プロパティエリアで項目を編集または選択し、キーボードのEnterキーを押すと、プレビューエリアに反映されます。これ以降は、Enterキーの操作は省略します。
ヘッダーのテキストを入力しましょう。
ツリービューエリアで先ほどheaderに追加されたbox [vertical]をクリックします。Vertical box（垂直ボックス）は、Flex Messageのレイアウト方式の一つです。子要素を配置する向きを決定します。詳しくは、コンポーネントを配置する向きを参照してください。
左上の［+］をクリックします。textをオプションから選択します。ツリービューエリアで、作成したtext要素をクリックします。プロパティエリアのtextフィールドで、値を「hello, world」から会社名に変更します（このチュートリアルでは、「Flex Message Corp」を使用します）。
背景色を変更したのでヘッダーが目立つようになりましたが、テキストが見にくくなりました。これは、テキストの色とフォントの太さを変更することで解決できます。
プロパティエリアのcolorフィールドに16進数カラーコードのテキストの色を入力します（このチュートリアルでは、#FFFFFFを使用します）。
テキストのフォントの太さを変更しましょう。プロパティエリアのweightフィールドの値を 「bold」 に切り替えます。
次のような表示が確認できれば次に進みましょう。
# 3. 画像を追加する
デジタル名刺の見栄えをよくする方法の一つに、画像の追加があります。Flex Message Simulatorを使うと、画像の追加やスタイル設定が簡単にできます。
ツリービューエリアのheroをクリックし、左上の ［+］をクリックします。Flex Messageのヒーローブロックは主に画像コンテンツを表示します。
オプションからimageを選択します。これにより、Flex Messageのヒーローブロックにデフォルトの画像が追加されます。
デフォルトの画像を変更するには、ツリービューエリアのheroの下にあるimageをクリックします。これにより、画像の表示方法を調整するためのフィールドがプロパティエリアに表示されます。
プロパティエリアのurlフィールドに、名刺のポートレート画像のURLを入力します。
画像とそのURLは、以下の条件を満たす必要があります。
- プロトコル：HTTPS（TLS 1.2以降）
- 画像フォーマット：JPEGまたはPNG
- 最大画像サイズ：1024×1024px
- 最大データサイズ：10MB
Flex Message Simulatorに画像ファイルをアップロードすることはできません。すでにウェブ上にアップロードされている画像のURLを指定してください。
画像のファイルメッセージの表示が遅延することを防ぐために、個々の画像ファイルサイズを小さくしてください（1MB以下推奨）。
このチュートリアルでは、こちらの画像を使用します。
画像はうまく反映されましたが、少し小さいようです。サイズを調整しましょう。
プロパティエリアに、sizeフィールドが表示されています。sizeは、画像の幅の最大サイズを定義します。詳しくは、Messaging API リファレンスの画像の「size」欄を参照してください。sizeフィールドをクリックし、オプションから「xl」を選択します。
次のような表示が確認できれば次に進みましょう。
# 4. 名前を追加する
名刺の最も重要な目的の一つは連絡先を伝えることです。名前などの重要な情報を目立ちやすいスタイルで提示する事が有効です。
画像の下に名前を追加しましょう。
ツリービューエリアで、bodyの下にbox [vertical]が表示されています。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. ボタンを追加する
Flex Messageにボタンを追加することで、インタラクティブ性の高いメッセージを作成することができます。
2つのボタンを役職の下に追加しましょう。
まず、ボタンをグループ化するコンポーネントを作成しましょう。 bodyの下の最初のbox [vertical]をクリックし、左上の［+］をクリックします。オプションからboxを選択します。これにより、ボタンを追加できる新しい垂直ボックスが作成されます。
作成したbox [vertical]をクリックし、左上の［+］をクリックします。buttonを選択します。これにより、ボタンコンポーネントが作成されます。
ユーザーがボタンをタップすると、URIアクションやポストバックアクションなど特定のアクションが実行されます。
ここでは2つのボタンを追加し、それぞれ以下のアクションを設定します。
- 会社のウェブサイトに移動する
- LINE Front-end Framework（LIFF）で作成された登録フォームを開く
先ほど作成した button[action]をクリックします。
プロパティエリアを一番下までスクロールするとActionセクションがあります。Actionセクションでユーザーがボタンをタップしたときに実行されるアクションを定義します。 typeフィールドは、デフォルトでuriが選択されています。uriは、URIアクションを意味します。ユーザーが会社のウェブサイトのURLを開くためのボタンを作成したいので、ここはそのままにしておきましょう。
同じActionセクションに、labelフィールドがあります。このフィールドで、ボタンに表示されるテキストを定義します。
任意のテキストを入力します（このチュートリアルでは「Flex Message Corp 公式サイト」とします）。
次に、会社のURIを設定しましょう。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 | おはよう | こんにちは |
ボタンに色を追加することで、タップ可能な領域がわかりやすくなります。
プロパティエリアの一番上のButtonセクションに、styleフィールドがあります。このフィールドでボタンのスタイルを定義します。次の3つのスタイルから選択できます。
primary：濃色のボタン向けのスタイルsecondary：淡色のボタン向けのスタイルlink：HTMLのテキストリンクのスタイル
チュートリアルのように、ボタンをコンポーネント内で複数縦に重ねる場合、linkスタイルの使用を推奨します。オプションから 「link」 を選択します。
次のような表示が確認できれば次に進みましょう。
これで、Flex Messageに機能するボタンが1つ追加されました。
さらにボタンを追加していきましょう。
2つ目のボタンでは、ビジネスの登録フォームにLINE Front-end Framework（LIFF）URLを追加します。LIFFはLINEが提供するWebアプリのプラットフォームです。 LIFFアプリは、プロフィール情報などのデータをLINEプラットフォームから取得できます。
LIFFで作成した登録フォームのURLをFlex Messageのボタンに設定すると、ユーザーが該当のボタンをタップしたときに登録フォームが表示されます。ユーザーが登録フォームに入力した情報をもとに、新しいメッセージを送信できます。
LIFFの詳細については、「LINE Front-end Framework（LIFF）」を参照してください。 LIFFアプリの開発方法については、「LIFFアプリを開発する」および「LIFFスターターアプリを試してみる」を参照してください。
ツリービュー領域で、最初のボタンを作成したbox [vertical]をクリックし、［+］をクリックします。buttonを選択します。
button [action]をクリックします。
1つ目のボタンと同様に、ボタンのスタイルを変更しましょう。 Buttonセクションの下部の、styleフィールドの値を 「link」に変更します。
プロパティエリアの一番下のActionセクションまでスクロールします。
labelの値を「利用者登録する」に変更します。
LIFF URLを追加するので、1つ目のボタンと同様に、typeフィールドを 「uri」のままにしておきましょう。uriフィールドにLIFFアプリのURLを入力します。
2つ目のボタンは次のように表示されます。
ボタンが前のボックスコンポーネントに少し近すぎるように見えます。
これを解決するために、パディングをボックスコンポーネントに追加できます。
2つのボタンを追加したbox [vertical]をクリックします。
プロパティエリアにPaddingセクションがあります。ボタンを含むコンポーネントの上部にパディングを追加するため、 paddingTopを 「10px」に設定します。
このように、2つのコンポーネントの間隔が広がっています。
マージンを追加して、コンポーネント間にスペースを追加することもできます。ツリービューエリアで、ボタンが属するbox [vertical]をクリックします。プロパティエリアで、Boxセクションのmarginをお好みのマージンサイズに設定してください。
これで、デジタル名刺に必要なすべてのコンポーネントが完成しました。
# 次のステップ
Flex Messageを構築したら、「作成したFlex MessageのJSONをコピーできます」の説明に従って、構築したFlex MessageのJSONデータをエクスポートできます。このJSONデータを利用することで、Messaging APIでFlex Messageをメッセージとして送信できます。
詳しくは、「Messaging APIで送信する」を参照してください。
# JSONデータのプレビューを確認する
このチュートリアルで紹介したデジタル名刺のサンプルJSONデータをダウンロードして、Flex Messageをプレビューしてみましょう。
ダウンロードしたJSONデータの内容をすべてコピーします。次に、Flex Message Simulatorの右上にある［</>View as JSON］をクリックして、ウィンドウを表示し、コピーした内容をウィンドウにペーストします。
右下の［適用］をクリックすると、サンプルJSONデータをもとに構築されたFlex Messageが、プレビューエリアに表示されます。
このように、テキスト形式のJSONデータをペーストすることでプレビューの確認ができるため、プロトタイプのテストにも活用できます。
# 最後に
Flex Message Simulatorは、コードを記述せずにFlex Messageをブレインストーミング、設計、プロトタイプ作成ができるツールです。デジタル名刺の例で示したように、Flex Messageの使用例は無限にあります。Flex Message Simulatorを使って気軽にアイディアを具体化したり、プロトタイプをテストしたりできます。Flex Messageを素早く簡単に作れますので、ぜひみなさん独自のFlex Messageを作ってみてください。
# 関連ページ
- Flex Messageを送信する
- Flex Messageの要素
- Flex Messageのレイアウト
- Flex Message（Messaging APIリファレンス）