🧪
ShopifyのApp Proxy
App Proxyとは？
- App Proxyは、外部のアプリがShopifyストアのページの中に「自分の特別な情報」を差し込むための「ドア」のようなものです。
- このドアを通して、アプリはShopifyストアのページに情報を表示したり、データをやりとりしたりできます。
※以下画像、Shopify Partnersより
つまり、ShopifyのApp Proxyは、Shopifyストアのテーマから外部アプリケーションに対して安全にデータをリクエストするための仕組みです。このプロキシ経由のリクエストは、特定のURLパス（通常、/apps/<app-name>の形式）で行われます。これにより、外部アプリが直接ストアのデータや機能にアクセスするように見えるため、ユーザー体験がシームレスになります。
具体例
1. 使い方：
例えば、Shopifyストアに「カスタム価格計算ツール」を追加したい場合、この計算ツールはShopifyでは直接作れないので、外部アプリを作ります。
そのアプリがShopifyページに計算結果を表示するときに、App Proxyを使います。
2. どう動くの？
- ストアのURLに特定のパス（例: /apps/custom-tool）を作ります。
- お客様がこのURLにアクセスすると、Shopifyが外部のアプリにそのリクエストを転送します。
- アプリはリクエストを受け取り、計算結果やデータを返します。
- Shopifyはそのデータを表示します。
コード例
次のようにApp Proxyを設定してデータを返す仕組みを簡単に作ります：
1. Shopifyでの設定
Shopify AdminでApp Proxyを以下のように設定します：
- Proxy URL: /apps/custom-tool
- ターゲットURL: アプリのサーバー（例: https://your-app.com/proxy）
2. アプリ側のコード (Remixでの実装)
app/routes/proxy.tsx
import { json } from "@remix-run/node";
export const loader = async ({ request }: { request: Request }) => {
const url = new URL(request.url);
const shop = url.searchParams.get("shop");
// 必要なデータを計算または取得
const customData = {
message: `Hello, this is custom data for ${shop}!`,
price: 42,
};
// JSON形式でデータを返す
return json(customData);
};
3. ストアでの表示
Shopifyのテーマで以下のように埋め込めば、お客様に表示できます：
<div id="custom-data"></div>
<script>
fetch('/apps/custom-tool')
.then(response => response.json())
.then(data => {
document.getElementById('custom-data').innerText =
`Message: ${data.message}, Price: ${data.price}`;
});
</script>
まとめ
- App ProxyはShopifyと外部アプリの間をつなぐ「ドア」。
- ストアのページにカスタムデータを埋め込むときに便利。
- セキュリティや認証も簡単に管理できます（Shopifyはリクエスト署名を検証する機能を提供）。
この仕組みを使えば、Shopifyストアにカスタム機能を簡単に追加できます！
参考
Discussion