shopify開発環境構築（Windows版）

はじめに

shopifyをローカルのコードエディタで編集したい！
VSコードを使いたい！SublimeTextを使いたい！
という事でThemeKitを使ったローカルとshopifyをつなぐ開発環境構築について書いていきます。
すでに沢山の方が開発環境構築の記事や情報をまとめてくれていますが
windowsの情報がMacに比べて少なかったり公式が更新していて元の手順が分からなくなったり、
環境構築でつまづいた部分など主にwindowsユーザーに向けてのshopify環境構築の為の記事です！

蛇足

ECサイトを作りたい！その夢を低コストでスピーディかつオシャレに叶えてくれるshopify。
シェア率を伸ばし続ける中、LudiusにもECサイトを作ってほしいという制作のお声がかかりました。

先輩は言いました。
「本当は自分で全部やるつもりだったけど、しんじゃいそうだから手伝って。」

そんなわけで入社２年が過ぎた私はshopifyという未知との存在と戦う事になったのです。
今現在、私が今まさにメインで開発を担当しているshopify。

私は後輩に言いました。
「本当は自分でやらなきゃいけなかったけど、しにそうだから手伝って。」

そんなこんなで、shopify開発環境構築からつまづいた所、情報がなくて困ったことなどをまとめつつ
少しでも役に立てたら嬉しいです！

開発環境構築

Theme Kitダウンロード

結構色々な情報サイトさんで「公式のリファレンスからダウンロードリンクがある」という情報を見ますが、
公式が更新していて「これだと簡単にテーマキットダウンロードできるよ！」みたいな案内に変わってます。
英語苦手勢からすると説明サイトからちょっとでも手順が逸れるともう絶望感に襲われます。

なので改めて公式さんが推奨してるダウンロード手順を説明します。

１まず以下のサイトからチョコレッティというものをインストールします。
https://chocolatey.org/

２windowsから「PowerShell」と検索して出てきたものを管理者権限で開いてください

３チョコレッティのサイトにあったインストール用のコマンドを「PowerShell」にペーストしてenter

４公式の説明通り「choco install themekit」を「PowerShell」にペーストしてenter
https://shopify.dev/themes/tools/theme-kit/getting-started#windows

ダウンロードを進めますか？的な事を聞かれるので［Y］(yes)を押して進んでください

PowerShellのブルーバック見てると小学生の頃PC壊した事を思い出してトラウマが蘇りますが問題ありません。
翻訳すると「C:\ProgramData\chocolatey\lib\themekit\tools\theme.exe」にテーマキットをダウンロードしたよ！
というような事が書かれてるのでそこまで移動して「theme.exe」をコピーして分かりやすいフォルダに入れておいてください
（※このtheme.exeは複製して使えます）
この手順でテーマキットがダウンロードできます。
もう、ここさえクリアできればあとは他の解説サイトさんの情報通りに行けばほぼOKです。

開発フォルダを作成

ユーザーフォルダの直下に「shopify」というフォルダを作成します。
「shopify」の中に作りたい開発環境のプロジェクト名のフォルダを作成します。

環境変数追加

環境変数を追加しましょう。コマンドからファイルを操作するのに必要です。

windowsマークを右クリックしてシステムを開く

システム詳細設定から環境変数をクリック

Pathを選んで編集

新規を押して作業するフォルダのディレクトリを設定
私はUser>名前>shopify>プロジェクト名で作ってます

プライベートアプリの追加

