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ストア管理画面の「設定 >...

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のチュートリアル(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 など)...

Shopifyアプリ開発を始める!開発言語・必須スキル・学習手順とは

これからShopifyアプリを開発する方へ 本記事では、Shopifyアプリを開発するために必要なプログラミング言語・必須スキルを全てを全てご紹介します。 これからShopifyアプリを開発したいと思っている方に、 遠回りせず最短距離でスキル・知識を身につけてもらいたいと思います。 さらに、 Shopifyアプリを開発するための学習方法 をご紹介します。 本記事の構成 Shopifyアプリ開発の全体像 開発に必要なプログラミング言語 必須スキル 学習方法   Shopifyアプリ開発の全体像 Shopifyアプリ開発の全体像は次のようになっています。 こちらの全体像の解説は、動画でご説明いたします! 開発に必要なプログラミング言語 フロントエンドとバックエンドのそれぞれで必要なプログラミング言語を解説いたします。 もちろん、Ruby on Railsのようなテンプレートエンジンを使った開発も可能です。 フロントエンド プログラミング言語 JavaScript ライブラリ React.js、Polaris ※ライブラリとは、再利用可能なコードの集まりで、特定の機能を提供します。React.jsをプログラミング言語と表現してもいいのですが、厳密にはJavaScriptのライブラリになります。 基本的にJavaScriptのライブラリであるReact.jsを中心に開発します。 PolarisはReact.jsベースで構築された、Shopifyストア管理画面と同じようなデザインを構築できるライブラリです。 そのため、...

Shopifyアプリ開発を始める!開発言語・必須スキル・学習手順とは

これからShopifyアプリを開発する方へ 本記事では、Shopifyアプリを開発するために必要なプログラミング言語・必須スキルを全てを全てご紹介します。 これからShopifyアプリを開発したいと思っている方に、 遠回りせず最短距離でスキル・知識を身につけてもらいたいと思います。 さらに、 Shopifyアプリを開発するための学習方法 をご紹介します。 本記事の構成 Shopifyアプリ開発の全体像 開発に必要なプログラミング言語 必須スキル 学習方法   Shopifyアプリ開発の全体像 Shopifyアプリ開発の全体像は次のようになっています。 こちらの全体像の解説は、動画でご説明いたします! 開発に必要なプログラミング言語 フロントエンドとバックエンドのそれぞれで必要なプログラミング言語を解説いたします。 もちろん、Ruby on Railsのようなテンプレートエンジンを使った開発も可能です。 フロントエンド プログラミング言語 JavaScript ライブラリ React.js、Polaris ※ライブラリとは、再利用可能なコードの集まりで、特定の機能を提供します。React.jsをプログラミング言語と表現してもいいのですが、厳密にはJavaScriptのライブラリになります。 基本的にJavaScriptのライブラリであるReact.jsを中心に開発します。 PolarisはReact.jsベースで構築された、Shopifyストア管理画面と同じようなデザインを構築できるライブラリです。 そのため、...

サーバレスでShopifyアプリの構築方法を解説!AWS Amplify, Serverles...

今までHeroku環境で開発したことしかありませんでしたが、Shopifyのカスタムアプリ開発を機にAWSでのサーバレス環境の構築にチャレンジしてみることになりました。 今回は下記のブログを参考にAWSにSPA + Serverless構成にしてみました。 Shopify アプリを AWS に SPA + Serverless 構成でデプロイする – React + Amplify / Node.js + Serverless Framework – | TECH | NRI Digital Shopify App CLIは便利なツールですが、本番環境は...

サーバレスでShopifyアプリの構築方法を解説!AWS Amplify, Serverles...

今までHeroku環境で開発したことしかありませんでしたが、Shopifyのカスタムアプリ開発を機にAWSでのサーバレス環境の構築にチャレンジしてみることになりました。 今回は下記のブログを参考にAWSにSPA + Serverless構成にしてみました。 Shopify アプリを AWS に SPA + Serverless 構成でデプロイする – React + Amplify / Node.js + Serverless Framework – | TECH | NRI Digital Shopify App CLIは便利なツールですが、本番環境は...

[2022年版] Shopify アプリ開発 チュートリアルの徹底解説 – Shopify C...

2022年6月にShopifyアプリ開発のチュートリアルが刷新されたため、内容を徹底解説していきます。 2022年12月にShopifyアプリ開発のテンプレートとチュートリアルが更新されました。 そのため、この記事と最新版(2023年版)とに差異があります。 2023年8月のShopify Summer Edition'23 で、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 最新版を学習されたい方は下記にリンクをご確認ください。 [2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説! 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になって... techgeek-school.com 2023.09.12 推定完了時間 2時間 前提条件 パートナーアカウントと開発ストアを準備済み Node.js 14.13.1以降をインストール済み npmまたはyarnをインストール済み Gitをインストール済み ngrokのアカウントを登録済み...

[2022年版] Shopify アプリ開発 チュートリアルの徹底解説 – Shopify C...

2022年6月にShopifyアプリ開発のチュートリアルが刷新されたため、内容を徹底解説していきます。 2022年12月にShopifyアプリ開発のテンプレートとチュートリアルが更新されました。 そのため、この記事と最新版(2023年版)とに差異があります。 2023年8月のShopify Summer Edition'23 で、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。 最新版を学習されたい方は下記にリンクをご確認ください。 [2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説! 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になって... techgeek-school.com 2023.09.12 推定完了時間 2時間 前提条件 パートナーアカウントと開発ストアを準備済み Node.js 14.13.1以降をインストール済み npmまたはyarnをインストール済み Gitをインストール済み ngrokのアカウントを登録済み...

[2021年版] Shopify アプリ開発 ー 公式チュートリアルを徹底解説

最新版2023年度チュートリアルはこちら(2023/09/12) 2023年8月にフレームワークがRemixに変更されました。 最新版を学習されたい方は下記にリンクをご確認ください。 [2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説! 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になって... techgeek-school.com 2023.09.12 2022年度版チュートリアルはこちら(2022/06/26) [2022年版] Shopify アプリ開発 チュートリアルの徹底解説 - Shopify CLI 3対応 2022年6月にShopifyアプリ開発のチュートリアルが刷新されたため、内容を徹底解説していきます。2022年12月にShopifyアプリ開発のテンプレートとチュートリアルが更新されました。そのため、この記事と最新版(2... forestbook-freelance.com 2022.06.24 Shopify Unite...

[2021年版] Shopify アプリ開発 ー 公式チュートリアルを徹底解説

最新版2023年度チュートリアルはこちら(2023/09/12) 2023年8月にフレームワークがRemixに変更されました。 最新版を学習されたい方は下記にリンクをご確認ください。 [2023年 Remix版] Shopifyアプリ開発公式チュートリアル - 徹底解説! 2023年8月の Shopify Edition Summer’23 にて、Shopifyアプリ開発のテンプレートがRemixフレームワークに変更されました。今後もExpressやRubyと共存していくのかと思いきや、Shopify CLIから構築できるテンプレートはRemix一択になって... techgeek-school.com 2023.09.12 2022年度版チュートリアルはこちら(2022/06/26) [2022年版] Shopify アプリ開発 チュートリアルの徹底解説 - Shopify CLI 3対応 2022年6月にShopifyアプリ開発のチュートリアルが刷新されたため、内容を徹底解説していきます。2022年12月にShopifyアプリ開発のテンプレートとチュートリアルが更新されました。そのため、この記事と最新版(2... forestbook-freelance.com 2022.06.24 Shopify Unite...