Studioの多言語化を、スプレッドシートとGASで実装する方法

Studioで多言語サイトを作る3つの方法では、プロジェクトの構成を分けて多言語サイトを作る方法を紹介しました。この記事では、プロジェクトを分けずに、カスタムコードだけで実現する応用的な方法を紹介します。

Googleスプレッドシートを翻訳の管理場所にし、Google Apps Script（GAS）経由でStudio側に届ける「ID差し替え方式」と呼べる構成です。翻訳の追加・修正がスプレッドシートの編集だけで完結するのが特徴です。

全体の仕組み——スプレッドシート→GAS→Studio

仕組みは3段階です。まず、翻訳したい文言を「翻訳マスタ」としてスプレッドシートにまとめます。次に、GAS（スプレッドシートに紐づけて動かせる簡易プログラム）が、そのスプレッドシートの中身をWeb上から読み取れる形（JSON）に変換して配信します。最後に、Studio側に仕込んだ短いスクリプトが、そのデータを取得し、あらかじめ振っておいたIDと一致する要素の文字を書き換えます。

この構成の最大の特徴は、翻訳の中身をStudioの外（スプレッドシート）で完結して管理できることです。翻訳を直したいときも、Studioを開き直す必要がありません。

スプレッドシート側でやること

1行につき1つの文言、1列につき1つの言語、という表を作ります。「見出しの文字」「ボタンの文字」など、差し替えたい文言ごとに、日本語・英語（必要であれば他の言語も）を横に並べて入力します。

各行には、あとでStudio側のIDと突き合わせるための「キー」も必要です。半角英数字とアンダースコアだけを使い、「ページ名_要素名」のように命名しておくと、あとから見返したときに迷いません。

Studio側でやること

差し替えたい要素を選び、右パネルの設定からIDを入力します。Studioでは任意のdata属性を追加することはできませんが、IDであれば要素ごとに設定できます。このIDを、スプレッドシートのキーと完全に一致させておくことが、この方式の要になります。

あとは、サイト設定のカスタムコード欄に、データを取得してIDが一致する要素の文字を書き換える、という短いスクリプトを1つ貼るだけです。ページごとに何かを設定し直す必要はありません。

言語の切り替えは、URLのクエリで行う

「日本語」「English」のようなボタンを、それぞれ「今のURLに?lang=enのような文字列を付け加えたリンク」として設定しておきます。訪問者がボタンを押すと、そのクエリの値に応じて、スクリプトが該当する言語の文字を表示する、という流れです。

この方法のメリットと、知っておきたい制限

翻訳の運用を軽くできる反面、検索エンジンへの見え方には注意が必要です。

• メリット：翻訳の追加・修正は、スプレッドシートを直すだけで済む
• メリット：Studio側の編集はほとんど発生せず、ノーコードのまま拡張できる
• 制限：同じURLの中で文字が差し替わる仕組みのため、言語ごとに独立したURLにはならず、多言語版そのものが検索結果に見つけてもらいにくい

まとめ

この方式は、まず手早く多言語対応を始めたい場合や、翻訳の更新頻度が高いサイトに向いています。検索エンジンからの流入も重視したくなったタイミングで、Studioで多言語サイトを作る3つの方法で紹介した、プロジェクトを分けてサブドメイン・サブディレクトリで公開する構成への発展を検討するとよいでしょう。