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

ファーストインプレッション

使い始める前に、Markdown AIで何ができるのかキャンペーンページを読み進めると、早速以下の記述に対して疑問が。

ドキュメント共有を簡単に行いたい人
スキルにとらわれずにWebサイトを作りたい人
Markdownを普段から使っている人

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

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

表示された画面

早速何も分からん！
突然Markdownに対応したエディタだけを渡されて、梯子を外された気持ちになりました。

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

How to use を読んでみる

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

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

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

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

試してみる

2時間ほど前述リスト2.の手順を中心に触ってみたものの、UMLも書けないのではあまり実用的でないかなぁ...などと思えてきました。
そんな折にふと4.の手順にてAIモデルの挿入を試しに実行してみると、エディタ上に以下のコードが生成されました。

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は見出しに使っただけになってしまいました...）

コード

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>

入力

ラジオボタンから自分に一致するものを選択します。

選んだら「AIに聞いてみる」ボタンをクリックします。

出力

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記事

その他外部サイト