Chapter 03

Part 2 環境構築 ~Shopify-CLIの使い方からGithubの連携~

hiroki
hiroki
2021.11.24に更新
このキャプチャーでは、環境構築 ~Windows/MacにShopify-CLIをインストールする~でインストールしたShopify-CLIの使い方からGithubの連携方法を解説します。
前回のキャプチャーに引き続き、コマンドプロンプト/ターミナルで操作します。

Shopify-CLI で環境構築

Shopify loginコマンドでログインします。
自分のShopifyパートナーアカウントにログインしてください。

$ Shopify login

コマンドを実行するとブラウザが自動的に立ち上がりログイン画面が表示されます。

ブラウザで自分のパートナーアカウントにログインしてください。
以下のメッセージが表示されたら成功です。

Logged into partner organization 

Shopify-CLI で新規テーマを作成

テーマを作成する前に、ディレクトリを作成します。

$ mkdir Shopify2.0-dev
$ cd Shopify2.0-dev

mkdirコマンドとは?
mkdirは「make directory」の略で、mkdir ディレクトリ名 でディレクトリを作成

cdコマンドとは?
cdはCHDIRの略で、cd ディレクトリ名 でディレクトリを移動

cdコマンドで作成したディレクトリに移動後、initコマンドで新規テーマを作成します。

$ Shopify theme init

Theme nameが聞かれるので好きなテーマ名を入力してください。(お任せします)

shopify theme init [ NAME ] [ options ]

上記のようにTheme Nameを一緒に記述することもできます。オプションには作成したいテーマのGuthubのURLを記述するとそのテーマを作成できます。なにも記述しない場合はDawnが作成されます。本書でも記述していないのでテーマの中身はDawnを作成します。

テーマの中身を確認します。

$ cd [Theme Name]

cdコマンドで移動後、lsコマンドでディレクトリ内を確認します。

$ ls

layout,templates,sections,snippets,assetsフォルダなどテーマに必要なファイルがあることを確認してください。

Github に連携する

Git,Githubについて詳しく解説しませんが、Githubに連携することで

  • 複数人での開発
  • ソースコードの変更を管理。変更前と変更後の差分という考え方でデータを保管しています

などのメリットがあります。
先ほどshopify theme initで作成したテーマをGithubに連携して、開発環境を構築したいと思います。

Github でリポジトリを作成する

  1. Githubにアクセスします。

https://github.com/
  1. 自分のアカウントにログインしてください。

  2. 新規リポジトリを作成します。[New]をクリックします。

  3. リポジトリの必要な情報を入力してください。

  • リポジトリ名を入力してください。(お任せします。)
  • Public,Privateはどちらでも構いません。
  • Readme、.gitignore、ライセンスにはチェックなしで問題ないです。
  1. 「Create repository」をクリックします。
  2. リポジトリページが表示されます。

今後のGitコマンドは、リポジトリページの「…or create a new repository on the command line」を参考にします。皆さんも自分のリポジトリページの「…or create a new repository on the command line」を参考してください。

ローカル環境(Shopify-CLI) と Github を連携する

  1. pwdコマンドを実行する。作成したテーマのディレクトにいることを確認します。
$ pwd
>C:\Users\名前\Shopify2.0-dev\[theme name]
  1. Gitコマンドを実行します。
$ git init 
  1. add,commitコマンドを実行します。
$ git add .
$ git commit -m "first commit"
  1. ブランチを作成する。masterブランチで作業するのはやめましょう。
git branch -M main
  1. 作成したリポジトリを紐づける。URLは作成したリポジトリに書き替えてください。
git remote add origin https://github.com/shiba-git/test.git
  1. Githubへプッシュします。
git push -u origin main

Githubのリポジトリページを再読み込みしてください。(F5キー)
画像のようにフォルダ一覧が表示されたらGithubでの設定は完了です。

ストア と Githubを連携させる

Githubにプッシュしたテーマを使用したいストアと連携します。
開発ストアを開設する手順を解説します。

  1. [ストア管理]をクリックします。パートナーアカウントのトップページの左タブにある[ストア管理]をクリックします。
  2. [ストアを追加]をクリックします。
  3. ストアを追加するページが表示されます。
  • ストアタイプは選ぶは、[開発ストア]を選択してください。
  • ストア名は、お任せします。他の人と被らないようにする必要があります。
  • ストアURLは、自動的に入力されます。ストア名と同じになります。
  • パスワードは、お任せします。忘れないようにしてください。
  • ストアのアドレスは、すでに入力済みだと思います。
  • ストアの目的は、アンケートになります。好きなものを選択してください。
  1. [保存]をクリックします。開発ストアが開設されます。

  2. ストアの管理者ページが表示されます。

  3. [オンラインストア]をクリックします。左のタブの真ん中くらいにあります。

  4. テーマのページが表示されます。

  5. スクロールして下部に移動します。[テーマライブラリー]があります。

  6. [テーマ追加]タブの[Githunから接続する]をクリックします。

  7. ShopifyのGithub接続タブからGithubのアカウントにログインしてください。

  8. 接続に成功すると、以下の画面が表示されます。

  9. リポジトリは、あなたのアカウントで持っているリポジトリが表示されます。本書で作成したリポジトリを選択してください。

  10. ブランチは、本書の手順に従っている場合はmainブランチを選択してください。

  11. ブランチの横にある[接続]をクリックしてください。

  12. リポジトリがテーマの欄に表示されれば成功です。