Zenn
🌉

【Shopify.dev和訳】Apps/Dev tools/App Bridge/Getting started

2021/09/05に公開
Shopify
#
apps
tech

この記事について

この記事は、Getting started with Shopify App Bridgeの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Getting started with Shopify App Bridge

Shopify の管理画面にアプリを埋め込む | Embed your app in the Shopify admin

まず、開発ストアとアプリを作成します。

デフォルトでは、新しいアプリは Shopify 管理画面に埋め込まれます。アプリの埋め込みをオンにする必要がある場合は、以下の手順に従ってください。

  1. Partner Dashboardからアプリ管理をクリックします。

  2. アプリの名前をクリックします。

  3. アプリの概要画面から、アプリ設定をクリックします。

  4. 埋め込み式アプリセクションで 管理する をクリックします。

  5. アプリを管理画面に埋め込むセクションで、有効にするをクリックします。

アプリの埋め込みを有効にした後、Shopify は管理画面の iframe 内にアプリを読み込もうとします。

Shopify POS にアプリを埋め込む | Embeded your app in Shopify POS

まず、開発ストアとアプリを作成します。

以下の手順で Shopify POS にアプリを埋め込みます。

  1. Partner Dashboardからアプリ管理をクリックします。

  2. アプリの名前をクリックします。

  3. アプリの概要画面から、アプリ設定をクリックします。

  4. 埋め込み式アプリセクションで 管理する をクリックします。

  5. Shopify POS にアプリを埋め込むセクションで、有効にするをクリックします。

アプリの埋め込みを有効にすると、あなたのアプリは Shopify POS モバイルアプリに表示されます。

Shopify POS でのアプリの使用についての詳細は、Shopify POSのガイドをご覧ください。

HTTPS、SSL 証明書、および混合コンテンツの制限 | HTTPS, SSL certificates and mixed content restrictions

Shopify の管理画面では、すべてのページに HTTPS を使用しています。埋め込みアプリケーションも HTTPS を使用する必要があります。

埋め込みアプリケーションを実行する際に SSL を使用しないと、混合コンテンツの制限のために Web ブラウザでエラーが発生します。

frame-ancestors ディレクティブの設定 | Set the frame-ancestors directive

Shopify のアプリには、frame-ancestorsコンテンツセキュリティポリシーディレクティブを設定することで、サイトのフレーム化が可能な場所をコントロールするオプションがあります。

Content-Security-Policy: frame-ancestors 'self' https://example.myshopify.com;

frame-ancestorsディレクティブは、X-Frame-Optionsレスポンスヘッダを置き換えるもので、クリックジャッキング対策に使用できます。frame-ancestorsディレクティブの詳細については、MDN Web Docsを参照してください。

Shopify App Bridge の設定 | Set up Shopify App Bridge in your app

Shopify App Bridge は、npm で JavaScript モジュールとして提供されています。アプリにインストールする（webpackのようなバンドルラーやビルドシステムで使用する）には、npmやyarnを使用します。

npm
npm install --save @shopify/app-bridge
yarn
yarn add @shopify/app-bridge

Shopify App Bridge は、CDN がホストするライブラリのコピーを指し示す<script>タグを使って、ページに直接組み込むこともできます。Unpkgは、npm モジュールをホストする CDN の一例です。

<script src="https://unpkg.com/@shopify/app-bridge@2"></script>
<script>
  var AppBridge = window['app-bridge'];
  var actions = window['app-bridge'].actions;
</script>

OAuth での認証 | Authenticate with OAuth

埋め込みアプリケーションは iframe 内に読み込まれるため、Shopify への最初の OAuth リダイレクトは、iframe から逃れた親レベルで行われることが重要です。Shopify は X-Frame-Options=DENY ヘッダーを返し、Shopify の管理ページが iframe 内に読み込まれるのを防ぎます。Shopify App Bridge は、親ウィンドウ内でリダイレクトを実行するためのアクションを提供します。

これは、OAuth プロセスが通常マーチャントを認証プロンプトにリダイレクトして開始されるところを、代わりにフレームをエスケープするスクリプトを含むページを返すことを意味します。

Modular JavaScript
import createApp from '@shopify/app-bridge';
import { Redirect } from '@shopify/app-bridge/actions';

