Shopify

Shopifyの開発を始める手順|開発環境構築

Shopifyの開発を始めるには、開発環境を準備する必要があります。
手順は以下の通りです。

Shopifyパートナー登録

Shopifyパートナー登録をするには、まず以下のサイトに移動します。
https://www.shopify.com/jp/partners

メールアドレスを入力して、今すぐ登録をクリックします。

すると以下のようなページが表示されます。

Shopifyの主な利用方法は何ですか

「クライアント向けに新しいShopifyストアを構築する」を選択します。
次へをクリックします。

すると以下のようなページが表示されます。

ビジネスのロケーションはどちらになりますか?

国/地域を選択し、都道府県を選択します。
次へをクリックします。

すると以下のようなページが表示されます。

ビジネスの連絡先情報をお知らせください

各種情報を入力してください。
次へをクリックします。

すると以下のようなページが表示されます。

ビジネスの連絡先情報をお知らせください・役職など

各種情報を入力してください。
「パートナープログラム契約を読み、同意します。」のチェックボックスをクリックします。
送信をクリックします。

すると以下のようなページが表示されます。

ビジネスのメールアドレスを確認する

受信トレイを確認してください。
すると以下のようなメールが届いています。

ビジネス用メールアドレスを確認する(受信トレイ)

「メールアドレスを確認」をクリックします。

メールアドレスが認証され以下のようなページが表示されます。

開発ストア登録完了

これで、Shopifyパートナー登録は完了です。
次は、開発ツールの導入を行います。

Shopify開発ツールの導入

Shopifyで開発を開始するには、ShopifyLCIというツールが必要になってきます。
導入するには以下のような手順を踏みます。

  1. Rubyのインストール
  2. Node.jsのインストール
  3. ShopifyCLIのインストール

Windows版Rubyのインストール

まず、自分のPCにすでにRubyがインストールされているか確認します。
確認方法は、

windowsの場合powershellを開きます。
以下のコマンドを実行します。

ruby -v

RubyがすでにインストールされていればOKです。

逆に、revision情報が表示されなかった場合は以下のRuby公式ホームページからRubyをダウンロードしてインストールします。

https://rubyinstaller.org/downloads

すると以下のようなページが表示されます。

「WITH DEVKIT」版の最新のものをダウンロードします。
ファイルがダウンロードされたら開きます。

すると以下のような警告が表示されます。

windows rubyインストーラー解説1

「詳細情報」をクリックします。

すると以下のような表示になります。

windows rubyインストーラー解説2

「実行」をクリックします。

すると以下のようにインストーラーが起動します。

windows rubyインストーラー解説3

「Install for me only(recommended)」をクリックします。

すると以下のような表示になります。

windows rubyインストーラー解説4

「Iaccept the License」のラジオボタンを選択します。
「Next」をクリックします。

すると以下のような表示になります。

windows rubyインストーラー解説5

「Install」をクリックします。

すると以下のような表示になります。

windows rubyインストーラー解説6

「Next」をクリックします。

すると以下のような表示になります。

windows rubyインストーラー解説7

インストールが行われています。少し待ちます。

すると以下のような表示になります。

「Finish」をクリックします。

すると以下のように、powershellが自動的に立ち上がります。

windows rubyインストーラー解説9

「エンター」をクリックしてください。

すると以下のような表示になります。

windows rubyインストーラー解説10

「エンター」をクリックしてください。
これでRubyのインストールが完了しました。

インストールが完了したら確認コマンドを叩きます。

ruby -v

ruby 3.3.3 がインストールされていることが確認できます。

以上がwindows版Rubyのインストールの解説です。

Mac版Rubyのインストール

まず、Macには標準でRubyがインストールされていますので、バージョンを確かめます。
Shopify-CLIx3で必要なRubyバージョンは2.7以上です。以下のコマンドで自分のPCのRubyバージョンを確かめます。

ruby -v

上記の場合Rubyバージョンが足りていません。Rubyバージョンをアップデートします。MacでRubyバージョンを変更するには、rbenv(アールビーエンヴ)を使用します。

rbenvが自分のMacにインストールされているか確認するコマンドを叩きます。

rbenv -v

command not foundが表示されたので、rbenvがインストールされていないことがわかります。バージョンが表示された場合、補足で紹介してありますので記事を読み進めてください。

では、rbenvがインストールされていない場合の方法を説明します。rbenvをインストールするため今度はHomebrewが自分のMacにインストールされているか確認するコマンドを叩きます。

brew -v

No such file or directoryが表示された場合、Homebrewがインストールされていません。次の手順でインストールします。

Homebrewの日本語公式サイトにアクセスします。
https://brew.sh/ja/

以下のようなページが表示されます。

Homebrewインストールページ

上の画像の矢印で示しているコマンドが表示されますので、コピーしてください。
コピーしたらターミナルに貼り付けてコマンドを叩きます。具体的なコマンドを以下に示します。

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

自分のPCのパスワード(PC起動時に入力するパスワード)が求められますので、入力しエンターを押してください。

Press RETURN/ENTER to continue or any other key to abort:

上記のように、「続行するにはRETURN/ENTERキーを押し、中止するには他のキーを押してください」と指示が出ますので、エンターを押します。

するとインストールが開始されます。
しばらく待ちます(2〜3分)。

