はじめに

この記事は、株式会社スピードリンクジャパン Advent Calendar 2024 の18日目の記事です。

要素をたくさん横に並べるときや縦に並べる場合、どうやって指定したらいいのだろうかと悩んだことはありませんか？

そんなあなたのためにCSSの並べ方を指定するとCSSの指定の仕方を教えてくれる
サイトを作成してみました。

今回使用したツール

MarkdownAI

今回作成したページ

⇧ぜひ使ってみてください😊

ページ作成の方法

基本的なページ作りで使用する内容を説明していきます。

サインインする

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を指定できるという点にあると思います。
また、簡単にページ作成から公開までができるのも魅力の一つであると考えています。

以下のページから機能追加等の情報も出ているので眺めてみると面白いです。

ここまで読んでくださりありがとうございます。

過去に作成したページ

参考