# 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レイアウトを使用できます

Flex Message Simulatorでは、定義済みのFlex Messageレイアウトが提供されています。

Flex Message Simulator Showcase

定義済みのレイアウトを使用するには、ページの右上にある[Showcase]をクリックします。

使いたいレイアウトをクリックし、画面右下の作成をクリックします。

レイアウトについて

このチュートリアルでは、定義済みのレイアウトを使用せずに、最初からFlex Messageを作成します。

# 作成したFlex MessageのJSONをコピーできます

生成されたJSONデータをコピーするには、ページの右上にある[</>View as JSON]をクリックします。

View as JSON

ページ下部にある[コピー]をクリックします。

# 1. 作成するFlex Messageのタイプを選択する

Flex Messageの作成を始めましょう。

右上の[New]をクリックし、[bubble]を選択します。[bubble]を選択すると、bubbleタイプのFlex Messageコンテナが作成されます。

コンテナのタイプの詳細については、「コンテナ」を参照してください。

Bubbleタイプのコンテナを選択する

ヒント

[bubble] を選択すると、プレビューエリアの下に「OK」メッセージがポップアップ表示されます。これは、編集内容がプレビューエリアに正常に反映されたことを意味します。

Messageタイプを選択する

# 2. ヘッダーを追加する

Flex Messageの基礎ができたので、会社名を含むヘッダーを名刺に追加しましょう。

「Flex Messageの要素」の「ブロック」で詳細に説明されているように、Flex Messageバブルは、 ヘッダー、ヒーロー、ボディおよびフッターで構成されています。

Blockスタイル例

ヘッダーは、メッセージの件名や見出しを表示する領域です。

ツリービューエリアで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」から名前に変更します。

作成した名前にスタイルを追加しましょう。 以下のスタイルを適用します。

  1. フォントサイズを拡大sizeフィールドのオプションから「xl」を選択します(デフォルトのサイズはmdです)。
  2. フォントを太字にするweightフィールドのオプションから「bold」を選択します。
  3. テキストを中央に配置する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にボタンを追加することで、インタラクティブ性の高いメッセージを作成することができます。

三つのボタンを役職の下に追加しましょう。

まず、ボタンをグループ化するコンポーネントを作成しましょう。 bodyの下の最初のbox [vertical]をクリックし、左上の[+]をクリックします。オプションからboxを選択します。これにより、ボタンを追加できる新しい垂直ボックスが作成されます。

作成したbox [vertical]をクリックし、左上の[+]をクリックします。buttonを選択します。これにより、ボタンコンポーネントが作成されます。

ユーザーがボタンをタップすると、URIアクションポストバックアクションなど特定のアクションが実行されます。

ここでは3つのボタンを追加し、それぞれ以下のアクションを設定します。

  1. 会社のウェブサイトに移動する
  2. LINE Front-end Framework(LIFF)で作成された登録フォームを開く
  3. 会社の電話番号に電話する

先ほど作成した button[action]をクリックします。

プロパティエリアを一番下までスクロールするとActionセクションがあります。Actionセクションでユーザーがボタンをタップしたときに実行されるアクションを定義します。 typeフィールドは、デフォルトでuriが選択されています。uriは、URIアクションを意味します。ユーザーが会社のウェブサイトのURLを開くためのボタンを作成したいので、ここはそのままにしておきましょう。

同じActionセクションに、labelフィールドがあります。このフィールドで、ボタンに表示されるテキストを定義します。

任意のテキストを入力します(このチュートリアルでは「Flex Message Corp 公式サイト」とします)。

次に、会社のURIを設定しましょう。uriフィールドに、ウェブサイトのURIを入力します。

URIアクションボタンを追加する

ボタンに色を追加することで、タップ可能な領域がわかりやすくなります。

プロパティエリアの一番上のButtonセクションに、styleフィールドがあります。このフィールドでボタンのスタイルを定義します。次の3つのスタイルから選択できます。

  • primary:濃色のボタン向けのスタイル
  • secondary:淡色のボタン向けのスタイル
  • link:HTMLのテキストリンクのスタイル

