キャンペーン「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モデルの挿入を試しに実行してみると、エディタ上に以下のコードが生成されました。
<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は見出しに使っただけになってしまいました...）
コード
+ # あなたが次に読むべき書籍
+
+ あなたが学びたい分野を選択してください
+ <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記事
その他外部サイト