2020/09/27

４ヶ月連続で Shopify アプリをリリースした話(2/5) - "越境EC向けにストアを翻訳 ‑ Interlingue"

前回のエントリ： ４ヶ月連続で Shopify アプリをリリースした話(1/5) - “きっかけは Boot Camp”

はじめに

ストアを多言語化するための Interlingue というアプリを最初に開発しましたので、このアプリについて書いていきたいと思います。

Shopifyの意外な盲点

ちょうど昨年末から今年はじめにかけて少し規模の大きい越境ECサイトを Shopify で構築していました。商品数は十数万点あり、商品登録（移行作業）だけでも大変な労力を必要としました。データ移行は最初 Excelify というアプリを利用していましたが、細かいデータの差し替え等に対応するために商品APIを操作するRubyアプリケーションを作成しました（それに、巨大な CSVファイルを参照・編集すること自体が至難の業です）。ただ、通常のプランだとAPI制限（バリエーションが50,000を超えると一日1,000件しか新規追加できない）があり、クライアントに相談して、最終的にShopify PLUSプランに切り替えました。

「商品登録数無制限」とありますが、上記のような制限がありますのでご注意下さい。虚偽ではないんですけどね。紛らわしいですね。

多言語化にも色々ある

無事商品登録が完了したので、ストアフロントに取り掛かります。まず Warehouse というテーマがサイトの要件に合致していたので、購入し適用しました。非常に多機能なテーマです。ほとんどのECサイトの要件を満たすのではないでしょうか。このテーマは言語と通貨の切り替えにもデフォルトで対応していました。

ただし、Shopify の API を利用した多言語化には対応しているのですが、アプリ独自の多言語化の仕組みが搭載されている場合は自力で対応する必要がありました。

どういうことかというと、現在 Shopify の多言語化APIを利用する場合は、現在のストアの言語（例えば日本語）の他に5つの言語まで追加することが出来ます（Shopify PLUS プランは20個まで）。でもそれ以上の数の言語に対応したストアを見かけますよね？これはアプリ独自の多言語化の仕組みを利用しているのです。

たとえばこのような多数の言語の選択画面がポップアップ表示される場合は、Shopifyの用意した以外の仕組みで多言語化を実現しているアプリだと言うことが出来ます。他の多言語化の実現方法はいくつかあると思いますが、一番多いのはJavaScriptでクライアントサイドでテキストを書き換える方式です。すでにサービスが終了してしまいましたが、Googleが提供していたWebサイト翻訳がその代表例です。以前からこの方式は、SEO対策に問題があるという指摘があります。

アプリによる多言語化の問題点

既存の多言語化アプリを利用して越境ECサイトを制作していくつかの問題点に遭遇しましたが特に運用に支障があった２つをご紹介します。

  1. レンダリング速度 前述のサイトで利用したWarehouseというテーマはコレクションページのナビゲーションのオプションが多彩でとても使いやすいです。これはShopifyの商品絞り込みロジックとは別にアプリで独自に実装していると思われます。そのため、ナビゲーションで絞り込み条件にしている商品タイプやコレクションそしてタグを翻訳アプリで翻訳する際にオーバーヘッドが閾値を超えてしまい、ページ表示に数秒〜数十秒かかってしまうという事態になってしまいました。これは商品数が十数万点と多かったためだと思うので、商品数がそこまで多くない場合は問題ないかもしれません。しかし、Shopifyの利点は将来的に事業がスケールアップしてもリプレースせずにそのまま使い続けられることにあると思うので、不安は残ります。

  2. 個別に翻訳したい項目 特定の単語の翻訳結果を統一したい場合に別途管理画面からSpecificに訳語を登録することができるようになっていたので、中国語のカテゴリ名を機械翻訳に頼らずに中国語ネイティブのスタッフに登録してもらう作業をしていたのですが、これもカテゴリ数が多くなってくると管理画面自体が重くて一つの単語を登録するのに数分かかるというような状況になってしまいました。

他にも細かい問題点があり、サイトのローンチにこぎつけるまでにかなりの労力を必要としました。

翻訳アプリの構想

この経験から、下記のような多言語化アプリがあったら越境ECサイトに最適なのではないか（何より自分が嬉しい）と思いました。

  • ShopifyのAPIだけを使ったサーバーサイドレンダリング
  • テーマファイルを書き換えない（ほとんどのテーマは言語Switcherを実装している＆なければ Geolocation というShopify謹製アプリがある）
  • 日本語で使える

基本コンセプトとしては、アプリですべてを解決しようとせず、Shopifyの設計思想に寄り添ったシンプルな翻訳アプリです。ShopifyのAPIを利用してアプリを開発していると、なぜこの機能が実装されていないんだろう？と思うことがよくありますが、そういうほとんどの機能は本質的に必要ないことが後になってわかることが多いです。ある種の一貫性や優先順位の話だと思いますが、スクラッチ開発ではないのだからプラットフォームの思想を深く理解することが何よりも重要だと思っています。

上記２点の他に、設定内容を Shop の Private Metafield に保存することで、Shopifyの外部サーバに一切情報を保存せずに高いセキュリティを保ったままアプリを利用できるようにしました。

技術基盤

Node.js/Next.js, GraphQL/Apollo, Polaris/App Bridge

Shopifyのチュートリアルそのままです。ただし、課金ロジックはそのままでは動きませんでした。独自に実装する必要があります。

Build a Shopify App with Node and React

サーバ構成

