今回はMarkdownAIで「調べ物をしたらなんかいい感じに答えてくれるサイト」を作りました。
実装までを解説したいと思います!
【序章】出会い、そして別れ
2024年 あれは5月の中頃でしょうか。
記事を書き始めてQiitaを見る習慣がついてたんですよね。
その時出会ったんです。
同じように記事投稿イベントで。
この子に
最初の印象ですか？
パッとしなかったですね、、、だってAIなかったんだもん
正直他のMarkdownサービスの方が使いやすかったですからね。
その時は予想できなかったなぁ、、、まさかこんなことになるなんて、、、
【第１章】再会と感動。そして困惑
序盤で離脱しないために今回作ったものを最初にドン
https://mdown.ai/content/de44ea7c-e877-4b30-8531-e1865f9f6f57
前々回くらいのMarkdownAIの投稿イベントで知ったきりだったので久しぶりに開いてみたらなんかボタンが増えてました。しかも可愛い。
新しいおもちゃを触る気分でウキウキしながら触ってみて率直な感想。
「すごい！！！指示出したらAIの回答が描画される！！！」
と感動してふと我に帰り思いました。
「。。。何用？」
具体的なユースケースが思いつかなかったのが最初の印象です。
「一体何に使えばいいんだ？」「やってることはすごいんだけど活用方法がわからん」
そんなことを考えながら作ったのがこちらです。
https://mdown.ai/content/de44ea7c-e877-4b30-8531-e1865f9f6f57
「AI機能がある広辞苑のHP」
正直広辞苑なんて小学校以来使ってないですが、「広辞苑をPRしてるのにAIで調べれるHPがあったらおもろい」という理由で作りました。
広辞苑ごめん。 ほんとに
作成するにあたってMarkdownAIでできることを次の章で解説します。
【第２章】おもろいやん。きみ。
使っていくうちに色々できることがわかったのでざざっと出していきます。
マークダウンが書ける(当たり前か）
マークダウンで文字が書けます。以上
マークアップでもいける
HTMLも書けるみたい。
HTML書いてできたことは
- cssが書ける（styleタグで直接書いたら動いた）
- jsが書ける（scriptタグで直接書いたら動いた）
- iframeがおける（ということはYoutubeが乗っけれる）
- imgタグも使える（ということは画像をおける）
画像のアップロード
「＋」ボタンから画像をアップロードできます。
マークダウンでアップロードされますが、画像のパスが入ってるので、そのパスをそのまま
<img src="${画像のパス}">
で読み込んだら普通に扱えました。（やったらダメとかだったらごめん）
AIをおける
「＋」ボタンからAIを置けます。
scriptで入ってくるようで、中身を見てみると、inputに文字列を入力しボタンを押下で非同期でAIサービスにリクエストを送っているようです。
レスポンスはinnerTextで特定のIDのDOMの中に生成されるようです。
ということは、、、ここをinnerHTMLに変えればDOMを直生成できる！？！？！？！
ここは何気に今回の実装のポイントです。
AIをカスタマイズできる
AIが流行っているのであまり解説はいらないかもしれないですが、AIにはプロンプトと呼ばれる、どのように書き出してほしいかなどをあらかじめ指示しておくことができます。
MarkdownAIでもこの機能が使えるます。ちなみにファイルもAIに食べさせることができるようです。（何気にすごいな）
使い方は左上のロボットボタンを押下
ここでAIのカスタマイズができます。複数のAIセット？みたいなのを作れるので、それぞれに別々のプロンプトを設定したAIを作れます。
回答をHTMLタグで囲ってくれというふうに指示を出してみたところ、HTMLタグで囲う＋クラスもつけることができました。
超動的HPが作れますね！！！！
カスタマイズしたAIのセットは+ボタンのScriptから選択できます。
外部サービスの取り込み
若干HTMLと被りますが、HTMLが行けるということは外部サービスの取り込みもいけます。
codepenのアレとか
Youtubeの動画埋め込みとか
今回の本開くやつはLottieFilesというwebアニメーションサービスを使ってます。（拡大しても荒くないですよね！！）
※基本は公式ドキュメントを参照してください。
公式HP：https://mdown.ai/
公式ドキュメント(Qiita)：https://qiita.com/yusuke_s_yusuke/items/aa0df11e81e110a46415
【第３章】
ここからは自己満。みたい人はどうぞ
どういう手順で作っていったかざっと気持ちを組み込みながら書いていきます。
主に伝えたかったのは第２章なのでここからは広辞苑HPの制作までのあゆみをひたすら書いていきます。
DOMの実装
今回は「HPを作る」という想定なのでMarkdownAIなのにHTMLでマークアップしていきます。（別に喧嘩売ってるわけじゃない）
MarkdownモードでそのままHTMLコーディングをデータをぶち込みます。
viteを使ってscssとjsで実装したものをコピペしてます。
scssはコンパイルしたものをそのままstyleタグにコピーしましたが、javascriptはAIへのAPIが実装されているのでほぼ直書きでデバックしながらやりました。
画像の挿入
いい感じの画像をモデリングしてinsertからアップロードします。
HTMLとして認識させるために一度insertで画像アップロードした後にパスをそのままsrc属性へコピーします。
AIの挿入
いよいよメイン機能AIの実装です。
まず新しく追加されたアイコンのロボットくんからAIの設定ページへ遷移します。
今回はAIに最初に聞かれた内容に対するキーワードをランダムで５つ出した後に、回答を表示して欲しいのでPromptのところに以下のように記述しました。
【プロンプト内容】
関連するキーワードをはじめに５つ書き出した後に、回答を入力してください
５つのキーワードはそれぞれdivタグで囲い、クラス名にkeywordをつけてください。
回答もdivタグで囲いクラス名にanswerをつけてください。回答は200文字程度に収まるようにしてください
```で囲わないでください
こうすることでAIの回答のレスポンスがHTMLタグで囲われた状態で返ってきます。
そしたら適当に名前つけてページの一番したの「Update」ボタンで保存します。（初回は「Save」だったかな？）
「Upload」ボタンと間違えまくったのはいい思い出。
そしたら戻ってinsertからscriptを選択。
さっき作ったAIを入れたら。。。
おおできたできた。
そしたら自動的に下記のコードが生成されるので、最後のinnerTextをinnerHTMLに変更。
<div style="display: inline-block;">
<input type="text" id="text-1734512736" style="width: 200px;" value="Teach me about Markdown.">
<button type="button" id="button-1734512736">Run AI</button>
</div>
<div id="answer-1734512736"></div>
<script>
(() => {
const button = document.getElementById('button-1734512736');
button.addEventListener('click', async event => {
button.disabled = true;
const serverAi = new ServerAI();
const message = document.getElementById('text-1734512736').value;
const answer = await serverAi.getAnswerText('9XhDw11EZ6JvmJyYX9JmzZ', '', message);
- document.getElementById('answer-1734512736').innerText = answer; // ここを変える
+ document.getElementById('answer-1734512736').innerHTML = answer; // こんな感じに
button.disabled = false;
// ここに任意のコードを書くと、AI回答後に処理が走る。
});
})();
</script>
最後に、ボタンを押すと非同期で生成してくれるので、await serverAi.getAnswerTextの行より下でいい感じにコーディングしたら、、、、
【最終章】おもろいやん。きみ。
結局マークダウンとしてではなくHTMLベースのHPサービスの一環として使ってしまいました。。。
時々Notionで会社のHP作ってるところがあったり、情報をただ乗っけるだけのHPでいいみたいなケースにはとても使えるなと思います。
scriptかけたりcss当てれたりできるので知識がある人なら結構なんでもできそうな印象です。
AIのAPIを無料で使える（正規版はわからないけど、、、）のも今回はおもしろ実装になりましたけど、最近よく見るチャットベースのカスタマーサービスとかを手軽に開発できるなと感じたりしました。