2025/05/27追記: 大事なお金の話を書き忘れていたので最後にいくらかかったか追記しました😀
できたものがこちら
日曜夜の2時間くらいでできたFlex MessageのWYSIWYGエディタ
見た目は公式よりもオシャレ(細かい仕様についてはご愛嬌)
https://poc-line-flex-message-simulator.vercel.app/
ちゃんとコンポーネントから追加や編集、削除ができます
ちゃんとJSONエディタとも連動
LINE Flex Message Simulator とは何か?
LINEで自由なレイアウトのメッセージを送りたい時に使うものです。
https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/
実際に送る際はJSONで提起する必要があり、一応開発者向けサイトには公式の LINE Flex Message Simulator があるにはあるんです。ただ、、
自社サイトでもFlex Messageがしたい!
LINEを使ったシステム開発をしていると、お客さんからは当然「Flex Messageを使いたい」となるわけです。
とはいえ、Flex Message の実態はJSONなので気軽に管理画面でカスタマイズして、、ということは中々難しいです
え? Lステップとおんなじくらい自由にカスタマイズできるWYSIWYG機能が欲しいですって? 2,3ヶ月はかかりますよ??
人間の仕事は適切な"指示(プロンプト)"にあり
そんな中、先週金曜日の朝、ふとClaudeに今朝のニュースを調べようと開いてみると「Claude4が発表されました」とあります。
何やらTwitterをみると「Claude code が正式版になった」とか「Claude4がすごい」と言われています。
これはもしかして、長年の課題であったWYSIWYGエディタの実装もできるのでは? と期待に胸が膨らみます。
仕様は丸投げできるのか?
さて、Claude や ChatGPT はある程度いろんな情報を学習しており、LINEに関することやLIFFについてはおおよそ答えてくれます。
ところが、Flex Message となると話は別で、コンポーネント一覧やJSONの書き方などは知らないようです。
ChatGPTやClaudeに「プロがデザインしたようなFlex MessageのJSON書いて」と言ってもそれっほいJSONが帰ってくるだけです。サンプルを渡してやると動きますが、細かい仕様までは把握していないようです。
そこでまず、仕様をしっかり固める必要があるでしょう。
仕様を作成するためにリサーチをさせる
Claude code にはウェブ検索ツールが組み込まれています。
では「ネットからLINE Flex Message についてリサーチを行いマークダウン形式で仕様書を作成してください」とお願いするといい感じに仕様書が出てきました。
### 基本構造
Flex Message は CSS Flexbox の仕様に基づいたカスタマイズ可能なレイアウトを持つメッセージ形式です。
```json
{
"type": "flex",
"altText": "代替テキスト",
"contents": {
// Container オブジェクト
}
}
```
### 階層構造
Flex Message は以下の3階層構造を持ちます：
1. **Container（最上位）**
2. **Blocks（中間層）**
3. **Components（最下位）**
### Container タイプ
#### Bubble Container
- 単一のメッセージバブルを含むコンテナ
- 最も基本的なコンテナタイプ
```json
{
"type": "bubble",
"header": { /* Block */ },
"hero": { /* Block */ },
"body": { /* Block */ },
"footer": { /* Block */ },
"styles": { /* Style object */ }
}
```
‥以下、同様にいろんなタイプの定義
良さそうです。
「それではこの仕様書をもとに実装を進めてください」
これで実装を始めてくれますが、最初はJSONプレビューだけできました。
しかもシンタックスエラーで落ちるという。
エラーを投げ込んで修正していきます。
「あと、これとこれが足りないんだけど? ここ押すと何も表示されないよ?」
と心置きなく指摘していくとこんな感じで直してくれます。
「具体的に何をどうしたらどういうエラーが出た」ことを伝えます。これはAIに限らず人間でも同じですね😅
ここで特徴的なのが「Update Todos」で示されているTodoリストです。
Claude 3.7 sonnet 搭乗時にポケモンを攻略するのにも活用されていました。
そして「おっしゃる通りです」とかいう返事はいいとして、きちんと何をしているか説明しながら操作しているのでとてもわかりやすいです。
Codexだといきなりコードを修正しにかかるので、それが何を意図しているのかわからないこともあります。
この辺の対話インターフェースの作り込みはClaude Code が安心して使えるところかと思います。
5分から10分程度で一回の作業は終わります。
諦めたもの
さて、たった2,3時間で完璧なものができるほど世の中はあくまありません。
というか動作確認する方が大変です。
一通り動いてそうなので、とりあえずバイブコーディング的にVercelに放り込みましょう。
Vercelでgithubリポジトリを連携してプッシュするだけです。
もうホント簡単。
が、ここで大量のlinterとビルドのエラーが出ました。
xxx is declared but unused と型チェックエラーの嵐です。
直してね。って言ったらコードがデグレして実装それていた機能が消えました😭
仕様書を読んでもう一度実装してもらいつつ、ビルドエラー対応はループに入ったような気がしたので一旦止めて無視することにしました。
デプロイして今日はおしまい!
まあ、業務で実装するならJSONデータを集めてE2Eテストを書きつつ、使い勝手をよくしていくイメージでしょうか。
それで、なんぼかかったん?😇
今回はClaude 4 sonnet APIを使いました。
AnthoropicのダッシュボードからUsage画面にてトークンを確認してみます。
トークン数は何やら多そうです。
金額にしてみましょう。
Anthoropic公式のAPI料金表より、Claude 4 sonnet の料金は以下の通りなので
| in | out |
|---|---|
| $3 / MTok | $15 / MTok |
え? ¥14,000も使ったの?? 😅
ご安心ください。
実際にはクレジットをちまちま課金して使っていたので
実際に消費したクレジットは$17分くらいでした
(\$20分購入して、今は残り\$5で、最初に\$2くらいある状態から開始した)
おそらくプロンプトのキャッシュがうまく聞いているらしいです。
これを毎日ガンガン使うならMAXプランに課金しても良さそうですね。
まとめ
業務で重要は多いけど実装するのもメンテするのも大変なWYSIWYGエディタの類がそれなりのデザインで2,3時間でできてしまうのはなんともすごい時代になりました。
ポイントとしてはしっかりリサーチして仕様を固めることが重要で、今後はさらにE2Eテストやインフラ周りが自動化していくことを祈りましょう。
このチャンネルでは引き続き、実務の活用に向けた最新AIの情報をお届けします。
参考になった・もっと情報が見たい方は「いいね」ボタンを押してお待ちください。
気になる技術のリサーチやご相談もお受けしております。