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.4k
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
@nestjs/bull の活用について
odanado
PRO
0
1.2k
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
950
Vue.observable で状態管理 / vue-observable-state-management
odanado
PRO
4
1.9k
nuxtjs-axios-error-handling
odanado
PRO
0
280
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
330
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
190
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
430
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.1k
JavaScript + Dockerの知見 / knowledge-of-docker-in-javascript
odanado
PRO
9
53k
Other Decks in Programming
See All in Programming
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
私のEbitengineの第一歩
qt_luigi
0
450
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Jakarta EE meets AI
ivargrimstad
0
390
XStateでReactに秩序を与えたい
gizm000
0
730
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
オートマトン学習しろ / Do automata learning
makenowjust
3
130
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
220
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
650
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
What's in a price? How to price your products and services
michaelherold
242
11k
Building Your Own Lightsaber
phodgson
101
6k
Practical Orchestrator
shlominoach
185
10k
BBQ
matthewcrist
83
9.2k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
What's new in Ruby 2.0
geeforr
340
31k
Designing with Data
zakiwarfel
98
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
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