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

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

odanado
October 19, 2018

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

odanado

October 19, 2018
Tweet

More Decks by odanado

Other Decks in Programming

Transcript

  1. nuxt-i18nを使った

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  8. nuxtでもi18nしたい!

    View full-size slide

  9. nuxt-community/nuxt-i18n

    View full-size slide

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

    (not nuxt-i18n)

    View full-size slide

  11. nuxt-i18nの⽇本語の

    情報がない!

    View full-size slide

  12. 公式ドキュメントに

    p-rを投げるか??

    View full-size slide

  13. ってつもりで

    発表する予定だった

    View full-size slide

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

    qiitaを書いた⼈いた

    View full-size slide

  15. nuxt-i18nの機能

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. 便利関数

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

  25. ハマった点

    View full-size slide

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

    headタグの中⾝が消える

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    戦略の少なさ

    View full-size slide

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

    アクセス出来てほしい

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide