Shopify

【初心者必見】Shopifyの開発環境「Theme Kit」の設定方法(Mac版)

2021年1月18日

Shopifyサイトを作りたい人

Shopifyの開発環境設定に『Theme Kit』がおすすめされていたけどどうやって設定するの?
プログラミング初心者の私でも必要なのかな?

 

今回はこのような質問を解決していきます。

この記事の対象者

・これからShopifyのテーマ開発を行っていきたいという人

ECサイトに興味のある方

Theme Kitの開発環境の設定に困っている方

 

まず結論ですが、ShopifyECサイトを作成するだけであれば「Theme Kit」を利用する必要はありません。

しかし、既存のテーマを自社サイト用にカスタマイズしたり新しいテーマを開発したいという方にはとても便利なツールとなっています。

そこで今回は「Theme Kit」のインストールから連携するまで出来るだけ詳しく解説していきます。

 

参考

 ShopifyLiquidというShopifyのサイトを構築する独自のプログラミング言語を利用しており、これはRubyをベースとしとして作られていますが、既存のテーマが多数備え付けられているのでプログラミング知識が全くない方でもノーコードで簡単に自社ECサイトを作成することができます。

 

まずはノーコードで自分のECサイトを作成してみたいという方はこちらの動画がおすすめです。

少し長い動画ですがこちらを観るだけでひと通りのECサイトを作ることが出来ます。

 

それではTheme Kit」の設定方法が一つずつ説明していきますので一緒にやっていきましょう!

 

それでは出来るだけ丁寧に解説していきますので頑張ってくださいね。

 

注意

この記事はMacOSでの環境構築について記載しております。Windowsを使用されている方はこちらの記事を参考にして環境構築を行ってください。

 

環境構築を行う前にShopify Partnerに登録していない方はこちらから登録してください。

 

1.環境構築を行うメリット

 

Shopifyではカスタマイズ画面からコードの編集を行うことができますが、普段から atomVisual Studio Codeなどのコードエディターを利用していると多少使いづらく感じるところがあります。

 

そこで、Theme Kitでローカル開発環境を設定することにより自分の好きなコードエディターから編集を行うことができます。

 

修正程度ならカスタマイズ画面からの修正でも十分ですが、テーマ編集をがっつり行っていきたい方であれば必須です。

 

 

ローカル環境とは

 ローカル開発環境とは実際のサーバーにアップする前に、サイトの動作や表示確認を手持ちのパソコン内で行うことを意味します。
 ローカル開発環境によりインターネット上のサイトに影響を与えることなく、安心してカスタマイズを行うことが可能になります。

 

開発環境設定の手順

Shopifyの環境構築の流れは以下の通りです。

Homebrewのインストール

Theme kitのインストール

③認証API、パスワードの取得

④テーマとの連動

 

すでに意味が分からない人もいるかもしれませんが順番に説明していきますので、安心してください。

 

Homebrewのインストール

まずはHomebrewのインストールです。

Homebrewについて知りたい方はこちらの記事をご覧ください

また、すでにインストール済みの場合は②まで飛ばしてください。

 

1.ターミナルを起動Command+スペースで「ターミナル」と検索するとTerminal.app表示されます。)

 

2.Homebrewの公式ページを開くとインストール用のスクリプトがあるのでコピーします。

一応、下記にインストール用のスクリプトを貼っておきます。

こちらは執筆当時のものになりますので変更されている場合がありますので公式ページからコピーした方が確実です。

 $ /bin/bash -c "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

コピーしたスクリプトをターミナルに貼付けてエンターを押すとダウンロードが開始します。

※一度パスワードが求められるので、パスワードを入力し、エンターを押しましょう
 (MacOSのユーザーユーザーアカウントのパスワードと同じです)

すると、このように表示されます。

そして、もう一度エンターを押すとインストールが開始されます。

下の方に「successful!」と表示されていればインストール完了です。

 

3.インストールが出来ているか確認する

Homebrewが無事にインストールが出来ているか確認する場合は

 $ brew help


下記のようなコマンドが表示されていれば正常にインストールされています。

 

Homebrewのインストールが完了したらTheme Kitのインストールに移っていきます。

 

Theme Kitのインストール

次にTheme Kitをインストールします。

こちらも手順通りに行えば簡単です。

Theme Kitも引き続きターミナル(Command+スペースで「ターミナル」と検索するとTerminal.app表示されます。)を利用します。

ターミナルを開き、下記のコードを入力してください。

 $ 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が無事にインストール出来ているか確認する場合は

 $ theme help

を入力し、実行しましょう。

 

正常にインストールされていれば、下記のようなShopify Theme Kit のコマンド一覧が表示されます。

 

③テーマの作成・連携

Theme Kitのインストールが完了したら、あなたの作成しているShopifyのサイトと連携していきます。

