2024/07/05
アプリ同士の連携方法

ShopifyとGitHubを連携してECサイトの管理が便利になりました!

m.wadazumi

目次

ShopifyとGitHubを利用していて、Shopifyで注文があった際に、GitHubも立ち上げるのは手間ですよね。
そんな面倒なアプリの行き来を減らしてくれるのがアプリ連携のメリットです。
でも、プログラミングのコードを入れたりするのは難しくてできない…という方はYoomを利用してみてください。
本記事では、Yoomを利用して「Shopifyに注文があったら、GitHubのIssueを作成する」方法をご紹介します。

ShopifyとGitHubを連携するメリット

ShopifyとGitHubを連携するメリットは以下の3点が挙げられます。

1.コードのバージョン管理が簡単になる

ShopifyとGitHubを連携することで、コードのバージョン管理が簡単になります。
たとえば、ShopifyのテーマをGitHubに保存することで、管理者が複数人いても同時に作業が可能です。
また、変更履歴を追跡できるので、過去のバージョンに戻すことも簡単にできます。

2.効率的な開発プロセスが可能になる

これらのアプリが連携できていると、開発プロセスが効率的に行えます。
GitHub上でコードを修正した際に、Shopifyへ自動的に反映されるという仕組みです。
リアルタイムで変更が反映されるため、効率的な開発プロセスが可能となります。

3.早期にバグやエラーを感知できる

2つのアプリを連携させると、早期にバグやエラーに気づくことができます。
たとえば、コードが更新された際に自動的にテストされ、GitHubに結果を反映することも可能です。
よって、いち早くバグやエラーに気づくことができます。
また、新機能が追加された際も、自動化しておけば反映してくれるため、大変便利です。

ShopifyとGitHubを連携するとできる業務自動化例

ShopifyとGitHubを連携するとできる業務の自動化を例とともにご紹介します。

1.デプロイを自動化できる

GitHubでのコード変更をShopifyに自動的にデプロイするといった設定ができます。
今まで手動で行っていたデプロイの作業がなくなるため、ミスの心配もありません。
自動化させると、毎回同じデプロイの手順で実行されるので、一貫してデプロイを保てます。

2.自動的にコードレビューを行える

GitHubのプルリクエストを利用すれば、自動的にコードレビューが行えます。
たとえば、プルリクエスト作成後、メンバー個人にレビューの依頼を送信するといった設定が可能です。
この自動化によって、レビューが遅れることなく、早急に対応できます。

3.効率的にバグトラッキングに対応できる

ShopifyのバグをGitHubのIssueとして自動的に反映させ、効率的にバグトラッキングに対応できます。
このようにアプリを連携して自動化すると、バグ修正にも早急に対応が可能です。
バグの特定から修正までスムーズに行えるのもアプリ連携のおかげと言えます。
開発プロセスや製品の向上につながるのは大きなメリットです。

ShopifyとGitHubの連携フローの作り方

それではアプリを連携させ、自動化するフローの作成をしていきましょう。
今回は、「Shopifyに注文があったら、GitHubのIssueを作成する」といった下部のフローをご紹介します。

このフローを作成する前に、アプリ連携の方法をお伝えしていきます。

これらのアプリを連携させ、自動化までしてくれる便利なアプリがYoomです。
機械の操作が苦手な私でも数分で作成できたので、誰でもすぐに作成できるようになります。

それでは、ShopifyとGitHubをYoomに連携させるアプリ連携の方法を解説していきます。
Yoomではお使いのアプリを連携させるマイアプリ登録が必要です。
Yoomのアカウントをお持ちの方は、Yoomにログインしてください。
まだYoomのアカウントをお持ちでない方は、こちらからアカウントを発行しましょう。

ShopifyとGitHubのアカウントをYoomと接続する方法

はじめにShopifyのマイアプリ登録から行っていきます。

Shopifyのマイアプリ登録の方法はこちらを参考に連携してください。
次にGitHubのマイアプリ登録を行っていきます。
Yoomの画面左側にある「マイアプリ」を選択し、「新規接続」をクリックしてください。
「アプリ名で検索」から検索するか、スクロールしてGitHubを探します。


以下のような画面に移行したら、サインインしてください。


2つのアプリ連携が完了したら、マイアプリ欄にShopifyとGitHubが表示されます。

Shopifyに注文があったら、GitHubのIssueを作成する方法

