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

by odanado

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

i18nとは

Slide 7

Slide 7 text

i18nとは • internationalization (国際化) の略 • ソフトウェアを様々な⾔語や地域に  対応させること • ⾔語, 時差, 名詞の複数形, etc

Slide 8

Slide 8 text

Vue I18n

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Vue I18n

Slide 11

Slide 11 text

Vue I18n

Slide 12

Slide 12 text

Vue I18n • 多⾔語化の例 • 各⾔語の情報をmessagesに⼊れておけば  ⾔語によって⾃動的に切り替わる

Slide 13

Slide 13 text

nuxtでもi18nしたい！

Slide 14

Slide 14 text

nuxt-community/nuxt-i18n

Slide 15

Slide 15 text

Nuxt i18n [検索] vue-i18nをnuxtで使う話  (not nuxt-i18n)

Slide 16

Slide 16 text

nuxt-i18nの⽇本語の  情報がない！

Slide 17

Slide 17 text

公式ドキュメントに  p-rを投げるか？？

Slide 18

Slide 18 text

ってつもりで  発表する予定だった

Slide 19

Slide 19 text

Nuxt i18n [検索] ⼀昨⽇にnuxt-i18nについて  qiitaを書いた⼈いた

Slide 20

Slide 20 text

nuxt-i18nの機能

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ルーティング⾃動⽣成

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

便利関数

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

SEO対策

Slide 30

Slide 30 text

nuxt-i18nの機能 SEO対策 • hreﬂang、og:locale、  og:locale:alternate を⾃動⽣成 • 検索エンジンにWebページが  どの⾔語に対応しているか教える

Slide 31

Slide 31 text

ハマった点

Slide 32

Slide 32 text

SEO対策を有効にすると  headタグの中⾝が消える

Slide 33

Slide 33 text

ハマった点 SEO対策 • SEO対策を有効にすると  headタグの中⾝が消える • script, styleタグが削除される • レイアウトが⼤幅に崩れる • やばい

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ルーティング⾃動⽣成の  戦略の少なさ

Slide 36

Slide 36 text

ハマった点ルーティング⽣成戦略 • preﬁx_except_default • / => 200 • /en => 404 • /ja => 200 • preﬁx • / => 404 • /en => 200 • /ja => 200 デフォルト⾔語はen これら全てに  アクセス出来てほしい

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

ハマった点ルーティング⽣成戦略 • preﬁx_and_default • / => 200 • /en => 200 • /ja => 200

Slide 39

Slide 39 text

まとめ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

No content