チュートリアルのように、ボタンをコンポーネント内で複数縦に重ねる場合、linkスタイルの使用を推奨します。オプションから 「link」 を選択します。

次のような表示が確認できれば次に進みましょう。

ボタンの色を変更する

これで、Flex Messageに機能するボタンが一つ追加されました。

さらにボタンを追加していきましょう。

二つ目のボタンでは、ビジネスの登録フォームに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つ目のボタンは次のように表示されます。

LIFFボタンを追加する

3つ目のボタンに進みましょう。

特定の電話番号に電話をかけるボタンを作成するには、LINE Outを利用できます。

LINE Outは一部の国でご利用いただけません

LINE Outは、LINEで電話をかけることができるサービスです。LINE Outは、一部の国ではご利用いただけません。詳しくは、LINE Outの「ご利用方法 (opens new window)」を参照してください。

ボタン1と2と同様に、box [vertical]をクリックして、[+]をクリックします。buttonを選択します。

ツリービューエリアでbutton [action]をクリックし、styleを 「link」 に設定します。

プロパティエリアのActionセクションまでスクロールします。typeフィールドは 「uri」 のままに、labelは「電話で問い合わせる」、または任意のメッセージに設定します。

uriフィールドを次の形式に設定します。

https://line.me/R/call/{country_calling_code}/{phone_number}

国番号 (opens new window)と電話番号をパスパラメータとして指定します。URLに「+」記号を含めないでください。たとえば、国番号が「+81」で、電話番号が「090-0123-4567」の場合は、https://line.me/R/call/81/09001234567と設定します。

次のような表示が確認できれば次に進みましょう。

LINE OUTボタンを追加する

ボタンが前のボックスコンポーネントに少し近すぎるように見えます。

これを解決するために、パディングをボックスコンポーネントに追加できます。

3つのボタンを追加したbox [vertical]をクリックします。

プロパティエリアにPaddingセクションがあります。ボタンを含むコンポーネントの上部にパディングを追加するため、 paddingTopを 「10px」に設定します。

このように、2つのコンポーネントの間隔が広がっています。

ボタンにスタイルを追加する

マージン

マージンを追加して、コンポーネント間にスペースを追加することもできます。ツリービューエリアで、ボタンが属するbox [vertical]をクリックします。プロパティエリアで、Boxセクションのmarginをお好みのマージンサイズに設定してください。

これで、デジタル名刺に必要なすべてのコンポーネントが完成しました。

# 次のステップ

Flex Messageを構築したら、「作成したFlex MessageのJSONをコピーできます」の説明に従って、構築したFlex MessageのJSONデータをエクスポートできます。このJSONデータを利用すると、Messaging APIを使って、ユーザーの行動によって発生するWebhookイベントに対してFlex Messageを応答メッセージとして返信したり、プッシュメッセージとして送信できます。Heroku (opens new window)などのサーバープラットフォーム、または任意のサーバーを使用して、Flex Messageを送信してみてください。

詳しくは、「Messaging APIで送信する」を参照してください。

# JSONデータのプレビューを確認する

このチュートリアルで紹介したデジタル名刺のサンプルJSONデータをダウンロードして、Flex Messageをプレビューしてみましょう。

ダウンロードしたJSONデータの内容をすべてコピーします。次に、Flex Message Simulatorの右上にある[</>View as JSON]をクリックして、ウィンドウを表示し、コピーした内容をウィンドウにペーストします。

右下の[適用]をクリックすると、サンプルJSONデータをもとに構築されたFlex Messageが、プレビューエリアに表示されます。

このように、テキスト形式のJSONデータをペーストすることでプレビューの確認ができるため、プロトタイプのテストにも活用できます。

サンプルJSONデータから構築されるFlex Messageを確認する

# 最後に

Flex Message Simulatorは、コードを記述せずにFlex Messageをブレインストーミング、設計、プロトタイプ作成ができるツールです。デジタル名刺の例で示したように、Flex Messageの使用例は無限にあります。Flex Message Simulatorを使って気軽にアイディアを具体化したり、プロトタイプをテストしたりできます。Flex Messageを素早く簡単に作れますので、ぜひみなさん独自のFlex Messageを作ってみてください。