Theme Kitとサイトを連携させる為には、以下の3つの情報が必要になってきます。

 

必要なモノ

  • 認証API
  • ストアネーム
  • テーマID

 

それぞれの準備方法を説明していきます。

 

認証APIの取得

まず認証APIの取得をしますので図のとおりに操作してみてください。

①Shopifyの管理画面にログイン

 

②「アプリ管理」をクリック

 

③右下の「プライベートアプリを管理する」をクリック

 

④「プライベートアプリの開発を有効にする」をクリック

 

⑤3つのボックスにチェックを入れ、「プライベートアプリの開発を有効にする」をクリック

 

⑥「プライベートアプリ名」・「緊急連絡用開発者メール」を入力

こちらのアプリ名には何でも大丈夫です。自分がわかる名前を記入しましょう。

 

⑦「Admin API」欄にあるTheme templates and theme assetsを「読み取りおよび書き込み」に変更

 

⑧「保存する」を押すとAPIとパスワードが発行されます。

これで認証APIの準備は完了です。

認証APIを取得すると、このような画面が表示されます。

発行されたパスワードは後ほど使いますのでメモなどに保存しておきましょう。

 

APIとは

APIとは「Application Programming Interface」の略で直訳するとアプリケーションとプログラムをつなぐものという意味です。
今回はShopifyとローカル環境をつなぐものだという認識で良いでしょう。

 

ストアネーム

ストアネームは最初に決めるお店の名前のことです。

今回はURLの画像赤枠の部分を使います。

(あなたのストアネーム).myshopify.comになるかと思います。

コピーして保存しておいてください。

 

テーマID

テーマIDshopify構築用のテーマのことです。

テーマによってIDも変わりますので、どのテーマで構築していくかは最初に決めておきましょう。

 

今回は「debut」を利用したIDを取得していきます。

また、テーマIDの取得方法はいくつかありますが、今回は簡単な方法を説明していきますね。

①トップページアクションコードを編集するの順に進んでください。

 

②下記画像で囲んである部分がテーマIDになります。コピーして保存しておきましょう。

 

 

これでTheme Kitとの連携準備完了です。

ここまで長かったですが、完了まであと少しです。

 

最後に、先程保存しておいた

・認証API

・ストアネーム

・テーマID

を利用しますので準備をお願いします。

 

theme kitとの連携

Theme Kitとの連携は次の通り

1.ターミナルを開く

まずはターミナルを開き、連携先のファイルを指定します。指定方法は次の通り

①「ls」と入力し、現在のディレクトリを確認する。

「ls」と入力するとこのように表示されます。

②「cd ○○」と入力し、Shopifyのliquidファイルを保存したいファイルに移動する。

連携すると移動したファイルにShopifyのテーマファイルがすべて反映されるので、専用のファイルを作っておくといいでしょう。

 

2.コマンドを入力する

指定のファイルまで移動ができたら、下記のコマンドを入力します。

先程の3つの情報を用意してください。

 $ theme new --password=[認証IDのパスワード] --store=[ストアネーム] --name=[テーマID]

コマンドのそれぞれ[]内にコマンドを入力してエンターすると次のように表示されます。

これでShopifyのテーマとの連携ができました。

 

3.連携が成功しているか確認

連携が確認できたらターミナルで下記のコマンドを入力してください。

 $ theme watch

これでテーマがリアルタイムで反映されるようになりますので、

実際にテーマエディターを開いて編集をしてみてください。

 

 

Theme Kitのコマンド一覧

バージョンの確認

 $ theme version

現在のTheme Kitのバージョンを確認することが出来ます。基本的にインストールの確認など以外使うことはありません。

 

テーマのリアルタイム反映

 $ theme watch

こちらのコマンドを入力すると、テーマエディターで編集したコードがShopifyのテーマ環境ですぐに反映されるようになります。
中止したい時は「ctrl + c」で中止されます。

 

開発中のテーマを開く

 $ theme open

開発画面をその場ですぐに開きたい時に使います。

 

もっと知りたい方は公式ページをご覧ください。(全文英語です)

まとめ

今回はTheme Kitインストール方法と連携の方法を解説してきました。

 Shopifyでテーマを編集していきたい方にとっては必須のツールになるかと思います。

 

手順通りに進めれば30分もかからず設定出来ますが、一度つまずくと全くわからなくなるのが環境構築です...

この記事を書いている私も初めての環境構築に1時間以上かかってしまいました。

なので、わからないことやつまづいたことがあればコメントやTwitterのDMなどで遠慮なく聞いてくださいね。

環境設定を行ってストレスの少ないshopifyテーマ構築をしていきましょう。

 

-Shopify
-

Copyright© YOSUKELOG , 2021 All Rights Reserved Powered by AFFINGER5.