初めに
MarkdownAIの使い方をざっくりと紹介しています。
Javascriptを理解するのに時間がかかってしまったので、大部分をMarkdownで乗り切っています。
今回作成した自己紹介サイト
欲望
人間なら誰しも一度は自分のサイトを作ってみたい
そんなものです。MarkdownAIでは自分のサイトを作れます。
とは言ったものの、私はMarkdownの知識はちょっとしかないし、Javascriptも大学でちょっと触ったくらいの人間です。そんな人が自分だけのMYサイトを作るまでの記事です。
MarkdownAIの特徴
・AIが使えます
他とは違い、AI入りのサイトを作ることができます。AIに何かしてもらいたいときにとても便利です。
目標
自分の自己紹介のためのサイトを作ります。ついでに、何か簡単なゲームをくっつけて、遊べるサイトにしていきます。
使い方
①まずはhttps://mdown.ai/にアクセスします。
googleでログインして、
この画面でロボットの左の+を押して、
この画面にMarkdown形式で書いていけばいいようです。
ちなみに二回目以降は、
作った内容(ファイル)をクリックすると再開できます。
制作
まずは自己紹介をmarkdownで書いてみました。
# 自己紹介
こんにちは、ある人です。大学4年生の人間です。
* 名前 ある人
* 年齢 21歳
* 誕生日 3月5日
<!--ここに隠しテキストがありますよ-->
現在は、卒業論文を家でずっと書いています！アウトドア派、趣味は食べることと寝ること。
**よろしくお願いします！**
と、こんな感じで様々なmarkdownの書き方に対応しています。
（絵文字や数式など、一部対応していないものもあるっぽいです。）
書いたらその都度Saveボタンでセーブしておきましょう。
挿入
Insertのボタンを押すと、
4つのボタンが出てきます。
全部英語なので、ここにボタンの内容を書いていきます。
上から順に
| ボタン | 説明 |
|---|---|
| Image | 画像の挿入(パソコンやスマホなどからアップロード) |
| AI Image | AIのイメージ画像を作成 |
| Script | AIをサイトに入れることができます(使い方は下を参照) |
| Image Script | ???（これだけは使い方がよくわかりませんでした） |
Image
自前の画像を用意してアップロードするタイプのいつものアップロードボタンです。
AI Image
ではAIイラストを作って挿入できます。
9個のデフォルト？のイラストの下に、作りたいイラストを書き込める場所があるので、書いてInsertを押せば完成です。
Script
ScriptというよりもInsert AIとかいう名前の方がしっくりくる気がします。このボタンを押す前準備として、AIに名前を付けたりする必要があります。
ロボットのボタンを押して、以下のような画面を出します。
Model List
Model Listは作成したAIが出てきますが、まだ作ってないので出てきません。
Select Model
Select ModelではAIの種類をいろいろ選べるみたいです。とりあえず「gpt-4」を使ってみます。
Model Name
Model NameでAIの名前を付けられます。必須です
今回はAIの名前を「Pharaoh」にしています。
Prompt
AIに行ってほしいことを予め書いておくことができます。例えば「語尾に「AI」を付けて会話してください」とか書いておけば、その通りに動いてくれます。
knowledge
AIに教えておきたい情報を書いておくことができるみたいです。「この情報をもとに回答してほしい！」とかいう状況に便利です。markdown形式のほか、ファイルやリンクを使って教え込むこともできるようです。
Uploadを押すのを忘れないようにしましょう
すべての設定が終わったらCreateを押しましょう。AIが作成されます。
さて、話はScriptのボタンに戻ります。このボタンを押すと、先ほど生成したAIが選べるようになります。Insertを押せば、AIと会話できるボタンが表示されるはずです。
javascriptを試してみる
Javascriptを使えるし、せっかくなので試してみます。誰でもわかる、テキストとボタンだけの簡単なものです。
押すと色が変わるボタンを作ります。
<button id="myButton">色を変える</button>
<span id="clickNumberOfTimes">ボタンを押した回数がここに表示されます</span>
<script>
let count=0;
var str ="ボタンを押した回数:"+count;
const button = document.getElementById('myButton');
const clickCount=document.getElementById('clickNumberOfTimes');
button.addEventListener('click', function() {
// ランダムな色を生成
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
button.style.backgroundColor = randomColor;
count++;
clickCount.innerHTML="ボタンを押した回数"+count;
});
</script>
できました。
解説
一応上のコードの解説を載せておきます。参考までにどうぞ
<button id="myButton">色を変える</button>
<span id="clickNumberOfTimes">ボタンを押した回数がここに表示されます</span>
これでボタンとテキストが表示されます。
<script>
let count=0;
var str ="ボタンを押した回数:"+count;
const button = document.getElementById('myButton');
const clickCount=document.getElementById('clickNumberOfTimes');
scriptの中です。letなcountでボタンが押された回数をカウントします。また、「ボタンを押された回数：」のテキストをstrに入れています。その下のconst buttonとconst clickCountで先ほどのボタンとテキストを紐づけています。
button.addEventListener('click', function() {
// ランダムな色を生成
const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
button.style.backgroundColor = randomColor;
count++;
clickCount.innerHTML="ボタンを押した回数"+count;
ボタンが押されたら、色を変えて、countを1増やしています。先ほどのテキストを、「ボタンを押した回数:」とcountの数にしてカウントを出しています。
こんな感じでうまく動きました！
URLをつけてサイトにする
上のURLボタンを押して、サイトを世界に公開できるみたいです。
ボタンを押すと以下の画面になります
右のPublishを押すと、
簡単にサイトを公開できます。
総評
良い。
良かった点
・AIを簡単に実装できる
ボタンを押して、名前を付けるだけで簡単にAIをサイトにくっつけることができます。AIの種類が豊富なのもいろいろ試せていいです。
AIにイラストを作ってもらえる
AI Imageで簡単にイラストを出すことができるのが楽しかったです。
できれば改善してほしい点
わかりにくかった部分や改善してほしい点を載せておきます。できれば改善お願いします。
・ヘルプボタンが欲しい
操作がわかりにくい点もあったので、Markdownで書いていく画面にヘルプのボタンを追加してくれると嬉しいです。
・ほぼ英語
ほぼというか全部英語だった気がします。できれば日本語の説明とかもつけてくれるとありがたいです。
最後に
簡単にサイトが作れました！サイトを作りたい方はぜひ試してみてください。
MarkdownAIのサイト