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
2
3.4k
@nestjs/bull の活用について
odanado
PRO
0
1.3k
クラウド 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
310
ブロックチェーンアプリのトランザクションに対するデータ分析 / PyCon-JP-2019
odanado
PRO
0
360
スマートコントラクトに対する既知の攻撃とその対策 / bc.tokyo-21
odanado
PRO
0
210
最近のweb3.js事情 / bc.tokyo-19
odanado
PRO
2
460
YAPC::Tokyo 2019に スタッフ参加してみて / kichijojipm-18
odanado
PRO
1
2.2k
Other Decks in Programming
See All in Programming
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
13
2.2k
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.3k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
0
140
Azure AI Foundryのご紹介
qt_luigi
1
190
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
130
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
快速入門可觀測性
blueswen
0
500
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
7.7k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
410
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
GitHub's CSS Performance
jonrohan
1030
460k
What's in a price? How to price your products and services
michaelherold
244
12k
Bash Introduction
62gerente
610
210k
Speed Design
sergeychernyshev
25
740
Statistics for Hackers
jakevdp
797
220k
The Language of Interfaces
destraynor
155
24k
How to Ace a Technical Interview
jacobian
276
23k
Optimising Largest Contentful Paint
csswizardry
33
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
A Philosophy of Restraint
colly
203
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