「エモい(きれいな)」Flex Messageを作りませんか？ #1 positionの魔法とテキスト装飾

※エモい(emotionalから派生して「言葉にできないけど心に響く」みたいな意味?)という語をこの記事では広く「きれい」「見やすい」「わかりやすい」的な意味で使います。~~女子受けするかは知りません。~~

# はじめに
突然ですが、**エモい**って言いますか? 僕、友達には「そういうことを言う印象がない」なんて言われますが、この記事では度々登場させます。

それはさておき、Flex Messageって使うだけでそれっぽく見えますよね。テキストメッセージより断然リッチな感じ、しませんか? ボタンはおけるし、文字盛れるし、画像貼れるし、etc...。

Flex Messageを使ったことある人に質問です。そのFlex Message、寂しくありませんか?
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/b2bb9e6f-17d4-47a9-86b8-c89518e481ef.png)
> [LINE Developers](https://developers.line.biz/ja/docs/messaging-api/flex-message-elements/#container)のページより
> 決してディスるつもりはありませんでした。

確かにボタンと文字があって、分かりやすいといえば分かりやすい。けどもうちょいデザイン凝ってもいいんじゃないか...? なんて思いませんか?

# 凝ったデザインを作りたい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/1412ebdd-c751-882c-ba3b-699092981ace.png)
> 僕は横浜どころか神奈川県民でもありません。あしからず。

Flex Messageはちょっとこだわるとこれくらいエモいものが作れます。~~見やすくてきれい。最高じゃないですか?(自画自賛)~~

- 画像に文字を乗せる
- 左上[左下, 右下]に寄せる
- アイコンを乗せる
- サブ文字色をちょっと透過する

この4つが全部Flex Messageだけでできるんです。

> 以下 [Flex Message Simulator](https://developers.line.biz/flex-simulator/) で制作を進めます。
> JSONへの読み替えは各自でお願い致します。
> また、画像はsimulatorの既定画像をそのまま使用しています。別の画像を指定する際は画像の`url`を設定してください。

# 画像を背景にしよう
> 以下の方法も実装できなくはないものの、より簡単な実装法がありましたので、[次の記事](https://qiita.com/e_chan1007/items/a29f6a77b0601f75a323)で紹介しています。
> 次の 文字の装飾 については[こちら](#文字を装飾しよう)のセクションに記載しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/dedc82d8-eb6d-d68c-a934-b1e14531bfb8.png)
普通に文字と画像を置くだけだとこうなりますね。重なる気配が全くありません。
背景にするということは

- 画像を大きくする
 - 表示サイズを最大にする
 - 描画領域全体に画像を広げる
 - 画像の起点(左上座標)をずらす
- 文字を重ねる(=文字の位置を変える)

ということです。

## 表示サイズを最大にする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/56e820e8-de47-44bd-0e69-845907ebe079.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/6630b935-1b3b-e380-ee28-9086e613d85d.png)
画像の`size`を`full`に設定します。少し画像が大きくなりました。

## 描画領域全体に画像を広げる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/c2e263ba-5a36-0943-be1e-b323cfce4ebf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/9ed462c7-1e61-91d2-2dc5-5fc335ccee74.png)
画像の`aspectMode`を`cover`に設定します。このとき、**画像が切り取られる**ことに注意が必要です。

## 画像の起点(左上座標)をずらす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/cca3a407-d9dc-c057-25bb-01af8d01e37e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/f663ed17-a4eb-e588-65ab-4f0674aaa28d.png)
画像の`position`を`absolute`に、`offsetTop`・`offsetStart`をそれぞれ`0px`に設定します。
> たいていUIを作るときの`start`・`end`はそれぞれ左側・右側にあたる(ことが多い)はずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/c6dc4c17-a190-3f45-9af1-49e6eba68441.png)
...本来文字が出るはずなんですが。
と、ここで大事なことを思い出しました。Office系ソフトでも画像編集ソフトでも、**レイヤー** すなわち **重なり方** を考慮する必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/79a18b03-8444-726a-0064-620de0d8edde.png)
先程指定したのはこの順番でした。Flex Messageでは、**先に指定**(図では上)**したものが下に来る**という性質があるので、テキストと画像の位置を逆にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/871b9e01-c145-7801-6ecf-208982cfcdb6.png)
出ました。が、スペースが足りずにどこに飲み物があるんでしょう状態ですね。
ということで、大まかにサイズを確定させておきましょう。

# サイズを指定しよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/6915949d-a85f-ee13-96a1-24e6ff6fc166.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/b8a949e6-16fb-8297-4ef3-a57d9bcc21b0.png)
サイズを指定できそうなところ。`bubble`の`size`と `bubble > body > box`の`width`・`height` ですね。
個人的な意見ですが、

- 幅の指定は`bubble`の`size`で
- 高さの指定は`box`の`height`で

するのが望ましいと思います。その理由として、**幅の指定を`box`の`width`属性ですべきではない**ことが挙げられます。
`box`の幅を指定するときは、通常なら`flex`で全体の幅から相対的に指定してやります。ですが他に`box`がない(body直下にはboxが1つのみ)ので`flex`の指定は効果がありません。
また、`width`属性で`px`単位での指定も非推奨となっていますので、`bubble`の`size`を指定しましょう。

`height`は`px`単位での指定も可能なので、とりあえず300pxにでも設定してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/987c5129-89dd-e5cd-91b6-9e4eeabfe7ee.png)
「飲み物」がやっと見えましたね。

