Open2

Shopifyのアプリ開発のまとめ

t-yngt-yng

参照資料

Youtube

Shopify公式のエンジニア向けのアプリ開発の動画
後述のShopifyアプリ開発のドキュメントの沿って開発の全体像を把握できる。
この動画を最初に見て全体を把握するのがオススメ

https://youtu.be/2zDFNS6r1aQ

ドキュメント

t-yngt-yng

用語集

Shopifyのアプリ開発では独特の用語がいっぱい出てきて頭が混乱するので、先に主要な単語は把握しておくと開発が非常にスムーズになる。

一般

パートナーアカウント

  • Shopifyのパートナー制度のメンバーの総称
  • Shopifyのアプリを開発する場合は開発者用のアカウントとしても使われる

パートナーダッシュボード

  • パートナーアカウントのダッシュボード
  • 開発者の場合は開発するアプリの開発者用の管理画面
  • テスト用のストアを管理（追加・削除）したり出来る

マーチャント

  • Shopifyで商品を販売する個人や企業のこと
  • マーチャント:店舗 = 1:多 の関係になる

カスタムアプリ

  • 単一のマーチャントのために独自開発したアプリ
  • アプリストアに公開できない代わりにアプリの審査も発生しない

公開アプリ

  • 不特定多数のマーチャントが利用できるアプリ
  • アプリストアで公開してマーチャントがストアにアプリをインストール可能になる

ストア管理のアプリ開発

注文管理などストアの管理画面で使うアプリの開発で登場する用語

Admin API

  • 注文情報などマーチャント側の管理機能を提供するAPI
  • GraphQLとRESTがある

Storefont API

  • 購入者の情報やチェックアウト、カート情報など販売サイト側の情報を取得したり作成するAPI
  • 提供はGraphQLのみ

Poralis

  • Shpifyアプリのストア管理画面で使われるUIコンポーネントライブラリ

App Bridge

  • Shopifyのストア管理画面の機能を提供するJavaScriptライブラリ
  • トースト表示や商品選択モーダルなどの管理画面の標準機能をライブラリとして簡単に利用できる
  • Reactコンポーネントとして機能がラップされて提供もされている
    • ResourcePicker や Toast など
  • Poralis をUI部品とすると App Bridge は動作部品みたいな感じ

App extensions

  • アプリに追加できる拡張機能
  • ストア管理画面の注文一覧ページで「その他の操作」の項目一覧に指定したURLのリンクを追加したりできる
  • パートナーダッシュボード > アプリ管理 > アプリ > 拡張機能 で設定が可能

テーマを使ったストアフロントの開発

オンラインストアの販売サイトに関連する開発で登場する用語

ストアフロント

  • 購入者が利用するオンラインストアの販売サイト
  • 店舗運営者が作成した販売サイトをストアフロントと呼んでる

テーマ

  • オンラインストアの販売サイトのデザイン
  • テーマの変更はWordPressでのデザイン変更に近い感覚
  • ストア管理画面 > オンラインストア > テーマ > カスタマイズ でGUIでテーマの編集ができる

Liquid

  • ストアフロントのテーマ実装の基盤となるShopifyが開発したテンプレートエンジン
  • テンプレートエンジン自体はOSSとしてShopify以外の場所でも利用可能
  • テーマを開発する場合はLiquidを使って開発を進める
  • ストア管理画面 > オンラインストア > テーマ > アクション > コード編集 からストアのLuquidのコードを編集できる

Ajax API

  • カート情報の取得や商品情報の操作などを販売サイト上で制御するためのJavaScript用のAPI

カート内の情報を取得する場合は/cart.jsにクライアントからリクエストを送ることで実装ができる。
※ /cart.js は開発者が用意したファイルでなく Ajax API が提供するエンドポイント
※ APIのエンドポイントがJSファイルになっているイメージ

var cartContents = fetch('/cart.js')
  .then(response => response.json())
  .then(data => { return data });

ScriptTag API

  • アプリが提供するJSファイルをアプリユーザーのストアフロントに埋め込むことができるAPI
  • ストアフロントに機能を追加するアプリを開発する場合に利用できる

App proxies

  • ストアフロントからアプリへリクエストを送信する時にShopifyをプロキシとして動作させる仕組み
  • ストアのドメイン配下のサブパスでAPIへリクエストしたりが可能になる
  • ScriptTag API でアプリがホスティングされた外部ドメインのサーバーからJSファイルを読み込む際にブラウザのクロスドメイン制約を回避できる
  • パートナーダッシュボード > アプリ管理 > 拡張機能 > オンラインストア > アプリプロキシ から設定ができる
  • ページの遷移先をアプリ開発者が用意したページに遷移させたりが可能