【無料で多言語対応】Translation Labの使い方【Shopifyアプリ】

こんにちは、たかぼー(@taka_forward)です。

この記事では、Shopifyで多言語対応する際に使用するアプリ：Translation Labの使い方を解説していきます。

ペンギン

多言語対応のアプリって「langify」「LangShop」とかが有名ですけど、翻訳量があまりないし、コストを抑えたいのでできれば無料のもので対応したいんですが…

たかぼー

この記事に沿ってTranslation Labを使えばそのお悩み解決できますよ！

<この記事を読むことのメリット>
①　Translation Labを使った翻訳のやり方がわかる
②　Translation Labで言語変更メニューの作り方がわかる
②　多言語対応アプリについて知ることができる

<こんな人におすすめ>
①　Shopifyでの多言語対応アプリをどれにしようか迷っている人
②　Translation Labの使いやすさを知りたい人
③　Shopifyアプリの日本語情報が欲しい人

多言語対応アプリについて

Shopifyで多言語対応を行うには、公式サイトに記載の通り、言語翻訳アプリをいれる必要があります。

必要事項

複数の言語で販売するには、以下のものが必要です。
・ストアにインストール済みのサポートされている外部の言語翻訳アプリ。

・複数の言語での販売に対応したテーマ。Shopifyの無料のテーマはすべて互換性があります。複数の言語で販売する場合、テーマを更新する必要がある場合があります。外部のテーマを使用している場合は、テーマ開発者に連絡して互換性があるかどうかを確認することができます。

・言語セレクターがあるテーマ。DebutとBrooklynのテーマの最新バージョンのみに、言語セレクターが組み込まれています。別のテーマまたは古いバージョンのDebutまたはBrooklynを使用している場合は、ShopifyのGeolocationアプリを使用して言語セレクターを追加できます。

Shopify公式サイト：複数の言語での販売　https://help.shopify.com/ja/manual/sell-online/multilingual-online-store

言語翻訳アプリは「langify」「LangShop」「Weglot Translate」が有名なので違いについて整理してみました。

langifyLangShopWeglot TranslateTranslation Lab
使用料金(月額)$17.50(1週間のお試しあり)$34(2週間のお試しあり)1言語、2000語まで無料$0($9.99で自動翻訳つき)
自動翻訳機能なしありありなし
その他翻訳データのインポートができるサイトマップが作れるWordPressにも同じものがある既存無料テーマには言語切り替えメニュー表示サポート付き
選定ポイント定番アプリ。言語ごとに複数のドメインを使用したい場合SEO対策に力を入れたい場合日本語・英語だけ対応したい場合、かつ翻訳を自動でする場合無料で3-5言語の対応する場合
Shopify 多言語アプリ比較表

※langifyの使い方はこのサイトにわかりやすい記載があります。

【shopify多言語アプリ】Langifyの使い方と設定方法を画像を用いて解説！｜こめでぃかる.net
自作のshopifyで作成したECサイトを多言語対応にするためにとても便利な「Langify」というアプリ。この記事ではLangifyの設定方法、使用方法について10枚の画像を用いて解…
matadaietto.com

※LangShopの使い方はこのサイトにわかりやすい記載があります。

はじめてのShopify 越境EC向け多言語アプリ Langshop設定方法
英語圏の越境ECに特化したWebマーケティングを行っています。専門性の高い外国人メンバーと日本人コンサルタントのタッグで10年間で300社以上の海外進出プロジェクトを成…
www.s-bokan.com

Translation Labとは

Shopifyで使える多言語対応をする際に使用する翻訳アプリです。

メリット
・無料で使えること
・既存の無料テーマにはサポートの資料あり
・翻訳量が少ない場合これでOK!

場合によってはこのアプリは合わないことも…
・翻訳量が多い場合：このアプリは全て手入力のため、作業量が多くなる可能性があり、大変になります
→解決策（※月額$9.99払えばAIによる翻訳ができます）
・対応する言語の数が多い場合
→無料で5言語まで使えますが、それ以上となった場合はlangifyなどを使いましょう

Translation Labの使い方：アプリストアからインストールし、翻訳をしていきましょう

インストール

まずはアプリストアからTranslation Labと検索してアプリのインストールを行います。

翻訳言語の設定

インストールが終了したらアプリ管理から翻訳をする準備に入っていきます。

HOMEから「CONFIGURE LANGUAGE」で翻訳したい言語を選択します。

選択すると右の画面に選択した言語が出てきます。

英語であれば、https://example.com/en、簡体中国語であればhttps://example.com/zh-CNとなります。

これで言語設定は終わりです。

翻訳

さてここから、翻訳に入っていきます。

