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の話
3. None

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機能のみ

41. None