nuxt-i18nを使った Webサイトの多⾔語化株式会社モバイルファクトリーエンジニア @odan32402018.10.18 NuxtMeetUp#5
View Slide
⾃⼰紹介• Twitter @odan3240• 所属 モバイルファクトリー• Uniqys Networkのサイト開発• https://uniqys.net• 今⽇話すこと• この時に使⽤した nuxt-i18nの話
⾃⼰紹介• Twitter @odan3240• 所属 モバイルファクトリー• Uniqys Networkのサイト開発• https://uniqys.net• 今⽇のこの時に使⽤した nuxt-i18nの話
• i18nとは• Vue I18n• nuxt-i18nの機能• ハマった点
i18nとは
i18nとは• internationalization (国際化) の略• ソフトウェアを様々な⾔語や地域に 対応させること• ⾔語, 時差, 名詞の複数形, etc
Vue I18n
Vue I18n• http://kazupon.github.io/vue-i18n/
Vue I18n• 多⾔語化の例• 各⾔語の情報をmessagesに⼊れておけば ⾔語によって⾃動的に切り替わる
nuxtでもi18nしたい！
nuxt-community/nuxt-i18n
Nuxt i18n [検索]vue-i18nをnuxtで使う話 (not nuxt-i18n)
nuxt-i18nの⽇本語の 情報がない！
公式ドキュメントに p-rを投げるか？？
ってつもりで 発表する予定だった
Nuxt i18n [検索]⼀昨⽇にnuxt-i18nについて qiitaを書いた⼈いた
nuxt-i18nの機能
nuxt-i18nの機能• vue-i18nのtranslationの機能のみ• ルーティング⾃動⽣成• 便利関数• SEO対策
ルーティング⾃動⽣成
nuxt-i18nの機能 ルーティング⾃動⽣成設定ファイル
nuxt-i18nの機能 ルーティング⾃動⽣成ディレクトリ構造
nuxt-i18nの機能 ルーティング⾃動⽣成⾃動⽣成されるルーティング
便利関数
nuxt-i18nの機能 便利関数よしなにpathを⽣成する
nuxt-i18nの機能 便利関数⾔語切替ボタンの実装で使⽤
SEO対策
nuxt-i18nの機能 SEO対策• hreflang、og:locale、 og:locale:alternate を⾃動⽣成• 検索エンジンにWebページが どの⾔語に対応しているか教える
ハマった点
SEO対策を有効にすると headタグの中⾝が消える
ハマった点 SEO対策• SEO対策を有効にすると headタグの中⾝が消える• script, styleタグが削除される• レイアウトが⼤幅に崩れる• やばい
ハマった点 SEO対策• issueがある• https://github.com/nuxt-community/nuxt-i18n/issues/100• 原因不明! Help!• ⼿元で再現する時としない時がある
ルーティング⾃動⽣成の 戦略の少なさ
ハマった点 ルーティング⽣成戦略• prefix_except_default• / => 200• /en => 404• /ja => 200• prefix• / => 404• /en => 200• /ja => 200デフォルト⾔語はenこれら全てに アクセス出来てほしい
ハマった点 ルーティング⽣成戦略新しい戦略を追加するPull Requestを投げたらマージされた
ハマった点 ルーティング⽣成戦略• prefix_and_default• / => 200• /en => 200• /ja => 200
まとめ
まとめ• Webサイトをnuxtで制作した• 多⾔語化のためにnuxt-i18nを使⽤した• nuxtではnuxt-i18nを使⽤すると良い• しかしほぼtranslation機能のみ
odanado
gotok365
little_rubyist
microcms
77web
twada
konokenj
ryu_hu03
syumai
pyama86
gishi_yama
ivargrimstad
myahagi
jensimmons
chriscoyier
mojombo
nonsquared
davidbonilla
cromwellryan
samlambert
ufuk
holman
ddemaree
reverentgeek