とーますメモ

Ruby on Rails / Goなどの学習メモ

【Shopify】Railsを利用したShopifyアプリを作成してみる

自分用メモ。
アプリを作成する前に前提として以下の3つの準備が必要

①ngrokの設定

最初からサーバを用意できるのならば、それでも良いかもしれないが
自分の場合、ローカルマシンを開発サーバとして、
Shopifyから「直接」アクセスさせる方法を試す。

localhostで動いているサーバーを、LANの外から直接アクセスできるように
させるためのツールとして「ngrok」を使用する。

詳しい設定の方法は以下を参照
qiita.com

②Shopifyパートナーのアカウント作成

アプリの作成にはこのアカウントが必要なるため登録必須。
作成は以下のページから。
Shopify Partner Program — Become the next Shopify Expert

③アプリテスト用のショップがある


設定が終わったら、以下のようにしてアプリを作成する。

1) ngrokを起動

上記の記事などで、ngrokの環境設定が終わったら、
railsが動作しているポートにあわせて、ngrokを起動させる。

例)3000番ポートで動作している前提

$ngrok http 3000

f:id:Thoames1212:20180302065606p:plain

Forwardingで表示されている箇所に、
表示されているURL(例: https://betb5484.ngrok.io)で
外部から現在動作しているRailsにアクセスできる。
※以降の説明は、アプリURLが「https://betb5484.ngrok.io」であることを前提に話を進める。

一度ブラウザ上で、動作するか確認してみてほしい。
※ちなみにhttp版とhttps版があるが、特に選ばないのであればhttps版でいいだろう。

2)Shpifyパートナーのアプリ作成画面より、アプリ設定を新規作成

Shopifyパートナーの「Apps」ページの右上にある「Create app」から
アプリの新規設定を行う。
f:id:Thoames1212:20180302074249p:plain

「Create app」を押すと、以下のモーダル画面が表示されるので
「App name」には作成するアプリ名を入力し、
「App URL」には1)でも説明したngrokのForwarding箇所に表示されているURLを設定し
画面内の「Create app」ボタンを押す。
f:id:Thoames1212:20180302074612p:plain

作成できるとアプリのOverviewページに遷移する。
このページ内の「App Info」タブをクリックし、
「Whitelisted redirection URL(s)」を以下のように設定する。

https://betb5484.ngrok.io/auth/shopify/callback


f:id:Thoames1212:20180302082211p:plain

また同ページ以下の「App credentials」にある「API key」と「API secret key」は
以降の説明で使用するのでメモしておく。

f:id:Thoames1212:20180302093729p:plain

3)RailsでShopify Appの設定をする

gem 'shopify_app'をインストールする
GitHub - Shopify/shopify_app: A Rails Engine for building Shopify Apps

gem 'shopify_app'

デフォルトのジェネレータコマンドがあるので、
それを使用し、Shopifyとの接続に最低限必要なファイルを生成する。

そのためには2)でメモしておいた
「API key」と「API secret key」を以下のフォーマットのように設定し、
ファイルを生成する

$ bundle exec rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret>

問題なくコマンドが流れれば、以下のようなファイル群が生成される。
f:id:Thoames1212:20180302084812p:plain

生成されたファイル群の中に、Shopify用のmigrationファイルが
存在するのでマイグレーションを行う。

$ bundle exec rake db:migrate

また生成されたファイル群の中に
config/initializers/shopify_app.rbというファイルがあるが
このファイルのscope(権限)を設定することで、
使用できるShopify APIの権限を設定することができる。

デフォルトでは「read_orders, read_products」となっているため
「注文情報の読込権限」と「商品情報の読込権限」のみが設定されていることになる。

設定できるスコープの詳細は以下。
API access scopes - OAuth - Shopify Help Center

アプリの用途によって、設定する値を変更してほしい。
※注意してほしいのは、ショップにアプリを一度インストールした後に、
このスコープを変更しても、変更されない。

4)Railsを起動

$ bundle exec rails s

5)ショップにアプリをインストールする

https://betb5484.ngrok.io」にアクセスすると
以下の画面になる。

f:id:Thoames1212:20180302090504p:plain

ここに、インストール先のアプリURL(xxxxxx.myshopify.com)を入れて
アプリをショップにインストールする。

インストールボタンを押すと、以下のページになる。
f:id:Thoames1212:20180302092300p:plain

設定したスコープに応じて、アプリ内で使用可能な権限が表示される。
問題なければ右下の「install unlisted app」をクリックし、インストールする。

問題なくインストールが終わると、デフォルトのアプリ画面トップに遷移し
以下のようなページが表示される。

f:id:Thoames1212:20180302092941p:plain

上画面では、ジェネレーターで表示されたhome_contoller.rb内で
設定されている「商品10件」と、「Webhook一覧」が表示される。

app/controllers/home_controller.rb

class HomeController < ShopifyApp::AuthenticatedController
  def index
    @products = ShopifyAPI::Product.find(:all, params: { limit: 10 })
    @webhooks = ShopifyAPI::Webhook.find(:all)
  end
end

後は公式のAPIドキュメントを見ながら、必要に応じたAPIを活用し
アプリを作成すればよい。

help.shopify.com

ちなみにアプリはデフォルトでは「埋め込みアプリ」として
インストールされる。

詳細は以下。埋め込みアプリじゃない方法としても使用できる方法も紹介している。
参考にされたし。
thoames.hatenadiary.jp



[参考サイト]
Shopify 用のプライベートアプリを作ってみた - Qiita