💡

この記事の要点

この記事の重要ポイント

  • 1

    GADGET LAB (旧 HonoGear) の英語サポートを正式に開始しました。

  • 2

    重厚なフレームワークを使わず、`/en/` プレフィックス戦略のためにAstroのルーティングを再設計。

  • 3

    20以上のコアコンポーネント（`PostLayout`

  • 4

    `Sidebar`

  • 5

    `ReelPlayer`）を言語対応（i18n Aware）にリファクタリング。

  • 6

    グローバルな動画配信における「403 Forbidden」問題を解決するための堅牢なエラーハンドリングを実装。

Hello, World.

テクノロジーに国境はありません。素晴らしいキースイッチの打鍵感は、東京でタイプしてもサンフランシスコでタイプしても変わりません。洗練されたReactフックは、ロンドンでもソウルでも同じ課題を解決します。

長い間、 GADGET LAB （旧称：HonoGear）は日本語のみのブログでした。 AIハードウェア、エルゴノミクスなデスク環境、ソフトウェアエンジニアリングの最新情報を発信してきましたが、その知見は「言語の壁」という一つの島に閉じ込められていました。

今日、それが変わります。

英語サポート をプラットフォーム全体で正式に開始します。 これは単なる機械翻訳のミラーサイトではありません。真にグローバルなオーディエンスをサポートするために、サイトのコアアーキテクチャを完全に再設計しました。

エンジニアリングの挑戦：「ただ t("hello") を追加するだけではない」

「グローバル化する」と決めたとき、私たちはその複雑さを過小評価していました。「言語切り替えボタンを追加すればいいだろう」と。

それは間違いでした。

1. アーキテクチャの転換

単一ロケールのAstroセットアップから、 プレフィックスベースのルーティングシステム へと移行しました。

  • Before : /blog/my-keyboard (常に日本語)
  • After : /blog/my-keyboard (日本語) と /en/blog/my-keyboard (英語)

astro-i18nextのような専用のi18nフレームワークを使うか、軽量な独自ソリューションを構築するか、大いに議論しました。結果、後者を選びました。理由は パフォーマンス です。

ルーティングを手動で制御し、シンプルな辞書ベースの翻訳システム（useTranslations）を使用することで、重いi18nライブラリに伴うハイドレーションのオーバーヘッドを回避しました。 コンテンツの表面積が2倍になったにもかかわらず、Lighthouseスコアは依然として 100/100 を維持しています。

2. グレート・コンポーネント・リファクタリング

最大のハードルはUIコンポーネントでした。 PostLayout, Sidebar, ReelPlayer, Tags, Searchなど、20以上のコンポーネントがあり、それらのDNAには日本語がハードコードされていました。

私たちは「グレート・リファクタリング」を敢行し、すべてのコンポーネントが言語を検出する方法を標準化しました：

// 採用した標準パターン
const isEn = Astro.props.isEn || Astro.url.pathname.startsWith("/en");
const t = useTranslations(isEn ? "en" : "ja");

これにより、 プロダクトカード を見ているときも エラーメッセージ を見ているときも、言語がユーザーの期待と完全に一致することが保証されます。

3. 動画のレジリエンス：「Pexels 403」の悪夢

グローバルにサイトをテストしているとき、重大な問題に直面しました。動画アセットでの 403 Forbiddenエラー です。

日本のユーザーはキャッシュされた動画に問題なくアクセスできても、米国のユーザーはCDNのホットリンク保護によってブロックされることがありました。その結果、動画プレイヤー（ReelPlayer）がクラッシュし、画面に黒い虚無が残るだけとなっていました。

私たちは堅牢な 動画レジリエンス（回復力） レイヤーを実装しました：

  • エラーの捕捉 : プレイヤーは読み込みエラー（403や404など）をキャッチします。
  • フォールバックUI : クラッシュする代わりに、ローカライズされたヘルプメッセージと「再試行」ボタンを表示します。
  • ローカルホスティング : 外部CDNのポリシーに左右されず確実に配信するため、重要なアセットをローカル（/public/videos/）にホストする戦略に切り替えました。

なぜこれが重要なのか

この拡張は、単にリーチを広げるためのものではありません。 私たち自身の基準を引き上げる ためのものです。

  • 開発者のために : 私たちの技術的な深掘り（まさにこの記事のような！）を、世界中の開発者コミュニティと共有できます。
  • ガジェット愛好家のために : 最新のテック（キーボード、オーディオ、AIハードウェア）の公平でエンジニアリング視点のレビューを、世界中のオーディエンスに届けられます。
  • クリエイターのために : 私たちの「シネマティック・デスクセットアップ」の哲学や動画制作のワークフローを、あらゆる場所のクリエイターと共有できます。

違いを体験してください

もしあなたが今、英語の記事を読んでいるなら、すでにフェンスの向こう側にいます。しかし、ヘッダーの言語スイッチを切り替えてみてください。サイト全体――コンテンツ、UI、ナビゲーション――がシームレスに適応する様子を確認できます。

私たちはまだ始まったばかりです。 次のフェーズでは、 AI駆動の「Codex」パイプライン を洗練させ、翻訳が単なる文字通りの意味だけでなく、ニュアンスやトーンまで捉えられるようにすることを目指しています。

グローバルになったGADGET LABへようこそ。 一緒に素晴らしいものを作りましょう。

# astro # i18n # engineering # react