この記事は何？
MarkdownAIは簡単にWebサイトを公開できるサイトですがServer AIを用いることでサイト上にAIを用いたコンテンツを用意することができます
MarkdownAIのServer AIにはKnowledgeという機能があり、AIに知識を与えることが出来ます
このKnowledgeをmicroCMSで管理することによって柔軟なAI管理を目指します
全体の構成
登場人物
- GitHub
- GitHub Actions
- GitHub Pages
- MarkdownAI
- ServerAI
- microCMS
- コンテンツAPI
構成
デプロイまでのフロー
- microCMSでコンテンツを更新
- webhookでGitHub Actionsワークフローを呼び出し
- node.jsのアプリケーションがmicroCMSコンテンツをAPIから最新のコンテンツを取得
- 取得したコンテンツをHTMLに書き出し
- 生成されたHTMLをGitHub Pagesへデプロイ
- MarkdownAIのServerAIがGitHub PagesのHTMLをKnowledgeとして参照
GitHubの設定
repository
GitHubにPages用のrepositoryを作成します
特別な設定はないです
microCMS コンテンツAPI呼び出し/html生成用のプログラム
ActionsのWorkflowでmicroCMSのコンテンツAPIを呼び出し、取得したコンテンツをHTMLに書き出すプログラムをNode.jsで用意します
httpのリクエスト及びHTMLの生成ができれば環境に制約はありません
APIの呼び出しにはmicroCMSでSDKが用意されていますのでそちらを利用すると簡単に実装できますのでSDKが用意されている環境で実装するのがおすすめです
Actions
microCMSのコンテンツAPIを呼び出してJSON形式のファイルに書き出します
書き出されたJSONファイルをHTMLに書き出します、HTMLへの書き出しは(ejs)[https://github.com/mde/ejs]を用いています
microCMSのAPIを呼び出すコード
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);
})();
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>
<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のデータとして扱うことが出来ます
詳しくは公式ドキュメントを参照お願いします
$ 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
- Webhookの名前
- 任意の値
- GitHubトークンの設定
- GitHubのsettingsから作成して設定します
- ユーザ名
- ユーザ名をそのまま入力
- リポジトリ名
- Pagesで公開するHTML生成するGitHub Actionsのリポジトリ名
- イベントトリガー名
- GitHub Actionsの
on.repository_dispatch.typesと合わせる(以下に例示)
- GitHub Actionsの
name: Node.js CI
on:
repository_dispatch:
types: ["githubpages_update4markdownai"]
あとはチェックボックスからWebhook発火のイベントを設定すればOKです
MarkdownAIの設定
MarkdownAIの管理画面にログインをして(Googleのアカウントでログインできます)
Create Model(ロボのアイコン)をクリックしてAIのモデルを作成します
Select Modelの選択及びModel Name/Promptを入力します
このKnowledge> の部分をLinkに選択してGitHub PagesのURLを入力したらCreateをクリックでAIモデルの設定は完了
＋をクリックするとInsertボタンがアクティブになるのでクリックしてscriptを選択
先程作成したmodelを選択
テキストフィールドにスクリプトが挿入されます
Saveをクリックすれば保存され完成です
その後View > URL > Publish
この手順でインターネットにサイトが公開がされます
ポップアップ上のURLにアクセスすれば公開されたサイトへ訪問することができます
これで完了です！
最後に
MarkdownAI,microCMS,GitHub(Pages)の連携によるAIを用いたWebサイトの構築について紹介しました
MarkdownAIによる容易なAIの実装とmicroCMSのリッチなUIによるAIのカスタムが本稿の目指すところです
本稿はAI要素を組み込んだサイトをMarkdownAIとmicroCMSの連携で簡単に作成するを重きを置いております