目次
はじめに
今回は海外製 HeadlessCMS である Strapi の管理画面における日本語化の方法について解説していきたいと思います！
自分で使う分には特段英語でも支障はないと思いますが、お客さんに気持ちよく使ってもらうことを考えると、日本語で管理画面を見れた方がいいですよね。
意外と簡単に設定できてしまうので安心してください。
ちなみに、私の Strapi の環境はv4.9.2となっております。
ソースコードでの設定
それではまずはソースコード側から設定をしていきましょう！
/src/admin/app.example.jsというファイルがあらかじめ用意されているので、これをイジっていきます。
まず、ファイル名を変更します。
example は入りません。/src/admin/app.jsこうします。
そして、中身を覗いてみましょう。
const config = {
locales: [
// 'ar',
// 'fr',
// 'cs',
// 'de',
// 'dk',
// 'es',
// 'he',
// 'id',
// 'it',
// 'ja',
// 'ko',
// 'ms',
// 'nl',
// 'no',
// 'pl',
// 'pt-BR',
// 'pt',
// 'ru',
// 'sk',
// 'sv',
// 'th',
// 'tr',
// 'uk',
// 'vi',
// 'zh-Hans',
// 'zh',
],
}
const bootstrap = (app) => {
console.log(app)
}
export default {
config,
bootstrap,
}
なんだか、めちゃくちゃ多言語対応できそうな雰囲気を感じますね...
そうです。予想通りコメントアウトを外してjaを適応してあげましょう。
するとこんな感じになります。
const config = {
locales: ['ja'],
}
const bootstrap = (app) => {
console.log(app)
}
export default {
config,
bootstrap,
}
スッキリ。
ソースコードの対応はこれでバッチリです。
設定が終わったあとは
npm run build / yarn buildをして
npm run develop / yarn developで再起動してあげるとバッチリです！！
管理画面での設定
それでは管理画面側の設定をしていきます！
まずは設定を司るSettings画面にサイドバーから遷移していきましょう。
そこからInternationalizationにいきます。
ここでAdd new localボタンをクリックして日本語を追加していきましょう！
数ある言語の中から日本語を選択してください。
ここでSaveをクリックして保存します。
そして、デフォルトにしたい場合はADVANCED SETTINGで設定しておきましょう！
すると無事設定できたのが確認できました！！
よかった...
と思いトップページを確認してみると日本語化されていなそう。
「Welcome 👋」じゃなくて「こんにちわ 👋」とか「ようこそ 👋」と表示されていてほしいところ。
実はこのままじゃダメで、一度ログインしなおす必要があるのです。
ログイン画面に戻ると右上で言語を選択できるのがわかると思います。
ここで「日本語」と選択してあげましょう。
するとどうでしょう。日本語化されているではありませんか！
私はログイン画面で設定するというのを知らず時間を無駄にしてしまったので気をつけてくださいね！
参考
さいごに
海外製だしオープンソースだし日本語化なんてできないんだろうな...と思っていたところ、意外とすんなり対応できたのはありがたいですね！
これができるだけでも個人的にStrapiを選択しない理由がだいぶ減った気はしますね。
ただ、すべてが日本語になるかというとそうでもないのですが、その辺の細かい設定も翻訳できたりするみたいなのでこだわりたい場合はその辺りも挑戦してみてもいいかもしれませんね。