多言語Webサイトを作る上での考慮点
watsuyo_2今回は、HTML や JavaScript の仕様を知る意味でも、特定のライブラリを使用せずに国際化する方法を調べる。
MDN の国際化に関するページ には、以下の 5 つの考慮点が挙げられている。
文字セット(通常はUnicode)
測定単位(通貨、°C/°F, km/マイル、など)
日時フォーマット
キーボードレイアウト
テキストの方向
watsuyo_2文字セット(通常はUnicode)
W3C のあらゆる言語の文字セットを掲載しているページが存在するが、既にメンテナンスされていない。
また、可能な限り UTF-8 を使用することが推奨されている。
<meta charset="utf-8">
測定単位(通貨、°C/°F, km/マイル、など)
JavaScript の標準組み込みオブジェクトである Intl.NumberFormat コンストラクター を使うことで国際化対応できる。
第一引数には、ISO 639-1 コードを指定する。
style には何の単位なのかを単位を指定する。
通貨の例
currency には、 ISO 4217 通貨コードを指定する。
const price = 99.99
const formattedPriceDe = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(price)
console.log(formattedPriceDe) // 99,99 €
const formattedPriceJa = new Intl.NumberFormat("ja-JP", { style: "currency", currency: "JPY" }).format(price)
console.log(formattedPriceJa) // ¥100
温度(摂氏/華氏) の例
const celsiusTemperature = 25
const fahrenheitTemperature = celsiusTemperature * 9 / 5 + 32
const celsiusFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'celsius' })
const fahrenheitFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'fahrenheit' })
const formattedCelsius = celsiusFormatter.format(celsiusTemperature)
const formattedFahrenheit = fahrenheitFormatter.format(fahrenheitTemperature)
console.log(formattedCelsius) // 25°C
console.log(formattedFahrenheit) // 77°F
距離（キロメートル/マイル）の例
const distanceInKilometers = 10
const distanceInMiles = distanceInKilometers * 0.62137119
const kilometerFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'kilometer' })
const mileFormatter = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'mile' })
const formattedKilometers = kilometerFormatter.format(distanceInKilometers)
const formattedMiles = mileFormatter.format(distanceInMiles)
console.log(formattedKilometers) // 10 km
console.log(formattedMiles) // 6.2137119 mi
日時フォーマット
日時フォーマットに関しても、JavaScript の標準組み込みオブジェクトを使用することで対応できる。
今回は、Intl.DateTimeFormat は使用する。
日付の例:
const date = new Date('2023-06-16')
const options = { year: 'numeric', month: 'long', day: 'numeric' }
const formatterJa = new Intl.DateTimeFormat('ja-JP', options)
const formattedDateJa = formatterJa.format(date)
console.log(formattedDateJa)
// 2023年6月16日
const formatter = new Intl.DateTimeFormat('en-US', options)
const formattedDate = formatter.format(date)
console.log(formattedDate)
// June 16, 2023
時刻の例:
const timeJa = new Date().toLocaleTimeString('ja-JP')
const timeEn = new Date().toLocaleTimeString('en-US')
console.log(timeJa)
// 13:24:24
console.log(timeEn)
// 1:24:24 PM
watsuyo_2キーボードレイアウト
HTML 要素の lang 属性 を使用し、ブラウザにページの言語を認識してもらう必要がある。
lang 属性には ISO 639-1 Language Codes を使用する。
<html lang="ja">
この設定によって、Google 翻訳などの機械翻訳をスムーズに行うことができる。
アクセシビリティの観点でも、スクリーンリーダーが適切な言語で読み上げるためにも大事な設定である。
SEO の観点では、Google は lang 属性を参考にしていない らしい。
watsuyo_2テキストの方向
HTMLの dir 属性にテキストの方向を指定することができる。
dir 属性のデフォルトは、ltr (left to right) となっている。
右書きの言語（アラビア語など）に対しては、right to left を表す rtl を指定する。
<html lang="ar" dir="rtl">