すみません．200本も無いです．

きっかけ

論文を書いている時に数字の範囲を示す横棒についての指摘をされた．波線がダメなのは知っていたが，ハイフンではなくエンダッシュを使うようにと……．なんか長さとか高さ違うのあるよな〜とは薄々思っていたけど，なにそれ．ちなみに約物というWikipediaのページに詳しく載っている．

今回作ったサイト

題して…… 横棒って200本あんねん

作ったサイトでAIが返答している様子は以下

前提

Googleアカウントを持っていること
筆者は非Web系エンジニア
デザインにこだわらなくてもある程度のものができるのでMarkdownは好き
- 伸びなかったMarkdown記事もよろしくお願いします！

今回やったこと

Markdown AIの使用
- Markdownで記述
- AIモデル選択とプロンプト記入
- お試し公開
ChatGPTで調整

Markdown AIの使用

本家のMarkdown AIの誰でもわかる使い方を見たほうが画像付きで結局早いし，この記事で訴求したい内容は使い方では無いので軽く．

Markdownで記述

Markdown AIに登録後，＋ボタンを押して，プロジェクトを作成する．Markdownの記述方法に関しては本家のmarkdown AI記述方法で．最初に書いた内容はこれだけ．

# 横棒って200本あんねん

## これはどの横棒が適切かをAIが教えてくれるサイト

あなたはどういう場面での横棒を必要としていますか．その場面を教えてください．なければどんな横棒があるか聞いてください．

AIモデル選択とプロンプト記入

本家のMarkdown AIの誰でもわかる使い方を読んで，Googleの検索技術を活かすのが良さそうだと思ったのでGeminiを採用．試行錯誤した結果，現在のプロンプトは以下．Knowledgeは無し．

あなたは約物の中の横棒に関する専門家です．約物の中の横棒とはハイフン，ダッシュ，水平線などのことです．どの横棒を使うべきか悩んでいる人に対して適切なものを教えてください．あなたは最初にどういった場面で使いたいのかを尋ねます．その後適切な横棒を提案して下さい．ただし，想定使用環境はWordとします．またその提案ではどうキーボードに入力すると出力されるかも合わせて教えて下さい．例えばキーボードはJISなのかUSなのか．OSはWindowsなのかMacなのか．

これでモデルを作れたーと思っていたら……

Model NameはRequiredなので必須．入力していなかったので一瞬悩んだ．

お試し公開

この段階で以下の画像のように既にやりたいことが実現できるサイトとなっている．Markdown AIの誰でもわかる使い方通りにInsertして，Saveボタンで保存．そのあと，Viewボタンを押して，Run AIボタンで何回かAIを試した後，URLボタンを押して，publishボタンを押すとURLが自動生成され，全世界に公開される．

この記事の通りにやるだけで，サーバー設定や公開作業に手間を感じることなく，みんなに見てもらえるAI付きのサイトがアップロードされるのはありがたい．

ChatGPTで調整

ここまでにMarkdownで作ったものはデザインがアレだったので，見た目を整えるためChatGPTに聞いた．主な変更点は

文字のフォントサイズ，色
余白や配置
AIからの返事を見やすくするための背景色と角丸
返事待ちローディング画面
Markdownで返ってきたのを整えるためのJavaScript導入

こうしてできたのが横棒って200本あんねん

出来たソースコードは

<!-- Marked.jsをCDN経由で読み込み -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<h1 style="font-size: 2em; text-align: center; margin-top: 20px; color: #333;">横棒って200本あんねん</h1>
<h2 style="font-size: 1.2em; text-align: center; margin: 10px 0; color: #666;">〜これはどの横棒が適切かをAIが教えてくれるサイト〜</h2>
<p style="font-size: 1.1em; text-align: center; color: #333; max-width: 600px; margin: 0 auto;">
  あなたはどういう場面での横棒を必要としていますか．その場面を教えてください．なければどんな横棒があるか聞いてください．ここでいう横棒とはハイフン，マイナス，ダッシュ，長音符号など約物に含まれるものです．
</p>
<p style="font-size: 0.9em; color: #666; text-align: center; margin-top: 15px;">入力例：どんな横棒があるの</p>

<div style="display: flex; justify-content: center; margin-top: 20px;">
  <input type="text" id="text-1731646055" style="width: 350px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;" placeholder="どんな横棒があるの">
  <button type="button" id="button-1731646055" style="margin-left: 10px; padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">AIに聞く</button>
</div>

<!-- ローディングスピナー -->
<div id="loading" style="display: none; text-align: center; margin-top: 20px;">
  <div style="border: 8px solid #f3f3f3; border-top: 8px solid #4CAF50; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto;"></div>
  <p style="margin-top: 10px; color: #666; font-size: 1.1em;">ロード中...</p>
</div>

<div id="answer-1731646055" style="margin-top: 20px; padding: 15px; border-radius: 8px; background-color: #f9f9f9; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); color: #333; font-size: 1.1em; max-width: 600px; margin-left: auto; margin-right: auto; text-align: left; display: none;"></div>

<script>
(() => {
  const button = document.getElementById('button-1731646055');
  const answerDiv = document.getElementById('answer-1731646055');
  const loadingDiv = document.getElementById('loading');

  button.addEventListener('click', async event => {
    button.disabled = true;
    loadingDiv.style.display = 'block'; // ローディングスピナー表示
    answerDiv.style.display = 'none'; // 返答エリアを非表示に

    const serverAi = new ServerAI();
    const message = document.getElementById('text-1731646055').value;
    const markdownAnswer = await serverAi.getAnswerText('qiaYb9MmcKNkKTpwYdSi44', '', message);

    // Marked.jsを使ってMarkdownをHTMLに変換
    answerDiv.innerHTML = marked.parse(markdownAnswer);
    answerDiv.style.display = 'block'; // 返答エリアを表示
    loadingDiv.style.display = 'none'; // ローディングスピナーを非表示に
    button.disabled = false;
  });
})();
</script>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

ローディング画面がお気に入り

ちなみにChatGPTによると

@keyframesで定義したspinアニメーション
MarkdownをHTMLに変換するMarked.js
marked.parse(markdownAnswer)でAIの返答をHTML形式に変換しanswerDiv.innerHTMLでHTMLとして表示

を導入したらしい（非Web系エンジニアなので全くわからない）．
ちなみに約物についてのQiita記事はハイフンに似てる文字の文字コード

参考文献

この記事は以下の情報を参考にして執筆しました．