LINEのFLEX MESSAGE SIMULATORでプレビューエリアに横スクロールバーを表示&幅を拡張する方法

こんにちは。GLASSのコンサルタント、芝田です。

マーケティングツールの1つとして公式LINEアカウントを運用している企業は多いかと思います。

本記事では、公式LINEアカウントを運用するうえで役に立つFLEX MESSAGE SIMULATORの紹介と、私がFLEX MESSAGE SIMULATORを使っていて詰まったところ＆その解決策を紹介します。

弊社ではマーケティング支援サービスの一環としてクライアント様の公式LINEアカウントの運用支援を行っているので、公式LINEアカウントの運用でお悩みの場合は、ぜひ一度弊社にご相談ください。

FLEX MESSAGE SIMULATORとは？

FLEX MESSAGE SIMULATORとは、LINE公式アカウントで使用できるFLEXメッセージ（LINEで送ることのできるメッセージの1種で、画像やテキストなどを自由に組み合わせて作ることのできるメッセージのこと）のデザインやレイアウトを視覚的にシミュレートするLINEの公式ツールです。
（利用するにはLINE Developersコンソールへのログインが必要です。）

このツールを使うことで、マーケターや開発者はコードを書かずに視覚的にFLEXメッセージを組み立て、実際のLINEアプリ上でどのように表示されるかを確認することができます。

FLEX MESSAGE SIMULATORの見た目がどうなっているのかを簡単に説明しておくと、以下の3つのエリアで構成されています。

• プレビューエリア：作成したFLEXメッセージが最終的にLINE上でどう見えるのかを表示するエリア。
• ツリービューエリア：FLEXメッセージのデータ構造を定義するエリア。（HTMLタグみたいな感じ）
• プロパティエリア：ツリービューエリアで選択した項目のプロパティを設定するエリア。（CSSみたいな感じ）

FLEX MESSAGE SIMULATORを使わずとも公式管理画面（LINE Official Account Manager）には便利なテンプレートがすでに用意されているので、ある程度自由にメッセージを作ることができます。しかし、何かと制限が多く、少し不便です。一方でFLEXメッセージはその名の通り、柔軟（flexible）にメッセージを作ることができるため、複雑なメッセージを作ることができます。

ただし、FLEXメッセージは公式管理画面（LINE Official Account Manager）からは送れず、LINEが提供しているMessaging API経由でのみ送ることができます。LINEの運用に公式管理画面（LINE Official Account Manager）ではなく、他社のツール（L Message、Lステップなど）を使用している場合はおそらくMessaging APIを使用しているため、そのツール上でFLEXメッセージを使用できる可能性が高いです。

FLEX MESSAGE SIMULATORの詳しい使い方はLINE公式のチュートリアルや他のWebサイトで解説されているので、そちらをご覧ください。

プレビューが見切れてしまう問題

さて、上記でお見せしたような単純なFLEXメッセージならば、FLEXメッセージ全体がプレビューエリアに表示されるので何も問題はありません。

問題があるのは、下記のように複数枚のカードが横に並んでいるタイプのFLEXメッセージです。

上記は横に3枚のカードが並んでいるのですが、見ての通りプレビューエリアは2枚目のカードの途中で見切れてしまっています。

「えっ？そんなのプレビューエリアにある横スクロールバーを動かせば解決するでしょ？」

と思うかもしれません。しかし、よく上記のスクリーンショットを見てください。

横スクロールバーなんてありません。

これでは1枚目のカードしかまともにプレビューできず、シミュレーターとして使い物になりません。

こういうツールに慣れている方は

• プレビューエリアとツリービューエリアの境界線にマウスを持ってくれば、マウスポインターが に変わってエリアの幅を調整できるだろう
• ブラウザのウィンドウをもっと大きくすればプレビューエリアも広がるだろう
• 横スクロールバーが表示されていなくても、プレビューエリア内にマウスポインターも持ってきてマウスのホイールを回せば、カードを横にスクロールできるだろう

と思うことでしょう。私もそうでした。

しかし、結果は下記の通り、いずれもダメでした・・・。

• エリアの幅はマウスで調整できない
• ウィンドウを大きくしてもプレビューエリアの幅は固定されていて広がらない
• マウスのホイールを回しても無反応

私はしばらくこの問題が解決できませんでした。そのため、以下のような面倒な手順を踏んで作成していました。

1. 2枚目以降のカードはプレビューを見ずに作成
2. 一通り作成できたら自分のLINEアカウント宛にテスト送信
3. テスト送信の結果を見て、FLEXメッセージを調整
4. 完成するまで2と3を繰り返す

しかし、やはり作業効率が悪く、なんとかできないかと模索した結果、2つの解決策を見出したので下記で紹介します。

おまけ：FLEX MESSAGE SIMULATORでテスト送信する方法

なぜかLINE公式のチュートリアルに書いていないので紹介しておきます。

1. 右上の「Send…」を押す
2. テスト送信する先を選択する（デフォルトはFLEX MESSAGE SIMULATORにログインした際のアカウントが選択されている）
3. 「Send」を押す

解決策その1：Shiftボタン+マウスのホイールでプレビューエリアを横スクロールする

知っている人は知っているテクニックかもしれませんが、大抵の横スクロール可能なウィンドウに対してShiftボタンを押しながらマウスのホイールを回すと横スクロールできます。

FLEX MESSAGE SIMULATORでもこのテクニックが使えますが、1つポイントがあります。

それはマウスポインターをプレビューエリア内のFLEXメッセージ上に乗せることです。

マウスポインターがこれ以外の場所にあると横スクロールできないのでご注意ください。

解決策その2：CSSを上書きしてプレビューエリアに横スクロールバーを表示&幅を拡張する

こちらは少し高度な方法です。

FLEX MESSAGE SIMULATORのCSSを上書きし、プレビューエリアに横スクロールバーを表示します。

また、1度に広い範囲をプレビューできたほうが効率化が良いので、ついでにプレビューエリアの幅を拡張します。

CSSを上書きするにはChromeの拡張機能を使います。当該の機能を持った拡張機能はいくつかあるので、お好きなものを使用していただいて構いません。私はこちらの記事で紹介しているStylusを使用しています。

Chrome拡張”Stylus”でサイトを使いやすくCSSデザイン変更する方法

拡張機能の準備ができましたら、FLEX MESSAGE SIMULATORのURLを対象に以下のCSSを適用してください。

#left-pane{
	overflow:scroll;
	flex-basis: 60%; /*プレビュー画面の幅を指定。自由に変更可*/
}

#viewer-pane{
	width:fit-content;
}

#viewer-frame {
	width:10000px!important; /*スクロール幅が不足する場合は増やす*/
}

上記のCSSを適用すると、下記のようにプレビューエリアに横スクロールバーを表示&幅を拡張することができます。

この状態ならば、マウスポインターがFLEXメッセージ上になくてもプレビューエリアの中にさえあれば、Shiftボタン＋マウスホイールで横スクロールすることができます。もちろん、横スクロールバーをマウスでドラッグしてもOKです。

まとめ

本記事では、LINEのFLEX MESSAGE SIMULATORで複数枚のカードが横に並んでいるタイプのFLEXメッセージを作成する際、プレビューが見切れてしまう問題に対する下記の2つの解決方法を紹介しました。

• Shiftボタン+マウスのホイールでプレビューエリアを横スクロールする
• CSSを上書きしてプレビューエリアに横スクロールバーを表示&幅を拡張する

同様の問題で困っていた方は、ぜひ参考にしてください。