①translationを押して翻訳メニューを表示

  1. TRANSLATIONSタブを押して翻訳メニューを表示します
  2. 「Translations for language」内のタブから翻訳したい言語を選択します
  3. 「Translations of」をクリックし、翻訳するページテンプレートを選択、翻訳に入ります

※左の原文がhtmlコードで書かれている場合があるので、その際は「Edit in Rich Text Editor」で編集されることをおすすめします。

ぺんぎん

Translations Lab内で使用する、③の翻訳するページテンプレートと実際のページの対応については、こちらで主要テンプレートとページ名の一覧を記載しますのでご覧ください〜！

主要テンプレート実際のページ
THEMEトップページ（翻訳量が1番多いです。翻訳文章はsectionタブ内にあることが多いです）
ARTICLEブログの個別記事ページ
BLOGブログページ
PAGEページ（会社情報やお問い合わせページがここに入ります）
COLLECTION商品一覧ページ
PRODUCT個別の商品ページ
Translations labテンプレートとページの対応表

それでもテーマによってファイル分割が違っていたりするので、一度翻訳をしてみて、翻訳が残っている（言語が変わっていない）ものの文章をSearchに入れて検索、出てきたものを翻訳されるのがいいと思います。（この場合Translations ofの選択が違った場合「検索結果なし」になるので別のものを選択して再検索をしてください。）

言語選択メニューをホームページ上につける（Narrativeテーマを使用・ヘッダーにつける場合）

翻訳は完了しましたので、言語選択メニューをテーマにつけていきましょう。（プログラミング言語が出てきますがコピペできるように書きます。）

ここからは、Shopifyの使用テーマによってコードを記載する位置が変わってきますのでTranslation Labが公開されているドキュメントを参考に進めてください。それぞれのテーマで、画像を用いてどこにどのコードを記載すればいいのか説明してくださっています。

完成図：ショッピングカートの右に言語選択をできるようにしてみましょう。

①theme.liquidの<head>タグ内に下記コードを記載します。

{% include 'translation-lab-language-switcher' %}

※このコードは、「snippetフォルダ内のtranslation-lab-language-switcher.liquidというファイルを読み込みます」という意味です。このコードを記載したら「translation-lab-language-switcher.liquidの存在を確認」してください。

※※このアプリをいれる前後で使用テーマを変更している場合、このファイルがない場合があります。なかった場合は、「translation-lab-language-switcher.liquid」をsnippets内に作り、下記コードを貼り付けてください。

