necco Note
WeglotでSTUDIOサイトを多言語対応しよう!
- Web Development
ウェブサイトを運営していて、「海外からの訪問者にも対応したいけど、どうやって多言語対応すればいいの?」と悩んだことはありませんか?特にSTUDIOの場合は、多言語に対応する機能がないため、どのようにして実現するかが課題となります。
そこで、今回は、翻訳サービスのWeglotを使って、STUDIOサイトを簡易的に多言語対応する方法をご紹介します。
右下に言語切り替えが表示され、英語を選択するとコンテンツを英語に翻訳できる
制約
- カスタムコードを利用するため、STUDIOはStarter以上のプランが必要です。
- Weglotは無料でも利用できますが、翻訳できる言語、文字数やPV数などの上限があるため、実用時にはサイト規模に応じて有料プランの契約をお勧めします。
- 翻訳後のテキストには、原則としてウェブフォントは適用されません。
- 言語スイッチャーはフローティング表示(fixed)のみ対応しています。
- CMSを利用している場合、表示のタイミングによって、まれに一部テキストが翻訳されないこともあるようです。
Weglotとは
Weglotは、ウェブサイトを多言語対応するための翻訳プラットフォームです。Weglotはウェブサイトのコンテンツを自動的に検出し、翻訳テキストを生成してくれるため、手動で翻訳する手間を省けます。どのようなサイトにも対応していますので、もちろん、STUDIO以外のサイトでも利用できます。また、WordPressプラグインやShopifyアプリなど、他のプラットフォームに向けた連携もあります。
Weglotの利用方式について
Weglotでは、翻訳機能の導入方法として、(1)リバースプロキシを利用する方式と、(2)JavaScriptのみを利用する方式が用意されています。
本来であれば、リバースプロキシを利用するほうが何かと便利でおすすめなのですが、私が試した限りでは、STUDIOではリバースプロキシを利用する方式では翻訳機能を利用できませんでした。
利用できなかった例
- サブドメイン型:ページの内容が全く翻訳されませんでした。
- サブディレクトリ型:他の言語のページを表示しようとすると、必ず日本語ページにリダイレクトされてしまい、目的の言語のページを表示できませんでした。
このため、今回は(2)のJavaScriptのみを利用する方式をご紹介します。
JavaScriptのみを利用する方式のデメリット
JavaScriptのみを利用する方式のデメリットは「ページのコンテンツを同URLのまま動的に翻訳するため、翻訳版のページが検索エンジンにインデックスされない」ことです。
もし翻訳版のページを検索エンジンにインデックスさせたい場合は、他のサービスを試すか、もしくは手動で他の言語のページを作成してリンクし合う、という解決策になります。 なお、同種の有名サービスの一つである、GTranslateは、STUDIOでは動作しないことを確認済です😞
Weglotに登録する
Weglotのサイトにアクセスし、「無料トライアル」をクリックします。
メールアドレスとパスワードを入力し、「Sign up」をクリックして、登録します。
登録が完了すると、Weglotからメールアドレスの確認メールが届きます。
メール文中の確認リンクをクリックしたら、手続きは完了です。
JavaScriptを利用してWeglotを導入する
登録が完了すると、新しく「プロジェクト」を作成する画面が表示されます。
プロジェクト名と、プロジェクトの説明文(任意)を入力して「Next」に進みます。
なお、これから設定する他の項目も含めて、後から設定画面でも変更できます。
言語設定
翻訳元のページの言語(ここでは日本語なのでJapanese)と、翻訳先の言語(ここではEnglish)を選択し、「Next」 で次に進みます。
サイト設定
翻訳したいWebサイトのURLを入力します。
ここで、Nextボタンではなく「connect Weglot to your website without it」のリンクをクリックします。
コードをSTUDIOに配置する
Weglotに表示されている埋め込みコードを、STUDIOサイトに配置します。
STUDIOでサイトを開き、サイト設定を開いて、「カスタムコード」にコードをペーストします。
※head内でもbody内でもどちらでも動作します
サイトを更新(公開)する
コードを入力できたら、サイトを「更新(公開)」します。
公開処理が終わると、言語スイッチャーが画面の右下に表示されるようになります。
なお、カスタムコードはプレビューには反映されませんので、必ず公開サイトを確認します。
Weglotの設定を変更する
STUDIOで制作したサイトは、SPAという仕組みで構成されているため、Weglotのデフォルト設定のままでは、ページを遷移した後に、翻訳の処理がかかりません。ページ遷移後に翻訳の処理がかかるように、Weglotの設定を変更します。
Weglotの管理画面にアクセスし、以下の設定を行います。
Dynamic elementを追加する
設定(Settings)のApp Settingsをクリックし、「Add Dynamic」ボタンをクリックします。
モーダルが表示されるので、SELECTORに「body」と入力し、「Save」をクリックします。
上記の設定により、ページ遷移でページ(body)の中身が書きかわったタイミングで、きちんと翻訳処理をかけられるようになりました。
表示位置を整える
これまでの設定でページの翻訳ができるようになりましたが、デフォルト設定では言語スイッチャーが画面の下辺にピッタリとくっついていて少し見栄えが悪いので、カスタムCSSで調整します。
Language Switcherの「CUSTOM CSS」に下記のコードを入力し、Save changesボタンをクリックします。
.country-selector {
margin-bottom: 16px;
}
注意:Switcher Editorは使わないようにしましょう。
同画面内に「Switcher Editor」ボタンがあり、これをクリックすると言語スイッチャーの見た目や表示位置を変更できるようになっていますが、この機能は使わないようにしましょう。
STUDIOに設置する場合、Switcher Editorで言語スイッチャーの位置を変更してしまうと、ページ遷移後に言語スイッチャーが表示されなくなってしまいます!
これは、Weglotがスイッチャーの要素を指定の場所に移動した後に、ページ遷移が行われることで、STUDIOによって指定の要素の内容が書き換えられ、スイッチャー要素が消滅してしまうために起こります。
翻訳内容を編集する
Weglotでは自動で翻訳してくれますが、固有名詞の翻訳など、調整したい箇所がある場合、手動での翻訳も追加できます。翻訳は、LanguagesとVisual Editorの2つの方法で編集できるようになっています。
Languagesから編集する
Languagesから編集すると、編集したい単語を検索できます。ページで利用されている単語がリストとして表示されるので、複数の翻訳をまとめて変更したい場合に便利です。
ビジュアルエディタで編集する
ビジュアルエディタを使うと、実際のページを表示しながら、翻訳語句を書き換えられます。ページを全体的にチェックしながら書き換えたい場合に便利です。
終わりに
今回は、STUDIOでWeglotを活用して多言語対応を行う手順についてご紹介しました。
こういったツールを利用しなくても、ブラウザの自動翻訳機能を使えば閲覧者側での翻訳は可能ですが、固有名詞など、どうしても誤訳が起きやすい部分があります。Weglotの翻訳編集機能があれば、そういった誤訳を少なくできます。
Weglot以外にも、こんな翻訳ツールが利用できたよ!という例があれば、ぜひ情報をお待ちしています。
(あわよくば、無料で試せるツールだと、私も気軽に試せるので助かります)
STUDIO関連記事
以下、STUDIOに関するその他の記事です。気になるものがあれば参考にしてみてください。
- 書籍『ノーコードでつくるWebサイト ツール選定・デザイン・制作・運用が全部わかる!』を出版します
- STUDIOの認定制作パートナーになりました
- STUDIOのAPI連携を使って、特定アカウントの最新Instagram投稿一覧を表示してみよう
- さらなる外部連携やデザインカスタマイズが可能に – STUDIO の「カスタムコード」機能の活用方法
📮 お仕事のご依頼やご相談、お待ちしております。
お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。
🤝 一緒に働きませんか?
下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。
🗒 会社案内資料もご活用ください。
弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。
(2024年10月時点)
佐藤 あゆみ
Ayumi Sato
ニューヨーク生まれ。まもなく東京に移住し、1994年から2年間のオーストラリアでの生活を経て、ふたたび東京へ戻り、今も暮らす。1997年頃より趣味としてWeb制作を始め、以後も独学で学ぶ。 音楽専門学校中退後、音楽活動での成功を夢見ながら、PCパーツショップやバイク輸出入会社、楽器店など、掛け持ち含めて計20以上(?)の業種でアルバイトを重ね、ECサイトの運営管理や自社サーバの管理、プログラミングなども学ぶ。音楽活動を展開する中で、集客やフライヤー制作、プロモーションビデオ制作を行い、周辺技術を身につけるきっかけとなるも、2011年頃に区切りをつけ、ウェブ制作で生計を立てることを決意。その後は画廊やウェブ制作会社などで勤め、2014〜2022年まではフリーランスとして活動。2018年より、CSS NiteやBAU-YAなどのイベント、スクールにて登壇。2019年に「HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門」を出版。 趣味はガジェットいじり&新しいサービスを試すこと。