Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
October 19, 2018
Programming
1
5.3k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
October 19, 2018
Tweet
Share
More Decks by odanado
See All by odanado
Vue.observable で状態管理 / vue-observable-state-management
odanado
4
1.2k
nuxtjs-axios-error-handling
odanado
0
140
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
0
230
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
0
110
最近のweb3.js事情 / bc.tokyo-19
odanado
2
330
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
1
1.8k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
9
51k
aws-cdk触ってみた / try-aws-cdk
odanado
0
95
【poke2vec】ポケモンの役割ベクトルの 学習とその分析・可視化 / pyconjp-poke2vec
odanado
3
4.8k
Other Decks in Programming
See All in Programming
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
150
Let's make a contract: the art of designing a Java API
mariofusco
0
160
もしも、 上司に鬼退治を命じられたら~プロジェクト計画編~
higuuu
0
290
GraphQL+KMM開発でわかったこと / What we learned from GraphQL+KMM development
kubode
0
130
확장 가능한 테라폼 코드 관리 (Scalable Terraform Code Management)
posquit0
1
320
モデリングの費用対効果
masuda220
PRO
2
710
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
130
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
710
2022 FrontEnd Training
mixi_engineers
1
280
LegalForceの契約データを脅かすリスクの排除と 開発速度の向上をどうやって両立したか
aibou
0
210
Oculus Interaction SDK 概説 / xrdnk-caunity-LT4
xrdnk
0
210
Monadic Java
mariofusco
4
260
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
890
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
GitHub's CSS Performance
jonrohan
1020
410k
Happy Clients
brianwarren
89
5.5k
How STYLIGHT went responsive
nonsquared
85
3.9k
Facilitating Awesome Meetings
lara
29
3.9k
The Cult of Friendly URLs
andyhume
68
4.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
A designer walks into a library…
pauljervisheath
196
16k
Transcript
nuxt-i18nを使った Webサイトの多⾔語化 株式会社モバイルファクトリー エンジニア @odan3240 2018.10.18 NuxtMeetUp#5
⾃⼰紹介 • Twitter @odan3240 • 所属 モバイルファクトリー • Uniqys Networkのサイト開発
• https://uniqys.net • 今⽇話すこと • この時に使⽤した nuxt-i18nの話
None
⾃⼰紹介 • 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
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機能のみ
None