acokikoy's notes

最近気になる=[NoCode, Shopify], I am..=[Python, ウクレレ, マニュアル車, CMS] LoveなWebディレクター

Shopify Theme Kit のインストールと基本操作

Shopify Theme Kitのインストールから基本的な使い方までのメモ。

f:id:acokikoy:20200216182806p:plain

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について

テーマの開発・カスタマイズは、

  1. ストアの管理画面上のオンラインエディタ( Shopify online code editor )から直接行う方法と、
  2. ローカル環境で開発してストアに反映(アップロード)する方法

と2方法ある。

WordPressのテーマ編集をしたことがある人なら、この辺りも似たようなしくみなのでイメージしやすいかも。

そして、2)の開発方法を助けるツールが Shopify Theme Kit だ。

Theme Kitは、ストア上のテーマファイルを取得したり、開発したテーマ・ファイルをデプロイしたりと、開発のワークフローを手助けする CLIツール。GitHubで公開されている。

Shopify Theme Kit
https://shopify.github.io/themekit/

Theme Kit でできること。

  • Themeを複数環境に反映可能
  • 迅速なアップロード/ダウンロード
  • 開発環境でファイル変更を自動でShopifyに反映する機能
  • Windows/Linux/macOS で動作する。

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月をもって 公式サポートは終了したそうだ。

shopify.github.io

Liquidファイルの編集は、好みのエディタでして Theme Kitでデプロイという流れになるのかな。

おまけ - Sublime Text の Liquidシンタックスハイライター

Sublime Textの、Shopify Liquid シンタックスハイライターはこれ。
Jekyllの開発でも使える。

Liquid - Packages - Package Control
https://packagecontrol.io/packages/Liquid