【Shopify】テーマカスタマイズ画面の翻訳作業をする!&補足でデータ移行に重宝するツール紹介!

liquid
liquid Shopfy2.0 Shopify

Shopifyのテーマは、”カスタマイズ”の画面でノーコードでサイトの見た目を編集できるが、有料テーマは日本語訳がされていないので、英語の苦手な方だと翻訳されていない場合、ストレスになるだろう。

翻訳されていない有料テーマカスタマイズ画面

納品時はあまり”カスタマイズ”でどんなセクションが用意されているか、などまでチェックされないことが多い。

ここが重要になってくるのは、サイト公開後の、運用に入ってからだ。

また、ストアをクライアントが運用せず、運用を委託されていたとしても、エンジニア以外の者が”カスタマイズ”を触る時にも、翻訳がされているとやはりストレスがない。

翻訳されているのが普通だと思われれば特に何も声はあがらないが、ストレスであったり、一度カスタマイズ画面が翻訳されたテーマで運用をすると、翻訳されていないことの不便さの声があがるかもしれない。

そんな”カスタマイズ”画面の、効率的な翻訳の仕方を紹介します。

テーマカスタマイズ画面は”settings_schema.json”と”各sectionファイル内のschema”を翻訳することでできる!

そもそも”settings_schema.json”、”各sectionファイル内のschema”とは?

“テーマ設定”の設定内容を保存するデータベースファイル

翻訳前
翻訳後

ここにある

  • label
  • content
  • info

が保持している内容を日本語にすると、以下のように表示が日本語になる。

翻訳されたカスタマイズ画面

Shopifyの有料テーマで、”テーマのカスタマイズ”の画面のUIがすべて英語から日本語に標準では変換できないものがほとんどだ。(僕がこれまでに使用してきた有料テーマで、翻訳されているものは今のところない)

翻訳も案外簡単!と思いきや、上記、普通のツ―ルで翻訳&置換を上から順にやっていこうとすると、時間がいくらあっても足りないほどの量があることに気づくだろう。

settings_schema.jsonは1ファイルだが、個別にschema情報を持つ各sectionファイルの数と翻訳数がやばい。

そこで、便利なツールを紹介する。

地道な翻訳変換作業に使用するツール

翻訳に重宝するツール

  • DeepL(高機能な翻訳ツールのデスクトップアプリ版)
DeepL Translate: The world's most accurate translator
Translate texts & full document files instantly. Accurate translations for individuals and Teams. Millions translate with DeepL every day.
  • 秀丸・・・テキスト整形・テキスト一斉置換といえばの国産レジェンド。古い時代からのWindowユーザの情報処理系の職の人は御用達の生きる伝説のツール
秀まるおのホームページ(サイトー企画)-秀丸エディタ
  • Excel
Microsoft Excel スプレッドシート ソフトウェア | Microsoft 365
Microsoft Excel は業界をリードするスプレッドシート ソフトウェア プログラムであり、強力なデータ可視化と分析のツールです。Excel で分析をレベルアップしましょう。
  • VS Code(Visual Studio Code)・・・現代のWebエンジニアが好んで使うハイエンドなコードエディタ。Microsoft製。世界中の有志が拡張機能を開発しており、VS code自体もアップデートされ続けている。
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

DeepL(高機能な翻訳ツールのデスクトップアプリ版)

DeepL Translate: The world's most accurate translator
Translate texts & full document files instantly. Accurate translations for individuals and Teams. Millions translate with DeepL every day.

デスクトップアプリ版の何がよいか?

使い方

特定の英字テキストをドラッグ&ドロップで範囲選択した状態で、

Ctrlキー を抑えながら Cキー を2回押すことで、アプリがサクッと起動し、

ウィンドウが表示され、範囲指定した原文テキスト、そしてその横に翻訳したテキストが表示される。

VS Code(現代のWebエンジニアが好んで使うハイエンドなコードエディタ)

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

VS Codeで複数のコードのファイル内の指定文字列の一斉置換をする方法

Ctrl + Shift + F

で複数ファイルを一斉検索できる

検索文字入力の左の>をクリックして、置換オプションを表示し、置換文字を入力

例として”Buttons”と検索
検索窓の左の>のボタンをクリックすると、一斉置換文字を入力できる

「AB」と書いている部分の右にあるなんとも形用しがたいボタンを押すと、すべて置換するかの確認がされる

この二つを使って、効率的にテーマの管理画面の翻訳の作業を行う。

書いていて気づいたが、旧カートシステムからShopifyへの移行案件では、情報処理作業に、

  • 秀丸
  • Excel

この2つは僕は頻繁に使う。というかないと作業できなくなる。この二つに備わっている便利な機能がないと、効率的に移行案件を捌くことはできないとまで言ってもいいほどだ(少なくとも僕は)。

  • Smooth CSV・・・csvをフォーマットをしていして開くことができる専用ソフト(csvを開くと”崩れる”という人は、ファイルの開き方がおかしいだけでもともとcsvの”文字化け”など存在しない)
  • File Renamer・・・複数のファイル名の一斉置換
  • File Downloader・・・複数のURLを指定してファイルを一斉にダウンロードできるフリーソフト(Windows)
  • Excelのパワークエリやマクロによる、テーブルのデータ加工

なんかもあれば便利なので使う。

ほかには、、

Windowsのエクスプローラー上のファイルのパス名を一括コピーできる方法

  1. テキスト化したいフォルダを開ける
  2. ファイルを選択します。
  3. [Shift]を押しながら右クリックをして「パスコピー」を選択

があって助かったことや、

STORESからShopifyへのリプレイス案件で、STORESの商品データをcsvエクスポートできなかったため、

スクレイピングのソフト

Octparse(オクトパース)

を重宝することもある。

スクレイピング | Webクローラー | Octoparse
スクレイピング & Webクローラーツール 。無料で利用可能、コードを書くことなくwebデータ収集を自動化する。
Octoparse (オクトパース)でスクレイピングをしよう!使い方を徹底解説!
こちらの記事では、スクレイピングツールOctoparse(オクトパース)について解説しています。 スクレイピングツールOctoparse(オクトパース)の使い方・評判・安全性・その他詳しく解説していますので、参考にしてく ...

スクレイピングの方法

  1. スクレイピングしたいサイトのURLを入力
  2. 「ワークフローを生成」をクリック
  3. 「保存して実行する」をクリック
  4. 抽出方法を選択
  5. エクスポート方法を選択
  6. 抽出したデータをエクスポート

を使用したこともあった。

これは中国のソフトだけど、使ってみてかなり優秀でした。もはや中国のプログラマーの技術は古い日本人が持っているイメージのものではないです。普通に技術力すごい。

ECサイトの運用や構築をやっていると、否応なしに「情報処理」の世界に入っていく。

そのため、データの加工やテーブルのマージ、特定のデータのフィルターなどを行うために、Excelなどの表計算ソフトを使用するうちに最も効率的な表の組み方をどんどん理解していくことになる。

最近Excelの”データのインポート”がカバーしているファイル形式の多さにビビった。

優秀なExcelの”データのインポート”機能

CSVはともかく、XMLやJSON、はてはPDFという形式までカバーしているとは。。。

しかもきちんと、データベースを扱う形でこれらの形式をテーブル表示でデータ加工できる!

Power Queryという機能なのだが、Accessよりも手軽に高度なデータベース処理ができる、という感じ。

何より、マクロのように、クエリを作っておけば、Excelファイルとして配布したり共有して特にマクロやクエリを書けなくてもチームで使えるのもよい。

WordPressではcsv出力ができず、xml形式でしか出力ができないような仕様もあるので、Excelのこの機能がないと詰む。

最後に

今やっている作業で、複雑なデータベース処理があったら、マクロやピボットやパワークエリが使える人間がいると自動化または作業効率を別次元に高められる。

逆に言えば、大規模ECサイトほどこのへんの情報処理ができないと、今の不完全なデータベースがあちこちにあるECサイトのシステムでは苦労しそうだ。

なぜなら、データベースをロジスティクスと、カートシステムが別々に持っていて、そのおかげでネクストエンジン

ネクストエンジン|EC・ネットショップ運営を自動化・効率化
ネクストエンジンは、手のかかるEC運営を自動化、効率化するSaaS型ECプラットフォームです。ECの成長に不可欠な「クリエイティブな時間」を生み出します。

なんてハブ役が必要になっている。

そもそもロジスティクスにあるデータベースをカートシステムが利用できれば、在庫情報が並行して二つ以上存在してなくてもよい。

この”コアのデータベースを1箇所に”という発想と、”フロントエンドの処理はECサイトを含め、SNS上からでもどこでもOK”という発想を合わせて、”ヘッドレスCMS”、”ヘッドレスコマース”という。

おそらくこれから(といっても数年後からようやく)の主流になってくるだろう。

世の中の流れが効率化を目指していくなら、そうならないと、今の多くのECのシステムは、金融系のデータ管理に比べて脆弱すぎる。

Shopifyもヘッドレスコマースに対応できるので、今後大規模ECほど『ヘッドレスコマース』にシステムを改修したい、という案件が未来、増えていくだろう。

その時に重宝されるのが、”APIエンジニア”だと、とある方が言っていて調べてみたが、”APIエンジニア”という言葉は検索してもあまり出てこない。

つまり、データベース間の連携処理、つなぎこみのためのインターフェースを作れる人、ということだ。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    タイトルとURLをコピーしました