# 文字を装飾しよう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/3c88b6e9-2b13-517c-b90d-b6543200d9f5.png)
文字は大きさ、太さ、色、下線や取り消し線の有無、斜体にするか、折返し表示をするか、揃え位置はどこか、などいろいろ指定できます。
> ※下線と取り消し線は同じ`decoration`に設定するため、1つのテキストに対してはどちらか一方しか適用できません。

ということで、 `size`を`xl`に、`color`を`#745030`あたりに設定してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/6022733d-9631-68a1-3bd9-cfbbb2214e4c.png)
統一感、出ますね。

# 文字の位置を変えよう
どうせなので、お店の名前も書いておきましょう。
とりあえず「Emotional Coffee」で。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/1a50d264-2256-d501-5642-eba711369283.png)

`size`は指定せず(=`md`になる)に、`color`を`#745030`(同じ)に設定してみました。

~~個人的に右下に置きたい気分なので~~右下に動かしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/b49d1c19-e9d6-5201-5df8-079caf4e1c71.png)

テキストの`position`を`absolute`に、`offsetBottom`と`offsetEnd`をそれぞれ`16px`に設定しました。
ここでもまた`position`と`offset◯◯`が登場するんですねー。

若干見づらいので文字を`#FFFFFF`にしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/49fae26a-80b6-aae6-79c5-318acfee6ee9.png)


`#FFFFFF`は主張が強い感じがしますね。ちょうどいい他の色を探してもいいのですが、透明度を変えて対応しましょう。透明度も`color`で設定が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/4fa044b9-a944-6c62-5e20-ec7bc9b3aa4f.png)
`#RRGGBB` or **`#RRGGBBAA`**という表記に気づきましたでしょうか。R=Red、G=Green、B=Blueまではいつも通り色を指定、A=Alphaに**不**透明度を指定します。`00`(完全に透明) ～ `FF`(不透明) なイメージです。ということで、`#FFFFFFAA`あたりまで透過させましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151384/d98e0f01-92d4-cc4d-e2ce-5efd990bd878.png)

いい感じに馴染みましたね。

# まとめ
突然ですがきりがいいので一旦まとめです。
- 画像の背景化は少し手間がかかるよ
- `position`に`absolute`を指定すると本来の位置とは別の位置にずらせるようになるよ
- `offset◯◯`を指定すると「◯◯から△△px[%]」のように指定できるよ
- `color`を`#RRGGBBAA`形式で設定すると**不**透明度を変えられるよ

この記事の手順が、簡単にFlex Messageを「エモく」する基本技能になります。
「これだけ?」と思われるかもしれませんが、特に`position`をいかに活用するかが「エモさ」の鍵だと個人的に考えています。
なかなか思うようにレイアウトできないことも多いかと思いますが、[Flex Message Simulator](https://developers.line.biz/flex-simulator/)も活用していろいろなレイアウトにチャレンジしてみませんか?

# 最後に
[次の記事](https://qiita.com/e_chan1007/items/a29f6a77b0601f75a323)はこちらです。boxコンポーネントの凄さを凝縮した(つもり)なのでぜひご覧ください!

同じMessaging APIつながりで[リッチメニューエディタ](https://qiita.com/e_chan1007/items/cd34ce0871943ee34396)の記事も書いています。組み合わせるとBotがもっとエモくなります。よろしければそちらもどうぞ!