概要
MarkdownをLineのFlex messageに変換できる新しいnpmパッケージ markdown-flex-message をリリースしました🎉
ChatGPTなどからのMarkdown形式のテキストもサクッとFlex Messageに変換できます。
経緯
「先生AI」というLINEのAIチャットボットを作っているのですが、ChatGPTなどから返ってくる返答がMarkdown形式でしたので、そのまま返答すると可読性に難がありました。
これを解決するために、MarkdownをLINEのFlexメッセージに変換する機能を開発し、良い感じにできたので、npmパッケージとして公開しました。
使用例
実際の使用例はこちらです。画像をご覧ください。
「先生AI」はこちらから実際に利用可能です。
使い方
まずは、markdown-flex-messageをインストールします。
$ npm install markdown-flex-message --save
そして、下記のように、convertToFlexMessage メソッドにMarkdownを流しこんであげれば、Flex Messageに変換してくれます。
import { convertToFlexMessage } from 'markdown-flex-message'
import * as line from '@line/bot-sdk'
const markdownText = `
# Fruits
* apple
* banana
* cherry
`.trim()
convertToFlexMessage(markdownText)
.then(({ flexMessage }) => {
const client = new line.messagingApi.MessagingApiClient({
channelAccessToken: '{{YOUR_CHANNEL_ACCESS_TOKEN}}'
})
return client.pushMessage({
to: '{{YOUR_USER_ID}}',
messages: [flexMessage]
})
})
.then(() => {
console.log('sent.')
})
上記のコードの場合、下記のようなメッセージになります。
さらに詳細な使い方はGitHubのREADMEに記載しています。
どうやって作ったか
- Markdownをパース
marked パッケージを使用してMarkdownをパースし、トークンリストを取得しました。
通常は、いきなりHTMLに変換されてしまうのですが、lexerという関数を使えば、MarkdownからHTMLにする途中のトークンリストをJSON形式で取得できるので、それを使っています。
- MarkdownをFlex messageに変換
トークンリスト(パースされたJSON)を地道にFlex messageの形式に変換していきました。
- 画像の表示
画像をダウンロードし、image-size パッケージを使用して画像のアスペクト比を取得し、Flexメッセージでの表示を可能にしました。
- Flex Messageで画像を表示する際にアスペクト比が必要
- コードの表示
prismjs を使用してコードのシンタックスハイライトを実装しました。
こちらはzennにも使われているものです。tokenizeという関数を使えば、JSON形式でトークンリストを返してくれるので、トークンタイプ（変数、キーワードなど）ごとに色を指定してあげて、表示しました。
気を付けること
晴れてMarkdownをFlex Messageに変換することができたんですが、一点罠がありました。
Flexメッセージはテキストをコピーすることができないのです。
これについては仕様でどうしようもないので、元のマークダウンを表示させる専用のページを用意してそのページへのリンクを下部に設置しました。これが地味に面倒でした。。。
使ってね
markdown-flex-message はAIチャットボット以外にも多様な用途で活用できると思います。是非試してみてください！
Discussion