はじめに
この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の18日目の記事です。
要素をたくさん横に並べるときや縦に並べる場合、どうやって指定したらいいのだろうかと悩んだことはありませんか？
そんなあなたのためにCSSの並べ方を指定するとCSSの指定の仕方を教えてくれる
サイトを作成してみました。
今回使用したツール
今回作成したページ
⇧ぜひ使ってみてください😊
ページ作成の方法
基本的なページ作りで使用する内容を説明していきます。
サインインする
MarkdownAIのページに遷移し、Continue with Googleを押下するとサインインができます。
modelを生成する
作成ページに遷移したら、ロボットボタンを押下し遷移します。
| 表示名 | 内容 |
|---|---|
| Model List | これまでに作成したモデルの一覧 |
| Select Model | Gemini、Claude、GPT-4o-mini、GPT-4、gpt-3.5-turboの5つから生成AIを選択することができる |
| Model Name | 保存した際にModel Listに表示される名前 |
| Prompt | 生成AIへの指示 例）CSSを教えて |
| Knouledge | ここではAIに事前に教えておきたい情報を共有することができ、AIはこの共有データを参考に資料や回答などを生成する |
上記のうち設定したい項目の設定が完了したらCreateボタンを押下すると保存できます。
更新の場合はUpdateボタンを押下します。
Backボタンを押下するとページ作成の画面に遷移することができます。
画面上部右側のPlaygroundのボタンを押下すると作成したmodelの動作を試すことができるのでプロンプトの試行錯誤の際に便利です。
ページの作成
ロボットボタンの右にある＋ボタンを押下すると新規ページが作成できます。
マークダウン形式での記述は以下が参考になります。
画像やmodelをページに読み込む
ページ上部にあるInsertボタンを押下します
以下の表を参考にして、入れたいものに応じたボタンを押下します。
| ボタン | 入れられるもの |
|---|---|
| Image | PC内に保存されている画像 |
| AI Image | AIで生成した画像 |
| Script | 作成したmodel |
Scriptボタンを押下すると作成したモデルを選ぶことができます。
ページに入れたいモデルを選んでInsertボタンを押下するとmodelが自動的にページに入ります。
今回のプロンプト
今回のページ作成ではモデル作成の際にPromptは入力せず、画面で入力してもらったデータを使ってPromptを作成しAIに渡しています。
以下が参考のコードです。
<div>
<label for="columns" class = "label">横の要素数:</label>
<input type="number" id="columns" value="3" min="1" style="height: 30px; width: 10%;">
<label for="rows" class = "label">縦の要素数:</label>
<input type="number" id="rows" value="3" min="1" style="height: 30px; width: 10%;">
<button type="button" id="button-1734417704">CSSを生成</button>
</div>
<div id="answer-1734417704"></div>
<script>
(() => {
const button = document.getElementById('button-1734417704');
button.addEventListener('click', async event => {
button.disabled = true;
answerDiv.innerText = "考え中...";
const columns = document.getElementById('columns').value;
const rows = document.getElementById('rows').value;
const serverAi = new ServerAI();
const message = `CSSを使用して要素を${columns}列×${rows}行で配置するCSSコードを教えてください。`;
const answer = await serverAi.getAnswerText('Insert時に自動的に入力されます', '', message);
answerDiv.innerText = answer;
button.disabled = false;
});
})();
</script>
コードを簡単に説明すると以下の通りです。
- idを使って入力された値を取得し変数に代入
- その変数を使ってmessageを作成
- messageをAIに投げる
このページの改良できそうな点
このページを作るにあたり、時間がなかったため以下の内容については妥協しました。
- AIの回答とそれを実際に使用した時の見た目を表示する
- その他の条件としてテキストで入力できる欄を追加する
- AIで作成した画像を使う等、見た目の調整
今後時間があるときにこのあたりを改良できるとユーザーにとって使いやすいページにしていくことができそうです。
最後に
MarkdownAIの魅力として、AIが何種類かあるので得意分野に合わせたAIを指定できるという点にあると思います。
また、簡単にページ作成から公開までができるのも魅力の一つであると考えています。
以下のページから機能追加等の情報も出ているので眺めてみると面白いです。
ここまで読んでくださりありがとうございます。
過去に作成したページ
参考