Astroサイトで実現する自動翻訳システムの仕組み

導入

静的サイトジェネレータ「Astro」を用いて構築されたサイトにおいて、日本語で執筆したコンテンツを自動的に英語へ翻訳し公開する仕組みについて解説します。多言語対応を手動で行うには多大なコストがかかりますが、このシステムを導入することで運用負荷を削減し、グローバルな展開を支援することを目的としています。

システム構成

このシステムは、いくつかの主要な技術要素を連携させることで成り立っています。

• サイト構築ツール: Astroを使用し、静的なHTMLを生成します。
• CI/CD: GitHub Actionsを利用し、コードの更新からデプロイまでのパイプラインを自動化します。
• 翻訳API: DeepL APIを利用して、日本語のコンテンツを英語へ翻訳します。
• ホスティング: Cloudflare Pagesなどを活用し、生成されたサイトを公開します。
• 実行環境: 翻訳処理にはNode.js環境を用いたスクリプトが利用されます。

各要素は独立しており、GitHub Actionsを中心に統括役として機能することで、一貫した運用フローを実現しています。

翻訳・公開フロー

コンテンツが公開されるまでの流れは完全に自動化されています。

1. コンテンツ更新: 執筆者が日本語の記事を作成し、メインブランチへプッシュします。
2. ワークフロー起動: プッシュをトリガーとしてGitHub Actionsのワークフローが起動します。
3. 翻訳処理: ワークフロー内で翻訳スクリプトが実行され、変更されたファイルのみを対象にDeepL APIへリクエストを送信します。
4. ファイル生成: APIから返された翻訳結果をもとに、英語版のコンテンツファイルが自動生成されます。
5. ビルドとデプロイ: 日本語版と英語版を含めてサイト全体がビルドされ、ホスティングサービスへデプロイされて公開されます。

この一連のプロセスにより、記事更新から数分以内には多言語版の公開が完了します。

サイト構造と言語切り替え

サイト内のコンテンツ管理とURL設計は、言語ごとに明確に分離されています。

• ディレクトリ構成: 日本語記事と英語記事はそれぞれ別のディレクトリで管理されます。英語版のファイルは翻訳スクリプトによって自動生成される領域に配置されます。
• URL体系: 日本語版は通常のパス（例：/blog/）でアクセスでき、英語版は言語パスが付与されたURL（例：/en/blog/）でアクセス可能です。
• 言語切り替え: 各ページには言語切り替えコンポーネントが実装されており、ユーザーは現在のページに対応する他言語版が存在する場合、ワンクリックで言語を切り替えることができます。

運用上の注意点

自動化されたシステムとはいえ、運用にあたってはいくつかの留意点があります。

• 翻訳精度: 機械翻訳を利用しているため、文脈の誤解や専門用語の誤訳が発生する可能性があります。重要なアナウンスメントなどは、公開後に手動で確認することをお勧めします。
• API利用制限: 翻訳APIの無料プランには月間の文字数制限があります。大量のコンテンツを一度に更新する際は、制限に達しないよう計画を立てる必要があります。
• ビルド時間: 翻訳処理を含む分、通常のビルドよりも時間がかかります。ネットワーク状況やコンテンツ量によっては、デプロイ完了までに数分を要する場合があります。

まとめ

Astroサイトに自動翻訳システムを導入することで、手動翻訳の手間を削減しつつ、更新履歴の一貫性を保った多言語対応が可能になります。CI/CDパイプラインを活用し、コンテンツ更新から公開までを自動化するこのアプローチは、効率的なグローバル展開を目指す運用モデルの一つと言えます。