こんにちは。
テックリードのTerukiです。
今日はLINEのFlex MessageのOh my teethでの管理方法について紹介します。
Flex Messageとは
そんなの知っとるわい！という方は次の章まで飛ばしてください
Flex Messageとは、LINEの公式アカウントなどで送られてくるリッチなカードのこと及びその仕組みのことです。
CSSのFlexboxのようなイメージでスタイリングをすることができ、CSSを触れる人なら比較的簡単に独自のカードを作ることができます。
サンプル↓
このFlex Messageはjson形式で表現されていて、実際にユーザーにLINEで送る際もjsonをAPIにPOSTすることでそのカードを送ることができます。
管理が大変
Oh my teethも公式アカウント上でFlex Messageを送るために、データベース上にjsonを格納するなどしていますが数が増えてくるとどれがどんなカードだったか全く分からなくなります。
公式アカウントを駆動するアプリケーションを作っている方なら共感してもらえるのかなと勝手に思っているのですが、実際にそのjsonを公式アカウントに送信するかFlex Message Simulatorを使わないとどんなデザインだったのか確認できません。
そんな中でどうにかもっと楽に管理できないか考えた結果思いついたのがFigmaのウィジェットでした。
本題
もともとFigma自体はプロダクトのデザインに使っていたのでLINEのカードもFigmaで管理できたら良いなと思っていました。
Flex MessageはCSSのFlexboxと似たようなものですし、Figmaのオートレイアウトも若干機能は足りないですがFlexboxみたいなことができるので、もしかしたらうまいこといくかもと思いFigmaウィジェットを作ってみたのでした。
こちらは左がFigmaのウィジェットで右がFlex Message Simulatorのスクリーンショットです。
ボタンの中のテキストの位置が若干ずれてますがかなりいい線行ってるのではないでしょうか。
Figmaのオートレイアウトにもうちょっと細かい設定ができれば更に再現度を上げることができそうですが、どんなデザインだったかを確認するという用途には十分な再現性かなと思っています。
使い方は簡単で、編集ボタンを押した後に出てくるテキストエリアにFlex Messageのjsonを貼り付けてUpdateを押すだけです。（ここのUIがなんかダサいのはご愛嬌）
もちろんカルーセルにも対応しています。
ここまでできたらFigmaにある矢印などを繋いで流れを分かりやすくしたり、テキストで補足を書いてみたりなどいろいろできそうですよね。
このウィジェットは無料で公開されているので、気になったら使ってみてください。
再現度が100%というわけではないので、構成によっては大幅に崩れてしまうカードもなくはないとは思いますが、ある程度のカードならそこそこの精度で描画してくれます。
position: absoluteなどを使っているようなカードは厳しそうです
終わりに
実はこのウィジェット自体は去年の6月に一応完成していたのですが、あまりに忙しくて今日までこのようなお知らせを書けずにいました
去年から更にFlex Messageのカードは増えていますが、比較的秩序を保てているのはこのウィジェットがあったからだと思っているので本当に作って良かったです。
このウィジェットは現在Oh my teethのプライベートリポジトリで管理されていますが、準備ができたらOSSとして公開しようかなと思っています。
その際は是非Contributeしてもらえると嬉しいです。
今日はここまで。では。
※このFigmaウィジェットについては、LINEの運営会社であるLINEヤフー株式会社は何も関わっておりませんのでこのFigmaウィジェットについての問い合わせはご遠慮ください。
Oh my teethについて
Oh my teethでは未来の歯科体験を創るために日々活動しています。
Techチームではより良いユーザー体験を提供するべく、Webフロントエンドからバックエンド、スマホアプリに機械学習モデルなど、さまざまなプロダクトを開発しています。
一緒に未来の歯科体験を創りませんか？興味がある方は是非こちらを確認してください。
カジュアル面談も可能なので気軽に応募してみてください！