今のところかかっている維持費は Heroku の hobby dynos の月額$7 のみです。

  • Heroku （hobby dynos）
  • Google Apps Script （Google翻訳）
  • Mixpanel （効果測定）
  • Sentry （エラー・障害検知）
  • Google Analytics （効果測定）※予備。MixpanelとSentryでほぼ全てのことがわかる
  • Google Forms （サポート用リクエストフォーム）

アプリ自体も、日本語、英語、簡体中国語、繁体中国語に多言語化されています。海外からの利用も多いので今後対応言語も増やしていこうと思っています。

リリースまでの軌跡

2020/04/20

リポジトリ作成（開発開始）。まさにBoot Campの第１日目です。

2020/06/05

Boot Camp 終幕

2020/06/08 01:43

Submit（アプリ申請）

2020/06/12 03:50

修正依頼 from Shopify

アプリ投稿ありがとうございます。もうすぐです。アプリを承認する前にパッチを当てる必要がある軽微な問題がいくつか見つかりました。

アプリを承認するには、アップデートが必要です。以下の手順を行ってください。

  1. 下記に記載した必要な変更点を参照する
  2. アプリのアップデートを行う
  3. このメールに返信して、変更が行われたことをShopifyに知らせる

また、アプリのリスティングが編集できるようになったので、投稿フォームの内容を更新できるようになりました。

必要な変更点

  1. アプリをインストールして設定する方法の詳細な説明は、アプリのユーザーインターフェース内に含まれている必要があります。翻訳を表示するために使用する必要があるURLを含めてください（私はこれをリストでしか見ていません）。アプリを機能させるために必要な変更をマーチャントが行う機能は、インストール後に利用できるようにする必要があります。

  2. アプリは、当社のレビューでは使用されていないと思われるスコープを要求しています。アプリが機能するために必要な API Scope Permissions のみを要求していることを確認してください。詳細については、このドキュメントを参照してください。使用されていないように見えるものの詳細については、このスクリーンショットを参照してください。

  3. 当社のスクリーンショット要件では、アプリのユーザーインターフェースのスクリーンショットを少なくとも1枚、ストアフロントビューのスクリーンショットを1枚（該当する場合）含める必要があります。

  4. 当社のパートナープログラム契約、セクション2.5.7および2.1.3に準拠していないため、ドメイン、サブドメイン、または電子メールから「Shopify」という用語を削除してください。詳細については、このスクリーンショットをご覧ください。

  5. アプリが機能するためにオンラインストアの使用を必要とする場合は、セクションFのオンラインストア販売チャネルをマーチャントが持っている必要があると記載されているオプションを選択してください。

2020/06/12 05:30

変更した旨を回答／質問を送信

「ストアフロントビューのスクリーンショットを1枚（該当する場合）含める必要があります」とのことですが、ダミーサイトを作ってそれの各言語のスクリーンショットを撮って掲示したほうがいいですか？

という質問を送った。

2020/06/12 21:34

質問の回答 from Shopify

はい、あなたのテストサイトのストアフロントが翻訳されたページがあれば素晴らしいです! 私たちのマーチャントがこのアプリを利用できることを楽しみにしています 🙂

2020/06/12 22:27

秒速でダミーサイトを作成し、スクリーンショットを撮ってUP。修正した旨を連絡。

2020/06/13 02:47

Approved!!

あなたのアプリは承認されました

いい仕事をしてくれましたね。あなたのアプリはもうすぐShopifyで公開されます。みんなのために商売をより良いものにするために貢献してくれてありがとう。

次のステップ

まずは、お祝いの時間をお取りください。私たちのパートナーは、Shopifyのコミュニティの重要な一部です。 それでは、アプリをどのように販売し、顧客ベースを構築するかを考える時が来ました。

  • マーケティング活動(2.1)、レビュー(C-3)、収益シェア(C.2-2)に関するパートナー規約をよく理解してください。
  • マーチャントがアプリを使い始めると、アプリのリスティングページにレビューを残し始めます。アプリのレビューの管理については、こちらをご覧ください。
  • Shopify App Storeの「Staff Picks」セクションに掲載されることで、あなたのアプリが大きく成長する可能性があります。あなたのアプリが掲載される方法をご確認ください。

その他ご質問がある場合は、ShopifyパートナーFAQとShopify App Storeで成功するためのドキュメントをご覧ください。

メールの端々にポジティブなコメントが入っているので元気づけられます。 このような雰囲気もShopifyのパートナーエコシステムを形作る重要な要素だと思います。実は Polarisのドキュメント では語彙や声のトーンなど、どうやって他社とコミュニケーションをとるべきかということまで言及されています。本当に素晴らしいです。

最後に

最初のShopifyアプリが承認されるまでの流れは以上です。

わからないことだらけでしたが、Boot Campと並行していたことで、Slackですぐに質問ができたのは本当にいいタイミングでした。サポートしていただいたShopify Japanのテクニカルマネージャーの岡村さん、ありがとうございました！

アプリは無事Shopify App Store に掲載され、少しずつインストール数も増えてきています。要望を頂いたり、バグを発見したりして日々改善し続けております。

追記：反省点

埋め込みアプリの機能拡張のメニューバーでタブを作ってしまったのですが、ここが多言語化できてません。これは今後Poralisのタブに置き換えようと思っています。

続き： ４ヶ月連続で Shopify アプリをリリースした話(3/5) - “Quick Order Printer かんたん帳票出力”

文責： イマダ ＠ Mixlogue inc.