copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2020/11/27

【Shopify】Theme Kit でテーマ開発をしよう

Written by Yurie Takemoto

  • shopify

INDEX

    最近のマイブームはカプリコと鬼滅の刃。お久しぶりです、takemotoです。

    先日、Shopifyの案件に携わらせて頂き、とても勉強になったので忘れる前にブログを書く事にしました。

    人生初のECサイト・今流行りのShopify・Liquidという初めての言語に不安はありましたが、楽しんで実装できました。

    私自身の経験も含め、初めてShopifyを触る人にも分かりやすく解説していきたいと思います。

    はじめに

    Shopifyでのテーマの開発・カスタマイズは、以下の2つの方法があります。

    1. Shopifyストアの管理画面であるコードエディタから直接行う
    2. Theme Kitを使って編集する

    Slateというツールもありましたが、2020年1月にサポートを終了しています。

    今回は2のTheme Kitを使った方法について解説していきたいと思います。

    Shopify Theme Kitについて

    Shopify Theme Kitは、Shopifyテーマを開発するためのコマンドラインツールです。

    もちろん直接管理画面のコードエディタから開発してもいのですが、Theme Kitを使ったほうが良い点がいくつもあります。

    例えば、

    • 複数環境へのテーマアップロードやダウンロードが可能
    • 開発環境の変更をリアルタイムでブラウザで確認できる
    • 管理画面で変更した内容を開発環境に反映できる
    • Gitでソースコードを管理できる

    うっかりコードを間違えてもGitで管理できるので、生殺与奪の権を他人に握られません。

    Shopifyアカウントについて

    開発を始める前に、Shopifyアカウントについてざっくりと説明します。

    Shopifyには

    • ECサイト運営のためのオーナーアカウント
    • Shopify開発者のためのパートナーアカウント

    の2種類あります。

    オーナーアカウントは、商品を販売する際に登録が必要です。ショップを作成・運営するなら基本的にはこちらを契約します。サイトの規模によって月額料金がかかります。(14日間は無料)

    オーナーアカウント登録はこちら

    パートナーアカウントは開発用のShopifyサイトを複数作れたり、プライベートアプリをストアに導入することができます。しかも、「無料」です!Shopifyを触ってみたい・遊んでみたい開発者にとても優しい。

    また、クライアントにパートナーアカウント経由でShopifyを導入すると報酬がもらえるレベニューシェアの仕組みがあるようです。

    有料アプリのインストールは開発ストアのアカウントにクレジットカードのあるプランが必要になります。(Shopify partnersについての詳細はこちら)

    パートナーアカウント登録はこちら

    今回は、パートナーアカウント登録をして、

    • パートナーアカウントでは開発環境を作ってテーマ編集を行う
    • クライアントにオーナーアカウントを契約していただき、本番環境にテーマを反映させる

    という流れでテーマ開発をしました。ショップを公開した後に運営する上で、開発環境を作っておくのは大事かと思います。

    補足:「オーナーアカウントで開発→権限をクライアントに譲渡する」の方法でもテーマ開発はできます。(詳細はこちら)

    Theme Kitのインストール

    Shopifyアカウントの登録が終わったら、Theme Kitの開発に進みます。

    まず、Shopify Theme KitのインストールにはHomebrewを使用します。(macOS)

    ターミナルを開いて以下コマンドを実行すればHomebrewをインストール出来ます。

    /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    補足:Windowsの場合はChocolateyを使用。(Windowsのインストール方法はこちら)

    HomebrewでTheme Kitをインストールします。

    brew tap shopify/shopify
    brew install themekit

    Theme Kitがインストールされているかどうかは以下のコマンドで確認出来ます。

    theme --help

    インストールが成功していると、Theme Kitで使用できるコマンドの一覧と詳細が表示されます。

    APIの設定

    次に、Shopifyストアと開発環境を連携させる設定を行います。

    Shopifyストアにログインし、「管理画面→アプリ管理→プライベートアプリを管理する」をクリックします。

    次のページで「プライベートアプリを作成する」をクリックすると、

    「アプリの詳細」「Admin API」「ストアフロントAPI」の項目が表示されます。

    「プライベートアプリ名」と「緊急連絡用開発者メール」を入力して、
    Admin APIの「非アクティブなAdmin API権限を表示する」をクリック。

    権限の部分で、「テーマ」の「テーマテンプレートとアセットを表示または管理する」を「読み取りおよび書き込み」に設定し、「保存する」をクリックします。

    ページが読み込まれて、APIキーとパスワードが表示されます。パスワードを確認し、保存します。

    テーマIDの取得

    今回は、一からテーマを作成するのではなく、無料テーマ をベースに作成する方法で説明します。

    そのため、まずはベースにしたいテーマをダウンロードしてください。

    Shopifyテーマ一覧はこちら

    カスタマイズしたいテーマをダウンロードした所で、テーマIDを取得する作業に進みます。

    テーマIDを取得するには2つの方法があります。

    1. Shopify管理画面で確認
    2. コマンドで確認

    Shopify管理画面で確認

    「Shopifyストア管理画面→オンラインストア→テーマ→カスタマイズ」をクリックします。

    編集画面のURLにテーマIDが表示されます。

    https://sample.myshopify.com/admin/themes/000000000000/editor

    上記のURLの場合、/theme/の後ろの番号(12桁の数字:000000000000)がテーマIDです。

    コマンドで確認

    ターミナルを開いて、以下のコマンドを入力します。

    theme get --list -p=[your-password] -s=[you-store.myshopify.com]

    your-password は先ほどAdmin APIで確認したパスワード。you-store.myshopify.com はストアURLです。

    theme get --list -p=hoge_a1234567890b12345c1234d1234567890 -s=sample.myshopify.com

    上記の様にコマンドを打つと、ダウンロードしているテーマと、テーマのIDが表示されます。

    Available theme versions:
    [000000000001] Minimal
    [000000000000][live] Debut

    複数のテーマをダウンロードしている場合は、[live]がついている方がShopifyストアでアクティブになっている本番テーマです。

    開発したいテーマのIDを保存します。

    テーマファイルの取得

    ここまでに保存したパスワードやIDを当てはめて、以下のコマンドを打つと対象テーマのファイルを開発環境にダウンロード出来ます。

    • [your-password] : Admin APIで確認したパスワード
    • [you-store.myshopify.com]:ストアURL
    • [your-theme-id]:テーマID
    theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

    theme get --list -p=hoge_a1234567890b12345c1234d1234567890 -s=sample.myshopify.com -t=000000000000

    これでShopifyストアと開発環境の接続が完了となり、Shopify Theme Kit でテーマ開発する準備が整いました。お疲れ様でした。

    この状態でターミナルでtheme watchを実行すると、ローカルの編集内容が開発環境に反映されます。

    ※要インターネット環境(Wifi推奨)

    編集の仕方は下記のサイトを参考にしてみてください。

    コマンド

    私が使用していたコマンドです。

    Shopifyストアから最新コードをダウンロード

    theme download

    開発環境に自動アップロード

    theme watch

    開発環境からShopifyストアにアップロード

    theme deploy

    ブラウザでテーマのプレビューを開きます

    theme open

    補足:コマンドの最後にファイルディレクトリとファイル名を入力すると、対象とするファイルを指定できます。

    theme download templates/aticle.liquid assets/common.css

    config.ymlについて

    ダウンロードしたファイルの中に、config.ymlというファイルがあります。このファイルは、環境を複数作成して他環境へデプロイできるようにしたり、環境ごとに設定を変更できるようにするなど、カスタマイズが可能です。

    development:
      password: APIパスワード
      theme_id: "テーマID"
      store: development.myshopify.com
      ignore_files:
        - "*.gif"
        - "*.jpg"
        - config/settings_data.json
    production:
      password: APIパスワード
      theme_id: "テーマID"
      store: production.myshopify.com

    developmentはTheme Kitをインストールした時にデフォルトで登録されています。

    私の場合は、「developmentを開発環境」「productionを本番環境」にして開発を進めていました。

    詳細は公式サイトを確認してみてください。

    上記のコマンドの最後に--env=production--env=developmentをつけると、特定の環境に反映する事ができます。

    全ての環境に反映させたい時は、-aをつけてください。

    例)

    本番環境だけにデプロイする

    theme deploy --env=production

    両方のサイトにデプロイする

    theme deploy -a

    注意点

    Shopifyストアの管理画面でコードを編集する時は、開発環境で作業しない。(逆も同じ)

    Shopifyの特徴は管理画面と開発環境の両方でコードを編集できる事です。そのため、管理画面でコードを編集した後に開発環境のコードをdeployすると、管理画面での編集は取り消されます。(開発環境のコードで上書きされる)

    基本的に管理画面か開発環境かのどちらかで作業し、作業スペースを変更する時は、もう片方で作業しない様に気をつけましょう。

    私の場合、theme downloadtheme deployして、Shopifyストアの環境を開発環境に反映し、同期をとってから開発環境で作業していました。このルールはおすすめです。

    (私は最初何回も上書きして痛い目にあいました。笑)

    コードをGitで管理した方が安心

    上記の理由から、Gitで管理するのがおすすめ。何度か助けられました。Git様。

    まとめ

    まずはShopifyの導入部分である、Theme Kitの使い方についてご説明しました。

    theme watchでリアルタイム更新ができるのに私はとても感動しました。

    Shopifyの可能性は無限ですね。

    さて、皆さんも、そろそろShopifyに全集中してみてはいかがでしょうか?

    それでは!

    参考サイト

    ローカルでShopifyテーマの開発環境をセットアップする3ステップ

    Shopifyテーマカスタマイズの始め方。ローカル構築〜複数環境への反映まで【2019秋版】

    Shopify Theme Kit を使ったテーマ開発

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View