Markdown AIで推薦書籍を生成AIが回答してくれるサイトを使ってみた

キャンペーン「Markdown AIを使った記事を投稿しよう！」に乗っかって、早速Markdown AIを使ってみました。

https://qiita.com/official-events/6914e7e898953881ef94

# ファーストインプレッション
使い始める前に、Markdown AIで何ができるのかキャンペーンページを読み進めると、早速以下の記述に対して疑問が。
> ドキュメント共有を簡単に行いたい人
> スキルにとらわれずにWebサイトを作りたい人
> Markdownを普段から使っている人

**Qiitaで十分では...？**
**どこにAI要素が...？**

とりあえず、使い始めたら何かわかるかもしれないと思い以下のリンクからログインします。
https://mdown.ai/

## 表示された画面
![SS001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/815160a8-d066-5401-200f-f6f3fe2b84fb.png)
**早速何も分からん！**
突然Markdownに対応したエディタだけを渡されて、梯子を外された気持ちになりました。

:::note warn
初回ログイン時にはサンプルのテキストデータが選択・表示されますが、誤って消してしまったので実際の画面とは若干異なります。
:::

## How to use を読んでみる
右も左も分からないので、素直にHow to useを読みました。

https://mdown.com/how-to-use-markdownai/

要約すると以下の手順でWebサイトを作れと説明されていました。

1. ログインする
1. Markdownで記事を書く
1. Insertボタン→Imageボタンを押すと画像を挿入できる
1. Insertボタン→Scriptボタンを押すとAIモデルを挿入できる
1. Webサイトのタイトルとfaviconを設定する
1. 公開する

Qiitaと大きく違うのは4.と5.です。
少しずつMarkdown AIのアウトラインが見えてきた気がします。

# 試してみる
2時間ほど前述リスト2.の手順を中心に触ってみたものの、UMLも書けないのではあまり実用的でないかなぁ...などと思えてきました。
そんな折にふと4.の手順にてAIモデルの挿入を試しに実行してみると、エディタ上に以下のコードが生成されました。
```JavaScript:Markdown AI
<button type="button" id="button-9999999999">Run AI</button>
<div id="answer-9999999999"></div>
  
<script>
(() => {
  const button = document.getElementById('button-9999999999');
  button.addEventListener('click', async event => {
    button.disabled = true;
  
    const serverAi = new ServerAI();
    const answer = await serverAi.getAnswerText('999999999999999999999999', '', 'Hello!');
  
    document.getElementById('answer-9999999999').innerText = answer;
    button.disabled = false;
  });
})();
</script>
```
このスクリプトが最大のポイントでした。
「Run AI」ボタンをクリックすると、divタグ内に「Hello! How can I assist you today?」と回答が出力されます。

# 作ってみる
あとはサクサクです。
結局Markdownはほぼ使わず、HTMLタグとJavaScriptをMarkdown AIのエディタ上で実装して「@take-yodaの代わりに生成AIが答えてくれるサイト」を作ってみました。
（Markdownは見出しに使っただけになってしまいました...）
## コード
```diff_HTML:Markdown AI
+ # あなたが次に読むべき書籍
+ 
+ あなたが学びたい分野を選択してください
+ <input id="Genre1" type="radio" name="Genre" value="Webアプリ" checked>Webアプリ</input>
+ <input id="Genre2" type="radio" name="Genre" value="データベース">データベース</input>
+ <!-- 中略 -->
+ <input id="Genre10" type="radio" name="Genre" value="資格">資格</input>
+ 
+ 学びたい分野の習熟度を選択してください
+ <input id="Level1" type="radio" name="Level" value="初心者" checked>初心者</input>
+ <input id="Level2" type="radio" name="Level" value="初級者">初級者</input>
+ <input id="Level3" type="radio" name="Level" value="中級者">中級者</input>
+ <input id="Level4" type="radio" name="Level" value="上級者">上級者</input>
+ 
- <button type="button" id="button-9999999999">Run AI</button>
+ <button type="button" id="button-99999999999">AIに聞いてみる</button>
+ <div id="question"></div>
<div id="answer-9999999999"></div>

<script>
(() => {
  const button = document.getElementById('button-9999999999');
  button.addEventListener('click', async event => {
    button.disabled = true;

+     let questionText = '';
+     document.getElementById('question').innerText =questionText;
+ 
+     function getCheckedRadioVal(elemName) {
+       let elems = document.getElementsByName(elemName);
+       for (let i = 0; i < elems.length; i++) {
+         if (elems.item(i).checked) {
+           return elems.item(i).value;
+         }
+       }
+       return null;
+     }
+ 
+     questionText = getCheckedRadioVal('Genre') + ' に関する ' + getCheckedRadioVal('Level') + ' 向けの書籍5選を教えてください。';
+     document.getElementById('question').innerText =questionText;
+     document.getElementById('answer-1729311110').innerText = '回答生成中...';
+ 
    const serverAi = new ServerAI();
-     const answer = await serverAi.getAnswerText('999999999999999999999999', '', 'Hello!');
+     const answer = await serverAi.getAnswerText('999999999999999999999999', '', questionText);
  
    document.getElementById('answer-9999999999').innerText = answer;
    button.disabled = false;
  });
})();
</script>
```

## 入力
ラジオボタンから自分に一致するものを選択します。
![SS002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/ed5a107f-37a6-0ebe-d8c1-7ef0c4e403c2.png)
選んだら「AIに聞いてみる」ボタンをクリックします。

## 出力
![SS003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3551450/5811d1fb-7761-b491-5530-79483df1dc28.png)
`gpt-3.5-turbo`がお勧めの書籍5選を教えてくれます。
ただし、残念ながらまだAIの学習量が少ないので選択肢の組み合わせによっては「申し訳ありませんが、セキュリティに関する中級者向けの書籍リストは用意しておりません。初心者向けの書籍リストをご参考にしていただければ幸いです。他に何かお手伝いできることがあればお知らせください。」のように回答されてしまいます。

# まとめ
Markdown AIのキャンペーン記事「こんな人におすすめ」は本来のMarkdown AIのより良いところを挙げきれていませんでした。
なので、勝手に追記します。

## こんな人におすすめ
* ドキュメント共有を簡単に行いたい人
* スキルにとらわれずにWebサイトを作りたい人
* Markdownを普段から使っている人
* **生成AIを活用したWebサイトを作りたい人**

## 感想
初回ログイン時にHow to useをすぐに辿れる構成だともう少しわかりやすかった気がします。
また、初期作成されている雛形も生成AIがあらかじめ組み込まれていると、Markdown AIをどのように活用できるかイメージしやすいと思いました。

# Special Thanks
AIの学習用に以下のQiita記事を読み取らせていただきました。

## Qiita記事

https://qiita.com/Perplex/items/cec1848cb9e402b448ff

https://qiita.com/e99h2121/items/1b243efb1499527f0701

https://qiita.com/S4nTo/items/66f8339bfc6ad61b25b4

https://qiita.com/Sicut_study/items/0b27dca18af96c80bec8

https://qiita.com/kaizen_nagoya/items/848df1ddcd3dab01daac

https://qiita.com/tomo-kn/items/7d83f8e4c1422e2edbe1

https://qiita.com/baby-degu/items/a91ebdde5b9cd1a47f63

https://qiita.com/maimax/items/c5ac541be1d475c012cf

## その他外部サイト

https://zenn.dev/mesi/articles/671a08cabb4dfe

https://www.sejuku.net/blog/258518

https://freelance.levtech.jp/guide/detail/1854/

https://jitera.com/ja/insights/7067

https://www.wantedly.com/companies/company_8285417/post_articles/912023