const apiKey = 'API key from Shopify Partner Dashboard';
const redirectUri = 'allowed redirect URI from Shopify Partner Dashboard';
const permissionUrl = `https://${host}/admin/oauth/authorize?client_id=${apiKey}&scope=read_products,read_content&redirect_uri=${redirectUri}`;

// 現在のウィンドウが「親」の場合は、location.hrefを設定してURLを変更します。
if (window.top == window.self) {
  window.location.assign(permissionUrl);

  // 現在のウィンドウが「子」の場合、Shopify App BridgeのRedirectアクションで親のURLを変更します。
} else {
  const app = createApp({
    apiKey: apiKey,
    host: host
  });

  Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}
CDN-hosted
CDN-hosted
var AppBridge = window['app-bridge'];
var createApp = AppBridge.createApp;
var actions = AppBridge.actions;
var Redirect = actions.Redirect;

var apiKey = 'API key from Shopify Partner Dashboard';
var redirectUri = 'allowed redirect URI from Shopify Partner Dashboard';

var permissionUrl = 'https://'+
                    host+
                    '/admin'+
                    '/oauth/authorize?client_id='+
                    apiKey+
                    '&scope=read_products,read_content&redirect_uri='+
                    redirectUri;

// 現在のウィンドウが「親」の場合は、location.hrefを設定してURLを変更します。
if (window.top == window.self) {
  window.location.assign(permissionUrl);

  // 現在のウィンドウが「子」の場合、Shopify App BridgeのRedirectアクションで親のURLを変更します。
} else {
  var app = createApp({
    apiKey: apiKey,
    host: host
  });

  Redirect.create(app).dispatch(Redirect.Action.REMOTE, permissionUrl);
}

次は？

認証フローの最後に、ユーザーは提供したredirectUriにたどり着きます。App Bridge がユーザーを Shopify にリダイレクトするようにすることを強くお勧めします。初期化プロセスの一環として、App Bridge は必要に応じてユーザーをリダイレクトして、あなたのアプリが Shopify の管理画面に埋め込まれるようにします。

Shopify App Bridge の初期化 | Initialize Shopify App Bridge in your app

Shopify App Bridge をあなたのアプリに追加したら、API キーとショップ名を渡して初期化する必要があります。

Modular JavaScript
import createApp from '@shopify/app-bridge';
const app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  host: host
});
CDN-hosted
CDN-hosted
var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var app = createApp({
  apiKey: 'API key from Shopify Partner Dashboard',
  host: host
});

このスクリプトは、あなたのアプリが iframe 内で読み込まれたかどうかを検出します。もしそうでなければ、スクリプトは Shopify 管理画面の相対的な埋め込み URL へのリダイレクトを作成します。設定オプションに forceRedirect: false を指定することで、この機能を無効にすることができます。

Shopify TitleBar の設定 | Set up the Shopify TitleBar

アプリの各ページで、アプリケーションに関連した Shopify TitleBarの動作を定義する必要があります。シングルページアプリ（SPA）では、アプリの状態に応じてタイトルバーを更新することができます。以下のサンプルスクリプトでは、TitleBarを更新しています。

Modular JavaScript
import { TitleBar, Button, Redirect } from '@shopify/app-bridge/actions';

const breadcrumb = Button.create(app, { label: 'My breadcrumb' });
breadcrumb.subscribe(Button.Action.CLICK, () => {
  app.dispatch(Redirect.toApp({ path: '/breadcrumb-link' }));
});

const titleBarOptions = {
  title: 'My page title',
  breadcrumbs: breadcrumb
};

const myTitleBar = TitleBar.create(app, titleBarOptions);
CDN-hosted
CDN-hosted
var AppBridge = window['app-bridge'];
var actions = AppBridge.actions;
var TitleBar = actions.TitleBar;
var Button = actions.Button;
var Redirect = actions.Redirect;

var breadcrumb = Button.create(app, { label: 'My breadcrumb' });
breadcrumb.subscribe(Button.Action.CLICK, function() {
  app.dispatch(Redirect.toApp({ path: '/breadcrumb-link' }));
});

var titleBarOptions = {
  title: 'My page title',
  breadcrumbs: breadcrumb
};

var myTitleBar = TitleBar.create(app, titleBarOptions);

次のステップ | Next steps

アプリを初期化したので、Shopify App Bridge actionsを使用することができます。

また、Shopify App Bridge でアプリをデバッグすることもできます。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます