Shopify Theme Kitのインストールから基本的な使い方までのメモ。
- Shopify、Shopifyのテーマについて
- Shopify Theme Kitについて
- Getting Started （インストールと使う準備）
- Theme Kit のコマンド操作
- テーマの開発
- おまけ - Sublime Text の Liquidシンタックスハイライター
Shopify、Shopifyのテーマについて
- Shopify はカナダ発、世界シェアNo.1のECサイト構築プラットフォーム。
- ストアのデザインはテーマと呼ばれるテンプレートのセットで管理する。WordPressのテーマのしくみなんかが近いイメージ。
- テーマは Liquid というテンプレートエンジンで動く。LiquidはShopifyがオープンソースで開発するRubyベースのテンプレートエンジン。Jukyll（静的サイトジェネレータ）やSalesforceでも採用されている。テンプレートの記述は独自のマークアップ言語を使って行う。
Shopifyのテーマは、公式テーマ・ストアや第3パーティのストアから買ってきてそのまま使ってもいいが、ゼロから開発することもできるし、既存のテーマをベースにショップ独自のカスタマイズを入れることもできる。
Liquid template language
https://shopify.github.io/liquid/
Shopify Theme Kitについて
テーマの開発・カスタマイズは、
- ストアの管理画面上のオンラインエディタ（ Shopify online code editor ）から直接行う方法と、
- ローカル環境で開発してストアに反映（アップロード）する方法
と2方法ある。
WordPressのテーマ編集をしたことがある人なら、この辺りも似たようなしくみなのでイメージしやすいかも。
そして、2)の開発方法を助けるツールが Shopify Theme Kit だ。
Theme Kitは、ストア上のテーマファイルを取得したり、開発したテーマ・ファイルをデプロイしたりと、開発のワークフローを手助けする CLIツール。GitHubで公開されている。
Shopify Theme Kit
https://shopify.github.io/themekit/
Theme Kit でできること。
Getting Started （インストールと使う準備）
Theme Kitのインストール(macOS)
ターミナルを起動して、brewでインストールする。
$ brew tap shopify/shopify
(..途中略...)
==> **Tapping shopify/shopify**
Cloning into '/usr/local/Homebrew/Library/Taps/shopify/homebrew-shopify'...
remote: Enumerating objects: 48, done.
remote: Counting objects: 100% (48/48), done.
remote: Compressing objects: 100% (48/48), done.
remote: Total 48 (delta 1), reused 9 (delta 0), pack-reused 0
Unpacking objects: 100% (48/48), done.
Tapped 2 casks and 40 formulae (115 files, 149.6KB).
$ brew install themekit
==> **Installing themekit from shopify/shopify**
Warning: A newer Command Line Tools release is available.
Update them from Software Update in System Preferences or
https://developer.apple.com/download/more/.
==> **Downloading https://shopify-themekit.s3.amazonaws.com/v1.0.2/darwin-amd64/th**
######################################################################## 100.0%
(..途中略...)
目的のショップに、プレイベートアプリを追加してテーマ編集権限を付与する
- ブラウザから、目的のショップの管理画面にアクセスする。
- 「アプリ管理」 を開き、「プライベートアプリを管理」のリンクをクリック。
- 「新しいプライベートアプリを作成する」をクリックして、必要事項を入力する。
- プライベートアプリ名: 「Theme Kit」（なんでもいい）
- 緊急連絡用開発者メール
- Admin API の一覧で「▼無効になっているAdmin API権限を確認する」をクリックして、全てのAPIを一覧する。
- 「Theme templates and theme」を探して、権限を「Read and Write」に変え「保存する」。
- APIキーのパスワードの方をコピーして控えておく。
Theme Kit のコマンド操作
ターミナルに戻って実際に操作してみる。
コマンドは8つだけで、とてもシンプルだ。
Theme Kit Commands
https://shopify.github.io/themekit/commands/
ショップ登録済みテーマ一覧を取得 theme get --list ...
$ theme get --list -p=********* -s=mt-plugins.myshopify.com ※ ******** 部分は、先ほど控えて置いたAPIキーのパスワード ※ mt-plugins.myshopify.com 部分は自ショップのアドレス Available theme versions: [85789704236][live] Debut [87232839724] Debut
- [xxxxx]部分がそのテーマのid。
- 上の例では、2テーマ登録されていて、liveとついているid=85789704236 の方が 実際にショップに適用されている。
テーマ・ファイルを開発環境にダウンロード theme get -t=テーマid ...
get コマンドは開発環境上にテーマのconfigファイルを作成し、かつテーマ・ファイル一式をダウンロードする。
$ theme get -p=********* -s=mt-plugins.myshopify.com -t=85789704236` [development] 145|145 [=================================================] 100 % $ ls assets/ config.yml locales/ snippets/ config/ layout/ sections/ templates/
編集後のテーマをショップに deploy
開発環境のテーマで、ショップ上の街頭テーマを総取っ替えする。ショップ上にだけ存在して開発環境にないファイルはdeploy時に削除されるので注意すべしとドキュメントに書いてある。
ファイル名を指定して限定的なデプロイも可能。
指定ファイルをダウンロードする theme download [path/to/file]
特定のファイルだけをダウンロードしたい場合に使うコマンド。
例えば、ショップ管理画面のオンライン・コード・エディタで編集して、開発環境との差分が発生してしまった時などに使うと思う。
$ theme download sections/hero.liquid
※「テキストオーバーレイ付き画像」モジュールだけ取得
[development] Warning, this is the live theme on mt-plugins.
[development] 1|1 [=====================================================] 100 %
テーマの開発
Theme Kitは テーマファイルの取得とデプロイ周りだけをサポートするシンプルなツール。
バージョン管理とか差分をどうかしたりといった機能はないから、Gitなり他のツールを使う感じだと思う。
ちなみに、Theme Kitの上位ツールで Slate というのがあったが、2020年1月をもって 公式サポートは終了したそうだ。
Liquidファイルの編集は、好みのエディタでして Theme Kitでデプロイという流れになるのかな。
おまけ - Sublime Text の Liquidシンタックスハイライター
Sublime Textの、Shopify Liquid シンタックスハイライターはこれ。
Jekyllの開発でも使える。
Liquid - Packages - Package Control
https://packagecontrol.io/packages/Liquid
