Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-usi...
Search
odanado
PRO
October 19, 2018
Programming
1
6.6k
nuxt-i18nを使ったWebサイトの多言語化 / i18n-of-web-site-using-nuxt-i18n
odanado
PRO
October 19, 2018
Tweet
Share
More Decks by odanado
See All by odanado
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
3
3.7k
@nestjs/bull の活用について
odanado
PRO
0
1.4k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
1.1k
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
2k
nuxtjs-axios-error-handling
odanado
PRO
0
330
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
390
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
220
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
470
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.2k
Other Decks in Programming
See All in Programming
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
WordPress Playground for Developers
iambherulal
0
120
PsySHから紐解くREPLの仕組み
muno92
PRO
1
520
体得しよう!RSA暗号の原理と解読
laysakura
3
530
Return of the Full-Stack Developer
simas
PRO
1
310
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
SQL Server ベクトル検索
odashinsuke
0
110
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.2k
ミリしらMCP勉強会
watany
2
320
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
3k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Building Applications with DynamoDB
mza
94
6.3k
Into the Great Unknown - MozCon
thekraken
36
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.4k
Docker and Python
trallard
44
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
For a Future-Friendly Web
brad_frost
176
9.6k
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