Laravel、Nuxtの翻訳パッケージを使う
Laravelの翻訳パッケージの使用について……\ 以前作った翻訳パッケージはかなり不十分だったし、単純にあまり良くなかった…… それで新しく作り直そうと思ったけれど、実際、今でもこんなに時間がかかっているのに、わざわざ自分で作る必要があるのだろうかと思った…… それで、パッケージを使うことにした……\ <https:
GGAMI
Laravelの翻訳パッケージの使用について……\ 以前作った翻訳パッケージはかなり不十分だったし、単純にあまり良くなかった…… それで新しく作り直そうと思ったけれど、実際、今でもこんなに時間がかかっているのに、わざわざ自分で作る必要があるのだろうかと思った…… それで、パッケージを使うことにした……\ <https:
Laravelの翻訳パッケージの使用について……
以前作った翻訳パッケージはかなり不十分だったし、単純にあまり良くなかった……
それで新しく作り直そうと思ったけれど、実際、今でもこんなに時間がかかっているのに、わざわざ自分で作る必要があるのだろうかと思った……
それで、パッケージを使うことにした……
https://github.com/joedixon/laravel-translation
https://github.com/barryvdh/laravel-translation-manager
どちらかを選ぼうと思ったが、単純に後者を選んだ…… 前者のほうがすっきりしてはいるけれど、
それでも後者を選んだのは、思ったよりLaravelの翻訳パッケージが途中で開発停止になることが多かったからだ……
実際、後者も同じようなものだと思うけれど……
翻訳パッケージはdev環境でのみ使うので、
composer require --dev barryvdh/laravel-translation-manager
composer require --dev martinlindhe/laravel-vue-i18n-generatorでインストールした……
それからNuxt.jsにはvue i18nを適用しようと思っていたのだけれど……ちょうど……
https://www.larablocks.com/package/martinlindhe/laravel-vue-i18n-generator
これを見つけた……
これを使うと、Laravelで翻訳ファイルを作ったあとに、翻訳ファイルをjsファイルに変換してくれる……
あとは、そのjsファイルをフロントエンド側に入れればいい……
でも……Nuxt-i18nで問題が発生することになる……
https://nuxt-community.github.io/nuxt-i18n/
を使うことにしたのだけれど……
これが思ったより問題がある……いや、問題と言うべきかな……とりあえず……大きな問題はないのだけれど……
$rotue.pushでpathを指定して遷移すると、paramsが送れないということだ……
でも、このNuxt-i18nではlocalePathをpathとしてサポートしている。
そうなると、Nameで送らないといけないのに……それができないということだ……
データをどうやって送ればいいんだろう……
https://router.vuejs.org/guide/essentials/navigation.html
ここを見ればわかるけれど、pathではparamsを送れない……
それで、仕方なく裏技的な方法を使った……この問題はrouteで意図的に提供されている機能ではないので……実際、正しい方法ではないと思う。それでもまあ……データを一度は送らないといけないのだから、仕方ないよね……
この方法は、storeに保存してからpushするのが正しい方法のようだ……（ふむふむふむ……）
i18n: {
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
// alwaysRedirect: true,
// fallbackLocale: 'en'
},
seo: true,
locales: [
{
code: 'en',
iso: 'en-US',
name: 'English',
css: 'flag-icon-us',
file: "en.js"
},
{
code: 'ko',
iso: 'ko',
name: '한국어',
css: 'flag-icon-kr',
file: "ko.js"
},
{
code: 'ja',
iso: 'ja',
name: '日本',
css: 'flag-icon-jp',
file: "ja.js"
}
],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
},
lazy: true,
langDir: 'lang/',
},だいたいこんな感じでnuxt i18nを設定した……
対応言語がたくさんあるわけではないけれど、ファイルごとに分けたほうがよさそうだったので、こうした……
実際、ブラウザの言語に合わせて設定される。enとkoを同時に読み込み、そのあと別の言語を選ぶと、新しい言語を読み込む。
まずはLaravelで翻訳パッケージを使って作業しないといけないので……
https://github.com/caouecs/Laravel-lang
からen、ko、jaをダウンロードして入れておいた……
これから少しずつ作業していかないと……
Laravelの翻訳ページで作業を終えたら、ファイルのエクスポートでjsにしてから……
php artisan vue-i18n:generate --multi-localesコマンドを入力してen.js、ko.js、ja.jsに変換し、それをまたフロントエンドに移せばいい……今まで一生懸命作業してきたフロントエンドに翻訳を適用しているところだ……
Auth認証リンクをバックエンドで作成し、メールで送ることになる……
domain/auth/JDJ5JDEwJGtLQmxmSkprTy95VWRkd1gzQU55V08vS2RLU29kLnlEOWI3NzU1YjYwLzZaRDh6dmtOVVF1
でも、このリンクからアクセスすると、enを基準にアクセスする……ただ、何もないChromeの新しいシークレットウィンドウで開くと、自動的にブラウザに合わせてkoに変更してから接続してくれるのだけれど……
すでにkoのCookieを持っている状態でアクセスすると、単にenのURLとして認識されて……enで表示されてしまう問題が発生する……
この問題について話してみたけれど……うーん……Authページにアクセスしたとき、初回のアクセスならブラウザの言語に自動で設定されるものの、2回目のアクセスが問題だ……ここでalwaysRedirect: trueを指定すると、また問題が起きるし……
単純に……AuthページでCookieの値を確認し、その値に応じてリダイレクトするのがよいという回答をもらったので……むしろ自分でCookieの値に応じてリダイレクトする処理を作ろうと思う……
翻訳作業はだいたいうまく進んでいるようだ……
- フロントエンドに翻訳を適用して……
- vee-validateに翻訳を適用して……
- axiosでAPIを呼び出すときに、headerに言語設定の値を送って……
- Laravelでheaderの値に応じて言語を設定するミドルウェアを作って……
- バックエンドの言語設定に応じた翻訳を出力して……
- route pushのときにstoreにデータを入れて送るように変更して……
- Auth認証リンクを開いたときに、Cookieの言語設定値に応じてリダイレクトを実行して……
ここまでやれば……翻訳作業が終わりそうだ……
これが終わったら……Laravelで画像をアップロードして、管理して、表示する機能を開発しないといけない……
明日にはシンガポール旅行に行くのに……い……つ……終わらせるんだろう……