Shopifyアプリ開発
![[2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！](http://techgeek-school.com/cdn/shop/articles/2023_Remix_Shopify_e0f56bb7-9b7f-43f7-a5d1-d874fd98ed9a.png?v=1694510817&width=533)
[2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！
2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になっています。 2022年11月にRemixとShopifyが提携し、実質Shopify開発専用のフレームワークとなりつつあるRemix。 今後、Shopifyアプリ開発エンジニアも、ShopifyカスタムストアフロントエンジニアもRemixで開発せざるを得ない状況になるかもしれません。 そこで、今回はRemixフレームワークでのShopify公式ドキュメントを解説していきたいと思います。 💡 推定完了時間 3時間 学べること このチュートリアルでは、次のことを学べます。 Shopify CLI を使用するRemixアプリの構築方法 テストストアにアプリをインストールする方法 アプリを通して、商品を作成する方法 前提条件 Shopifyのパートアカウントとテストストアを作成済み Node.js 16 以降がインストールされている。 Node.js パッケージマネージャー（npm, yarn）がインストールされている Git 2.28 以降がインストールされている...
[2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説！
2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になっています。 2022年11月にRemixとShopifyが提携し、実質Shopify開発専用のフレームワークとなりつつあるRemix。 今後、Shopifyアプリ開発エンジニアも、ShopifyカスタムストアフロントエンジニアもRemixで開発せざるを得ない状況になるかもしれません。 そこで、今回はRemixフレームワークでのShopify公式ドキュメントを解説していきたいと思います。 💡 推定完了時間 3時間 学べること このチュートリアルでは、次のことを学べます。 Shopify CLI を使用するRemixアプリの構築方法 テストストアにアプリをインストールする方法 アプリを通して、商品を作成する方法 前提条件 Shopifyのパートアカウントとテストストアを作成済み Node.js 16 以降がインストールされている。 Node.js パッケージマネージャー（npm, yarn）がインストールされている Git 2.28 以降がインストールされている...
Shopifyアプリ開発入門編！初心者向け
2020年以降、Shpoifyを使ったECサイト構築が急速に広まってきました。 それに伴い、アプリ開発の需要が高まりエンジニアの採用も活発になっています。 しかし、アプリ開発には高い専門知識を要求されることや、独自のガイドラインやレート制限があり、初心者にはハードルが高い開発となっています。 そこで今回は、Shopifyアプリ開発の初心者向けに入門編をご紹介いたします。 Shopifyアプリとは Shopifyアプリは、Shopifyストアの機能や性能を拡張するためのソフトウェアプラグインです。これらのアプリはShopify App Storeで提供され、ストアオーナーはそれを自分の店舗に簡単に追加できます。 また、特定のストアに独自のアプリを追加するカスタムアプリもあります。 アプリは多様な用途に使用され、以下のような機能拡張が一般的です。 主な機能カテゴリ 在庫管理: 在庫レベルのトラッキング、自動発注、など。 マーケティング: SEOの改善、Eメールマーケティング、ソーシャルメディア広告など。 セールス: アップセルやクロスセル、ダイナミックプライシングなど。 顧客サービス: チャットサポート、FAQセクションの作成、顧客のフィードバック収集など。 分析とレポート: 売上、トラフィック、顧客行動などのデータ分析。 支払いと配送: 異なる支払いゲートウェイの統合や、配送オプションの拡充。 技術的側面 API連携: Shopify APIを使用して、ストアとアプリが通信できるように設計されています。 言語とフレームワーク: Ruby on...
Shopifyアプリ開発入門編！初心者向け
2020年以降、Shpoifyを使ったECサイト構築が急速に広まってきました。 それに伴い、アプリ開発の需要が高まりエンジニアの採用も活発になっています。 しかし、アプリ開発には高い専門知識を要求されることや、独自のガイドラインやレート制限があり、初心者にはハードルが高い開発となっています。 そこで今回は、Shopifyアプリ開発の初心者向けに入門編をご紹介いたします。 Shopifyアプリとは Shopifyアプリは、Shopifyストアの機能や性能を拡張するためのソフトウェアプラグインです。これらのアプリはShopify App Storeで提供され、ストアオーナーはそれを自分の店舗に簡単に追加できます。 また、特定のストアに独自のアプリを追加するカスタムアプリもあります。 アプリは多様な用途に使用され、以下のような機能拡張が一般的です。 主な機能カテゴリ 在庫管理: 在庫レベルのトラッキング、自動発注、など。 マーケティング: SEOの改善、Eメールマーケティング、ソーシャルメディア広告など。 セールス: アップセルやクロスセル、ダイナミックプライシングなど。 顧客サービス: チャットサポート、FAQセクションの作成、顧客のフィードバック収集など。 分析とレポート: 売上、トラフィック、顧客行動などのデータ分析。 支払いと配送: 異なる支払いゲートウェイの統合や、配送オプションの拡充。 技術的側面 API連携: Shopify APIを使用して、ストアとアプリが通信できるように設計されています。 言語とフレームワーク: Ruby on...
Shopifyのメタオブジェクトページの作成方法を解説！
Shopifyで、今までのページと違う、メタオブジェクトページ（Metaobject Pages）が作成できるようになりました。 このページができたことで、これまでバックエンド側の管理として使っていたメタオブジェクトを簡単にフロントエンドにも反映できるようになりました。 このメタオブジェクトページがどのようなメリットがあるのか、どうやって作成するのかを解説していきます。 メタオブジェクトとは メタオブジェクトとは、Shopifyのデータを拡張することのできる機能です。 これまで、メタフィールドを使って顧客情報や商品情報など、既存のデータ構造に変数を追加することができました。 しかし、新しくデータ構造自体を作成できるのがメタオブジェクトになります。 これにより、新しい商品の機能一覧、サイズチャートなど新しいデータ構造を登録することが可能になります。 テックギークのこのサイトでは、受講生をメタオブジェクトとして登録しています。 このサイトもShopifyで構築しているので、ぜひ参考にしてください。 メタオブジェクトページとは メタオブジェクトページとは、メタオブジェクト固有のページになります。 例えば、受講生というメタオブジェクトがあるとします。 受講生には、 Aさん Bさん のエントリーが登録されているとします。 メタオブジェクトページを使うことで、Aさんのプロフィールページ、Bさんのプロフィールページといったように、Shopifyのメタオブジェクトのエントリーごとにページが作成されます。 これが、メタオブジェクトページです。 テックギークの受講生のメタオブジェクトページは下記のリンクで確認できます。 https://techgeek-school.com/pages/student/7136055689528 メタオブジェクトページのメリット・デメリット 通常のページとメタオブジェクトページの違いは、 Liquidを使ってページ内でmetaobjectオブジェクトを呼び出せることにあります。 逆にデメリットとしては、Liquidを使わないとほぼ構築できない点にあります。 そのため、Shopifyのテーマ開発エンジニアに構築を依頼する必要があります。 メタオブジェクトページの作成方法 まず、Shopifyストア管理画面の「設定 >...
Shopifyのメタオブジェクトページの作成方法を解説！
Shopifyで、今までのページと違う、メタオブジェクトページ（Metaobject Pages）が作成できるようになりました。 このページができたことで、これまでバックエンド側の管理として使っていたメタオブジェクトを簡単にフロントエンドにも反映できるようになりました。 このメタオブジェクトページがどのようなメリットがあるのか、どうやって作成するのかを解説していきます。 メタオブジェクトとは メタオブジェクトとは、Shopifyのデータを拡張することのできる機能です。 これまで、メタフィールドを使って顧客情報や商品情報など、既存のデータ構造に変数を追加することができました。 しかし、新しくデータ構造自体を作成できるのがメタオブジェクトになります。 これにより、新しい商品の機能一覧、サイズチャートなど新しいデータ構造を登録することが可能になります。 テックギークのこのサイトでは、受講生をメタオブジェクトとして登録しています。 このサイトもShopifyで構築しているので、ぜひ参考にしてください。 メタオブジェクトページとは メタオブジェクトページとは、メタオブジェクト固有のページになります。 例えば、受講生というメタオブジェクトがあるとします。 受講生には、 Aさん Bさん のエントリーが登録されているとします。 メタオブジェクトページを使うことで、Aさんのプロフィールページ、Bさんのプロフィールページといったように、Shopifyのメタオブジェクトのエントリーごとにページが作成されます。 これが、メタオブジェクトページです。 テックギークの受講生のメタオブジェクトページは下記のリンクで確認できます。 https://techgeek-school.com/pages/student/7136055689528 メタオブジェクトページのメリット・デメリット 通常のページとメタオブジェクトページの違いは、 Liquidを使ってページ内でmetaobjectオブジェクトを呼び出せることにあります。 逆にデメリットとしては、Liquidを使わないとほぼ構築できない点にあります。 そのため、Shopifyのテーマ開発エンジニアに構築を依頼する必要があります。 メタオブジェクトページの作成方法 まず、Shopifyストア管理画面の「設定 >...
【徹底解説】Remixのチュートリアル（short編）
RemixのチュートリアルはTypeScriptを使用して実装を進める形になっていますが、もちろんTypeScriptを使用せずJavaScriptのみで進めることも可能です。 自分はTypeScriptにそこまで慣れていないので、今回はJavaScriptを使用してチュートリアルを進めてみることにしました。 Blog Tutorial (short) 当記事はチュートリアルの翻訳記事ではないので、自分なりの解釈で進め、随時解説を加えております。原文が気になる方はぜひ原文も読んでみてください。 前提条件 チュートリアル内にはGitpodの紹介もありますが、今回は自身のローカル環境にてチュートリアルを進めていくことにします。 ブログ執筆時点での使用端末は MacBook Pro で、OS は Monterey 12.5 になります。 また、RemixはReact.jsをベースにしたフルスタックのフレームワークなので、 JavaScriptの基本知識 React.jsの基本知識 がある方が対象となっております。 その他、Remix公式が定める前提条件が以下の通りです。 Node.js がインストールされていること(バージョン: 14.x.x または16.0.0以上) npm（バージョン: 7以上） コードエディタ (VSCode など)...
【徹底解説】Remixのチュートリアル（short編）
RemixのチュートリアルはTypeScriptを使用して実装を進める形になっていますが、もちろんTypeScriptを使用せずJavaScriptのみで進めることも可能です。 自分はTypeScriptにそこまで慣れていないので、今回はJavaScriptを使用してチュートリアルを進めてみることにしました。 Blog Tutorial (short) 当記事はチュートリアルの翻訳記事ではないので、自分なりの解釈で進め、随時解説を加えております。原文が気になる方はぜひ原文も読んでみてください。 前提条件 チュートリアル内にはGitpodの紹介もありますが、今回は自身のローカル環境にてチュートリアルを進めていくことにします。 ブログ執筆時点での使用端末は MacBook Pro で、OS は Monterey 12.5 になります。 また、RemixはReact.jsをベースにしたフルスタックのフレームワークなので、 JavaScriptの基本知識 React.jsの基本知識 がある方が対象となっております。 その他、Remix公式が定める前提条件が以下の通りです。 Node.js がインストールされていること(バージョン: 14.x.x または16.0.0以上) npm（バージョン: 7以上） コードエディタ (VSCode など)...