StrapiのLocal Pluginsを利用して独自の画面を作成する
TL;DR
- Strapiではデフォルトの管理画面のUIに加えて、Local Plugins という形でその内部に開発者が独自に開発したUIを実装ができます
- ローカルプラグインはReactで実装できます
- この記事では、プラグインの初期化から最初の編集を加える所までを解説します
StrapiではGUIの管理画面が提供されています。管理画面では各コンテンツタイプの型の編集やレコードの編集が可能であり、基本的なCMSの要件であればコーディングは必要ありません。
しかしながら、実際には様々な要件がビジネスサイドから要求されることもあるでしょう。
- AのデータとBのデータを並べて閲覧したい
- 特定のフィールドのデータを軸にソートした状態で閲覧したい
- 複雑なフォームの表示やフィードバックを行いたい
その場合、バックエンドとしてStrapiのAPIを使用し、独自のCMSを開発することも可能ですが、Strapi自体に独自のUIを組み込むことも可能です。
本記事ではStrapiが提供している "Local Plugins" の機構について、その仕様、実装方法、そしてどのようにカスタマイズが可能かどうかについて紹介します。
スコープ
- ローカルプラグインで管理画面に独自の画面を作成する方法について解説します
- ローカルプラグインでのモデルの定義やAPIの実装についての解説は行いません
動作環境
この記事では
strapi 3.3.4
を利用しています。
Strapiにおける Local Plugins とは
Strapiの基本的な機能に加えて、開発者が独自の実装を組み込める機構のことです。これによって、開発者はStrapiに対して柔軟に独自のUIや機能を組み込めることができます。また、本体とは独立された状態で開発することができるため、それを別のStrapiサービスにも簡単に組み込めるようになっています。
0.Strapiの環境を用意する
公式ドキュメント または、 Strapi Quick Start Guide 日本語訳
を参照ください。
1.プラグインの雛形を生成
$ strapi generate:plugin my-plugin
フォルダストラクチャは以下のようになります。
plugin/
└─── admin/ # プラグインのフロントエンドのソースコード
| └─── src/
| └─── index.js # プラグインのエントリポイント
| └─── pluginId.js # プラグイン名
| |
| └─── components/ # プラグインで利用するReactコンポーネント
| └─── containers/
| | └─── App/ # コンテナ
| | └─── Initializer/ # プラグインがマウントされたあとに使用されるロジック
| └─── translations/ # 多言語対応する際に使用される
| └─── en.json
| └─── index.js
| └─── fr.json
└─── config/ # プラグインの設定
| └─── functions/
| | └─── bootstrap.js # アプリが実行される前に実行されるブートストラップ関数
| └─── policies/ # ポリシー
| └─── queries/ # モデルのクエリ
| └─── routes.json # APIのルーティング
└─── controllers/ # APIのコントローラー
└─── middlewares/ # ミドルウェア
└─── models/ # モデル
└─── services/ # サービス
ローカルプラグインでは管理画面に自由にUIを追加できる機能の他、独自のモデルを持つことや、APIを持つことが可能なため、ある程度ファイルストラクチャが複雑になっています。今回主にスコープの範囲内とするのは/adminとなります。
2. 開発を進める
$ npm run develop -- --watch-admin
管理画面への編集を加えた場合、都度ビルドを行う必要がありますが、--watch-admin オプションを使用することで、ソースコードに変更を加えると自動で反映させることができます。
管理画面へログインすると my-plugin がサイドバーに追加されているのが確認でき、クリックすることでプラグインの画面が確認できます。
それでは、実際にこの画面に編集を加えていきましょう。
2.1 編集を加える
初期状態で画面に表示されているコンポーネントは my-project/plugins/my-plugin/admin/src/containers/HomePage/index.js に存在します。まずこのファイル編集することで、変更が反映されることが確認できます。
/*
*
* HomePage
*
*/
import React, { memo } from 'react';
// import PropTypes from 'prop-types';
import pluginId from '../../pluginId';
const HomePage = () => {
return (
<div>
<h1>{pluginId}'s HomePage</h1>
<p>最初の修正</p>
</div>
);
};
export default memo(HomePage);
この時、ホットリロードが行われ、変更が反映が確認できます。
あとは、自由にコンポーネントを作成していき、開発を進めることができます。
2.3 サイドバーの表記
サイドバーには今回のプラグイン名が表示されています。この表記を変更してみましょう。サイドバー上での表記は my-project/plugins/my-plugin/admin/src/index.js のファイルで読み込まれ、その定義は my-project/plugins/my-plugin/package.json にあります
{
...
"description": "This is the description of the plugin.",
"strapi": {
"name": "独自のプラグイン",
"icon": "plug",
"description": "Description of my-plugin plugin."
},
"dependencies": {},
"author": {
...
}
export default strapi => {
const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
const icon = pluginPkg.strapi.icon;
const name = pluginPkg.strapi.name; // 該当箇所
const plugin = {
blockerComponent: null,
...
},
};
return strapi.registerPlugin(plugin);
};
これでサイドバー上の表記を変更することができました。
2.3 Strapiコンテキストでの開発
その他、開発の際に必要となる基本的な部分について触れていきましょう。
APiを使用する
strapi-helper-pluginでは自身のAPIを使用する際に便利なrequestというメソッドを提供しています。
import {request} from "strapi-helper-plugin";
(async function() {
const response = await request("/articles", { method: "GET" });
})();
実行結果などをユーザーに伝えるnotification
Strapi側で用意されているメソッドが使用できます。
strapi.notification.toggle({
type: 'success',
title: '通知タイトル',
message: '成功しました',
});
strapi.notification.toggle({
type: 'warning',
title: '通知タイトル',
message: '失敗しました'
});
スタイリング
styled-componentsをデフォルトでサポートしています。
const MyText = Styled.p`
color: blue;
`;
() => <MyText>最初の修正</MyText>
まとめ
Strapiで独自のUIを追加する方法、そしてそれが非常に柔軟にカスタマイズすることが可能であることを紹介してきました。デフォルトで使用できる管理画面でも基本的な編集作業が可能ではありますが、それだけではカバーしきれない要求が発生した場合においても対応が可能であることで、このフレームワークを採用するリスクを１つを解消できたのではないかと思います。また、Local Plugins にはUIを展開する機能以外にも独自のモデルやAPIを定義することなどが可能です。より詳しい内容は、公式ドキュメントを読んで頂くか、次回の投稿を参照ください。
Discussion