TIPS

2020.02.14
vol.103

WEB

Shopify(ショピファイ)で埋め込みアプリを作ってみる

vol.103 Shopify(ショピファイ)で埋め込みアプリを作ってみる

みなさんはECサイトを構築する場合、どんなプラットフォームを思い浮かべますか。今回は、ShopifyというECプラットフォームを利用したアプリの作成についてご紹介します。

Shopifyとは

Shopifyは、世界中で100万以上の企業で利用されているSaaS型のECプラットフォームです。従来抱えていた問題である、時間、コスト、煩雑さを解決した画期的なシステムとして注目されています。最近では日経新聞(2020/1/31)でも取り上げられ、とても話題になりました。

Shopifyのアプリ

Shopify app storeには、何千ものアプリが世界中で公開されており、様々なカスタマイズが可能になっています。アプリには、APIからアクセスするプライベートアプリと管理画面に埋め込むアプリが用意されています。今回は、管理画面に埋め込むアプリを作っていきます。埋め込みアプリを構築することができると、Shopify app storeに公開できるアプリの作成も可能となります。それでは、どうすればアプリを構築できるのかみていきましょう。

Nodeをインストール

最新安定版をインストールしましょう。もし、すでにインストールしている場合は8.0.1以上かどうかを確認しましょう

node.jsのダウンロード

package.jsonを作成

node.jsのパッケージを管理するnpmを使用して作成します。

Next.jsをインストール

ReactのフレームワークであるNext.jsを使用します。Next.jsの特徴は公式サイトにもあるようにモダンな技術を容易に構築することができます。

Next.jsの表示を確認

プロジェクトフォルダに、page/index.jsを下記の内容で作成します。

次に、npm scriptsを設定しましょう。package.jsonのscriptsを下記のように書き直します。

先ほど設定したnpm scriptsを実行してみましょう。

http://localhost:3000に接続して下記の表示ができればOKです。

開発環境の公開

ngrokを使うことで開発環境を外部に公開することができます。まず、ngrokをインストールしましょう。

次に、3000番ポートで公開してみます。

ShopifyのAPIキーとAPIシークレットキーを取得

Shopify partnersにログインをして取得することができます。ログイン後、左メニューのアプリ管理からアプリを作成するボタンをクリックしましょう。次に、アプリを販売しない場合はカスタムアプリ、販売を考えている場合は公開アプリを選択します。

アプリURLには、先ほど公開したSSL設定されたURLを貼り付けます。リダイレクトのURLにはアプリURLのパスの最後に/auth/callbackをつけましょう。
本記事のngrokの場合は、アプリURLはhttps://37537326.ngrok.io、リダイレクトURLはhttps://37537326.ngrok.io/auth/callbackを設定します。

最後に、アプリを作成するをクリックするとアプリ専用の管理画面にリダイレクトされます。アプリのダッシュボードにあるAPIキーとAPIシークレットキーをコピーします。プロジェクトの直下に.envファイルを作成し先ほどのキーを貼り付けます。

Node.jsを使ったサーバー構築

まず、Shopifyと認証を確立するためにOAuthを設定していきます。

次に、プロジェクトの直下にserver.jsを作成しましょう。Node.jsのフレイムワークであるKoaを使用します。ここでは、koa-shopify-authを使用し、.envに記述したAPIキーでShopifyとの認証を通していきます。

それでは、サーバーを実行してきましょう。npm scriptsを下記のように変更し、先ほど作成したserver.jsをnodeで実行するように修正します。

ターミナルでサーバーを起動します

アプリをインストール

https://NGROKURL/auth?shop=YOURSTORE.myshopify.comにアクセスすることでアプリをインストールすることができます。NGROKURLにはShopify partnersに登録したアプリのURLを入力し、YOURSTOREにはShopifyで作成したストアのURLを挿入します。
※ nginrokの無料プランの場合、エラーが出る場合があります。その場合は、プランを上げるか、herokuなどNode.jsを使用できるサーバーを使用してください。

これでアプリをインストールすることができます。あとは、Reactアプリを作る感覚で作成することができます。

まとめ

このように簡単にアプリを作成できることもShopifyの魅力です。今回は、アプリをインストールするところまでを紹介しましたが、アプリを構築する際には、Shopifyには簡単にUIを実現できるコンポーネントやGraphQLのような強力なAPI言語を使用したり、とても魅力的なサポートもあります。皆さんも一度Shopifyを利用してECサイトを立ち上げてみてはいかがでしょうか。その手軽さやハイパフォーマンスを体感できると思います。ぜひ挑戦してみてください。

参考URL
Build a Shopify App with Node and React
https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
December (
November (
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。

RECOMMENDED