PleasanterをヘッドレスCMSとして活用する

前置き

タイトルの通り、PleasanterをヘッドレスCMSとして活用する方法を紹介します。

いわゆる「ヘッドレスCMS」と検索すると、以下のような図がいっぱい出てきます。（下の図は自作）

これの、バックエンドをPleasnaterでやってみようというのが今回の話です。つまり↓のようなイメージ。

PleasanterのAPIを使って接続します。

フロントエンドの開発

ということで、まずはフロント側の開発。今回は、Reactで作ってみます。（初学者）

[こちら]のUdemy講座を参考に作ってみました。講座では3つのアプリを作っていますが、そのうちブログアプリを流用します。

講座ではバックエンドにはGoogleのFirebaseのStorageを使用していますが、これをPleasanterに置き換えてみます。なお、ブログアプリの認証にはFirebase Authenticationを使います。（講座のまま）

開発したもの

ホーム画面

投稿内容をPleasanterから取得しています。レイアウトは自分なりにアレンジしてみました。

”それとなく”レスポンシブ対応

投稿画面。Pleasanterに登録します。

バックエンドのPleasanter

こんな感じで投稿内容を保存しています。

Firebase AuthenticationによるGoogleアカウントの認証情報をuidに保存しています。

実装内容

全部だとかなり多いので、Home画面のjsxのみ抜粋して記載します。

import React, { useContext, useEffect, useState } from 'react'
import "./Home.css";
import CommonContext from './Context';

const Home = ({ authUid }) => {

    const commonContext = useContext(CommonContext);
    const [postList, setPostLists] = useState([]);

    //useEffectで画面読込時に投稿情報を取得します。
    useEffect(()=>{
        const getPosts = async ()=>{
            let resJson = await getPostList();
            setPostLists(resJson.Response.Data);
        };
        getPosts();
    },[])

    //APIでPleasanterに登録されている投稿情報を取得します。
    const getPostList = async() =>{
        console.log("apiKey=" + commonContext.ApiKey);
        let data = {
            "ApiVersion": 1.1,
            "ApiKey": commonContext.ApiKey,
            "view" : {
                "ApiDataType": "KeyValues",
                "ApiColumnKeyDisplayType": "ColumnName",
                "GridColumns": ["ResultId","Title","Body","ClassA","ClassB"]
            }
        }        

        let url = `${commonContext.PleasanterUrl}api/items/${commonContext.SiteId}/get`;
        let response = await fetch(url, {        
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            },
        });
        return response.json();
    };

    const handleDelete = async (id) => {
        await deletePost(id);
        window.location.href = "/";
    }

    //APIでPleasanterに登録されている投稿情報を削除します。
    const deletePost = async(id) =>{
        let data = {
            "ApiVersion": 1.1,
            "ApiKey": commonContext.ApiKey
        }        

        let url = `${commonContext.PleasanterUrl}api/items/${id}/delete`;
        let response = await fetch(url, {
            mode: 'cors',
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            },
        });
        return response.json();
    };

    return (
        <div className='homePage grid-container'>
            {/* APIで取得した投稿情報を展開する */}
            {postList.map((post)=> {
            return (
                <div className='postContents' id={post.ResultId} key={post.ResultId}>
                        <div className='postHeader'>
                            <h1>{post.Title}</h1>
                        </div>
                        <div className='postTextContainer line_wrap'>
                            {post.Body}
                        </div>
                        <div className='nameAndDeleteButton'>
                            <h3>@{post.ClassA}</h3>
                            {authUid === post.ClassB &&
                                <button onClick={()=> handleDelete(post.ResultId)}>削除</button>
                            }
                        </div>
                </div>
                )
            })}
        </div>
    )
};

export default Home;

getPostListでPleasanterに接続し投稿内容を取得、useStateのpostListに設定しHTMLに書き込んでいます。

まとめ

もともとPleasanterにはAPIが豊富に存在していることから、できるだろうなー、となんとなく思っていましたが、実際作ってみたら割と簡単にできました。

おまけ

今回、Reactを初めて触ってみましたが、結構簡単に作れるもんですね。もっといろいろ試してみたいと感じました。