ShopifyのコードをAPI経由で取得・更新
1. Chocolateryの環境設定
Windows PowerShellを使ってChocolateryをインストールします.
ChocolateryはWindows NTプラットフォームのためのパッケージ管理システム・インストーラです.
Chocolateryは下記からインストールすることができます.
2.Windows PowerShellを管理者権限で実行する.
管理者権限でWindows PowerShellに入らないと上手く実行できない場合がありますので注意してください.
Chocolateryのインストールが上手くできた場合は次のような実行コマンドが出てきます.
Chocolateryをのバージョンを確認するには下記のコマンドを入力します.
choco list -l
コマンドを入力すると下記の画面のようにChocolateryのバージョンが表示されます.
3. Visual Studio Code(VSCode)のインストール
VSCodeはこちらからダウンロードをしてインストールします.
VSCodeをインストールすることができたら,Chocolateryが正常に扱えるかどうかの下記のコマンドで確認することができます.
Get-ExecutionPolicy
制限付きの権限(Restricted)の場合は,権限を与えるように下記のコマンドで設定します.
※このときVSCodeに管理者権限で入っていない場合はエラーがでる可能性があるので注意してください.その場合はVSCodeを右クリック->「管理者として実行」で入り直すことでエラーが解消されるかと思います.
Set-ExecutionPolicy AllSigned
VSCodeのターミナルでChocolateryの動作確認をするために下記のコードを入力します.
choco -v
4. VSCodeの拡張機能にLiquid関係のプラグインを導入
VSCodeでLiquidのプログラムが見やすいようにプラグインを2種類導入します.
まず,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
最後にターミナルで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で編集していくことができます.
この記事が気に入ったらサポートをしてみませんか?