フリーランスになって丸２年が経ちました。
意外なことにStrapiの導入支援や開発の仕事を３件ほど頂いたのですが、管理画面のカスタマイズに関する問題がよく話題にあがります。
日本語化の問題やサイドメニューやコンテンツタイプ、フォーム部分の細かい調整はどこまで出来るんだろう？といった疑問の数々。
そんな疑問を解消すべく、この記事では管理画面を限界までカスタマイズしてみようと思います。公式ドキュメントに記載されていない方法も使っていると思います。
今回の調査にあたり、長年出来ないと思っていたコレクションタイプ等のスキーマ名の日本語化が実現できて自分としてはなかなか収穫がありました。これでStrapiの管理画面のほとんど全ての英単語を日本語に置き換えれるはずです。
本記事は結構長いです。
セットアップ
お決まりのコマンド。
npx create-strapi@latest
バージョンは5.11.2でTypeScriptを選択。
画面も作るのでUIを追加します。npm i @strapi/design-system@2.0.0-rc.18
サイドメニューの追加
プラグインを使わずに独自のページ作成＆サイドメニューを追加する場合、src/admin/app.tsxに設定を記述します。
例えば下記のコードの場合、パスが/admin/helloのsrc/admin/components/Hello.tsxコンポーネントを表示するサイドメニューが追加されます。
Userというアイコンが気になったかもしれません。標準で使えるアイコンはこちらに紹介されています。
permissionsの記述ではロールや特定の条件によって画面アクセスの制御ができますが、本記事の趣旨とずれるので割愛。
サイドメニューの削除
サイドメニューの特定のリンクを削除する、みたいな機能はおそらくありません。
しかし一部のリンクについては少し違うアプローチでサイドメニューから削除或いは非表示にすることができます。
まず、"Deploy"についてはプロジェクト直下のpackage.jsonに@strapi/plugin-cloudが指定されていると思うので記述を削除してnpm iし、再度npm run developすることで消えます。
次にMarketplace。こちらはStrapiコアのコードに入っているようなので削除することはおそらくできません。ですがSuper Adminロール以外のユーザであればMarketplaceの権限を外せば見えなくなります。
でも、どうしてもSuper AdminでMarketplaceを消したくなる時があるかもしれません。そんな時はCSSで強引に非表示にします。
src/admin/common.cssを作成し、以下のように記述します。
これでDeployとMarketplaceが見えなくなりました。
設定画面の追加
続いて、プラグインを使わず設定画面に独自の画面を追加します。先ほどと同様にsrc/admin/app.tsxを編集します。
まずは既存のGlobal Settingsの中に追加するパターン。
次に独自のセクションを作って、リンクを追加するパターン。
設定画面の削除
こちらもロールの権限によって表示／非表示を切り替えることができます。
Super Adminでどうしても非表示（削除）したい項目がある場合、サイドメニューと違って下記のように削除することも可能ですが、セクションごと削除するのはお勧めしません。
delete app.router.settings["email"]
delete app.router.settings["hello-custom-setting"]
delete app.router.settings["users-permissions"]
なぜならサードパーティ製のプラグインから既存の設定セクションの中にリンクを追加するようなものがあると表示されない、もしくはエラーになるためです。特にglobal。
しかし、Overviewは設定画面におけるデフォルトの設定がされており削除してもまっさらな画面になるだけです。権限による非表示もできません。そこで、独自のコンポーネントで上書きしてそれっぽい画面にします。
Overviewの上書きができました。Overviewを上書きするとロゴの変更が出来なくなると思ったかもしれませんが、src/admin/app.tsxのconfig.auth.logoとconfig.menu.logoにパスを渡すと変更できます。
ついでに、よく見るとOverviewの右側に通知バッジと思われる丸が付いていますね。あとサイドメニューにも①が表示されています。
これはフロントのReact側からGitHubのStrapiプロジェクトのリポジトリ情報を直接参照してリリースがあれば通知が表示されます。無効にするためにはsrc/admin/app.tsxのconfig.notifications.releasesをfalseに設定します。
日本語化
中途半端なタイミングですが、ここで文言を日本語にしてみます。
src/admin/app.tsxのconfig.localesにjaを追加し、管理画面左下のプロフィール画面（/admin/me）にあるInterface languageを日本語にします。
すると半分ちょっとくらいの文言が日本語になります。
これはちょっと微妙なので、自作した日本語化プラグインをインストールします。
npm i strapi-plugin-ja-pack
※この記事を書いている途中でv5対応してなかったことを思い出してv2.0.1をリリースしました。
こちらをインストールすることで全体的に日本語になります。
また、strapi-plugin-ja-packプラグインにContent Typeのスキーマ名を日本語化する仕組みを実装しました。ここがずっと難しい部分だと思っていたので解決出来て良かった。
テーマカラーの変更
テーマに関する情報は意外と少ないのですが、公式はこちら
これだと何が必要かよく分からないのでdesign-systemのコードから見つけてきました。この辺りに書いてます。
デフォルトでは青を基調としていますが、個性を出さないように全体的にグレーにしてみました。
コレクションタイプ 一覧
コレクションタイプの一覧画面はフィルター機能が使いにくいので、独自の検索フォームを導入しても良いと思います。
一覧画面や登録／編集画面の一部はReactのコンポーネントで独自に追加する仕組みがあります。
デフォルトのフィルターは表示設定で非表示にしておけば違和感がなくなります。
コレクションタイプ 登録／編集画面
この画面は右側のウィジェット部分にコンポーネントを追加できます。
src/admin/app.tsxに下記のように記述します。
あとはsrc/admin/components/EditViewCustom.tsxにReactコンポーネントを書いていくだけです。
ついでにinjectComponentを使ったプラグインをインストールしてみました。
トップページのカスタマイズ
トップページは最近のバージョンでだいぶ管理画面っぽくなっていますが、ダッシュボードと呼ぶには少し機能不足な感じがあります。
そこでデフォルトの見た目を踏襲しつつ、画面を新規で作ります。
src/admin/app.tsxで下記のように記述します。
あとはsrc/admin/components/Dashboard.tsxにReactコンポーネントを実装していくだけです。コードはちょっと長いので割愛しますが、こんな感じに。
元々あった変更したエントリーと公開されたエントリーの所は割と良かったので、似たような感じで自作しました。しかしメディアライブラリの画像はそこに含まれていなかったので右に追加。
下が寂しかったのでなんかそれっぽいグラフを表示してみました。
まとめ
・新規で画面作れば自由度高く作れる
・ほぼ日本語にできる
・コレクションタイプの一覧／作成画面のカスタムは限定的
・レスポンシブ？それは難しい・・
久しぶりに時間取って調査したので長くなりました。色々いじったり調べたりしていて
、新しくプラグインのアイディアが幾つか出てきたのでそのうち取り組もうと思います。
