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

00766b8e1f9c2665cf7fd29f9cf558df?s=47 odanado
October 19, 2018

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

00766b8e1f9c2665cf7fd29f9cf558df?s=128

odanado

October 19, 2018
Tweet

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