親戚の依頼でサイトを作成するにあたり、「手離れの良いサイト」とするために、microCMSを採用したことについての話です。

背景

親戚から事業用のシンプルなサイト作成を依頼されました。

「シンプル」とは「住所や電話番号、営業日などの固定の基本情報を記載できればよい」「こういう事業をやっていますという名刺代わりレベル」みたいな意味です。

ただし、「日々のお知らせ（休業日や営業時間変更）を手軽に更新したい」という要件がありました。

ですが、依頼者の親戚はパソコンとかの操作は苦手で、複雑な更新作業はマニュアルがあったとしても難しい、もしくはストレスになることが想定されました。

けれど、わたしとしては、細かい更新作業をいつでも受け付けることは確約できない。

それに複雑な構造のサイトは、わたしに何かあったときに運用不可能なサイトになってしまいます。

そこで、ほぼメンテナンスの必要ない、手離れのよいサイト、かつ、お知らせ更新が手軽なサイトを目指し、サイトを作成しはじめ、その過程でmicroCMSを利用しました。

なぜmicroCMSか？

QiitaのアドベンドカレンダーキャンペーンなどでmicroCMSの存在を知り、既に使用したことがあるという背景がまず存在します。

つまり、アカウントはある状態です。

前に使用した際は、わたしの要望と合致しなかった（作成していたサイトの形式ではコンテンツはMarkdownファイル管理の方が楽だった）ため、それほど使っていなかったのですが、microCMSの管理画面のフレンドリーさには関心していました。

管理画面がシンプルなことで、非技術者でも使いやすそうだなという印象がありました。

そんなわけで、今回のサイト作成ではmicroCMSをお知らせ欄に使うことにしました。

懸念

ただ、懸念としては、サイト自体はHTMLファイル1枚、つまりフロントエンドだけで構成されていることです。

そうなると、サーバーサイドがないため、APIキーを隠蔽できません。

わたしはWeb系の知識には乏しいため、こういうケースのAPIキーの扱いってどうなのだろう？とちょっと調べたところ、公式でFAQがありました。

こちらを読んで理解した限り、今回の要件である「お知らせ欄」であれば、それ専用のAPIキーは公開されても問題ないと判断しました。

もちろん、書かれているとおり、APIキーの権限を適切に設定することは前提です。

これで、懸念は払拭されたため、実際にサイトを作りました。

サイトの構成と制作手順

基本的なサイト構成は先に述べたとおり、HTMLファイル1枚です。

そして、随時更新が必要なお知らせ欄だけを外部（microCMS API）から取得します。

制作の流れとしては、サイトをつくって（シンプルにするため、フレームワークは用いず、vanilla？なHTMLとCSSでつくりました）、microCMS管理画面でAPI作成、サイトでJavaScriptを用いてAPIからデータ取得、としました。

これといって変なことはない、ふつうの流れだと思います。

サイト作成

ふつうにつくります。

そして、お知らせを埋め込む場所として、以下を準備します。

<dl id="oshirase-list"></dl>

API作成

続いて、microCMS管理画面でのAPI作成です。

以上のような設定で作成しました。

APIからデータ取得

後はAPIからデータを取得するだけです。

こちらを参考に実装します。

const { createClient } = microcms;
const client = createClient({
    serviceDomain: 'xxxx',
    apiKey: 'xxxx',
});
client.get({
    endpoint: 'oshirase',
    queries: {
        isDraft: false,
        orders: '-displayDate',
    }
})
    .then((response) => {
        const contents = response.contents;
        const dlEl = document.getElementById('oshirase-list');

        if (!contents.length) {
            const dd = document.createElement('dd');
            dd.innerHTML = "お知らせはございません。"
            dlEl.appendChild(dd);
        } else {
            contents.map(content => {
                /* お知らせの日付 */
                const dtEl = document.createElement('dt');
                dtEl.innerHTML = new Date(content.displayDate).toLocaleDateString('ja-JP');
                dlEl.appendChild(dtEl);

                /* お知らせのタイトルと内容 */
                const ddEl = document.createElement('dd');
                let body = "";
                content.contents.split('\n').forEach(line => body += "<p>" + line + "</p>");
                ddEl.innerHTML = `<h3>${content.title}</h3>` + body;
                dlEl.appendChild(ddEl);
            });
        }
    });

こんな感じで、実装できました。

実際はこれをCSSで修飾して表示しています。

マニュアル準備

さらに更新方法のマニュアルを作成しました。

microCMS管理画面へのログインから、データの入力や公開/非公開という概念、予約投稿についてもひととおり書きました。

公式ドキュメントも存在しますが、依頼者の親戚はとことんパソコンとかに弱い質のため、既存のドキュメントからの読み替えも難しいと思い、専用で準備しました。

汎用的なマニュアルを読み替えて自分の場合に適用して理解できるというのもスキルで、誰もができるわけではありませんから。

microCMSを使用してみての感想

以上の構成で、実際に運用しまして、今のところ問題なく運用できています。

依頼者も特に問題なくお知らせ欄を更新できているようで、microCMSを導入して成功だったと思います。

今のところ、無料のHobbyプランで運用できていますが、今後プラン改変などで課金が必要になったとしても、よほど高価でなければ、依頼者へ課金を提案すると思います。

終わりに

ということで、無事、手離れの良いサイトを作成することができました。

HTMLファイル1枚ものの静的サイトに、動的なお知らせ欄を組み合わせるというシンプルな構成ですので、手軽に運用できることが、やはり最大のメリットです。

APIキーを公開しているため、別サイトからお知らせを参照されてしまう可能性はリスクですが、今回のケースでは利便性をとりました。

シンプルなサイトを作成するには今回のような「必要な部分のみ動的にする」アプローチが有効だと感じます。

その点で、microCMSのようなサービスは「ちょうどよさ」があります。

みなさんも、こんな感じの手離れの良いサイトにmicroCMSを検討してみてはいかがでしょうか。

ここまで読んでいただきありがとうございました。