今回は、「Shopifyに注文があったら、GitHubのIssueを作成する」方法をご紹介します。
ステップは以下のように2つしかありませんので、安心してください。

  1. Shopifyに注文があったら起動するトリガーを設定
  2. GitHubのIssueを作成するアクションを設定

画面左側にある「プロジェクト一覧」から、作成したいプロジェクトを選択するか、新規にプロジェクトを作成します。
新規にプロジェクトを作成したい場合は、「プロジェクト一覧」の右にある「+」から作成できます。
右上にある「新規作成」→「はじめから作成」をクリックして、フローを作成していきましょう。


「タイトル」と「説明」は任意で設定し、起動するフローボットの条件を「特定のアプリイベントを受信したとき」を選択します。


「アプリトリガーのタイトル」をお好みで設定し、「トリガーアクション」を「注文情報が更新されたら(Webhook)」を選択してください。


以下の画面に移行したら、「Webhook URL」をコピーし、Shopifyストア管理パネルを開きます。

  • 管理パネルにある「設定」→「通知」→「Webhook作成」をクリック
  • Webhook設定は、「イベント」から「注文の更新」を選択
  • 「フォーマット」は「JSON形式」をクリック
  • 「URL」もしくは「メールアドレス」欄に先ほどコピーしたWebhook URLをペースト

「テスト」をする前に、デモとしてShopify画面で注文情報を作成してください。

作成完了後、Yoom画面の「テスト」をクリックし、「テスト成功」と表示されれば「保存」をします。


次にGitHubのIssueを作成するアクションの設定をしていきましょう。

先ほど作成したShopifyのアプリトリガー下にある「+」をクリックします。
「オペレーションタイプの選択」という画面に移行したら、「アプリと連携」を選択し、GitHubをクリックしてください。


「タイトル」を任意で設定し、「アクション」を「Issueの作成」にします。


API接続設定の画面に移行したら、以下の欄を入力画面下にある説明を基に入力しましょう。


コメント欄のアウトプットを選択すると、先ほど作成したShopifyの情報が紐づいているので、GitHubのIssue作成に必要な情報をピックアップします。

{{注文ID}}と表示されますが、フローボットを起動させる際は正しく表示されるので、問題ありません。
入力が完了したら「テスト」→「テスト成功」で保存します。


最後にアプリトリガーを「ON」にすれば、設定は完了です。

ShopifyとGitHubの連携フロー応用編

今回は、「Shopifyに注文」→「GitHubのIssue作成」といったフローをご紹介しました。

応用編としてShopifyとGitHubを他のアプリと連携させるフローを2点お伝えします。
まずは、「Shopifyに注文があったら、kintoneのデータベースにレコードを追加しSlackに通知する」といったフローです。

連携させるアプリは少し違いますが、今回作成したフローボットと同じように作成できます。

こちらも、両方のアプリを開かなくていいので、大変便利です。
次にご紹介するのは「GitHubに新しいIssueが作成されたらNotionのページにテキストを追加しMicrosoft Teamsに通知する」フローです。

今回利用したGitHubの他にNotionやTeamsも連携させています。
Notionにデータを追加し、通知まで行えるので、一通りの作業がYoomで完結します。

まとめ

今回は、「Shopifyに注文があったら、GitHubのIssueを作成する」といったフローをご紹介しました。

これらを自動化することで、アプリ間の行き来や手入力のミスが減少します。
また、ShopifyとGitHubのアプリ連携により、ECサイトの開発や管理がしやすくなるでしょう。
Yoomではまだまだ連携できるアプリはたくさんあるので、ぜひご活用ください。
2週間の無料体験も提供しておりますので、気になっている方は試してみてくださいね!

この記事を書いた人
m.wadazumi
Yoomのブログ執筆を通して、Yoomの魅力を発信していきたいと思います。 みなさまのお役に立てるよう、サポートしていきます。
タグ
自動化
連携
関連アプリ
お役立ち資料
Yoomがわかる!資料3点セット
資料ダウンロード
3分でわかる!Yoomサービス紹介資料
資料ダウンロード
Before Afterでわかる!Yoom導入事例集
資料ダウンロード
お役立ち資料一覧を見る
会社概要
利用規約(JaEn
プライバシーポリシー(JaEn
セキュリティポリシー(JaEn
特定商取引法に基づく表記
©️ Yoom Inc.