MarkdownAIとmicroCMSを無理矢理連携してAIのサイトを作成する


# この記事は何？

MarkdownAIは簡単にWebサイトを公開できるサイトですが`Server AI`を用いることでサイト上にAIを用いたコンテンツを用意することができます
MarkdownAIの`Server AI`には`Knowledge`という機能があり、AIに知識を与えることが出来ます
この`Knowledge`をmicroCMSで管理することによって柔軟なAI管理を目指します


# 全体の構成
## 登場人物
- GitHub
    - GitHub Actions
    - GitHub Pages
- MarkdownAI
    - ServerAI
- microCMS
    - コンテンツAPI

## 構成
![markdownai2microcms.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/9514cead-b196-7aca-3b21-92d5aa4802d3.png)

### デプロイまでのフロー
- microCMSでコンテンツを更新
- webhookでGitHub Actionsワークフローを呼び出し
  - node.jsのアプリケーションがmicroCMSコンテンツをAPIから最新のコンテンツを取得
  - 取得したコンテンツをHTMLに書き出し
- 生成されたHTMLをGitHub Pagesへデプロイ
- MarkdownAIのServerAIがGitHub PagesのHTMLをKnowledgeとして参照

# GitHubの設定
## repository
GitHubにPages用の[repositoryを作成](https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site)します
特別な設定はないです

### microCMS コンテンツAPI呼び出し/html生成用のプログラム
ActionsのWorkflowでmicroCMSのコンテンツAPIを呼び出し、取得したコンテンツをHTMLに書き出すプログラムをNode.jsで用意します
httpのリクエスト及びHTMLの生成ができれば環境に制約はありません
APIの呼び出しにはmicroCMSでSDKが用意されていますのでそちらを利用すると簡単に実装できますので[SDK](https://microcms.io/features/sdk)が用意されている環境で実装するのがおすすめです

## Actions
microCMSのコンテンツAPIを呼び出してJSON形式のファイルに書き出します
書き出されたJSONファイルをHTMLに書き出します、HTMLへの書き出しは(ejs)[https://github.com/mde/ejs]を用いています

#### microCMSのAPIを呼び出すコード

``` js:index.ts
import getList from "./module/microcms";
import * as fs from 'fs';


(async () => {
  const res = await getList("markdownai");
  const json = JSON.stringify(res);
  console.log(json);
  fs.writeFileSync('./dist/contents.json', json);
})();
```

``` js:module/microcms.ts
import { createClient } from "microcms-js-sdk";

export const getList = async (content: string) => {
  const API_KEY = process.env.X_MICROCMS_API_KEY ? process.env.X_MICROCMS_API_KEY : "" ;
  const SERVICE_DOMAIN = process.env.SERVICE_DOMAIN ? process.env.SERVICE_DOMAIN : "" ;
  const client = createClient({
    serviceDomain: SERVICE_DOMAIN,
    apiKey: API_KEY,
  });
  const res = await client.get({
    endpoint: content,
  });
  return res;
}


export default getList;

```
以下の2点の値はmicroCMSを利用開始すると取得できます
詳しくは(公式ドキュメント)[https://document.microcms.io/content-api/x-microcms-api-key]を参照してください
- X_MICROCMS_API_KEY 
- SERVICE_DOMAIN


#### HTMLを生成するコード
今回はサンプルなので凝ったことはしていません
プログラマブルにHTMLを生成できればなんでもよかったので(ejs)[https://github.com/mde/ejs]を利用しています
``` html
<html>
  <head>
  </head>
  <body>
    <table>
      <thead>
        <th>title</th>
        <th>content</th>
      </thead>
      <tbody>
        <% for(let i = 0; contents.length > i; i++) { %>
          <tr>
            <td><%= contents[i]["title"] %></td>
            <td><%= contents[i]["content"] %></td>
          </tr>
        <% } %>
      </tbody>
    </table>
  </body>
</html>

```

前述のコードで`./dist/contents.json`が生成されていますので以下のように`ejs`のコマンドで
`contents.json`を読み込むことでコード内でJSONのデータとして扱うことが出来ます
詳しくは公式ドキュメントを参照お願いします

``` sh 
$ ejs ./src/index.ejs -f ./dist/contents.json -o ./_site/index.html
```

## Pages
GitHub Pagesは生成されるHTMLのホスト先です
こちらもインターネットに公開できる環境であればなんでもよいです、GitHub Actionsでの公開が楽なのでオススメです
Pagesに公開されたHTMLをMarkdown AIの`Knowledge`とします

# microCMSの設定
microCMSのコンテンツが更新された際にGitHub Pages上のHTMLが更新されるようにします
microCMSに`Webhook`の機能があるのでコンテンツ更新時にGitHub ActionsのWorkflowが稼働するように設定します
`追加`をクリックすることで`GitHub Actions

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/ba9dfe0d-fca5-6fa5-9efc-b80a6a2c1a1a.png)

- Webhookの名前
  - 任意の値
- GitHubトークンの設定
  - [GitHubのsettings](https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens)から作成して設定します
- ユーザ名
  - ユーザ名をそのまま入力
- リポジトリ名
  - Pagesで公開するHTML生成するGitHub Actionsのリポジトリ名
- イベントトリガー名
  - GitHub Actionsの`on.repository_dispatch.types`と合わせる(以下に例示) 
``` yml
name: Node.js CI

on:
  repository_dispatch:
    types: ["githubpages_update4markdownai"]
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/0aba7ca7-5b38-051a-cd89-e4d65796e5d9.png)

あとはチェックボックスからWebhook発火のイベントを設定すればOKです

# MarkdownAIの設定
MarkdownAIの管理画面にログインをして(Googleのアカウントでログインできます)
`Create Model(ロボのアイコン)`をクリックしてAIのモデルを作成します
![スクリーンショット 2024-12-20 000156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/05c6fe3d-df89-4ff3-5f92-56b387029983.png)

`Select Model`の選択及び`Model Name/Prompt`を入力します

この`Knowledge`> の部分を`Link`に選択してGitHub PagesのURLを入力したら`Create`をクリックでAIモデルの設定は完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/9bdb7f59-d2ae-27ae-7928-edc47b07b811.png)

`＋`をクリックすると`Insert`ボタンがアクティブになるのでクリックして`script`を選択

![スクリーンショット 2024-12-20 001019.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/ef71b9b7-f146-d7f0-20f9-df97ee67298c.png)


先程作成した`model`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202764/715b132b-ff3e-85e9-4e76-0d9d0735f9ec.png)

テキストフィールドにスクリプトが挿入されます
`Save`をクリックすれば保存され完成です

その後`View` > `URL` > `Publish`
この手順でインターネットにサイトが公開がされます
ポップアップ上のURLにアクセスすれば公開されたサイトへ訪問することができます
これで完了です！


# 最後に
MarkdownAI,microCMS,GitHub(Pages)の連携によるAIを用いたWebサイトの構築について紹介しました
MarkdownAIによる容易なAIの実装とmicroCMSのリッチなUIによるAIのカスタムが本稿の目指すところです
本稿はAI要素を組み込んだサイトをMarkdownAIとmicroCMSの連携で簡単に作成するを重きを置いております