実際にインストールされたか確かめるコマンドを叩きます。

brew -v

バージョンが出力されたらインストールが完了していることになります。

続いて、Homebrewがインストールできたので、Homebrewでrbenvをインストールします。
次のコマンドを叩いてください。

brew install rbenv

するとrbenvのインストールが開始されます。1分ほどかかります。

実際にrbenvがインストールされたか確かめるコマンドを次に示していますのでターミナルで叩いてください。

rbenv -v

バージョンが表示されたらrbenvがインストールされています。

続いて、rbenvの初期化を行います。次のコマンドを叩いてください。

rbenv init

the following to ~/.bash_profile:
上記の箇所が
the following to ~/.zshrc:
の方は次のコマンドを叩いてください。

echo 'eval "$(rbenv init -)"' >> ~/.zshrc

the following to ~/.bash_profile:
の方は次のコマンドを叩いてください。

echo 'eval "$(rbenv init -)"' >> ~/.bash_profile

ターミナルを再起動します。
これでrbenvを使いRubyのバージョン管理ができるようになりました。

続いて、rbenvで新しいバージョンのRubyをインストールします。
まずは、インストール可能なバージョンリストを確認するコマンドを叩きます。

rbenv install --list

今回は、3.3.3を使います。

次のコマンドでインストールします(3〜5分)。

rbenv install 3.3.3

rbenv: /Users/sugawamakoto/.rbenv/versions/3.3.3 already exists
continue with installation? (y/N)

yを入力して、エンターを押します。
インストール完了まで待ちます。

インストールが完了したら次のコマンドを叩きます。

rbenv global 3.3.3

実際にRubyの3.3.3がインストールされたか確かめます。
以下のコマンドを叩いてください。

ruby -v

以上がMac版Rubyのインストールの解説です。

Windows版Node.jsのインストール

以下のURLからNode.jsの公式ホームページにアクセスします。
https://nodejs.org/en/download/prebuilt-installer

「Download Node.js」をクリックします。

Nodeインストールページ

するとファイルがダウンロードされます。
ダウンロードされたファイルをクリックして展開するとインストーラーが起動します。

以下のような表示が順番にされていきますので順番にチェックやNextをクリックしてインストールを完了させます。

Nodeインストール1
Nodeインストール2
Nodeインストール3
Nodeインストール4
Nodeインストール5
Nodeインストール6
Nodeインストール7

これでNode.jsがPCにインストールされました。
実際にインストールされているか確かめるコマンドを叩きます。

node -v

バージョンが表示されればインストールは成功しています。

バージョンが出力されなかった場合は、一度powershellを再起動させてコマンドを叩いてみてください。

方法としては、Nodeバージョン管理ツールvoltaなどを導入するか、元バージョンのNodeをアンインストールしてインストールし直す方法があります。人によって状況は異なりますので今回の講義の進行上Nodeはv20.15.0で進めます。予めご了承ください。

Mac版Node.jsのインストール

以下のURLからNode.jsの公式ホームページにアクセスします。
https://nodejs.org/en/download/prebuilt-installer

「Download Node.js」をクリックします。

Mac版Node.jsインストーラーダウンロードページ

ファイルがダウンロードされます。
ファイルを開いてください。
インストーラーが起動します。

以下のような表示が順番にされていきますので順番に「チェック」や「続ける」をクリックしてインストールを完了させます。

Mac版Node.jsインストーラー1

「続ける」をクリックします。

Mac版Node.jsインストーラー2

「続ける」をクリックします。

Mac版Node.jsインストーラー3

「同意する」をクリックします。

Mac版Node.jsインストーラー4

「インストール」をクリックします。

Mac版Node.jsインストーラー5

自分のPCのロック解除用のパスワードを入力して、「ソフトウェアをインストール」をクリックしてください。

Mac版Node.jsインストーラー6

インストールが完了しました。
「閉じる」をクリックしてください。

Mac版Node.jsインストーラー7

インストーラーは不要になりましたのでゴミ箱に入れます。
「ゴミ箱に入れる」をクリックしてください。

ここで、実際にNode.jsがインストールされているかの確認コマンドを叩きます。

node -v

バージョンが出力され、今回扱うv20.15.0であることが確認できました。
これでMac版Node.jsのインストールは終了です。

Windows・Mac共通ShopifyCLIx3のインストール

powershellで以下のコマンドを実行します。

npm install -g @shopify/cli @shopify/theme

数秒待っていればインストールが完了します。

インストールが実際にされているか確かめるコマンドを叩きます。

shopify --version

Shopify CLI versionが表示されればインストールが完了しています。

まとめ

今回は、ShopifyのCLIを使うまでの環境構築を行いました。次回はShopifyCLIx3とストアを繋げてShopifyのストアに「Hello World」を表示させるのを目標にします。

現在sugawaya-blog.comではShopifyストアで動画講座を販売予定です。
もっとShopifyをわかりやすくするための講座です。2025年内に公開予定でプロジェクトが進んでいます。アップデートが激しいShopifyですので日々更新予定です。

講座内の内容についての質問を受けつけShopifyのコンサルティングも行う予定です。

現在ワードプレスで公開している講座は順次shopifyへ動画として移行し、ワードプレスは会員制サイトとなります。

次回の講座をお楽しみに!