Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

odanado
PRO
October 19, 2018

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

odanado
PRO

October 19, 2018
Tweet

More Decks by odanado

Other Decks in Programming

Transcript

  1. nuxt-i18nを使った

    Webサイトの多⾔語化
    株式会社モバイルファクトリー
    エンジニア @odan3240
    2018.10.18 NuxtMeetUp#5

    View Slide

  2. ⾃⼰紹介
    • Twitter @odan3240
    • 所属 モバイルファクトリー
    • Uniqys Networkのサイト開発
    • https://uniqys.net
    • 今⽇話すこと
    • この時に使⽤した nuxt-i18nの話

    View Slide

  3. View Slide

  4. ⾃⼰紹介
    • Twitter @odan3240
    • 所属 モバイルファクトリー
    • Uniqys Networkのサイト開発
    • https://uniqys.net
    • 今⽇のこの時に使⽤した nuxt-i18nの話

    View Slide

  5. • i18nとは
    • Vue I18n
    • nuxt-i18nの機能
    • ハマった点

    View Slide

  6. i18nとは

    View Slide

  7. i18nとは
    • internationalization (国際化) の略
    • ソフトウェアを様々な⾔語や地域に

    対応させること
    • ⾔語, 時差, 名詞の複数形, etc

    View Slide

  8. Vue I18n

    View Slide

  9. Vue I18n
    • http://kazupon.github.io/vue-i18n/

    View Slide

  10. Vue I18n

    View Slide

  11. Vue I18n

    View Slide

  12. Vue I18n
    • 多⾔語化の例
    • 各⾔語の情報をmessagesに⼊れておけば

    ⾔語によって⾃動的に切り替わる

    View Slide

  13. nuxtでもi18nしたい!

    View Slide

  14. nuxt-community/nuxt-i18n

    View Slide

  15. Nuxt i18n [検索]
    vue-i18nをnuxtで使う話

    (not nuxt-i18n)

    View Slide

  16. nuxt-i18nの⽇本語の

    情報がない!

    View Slide

  17. 公式ドキュメントに

    p-rを投げるか??

    View Slide

  18. ってつもりで

    発表する予定だった

    View Slide

  19. Nuxt i18n [検索]
    ⼀昨⽇にnuxt-i18nについて

    qiitaを書いた⼈いた

    View Slide

  20. nuxt-i18nの機能

    View Slide

  21. nuxt-i18nの機能
    • vue-i18nのtranslationの機能のみ
    • ルーティング⾃動⽣成
    • 便利関数
    • SEO対策

    View Slide

  22. ルーティング⾃動⽣成

    View Slide

  23. nuxt-i18nの機能 ルーティング⾃動⽣成
    設定ファイル

    View Slide

  24. nuxt-i18nの機能 ルーティング⾃動⽣成
    ディレクトリ構造

    View Slide

  25. nuxt-i18nの機能 ルーティング⾃動⽣成
    ⾃動⽣成されるルーティング

    View Slide

  26. 便利関数

    View Slide

  27. nuxt-i18nの機能 便利関数
    よしなにpathを⽣成する

    View Slide

  28. nuxt-i18nの機能 便利関数
    ⾔語切替ボタンの実装で使⽤

    View Slide

  29. SEO対策

    View Slide

  30. nuxt-i18nの機能 SEO対策
    • hreflang、og:locale、

    og:locale:alternate を⾃動⽣成
    • 検索エンジンにWebページが

    どの⾔語に対応しているか教える

    View Slide

  31. ハマった点

    View Slide

  32. SEO対策を有効にすると

    headタグの中⾝が消える

    View Slide

  33. ハマった点 SEO対策
    • SEO対策を有効にすると

    headタグの中⾝が消える
    • script, styleタグが削除される
    • レイアウトが⼤幅に崩れる
    • やばい

    View Slide

  34. ハマった点 SEO対策
    • issueがある
    • https://github.com/nuxt-community/nuxt-i18n/issues/
    100
    • 原因不明! Help!
    • ⼿元で再現する時としない時がある

    View Slide

  35. ルーティング⾃動⽣成の

    戦略の少なさ

    View Slide

  36. ハマった点 ルーティング⽣成戦略
    • prefix_except_default
    • / => 200
    • /en => 404
    • /ja => 200
    • prefix
    • / => 404
    • /en => 200
    • /ja => 200
    デフォルト⾔語はen
    これら全てに

    アクセス出来てほしい

    View Slide

  37. ハマった点 ルーティング⽣成戦略
    新しい戦略を追加するPull Requestを投げたらマージされた

    View Slide

  38. ハマった点 ルーティング⽣成戦略
    • prefix_and_default
    • / => 200
    • /en => 200
    • /ja => 200

    View Slide

  39. まとめ

    View Slide

  40. まとめ
    • Webサイトをnuxtで制作した
    • 多⾔語化のためにnuxt-i18nを使⽤した
    • nuxtではnuxt-i18nを使⽤すると良い
    • しかしほぼtranslation機能のみ

    View Slide

  41. View Slide