<style>
  .translation-lab-language-switcher-container {
    display: inline-block;
  }

  .translation-lab-language-switcher {
    display: block;
    width: auto;
    border: none;
    outline: none;
    text-transform: uppercase;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
</style>

<script>

  function buildLanguageList() {
    return [
      {%- for locale in shop.published_locales %}
      {
        name: '{{locale.name}}',
        endonym_name: '{{locale.endonym_name}}',
        iso_code: '{{locale.iso_code}}',
        primary: {{locale.primary}},
      }{% unless forloop.last %},{% endunless -%}
      {%- endfor %}
    ];
  }

  function findCurrentLocale(languages, defaultLocale) {
    var p = window.location.pathname.split('/').filter(function (x) { return x; });
    if (p && p.length > 0 && languages.find(function (x) { return x.iso_code === p[0]; })) {
      return p[0];
    } else {
      return defaultLocale;
    }
  }

  function createDropdown(t, i, s, l) {
    return function (container) {

      if (l && l.length > 1) {
        var select = document.createElement('select');
        select.className = 'translation-lab-language-switcher';
        l.forEach(function(lang) {
          var option = document.createElement('option');
          option.text = lang.iso_code;
          option.value = lang.iso_code;
          if (i === lang.iso_code) {
            option.selected = true;
          }
          select.add(option);
        });

        select.onchange = function () {
          var e = this.value;
          var n = window.location.pathname;
          if (e === t) {
            var o = '' + s + n.replace('/' + i, '');
            window.location.assign(o)
          } else if (t === i) {
            var r = s + '/' + e + n;
            window.location.assign(r)
          } else {
            var a = s + '/' + n.replace('/' + i, e);
            window.location.assign(a)
          }
        }
        container.appendChild(select);
      }
    };
  }

  function setupLanguageSwitcher() {
    var languages = buildLanguageList();
    var shopDomain = 'https://{{shop.domain}}';
    var primaryLanguage = languages.find(function (x) { return x.primary; });
    var defaultLocale = primaryLanguage ? primaryLanguage.iso_code : 'en';
    var currentLocale = findCurrentLocale(languages, defaultLocale);
    var containers = document.querySelectorAll('#translation-lab-language-switcher');
    if (containers && containers.length) {
      containers.forEach(createDropdown(defaultLocale, currentLocale, shopDomain, languages));
    }
  }

  docReady(setupLanguageSwitcher);

  function docReady(fn) {
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      setTimeout(fn, 1);
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }
</script>

②header.liquidの言語選択を表示したい場所に下記コードを記載します。

<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>

Narrativeテーマだと、

<div class="site-header__section site-header__section--button">
<div id="translation-lab-language-switcher" class="translation-lab-language-switcher-container"></div>
</div>

を記載することになります。（この違いもTranslation Labの公式ドキュメントを見ればどこに何を記載すべきかがわかります！）

これで終了です。

※Narrativeテーマだと、レイアウトのズレがあったので、下記のCSSを追加しました。

.translation-lab-language-switcher { margin-bottom:0; }

Translation Labの詳細設定について

1. ドロップダウンリスト内の表示言語

ドロップダウンリストの表示言語を変更する方法は、translation-lab-language-switcher.liquidファイルのoption.textを変更します。

if (l && l.length > 1) {
 var select = document.createElement('select');
 select.classList.add('translation-lab-language-switcher');
  l.forEach(function(lang) {
  var option = document.createElement('option');
  option.text = lang.iso_code;
  option.value = lang.iso_code;
  if (i === lang.iso_code) {
  option.selected = true;
  }
 select.add(option);
});

ここのoption.text内を変更します。

  1. option.text = lang.iso_code;　の場合

ISO639-1の国別言語コードに記載されているコードを反映します。

（例）英語・日本語・ロシア語の場合：「EN」・「JA」・「RU」

2. option.text = lang.name;　の場合

ホームページの初期設定言語で表示されている言語で、フルスペルで表示します。

（例）日本語でホームページを作成し、英語・日本語・ロシア語を表示する場合：「英語」・「日本語」・「ロシア語」

※初期設定が日本語の場合はユーザーに優しくないので注意が必要だと思います。

3. option.text = lang.endonym_name;　の場合

ホームページの初期設定言語にかかわらず、その国の言語で、フルスペルで表示します。

（例）英語・日本語・ロシア語の場合：「English」・「日本語」・「Русский」

※３言語以上のホームページを作成する場合、こちらの方法がユーザーフレンドリーかなと思います。

変更後はCSSの調整が必要になりますのでレイアウトのずれがないか確認しましょう。

2. 改行について

翻訳を進めていくと、Translation labではEdit in Rich Text Editorが書かれている場合はテキスト内で</br>の改行ができるのですが、そうでない場合、改行ができないという問題がありました。

対策として各Liquidファイル内に改行を</br>でやるというフィルターを書くことにしました。

{{ page.title | newline_to_br | split: '<br />' }}

下記が参考記事です。

How can I split a string by newline in Shopify?
I have a field in my settings.html where I am expecting the user to input multiple paragraphs separated by two newline characters. I would like to split this s…
stackoverflow.com

結論：Translation Lab使いやすかった！

無料で使える多言語対応アプリを初めて使ったのですが、設定しやすく、使いやすかったです。手動で翻訳をするのは大変ですが、無料アプリとしては十分な機能を備えているので、多言語対応アプリの選定に悩まれている方はぜひご検討ください！

越境ECをやるなら合わせて検討したい！
アクセス場所に基づく言語推奨表示アプリ：Geolocation

翻訳アプリに関する、よくある質問

Q
Translations Labを使っていて、トップページの翻訳がうまくできないのですが、どこからすればいいでしょうか？
A

「Translations of」を「theme」に設定して、Section-XXXXタブを選択すると翻訳文章が出てきます！

Q
この記事で紹介されている翻訳アプリ以外で、使いやすい翻訳アプリはありますか？
A

TMS翻訳やHonyackがおすすめになります。

Shopifyアプリに関する記事はこちら！

ご不明点・サイト構築のご相談などありましたらお気軽にお問い合わせください！

お問い合わせはこちら！
ビジネスを開始し、成長させて、拡大する – Shopify
オンラインビジネスや小売ビジネスを自分の思い通りに構築できます。どこでも販売でき、いつでもサポートが受けられます。初日でも1,000日目でも、Shopifyがすべてをカバ…
www.shopify.jp

この記事を書いた人

たかぼー

1993年、東京都生まれ。大学卒業後、メーカーの海外営業を経験し、「日本製のものが1人でも多くの人に使われて欲しい」という思いを形にするためにShopifyを使ったECサイト制作から運用までのサポートをしています。これからECサイト制作を始める人が「楽しく」作ってお客様の売り上げに貢献できるよう、知識のシェアをしているブログです。

記事一覧