Shopifyって多言語切り替えができるLangifyっていうプラグインはめっちゃ便利！ と思ってたんですが結局自分で素材やらテキストなんかはある程度用意しないといけないようですね。

Google翻訳みたいにいい感じに変換してくれるものだと思ってました。

現実はそう甘くはないということですね。

とはいっても決済なんかの部分は流石に言語別に切り分けてくれそうなので どちらにせよ多言語運用する場合はLangifyが必須になってきそうです。

Shopifyってユーザーフレンドリーではありますが、 クリエイターフレンドリーではないんですよね。

案件でShopifyのテーマ構築に携わっているので色々書き残しておこうと思います。

Shopifyは基本的にお金を払わないと開発すらままならないので、 企業の力を借りて自分の時間を使うだけで勉強させてもらえるのは助かります。

Langifyを使おうとしたら出鼻をくじかれた

なにはともあれLangifyはどちらにせよ必要になりそうなのと クライアント側がLangifyを使うということで試しにインストールしようとしましたが まさかのデベロッパープランだと試用期間すら利用させてもらませんでした。

デベロッパープランとは……

とりあえずクライアント側にプランのアップグレードを要請しました。

まってても時間が無駄になるので行動に移す

動かせないからといってプラン変更まで何もしないで待つのは愚策。

このご時世調べればだいたいのことは出てくるので、 先駆者様にが公開してくれている記事で予習をしておこうと思います。

特に人気のライブラリであるLangifyはググれば解説記事が沢山でてきます。

現状私が今やりたいことは英語版のトップページを作って、 Shopify側で日本語にしているところを英語にチェンジするようにしたい感じです。

ともかく英語のトップページの実装ってどうやるんだ？

ちょっと前に調べてみた限りディレクトリを切る感じでドメイン/enみたいな感じで 実装できると感じたのでそこをまずやってみたいと思います。

別言語のトップページを実装する

英語のトップページ自体はpugで実装済みなのでそれを移すだけです。

で、どうやって実装するんだ……？

とりあえずググってみよう。

と、速攻公式のやり方がでてきました。

https://help.shopify.com/ja/manual/cross-border/multilingual-online-store

とりあえずShopifyの元々の機能として別言語の追加がありました。

翻訳された言語を追加したらどうやらドメイン/en的な感じのページが作られるらしいです。

ですが、デフォルトだと英語になってしまっているので 日本だとデフォルト言語をまず日本語にしないといけないのではないですかね……

デフォルト言語を日本語に変える

翻訳された言語項目の上にデフォルト言語の項目があるのでその右の方に 「テーマの言語を変更する」があってその先のページにいって 更に右上の保存ボタンの左にある「テーマ言語の追加」を選ぶと言語選択ができるので そこで日本語を選ぶとデフォルト言語が日本語になりました。

翻訳された言語に英語を追加

デフォルト言語を日本語に出来たら次に別言語として英語を追加したいと思うので もう一度設定からストアの言語に戻り翻訳された言語の項目の「言語を追加する」で 英語を選択して追加をすれば「非公開の言語」として英語が追加されます。

この時編集とプレビューがあって、おそらく編集でshopifyの元々の単語なんかを 日本語から英語に変換するのだと思います。

編集を押すとLangifyが選べる項目がありましたがクライアント待ちなので とりあえず「公開する」を選択してドメイン/enで英語用のトップページを実装します。

公開しようとするとモーダルウィンドウが開いて

あなたのオンラインストアで言語を公開すると、その言語の新しいURLが生成されます。 訪問者は、英語版のサイトをhttps://ドメイン/enで閲覧することができます

という風に表示されるので公開するを選択します。

そしてそのアドレスにアクセスすると、どうやらテーマファイル自体は 日本語のものと共通なようですね。

プラグインを使って翻訳するか、自分でjavascriptで分岐を作って切り替えるかどちらかになるんでしょうか。

とりあえず今はLangifyが使えないので一旦自力で実装していきます。

Langifyが使えるようになったので検証

書いている最中にLangifyが使えるようになったので軽く触ってみました。

サイト既存のワード（カートをCartにする　購入をBuyにする）なんかは システム系で用意されてるようなワードは自動で設定されているので楽っちゃ楽ですね。

ただ言語毎にテキストを用意したり色々しないといけないので苦労は変わらずです。

とりあえずはトップページだけなので今後言語も増えるとスクリプトの分岐調整とかも色々しなきゃいけないので 今のうちに対策を考えて少ない作業量で簡単に切り替えられるようにしておくべきだなと感じました。

カスタムコンテンツで個別に翻訳設定

Langifyを弄ってるとどうやらカスタムコンテンツという箇所があって 自由に翻訳するためのフィールドを作られるので ワードを指定すればトップページに記載されているワードを置き換えてくれるのかなと思ったのですが どうやらうまく動かないので何かしらの設定が必要な気がします。

なんにせよ普通に採用したら17.5ドルも月額で取られて決して安くないので 自力でスクリプトで分岐させて翻訳できるならいらないプラグインかもですね。

言語切替が画面右下に出現する

Langifyを有効にすると言語切替のプルダウンメニューが画面右下に出現します。

今回作ってるのは自前で言語切替のメニューを作ってるので正直いらないな display:noneで消すと思ったのですがどうやらLangifyの設定項目でnoneにすることで非表示は可能なようです。

後は自前で用意した言語毎にURLを貼り付けてやるだけでいいかなと思います。

各LiquidはSTATICの項目で変更ができそう

LangifyのメニューからSTATICを選ぶと見慣れたLiquidのファイル名がでてきたので 試しにindex.liquidを選択すると自動的に割り出してくれるのですが、 文章ぶつ切りで1区切りに取得することがあるので正直凝ったWebページの場合あんまり意味がなさそうです。

特に今回はパララックスとか使ってるのでHTML的に無理矢理なところもあり全然ダメダメでした。

言語毎にLiquidで分岐を作れたらいいのですが今の所それらしい公式構文はなさそうで 結局の所JavaScriptで自分で切り替えないといけなさそうです。

Langifyを使うのは単語単語で変換をかけるときぐらいにしておいたほうがよさそうですね。