ShopifyのコードをAPI経由で取得・更新

1. Chocolateryの環境設定

Windows PowerShellを使ってChocolateryをインストールします．

ChocolateryはWindows NTプラットフォームのためのパッケージ管理システム・インストーラです．
Chocolateryは下記からインストールすることができます．

Installing Chocolatey

2.Windows PowerShellを管理者権限で実行する．

管理者権限でWindows PowerShellに入らないと上手く実行できない場合がありますので注意してください．
Chocolateryのインストールが上手くできた場合は次のような実行コマンドが出てきます．

Fig.1 Chocolateryのインストール完了画面：Windows PowerShell

Chocolateryをのバージョンを確認するには下記のコマンドを入力します．

choco list -l

コマンドを入力すると下記の画面のようにChocolateryのバージョンが表示されます．

Fig.2 Chocolateryのバージョン確認

3. Visual Studio Code（VSCode）のインストール

VSCodeはこちらからダウンロードをしてインストールします．

Visual Studio Code - Code Editing. Redefined

VSCodeをインストールすることができたら，Chocolateryが正常に扱えるかどうかの下記のコマンドで確認することができます．

Get-ExecutionPolicy​

制限付きの権限（Restricted）の場合は，権限を与えるように下記のコマンドで設定します．
※このときVSCodeに管理者権限で入っていない場合はエラーがでる可能性があるので注意してください．その場合はVSCodeを右クリック->「管理者として実行」で入り直すことでエラーが解消されるかと思います．

Set-ExecutionPolicy AllSigned

Fig.3 管理者権限で入ってない場合のエラー画面

VSCodeのターミナルでChocolateryの動作確認をするために下記のコードを入力します．

choco -v

4. VSCodeの拡張機能にLiquid関係のプラグインを導入

VSCodeでLiquidのプログラムが見やすいようにプラグインを２種類導入します．
まず，VSCode拡張機能の検索欄に「Liquid」と入力します．検索結果に出力された”Liquid”と”Shopify Liquid Template Snippets”というプラグインをVSCodeにインストールします．

5. Shopify Theme Kitのインストール

ShopifyとVSCodeをAPI（Application Programming Interface）でつなぐためにTheme Kitをインストールします．
APIとは「ソフトウェアコンポーネント間で情報をやりとりするのに使用するインターフェースの使用」です．

Theme KitをVSCodeでインストールするために下記のコードを入力します．

choco install themekit

Fig.4 Theme Kitのインストール画面

最後にターミナルでthemekitのバージョンを確認します．バージョンのUpdateが必要な場合はUpdateを行います．

theme version

6. ShopifyとVSCodeの連携と取得

Admin APIアクセストークンを利用してShopifyとVSCodeを連携します．ShopifyをVSCodeを接続するために必要となるのはAdmin APIのアクセストークン，ShopのURL，テーマIDです．テーマIDはShopifyの「カスタマイズ->コード編集」から確認することができます．
上記の情報を取得できたらターミナルを開いて下記のコードを入力します．

theme get -p=[your-password] -s=[your-store.myshopify.com] -t=[your-theme-id]

Theme-kitを用いて開発する際に，以下の2つのコードを使用することでShopify側にVSCodeの更新内容を反映することができます．

theme watch --allow-live

これで，ShopifyをVSCodeで編集していくことができます．