LINEで画像を送るだけ！解答案を送ってくれるAI先生を作った話
・作ったサービスの紹介
内容は至ってシンプル。
例えば、以下のような問題を送ると・・・
こんな解答が自動で送信されます。
どうでしょうか。使い方は非常に簡単ではないでしょうか。
気になった方は、ぜひ下の2次元コードから友だち登録して、試してみてください！
・使ったWebサービスたち
今回のサービスを作るに当たって、使用したWebサービスは以下の通りです。
・Make：各種アプリケーション（LINE、Dify等）を繋げるために使用
・Dify：AIアプリケーション作成のためのLLM開発プラットフォーム。Makeから送られてきた画像を解析し、解答のテキストを生成するために使用
・LINE（Messaging API）：AI先生の公式アカウントの作成と、Makeとの連携（Messaging APIの設定）に使用
・Google Apps Script（GAS）：Makeから送られてきた解答のテキストを綺麗な数式にレンダリングした上でPDF化するために使用。
・PDF.co：PDF化されたテキストを画像形式（PNG）に変換するために使用。Makeにも互換性があるため、使いやすい。
・開発時の苦労話など
ここからは、開発時のディープな話です。
おもに私がつまずいたポイントなどを紹介します。
まず初めに、実は「MakeとDifyを使ってLINEから画像を送り、その内容をもとに回答を送り返す」というのは前例が結構あります。
私が参考にさせて頂いたのが、この方の紹介記事です。
この方の手順を参考にして、
解いて欲しい問題を画像で送ると、答えがテキストで返ってくる。
というのは思ってたよりも簡単にでき、苦労はしませんでした。
しかし、「おっ、余裕じゃん」と思って、難しい問題を送ってみたら、出てきた解答がこれ↓
・・・「なにこのfracとかneqとかいうやつ？」（沼にハマった瞬間）
調べてみると、
LaTeXという数式を綺麗に見せるための表記形式らしい。
「\( \frac{1}{2y_2} \)」の「frac」は、「fraction（分数）」の略で、分数の表記を意味します。LaTeX形式で書かれた数式で、「\frac{a}{b}」は「aをbで割る」という意味で、「a/b」と同じことです。
具体的に、この場合「\( \frac{1}{2y_2} \)」は「1を2\(y_2\)で割る」という意味になります。
LaTeX（ラテフまたはレイテック）は、文書のレイアウトや数式を美しく整形するために広く使われる組版システムです。特に学術論文や技術書など、複雑な数式を含む文書の作成に優れています。
LaTeX形式は、数式や文章のスタイルを記述するための特定のコマンドセットを持ち、数式を美しく表示するための構文が整っています。例えば、分数を表示したいときは「\( \frac{a}{b} \)」と書くと、これが「\( a \)を\( b \)で割る」という分数の形になります。LaTeXは、他の形式では扱いにくい複雑な数式や構造を、簡潔かつ正確に記述できる点で強力です。
LaTeXを使うと、数式をシンプルにかつ美しく表現することができ、特に数学や物理の文書作成において非常に役立ちます。他にも様々な演算子や記号がありますので、用途に応じて活用できます。
例えばこんな感じ→ \frac{a}{b}：$${\frac{a}{b}}$$
これを綺麗な数式として記述するには、外部サービスが必要になるとのこと。
当然、ただテキストを送るだけでは変換されず。
残念ながら、LINEの標準的なテキストメッセージでは、LaTeX形式の数式を直接表示することはできません。LINEはHTMLやLaTeXのような特別な形式をレンダリングする機能をサポートしていないため、LaTeX形式の数式をそのまま送信しても、LINE上ではただのテキストとして表示されるだけです。
ここで、ぶち当たった壁は、「LINEのテキストの返信では難しい数式は表示できない」というもの。
これは、致命的な問題です。
なぜなら、自主勉するときに隣に先生がいて欲しい教科の1位が「数学」だから。（個人の感想）
詳しい解説が必要な教科はやっぱり数学な気がします。
かといって、専用のWebサイトを作って、そっちに案内するのもしたくない。
悩んだあげく、考えた方策が、
「LaTeX形式のテキストを別のサービスに送ってレンダリングし、PDF化して返信する」
というもの。
ですが取り掛かって、すぐに方針を変えました。
理由は「LINEではPDFを送れない」ため。
だったら、PDF化した上で、画像形式（png）に変換すればいい。
という、紆余曲折を経て、たどり着いた方法が以下の通り。
Google Apps ScriptでLaTeX形式をレンダリングしPDF化
PDF.coというサービスを使ってPDFをPNGの画像に変換
得られた画像のURLをMakeのLINEモジュールで画像送信
詳しい説明は省きますが、今もこれで動いています。
開発までの苦労話は終わりです。
・最後に・・・実際の開発方法は反響が大きかったらやるかも
ここまでお読みいただきありがとうございます！
AIを使ったサービス開発の今後も紹介していきますので、もしよかったらフォローをお願いいたします！
今回のAI先生の実際の開発方法の紹介は・・・
反響が大きかったらするかもしれません（笑）