( ,,`･ω･´)ﾝﾝﾝ？
なんか今までとちがう・・・
今までプライベートアプリを作成という手順だったのがいつの間にかなくなってる

公式のページ確認

作れなくなってるやんけ！
そうです。shopifyも日々進化しているので突然仕様が変わったりが起きるのです。
・・・という事で記事作成中に仕様変更が発覚したので「カスタムアプリ」というもので解説していこうと思います。

さて、先ほどの画面の続きです。

分かりやすく「theme kit」と付けてアプリを作成します。

カスタムアプリの設定画面になるので「Admin APIスコープを設定する」を選択

スクロールして「テーマ」の「write_themes」と「read_themes」をチェックして保存。
テーマファイルの読み込みと書き込みを許可しますよ、な設定です。

保存したら「アプリをインストール」が出てくるのでクリックしてインストール。

「API資格情報」が出てくるので「トークンを一度開示」をクリック

※データを保護するために、Admin APIトークンは一度しか開示できません。 　Admin APIアクセストークンをコピーして、安全な場所に保存してください。

この後の開発で必ず使用するので保存しておいてください！

コードが出てくるのでコピーして大切に保管。
忘れたらカスタムアプリを作り直してね！

ここから先は、色々な方法がありますが私がよく使う方法を紹介します。

ストア接続のAPI設定

適当にメモ帳を起動して「config.yml」というファイルを作ります。
ついでにダウンロードしたテーマキットを同じフォルダにぶち込みましょう。

次は「config.yml」の中身を書いていきます。
passwordには、先ほど一回きりしか表示できない 「Admin APIトークン」を入れます。
storeには開発するストアのURLを入れましょう。
theme_idは次のセクションで解説します！
本番環境の個所はとりあえずコメントアウトして入れておきます。

# 開発環境
development:
  password: shpat_**********************
  theme_id: "1111111111111111"
  store: sample.myshopify.com

# 本番環境
#production:
#  password: Admin APIトークン
#  theme_id: "テーマID"
#  store: sample.myshopify.com

開発用にテーマを複製する / テーマIDを取得する

■無料テーマから書き換えたい場合
編集したいテーマを複製します

テーマを自分が編集する用の名前に変更して「コード編集」を開きます

URLの数字の部分がテーマIDです。

先ほどのtheme_idの部分を書き換えましょう。

# 開発環境
development:
  password: shpat_**********************
  theme_id: "1111111111111111"
  store: sample.myshopify.com

# 本番環境
#production:
#  password: Admin APIトークン
#  theme_id: "テーマID"
#  store: sample.myshopify.com

テーマファイルのダウンロード

いよいよテーマをローカル環境にダウンロードしてきます。
まずさっき作った作業用フォルダを開いて、マーカーの所に「cmd」と入れるとコマンドが開きます

コマンドを開いたらコードを入力します。

theme download --env=development

config.ymlで設定したdevelopment（開発環境）からデータをダウンロードするぜ！というコマンドです。

ダウンロードできたら

theme open

と入れると自分の開発環境のテーマが開かれるので問題なくダウンロードできているか確認しましょう！

ここまで来たら、私はGITを作ってバージョン管理スタートしてます。

さて、無事テーマをローカルに持ってくることができたので
後はsublimeなりVScodeなり好きなテキストエディターで開発を進めます。

ここで忘れちゃいけないのはローカルの変更を監視して、サーバーにアップしてくれるコマンドをスタートさせること！
shopifyはローカルでは確認できないので変更したら随時サーバーにアップロードしてサーバーから確認しなきゃいけないんですねぇ。

その変更の監視をスタートさせるコマンドが

theme watch --allow-live

文字通り、テーマをウォッチ(監視)してくれるコマンドです。
–allow-live　はただのウォッチだと、自分のテーマがメインに設定してるときにエラーが起きちゃいます。
（え？公開されてるテーマなのに反映しちゃうの？とりあえずはじいとけ！）みたいな感じです。
これは割と色んな場面で出てくるので反映されないと思ったら「メインテーマに反映しようとしたからはじかれてた」みたいな事がちょいちょいあります。
–allow-liveをつけるとメインだろうがメインじゃなかろうが問答無用で反映してくれます。
なので使うときはこっちで統一してます。

■オリジナルテーマで開発する時
まずさっき作った作業用フォルダを開いて、マーカーの所に「cmd」と入れるとコマンドが開きます

コマンドを開いたらコードを入力します。

theme new -p=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

[your-password]の所には、先ほど一回きりしか表示できない 「Admin APIトークン」を入れます。
[your-store.myshopify.com]には、開発するストアのURLを入れましょう。
[theme name]には、開発したいテーマの名前を決めて入れときます。

[ ]は取って入力してね。こんな感じ。

theme new -p=shpat_********************** --store=sample.myshopify.com --name=sampletheme

そうすると管理画面のテーマのところに作ったテーマが出現します。
この時、ローカルのフォルダにはconfig.ymlが作られてるはず。

あとは、作業を始める前にローカルの変更を監視して、サーバーにアップしてくれるコマンドをスタートさせること！
shopifyはローカルでは確認できないので変更したら随時サーバーにアップロードしてサーバーから確認しなきゃいけないんですねぇ。

その変更の監視をスタートさせるコマンドが

theme watch --allow-live

文字通り、テーマをウォッチ(監視)してくれるコマンドです。
–allow-live　はただのウォッチだと、自分のテーマがメインに設定してるときにエラーが起きちゃいます。
（え？公開されてるテーマなのに反映しちゃうの？とりあえずはじいとけ！）みたいな感じです。
これは割と色んな場面で出てくるので反映されないと思ったら「メインテーマに反映しようとしたからはじかれてた」みたいな事がちょいちょいあります。
–allow-liveをつけるとメインだろうがメインじゃなかろうが問答無用で反映してくれます。
なので使うときはこっちで統一してます。

Theme Kitでテーマ開発

開発で使うコマンド

テーマプレビュー

theme open --env=development

編集ファイルの自動反映

theme watch --allow-live --env=development

編集ファイルの自動反映

theme deploy --env=production

編集ファイルの自動反映

theme deploy --env=development

おわりに

さぁ！これでshopify開発環境の構築が終わりました！
ようこそshopifyの世界へ！
最初は苦労しても慣れてくるとshopify開発はとっても楽しいです。
これからshopify開発を楽しんでみてください♪