nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n

Transcript

1. nuxt-i18nを使った
 Webサイトの多⾔語化 株式会社モバイルファクトリー エンジニア @odan3240 2018.10.18 NuxtMeetUp#5
2. ⾃⼰紹介 • Twitter @odan3240 • 所属 モバイルファクトリー • Uniqys Networkのサイト開発 • https://uniqys.net • 今⽇話すこと • この時に使⽤した nuxt-i18nの話
4. ⾃⼰紹介 • Twitter @odan3240 • 所属 モバイルファクトリー • Uniqys Networkのサイト開発 • https://uniqys.net • 今⽇のこの時に使⽤した nuxt-i18nの話
5. • i18nとは • Vue I18n • nuxt-i18nの機能 • ハマった点
6. i18nとは
7. i18nとは • internationalization (国際化) の略 • ソフトウェアを様々な⾔語や地域に
 対応させること • ⾔語, 時差, 名詞の複数形, etc
8. Vue I18n
9. Vue I18n • http://kazupon.github.io/vue-i18n/
10. Vue I18n
11. Vue I18n
12. Vue I18n • 多⾔語化の例 • 各⾔語の情報をmessagesに⼊れておけば
 ⾔語によって⾃動的に切り替わる
13. nuxtでもi18nしたい！
14. nuxt-community/nuxt-i18n
15. Nuxt i18n [検索] vue-i18nをnuxtで使う話
 (not nuxt-i18n)
16. nuxt-i18nの⽇本語の
 情報がない！
17. 公式ドキュメントに
 p-rを投げるか？？
18. ってつもりで
 発表する予定だった
19. Nuxt i18n [検索] ⼀昨⽇にnuxt-i18nについて
 qiitaを書いた⼈いた
20. nuxt-i18nの機能
21. nuxt-i18nの機能 • vue-i18nのtranslationの機能のみ • ルーティング⾃動⽣成 • 便利関数 • SEO対策
22. ルーティング⾃動⽣成
23. nuxt-i18nの機能 ルーティング⾃動⽣成 設定ファイル
24. nuxt-i18nの機能 ルーティング⾃動⽣成 ディレクトリ構造
25. nuxt-i18nの機能 ルーティング⾃動⽣成 ⾃動⽣成されるルーティング
26. 便利関数
27. nuxt-i18nの機能 便利関数 よしなにpathを⽣成する
28. nuxt-i18nの機能 便利関数 ⾔語切替ボタンの実装で使⽤
29. SEO対策
30. nuxt-i18nの機能 SEO対策 • hreflang、og:locale、
 og:locale:alternate を⾃動⽣成 • 検索エンジンにWebページが
 どの⾔語に対応しているか教える
31. ハマった点
32. SEO対策を有効にすると
 headタグの中⾝が消える
33. ハマった点 SEO対策 • SEO対策を有効にすると
 headタグの中⾝が消える • script, styleタグが削除される • レイアウトが⼤幅に崩れる • やばい
34. ハマった点 SEO対策 • issueがある • https://github.com/nuxt-community/nuxt-i18n/issues/ 100 • 原因不明! Help! • ⼿元で再現する時としない時がある
35. ルーティング⾃動⽣成の
 戦略の少なさ
36. ハマった点 ルーティング⽣成戦略 • prefix_except_default • / => 200 • /en => 404 • /ja => 200 • prefix • / => 404 • /en => 200 • /ja => 200 デフォルト⾔語はen これら全てに
 アクセス出来てほしい
37. ハマった点 ルーティング⽣成戦略 新しい戦略を追加するPull Requestを投げたらマージされた
38. ハマった点 ルーティング⽣成戦略 • prefix_and_default • / => 200 • /en => 200 • /ja => 200
39. まとめ
40. まとめ • Webサイトをnuxtで制作した • 多⾔語化のためにnuxt-i18nを使⽤した • nuxtではnuxt-i18nを使⽤すると良い • しかしほぼtranslation機能のみ