Tech Blog
Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する
今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...
Shopify Vite Plugin でテーマ拡張機能の開発体験を改善する
今回は Barrel が提供する Shopify Vite Plugin を導入して、テーマ拡張機能の開発体験を改善する方法をご紹介します。 対象読者 テーマ拡張機能の開発経験がある方 はじめに Shopifyのテーマ拡張機能 (Theme app extensions) はShopify アプリ開発において、ストアフロントに機能を追加するための機能です。 Liquid、JavaScript、CSSなどを使って開発することができますが、通常のアプリ開発と比較すると、ローカルでの開発体験はそれほどよくありません。 そこで、今回は Shopify Vite Plugin を導入して、開発体験を改善していきます。 Shopify Vite Plugin とは Barrel が提供する Vite用プラグインです。ViteをShopify テーマ開発に組み込んで開発体験を改善することを目的として作られていますが、テーマ拡張機能においてもその恩恵を受けることができます。...
Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする
Tsun Inc. CTOの小笠原です。今回はShopifyアプリのテーマ拡張機能をCI上からデプロイする手順をご紹介します。現在テーマ拡張機能を開発されている方、今後開発される方の参考になれば幸いです。 なぜやるのか Shopifyのテーマ拡張機能を開発するには、Shopifyアプリとは別にShopify上にデプロイします。(テーマ拡張機能のLiquidやJavaScriptのファイル等はShopifyのサーバーから配信されます) また、デプロイ後にShopify Partnerの管理画面からテーマ拡張機能を公開する必要があります。 デプロイ作業を自動化しておくと、テーマ拡張機能の更新漏れや公開作業のミスをある程度防ぐことができます。(ただしShopify Partnerの管理画面からテーマ拡張機能を公開する作業までは自動化できません) 前提条件 対象読者 Shopifyアプリのテーマ拡張機能の開発をしている 環境 Shopify CLI: Version 3.39.0 Package manager: npm 準備するもの Shopifyアプリのテーマ拡張機能 CI/CDサービス (GitHub Actions、CircleCIなど) 対応手順 Shopify Developers Platformに公式ガイドがあるので、基本的にはこちらの手順に沿って進めれば大丈夫です。 テーマ拡張機能のIDを取得する...
Shopifyのテーマ拡張機能をCI/CDサービスからデプロイする
Tsun Inc. CTOの小笠原です。今回はShopifyアプリのテーマ拡張機能をCI上からデプロイする手順をご紹介します。現在テーマ拡張機能を開発されている方、今後開発される方の参考になれば幸いです。 なぜやるのか Shopifyのテーマ拡張機能を開発するには、Shopifyアプリとは別にShopify上にデプロイします。(テーマ拡張機能のLiquidやJavaScriptのファイル等はShopifyのサーバーから配信されます) また、デプロイ後にShopify Partnerの管理画面からテーマ拡張機能を公開する必要があります。 デプロイ作業を自動化しておくと、テーマ拡張機能の更新漏れや公開作業のミスをある程度防ぐことができます。(ただしShopify Partnerの管理画面からテーマ拡張機能を公開する作業までは自動化できません) 前提条件 対象読者 Shopifyアプリのテーマ拡張機能の開発をしている 環境 Shopify CLI: Version 3.39.0 Package manager: npm 準備するもの Shopifyアプリのテーマ拡張機能 CI/CDサービス (GitHub Actions、CircleCIなど) 対応手順 Shopify Developers Platformに公式ガイドがあるので、基本的にはこちらの手順に沿って進めれば大丈夫です。 テーマ拡張機能のIDを取得する...