[カスタムコネクタ設定編]他のサービスに繋げよう！Power Appsカスタム コネクタの使い方

Part2：カスタム コネクタ設定編

それでは、前回につづきマネーフォワード請求APIへカスタムコネクタを設定していきます！
少し複雑なので、皆さん覚悟してください
今回も長文なのでカスタム コネクタの設定までとして、最後にPower Appsでの使用方法を公開する予定です。

※前回記事のMF請求API仕様の確認は、こちらを参照してください。
https://qiita.com/rockfun/items/3c3cad8fcd0ed5bce038

カスタム コネクタを設定する前に

前回MF請求でのAPI動作テストをしましたが、今回はカスタムコネクタから接続するために、MF請求側に新たにOAuthアプリケーション登録を行います。

■MF請求の「OAuthアプリケーション一覧」画面を開き新規作成を行います（作成手順は前回のブログを参照してくださいね）
・設定画面リンク先
https://invoice.moneyforward.com/oauth/applications

• 名前：好きなネーミングで大丈夫です
• Redirect URI：後ほど解説
• Scopes：readとwriteがありますが、今回は読み出しなのでread。

（注意）Redirect　URIに入力する内容ですが
Power AppsのカスタムコネクタからMF請求のAPIへ接続するので、ここにPower AppsからのRedirect URIを記入しますが、この後に続くカスタムコネクタ設定で、一通りの内容を設定して保存すると、Redirect URIが発行されるので、ここでは一旦、
https://japan-001.consent.azure-apim.net/redirectを仮に入力します。

登録したら、前回の内容と同様に、Client IDとClient Secretを、後ほどの設定で使うので、画面を開いておいてください。

ようやくカスタム コネクタを作成

それでは、Power Appsを開き、左メニューから「カスタム コネクタ」を選択して、「カスタム コネクタの新規作成」から「一から作成」を選びます。

次画面で名前をつけます。ここでは「MFInvoiceConnector」とします。

続行を押します。

1. 全般

設定項目は以下のとおり

• コネクタアイコンのアップロード
  好きな画像を設定してください
  
  
• アイコンの背景色
  ウェブカラーで指定します。
  
  
• 説明
  カスタムコネクターの説明を書きます。私は忘れない様にAPI仕様について書いているページのURLを書きました
  
  
• スキーマー（必須）
  ここは接続先のサービスの仕様になります。
  MF請求の仕様書https://invoice.moneyforward.com/api/v2/swagger_ui
  には
  と、記載されているので、httpsを選びます
  
  
• ホスト（必須）
  ここにはスキーマーで設定した以外のURLを記載します。
  invoice.moneyforward.com
  
  
• ベースURL（必須）
  APIの機能でディレクトリごとに分かれている場合には、ここに階層の文字列を記載しますが、今回は/を指定します。

スクリーンショットには写ってませんが、下部の→セキュリティーボタンで次の画面に進みます。

2. セキュリティー

設定項目は以下のとおり

• 認証タイプ：
  OAuth 2.0
• IDプロバイダー：Generic Oauth 2
• Client id：先ほどMF請求で発行したClient ID
• Client secret：先ほどMF請求で発行したClient Secret

• Authorization URL：https://invoice.moneyforward.com/oauth/authorize
  このURLは前回MF請求側でAPIをテストした時に記載されていた赤枠の情報です。

• Token URL：https://invoice.moneyforward.com/oauth/token

• Refresh URL：https://invoice.moneyforward.com/oauth/token

• スコープ：read

• リダイレクト URL：写真ではこの部分のURLが表示されていますが、先ほど説明した通りカスタムコネクタを全て設定して保存してからではないとURLが表示されないので、何も設定しなくても大丈夫です。

3. 定義

この画面では、アクションの追加を行います。
アクションの追加とは、MF請求へ繋ぐカスタムコネクタの中には、複数の動作を持たせることができます。
前回のMF請求API仕様にも沢山の機能がありましたよね！今回は見積書を検索する動作を作っていますが、アクションを追加することで、取引先の取得だとか、他にもPower Apps利用したい動作をここに登録することで、データをやりとりできる様になります。

まずは左側の新しいアクションを押して、MF請求で用意された見積もりを検索するAPIへ送る値や送られてくる項目や値を設定します。

■全般

• 概要：見積検索（自由入力で大丈夫です）
• 説明：見積書の検索・取得（自由入力で大丈夫です）
• 操作ID：GetEstimateSearch（Power Appsから利用する時に表示される名前）
• 表示：advanced

■要求
ここで具体的にAPIでデータをやりとりする値を設定します。
＋サンプルからのインポートをクリックして

• 動詞（必須）:GET
• URL（必須）:前回の記事でMF請求のAPI仕様ページの見積書一覧の検索のテストを成功させた時に記載されていたRequest URLをコピペします。
  
  https://invoice.moneyforward.com/api/v2/quotes/search?q=937&range[key]=created_at&range[from]=2020-01-01&range[to]=2020-07-30&page=1&per_page=100&excise_type=boolean
  
  
• ヘッダー：無記入でOKです。
  インポートを押して画面を閉じます。

■応答
ここでは、要求したデータに応答があった時に、どの様な種類のデータを受け取るのかを設定します。

既定の応答を追加するを押して表示される画面に

• ヘッダー：無記入で大丈夫です。
• 本文：ここにも前回の記事でMF請求のAPI仕様ページの見積書一覧の検索のテストを成功させた時に記載されていたResponse bodyをコピペします。

{
"data": [
{
"id": "ksSmEPTw5fTlJGD8I9VSQA",
"type": "quote",
"attributes": {
"quote_number": "900",
"title": "講習日程表",
"partner_name": "株式会社テスト",
"partner_detail": "〒222-0000\r\n神奈川県横浜市\r\n新横浜\r\n",
"office_name": "株式会社フロッグポッド",
"office_detail": "〒103-0015\n東京都中央区日本橋箱崎町20-3\n箱崎公園ビル4F\nTEL: 03-6661-2064\nFAX: 03-6661-2074\n",
"subtotal": "144.0",
"subtotal_of_untaxable_excise": "0.0",
"subtotal_of_non_taxable_excise": "0.0",
"subtotal_of_tax_exemption_excise": "0.0",
"subtotal_of_five_percent_excise": "0.0",
"subtotal_of_eight_percent_excise": "0.0",
"subtotal_of_eight_percent_as_reduced_tax_rate_excise": "0.0",
"subtotal_of_ten_percent_excise": "144.0",
"total_price": "158.0",
"excise_price": "14.0",
"excise_price_of_five_percent": "0.0",
"excise_price_of_eight_percent": "0.0",
"excise_price_of_eight_percent_as_reduced_tax_rate": "0.0",
"excise_price_of_ten_percent": "14.0",
"note": "単価の変更はございません\r\n",
"memo": "",
"quote_date": "2020-06-12",
"expired_date": "2018-06-30",
"created_at": "2020-06-12T10:51:50.000+09:00",
"updated_at": "2020-06-17T09:44:41.000+09:00",
"operator_id": "TSZ7wicZl5k9anAxPoI50Q",
"partner_id": "hHCh495v07Brsjgc3T9WXQ",
"department_id": "4P8GzZ86Vo0DNM0_ZSA1gg",
"member_id": "c6f7fTZ_BfttQZ2fBg2eTQ",
"member_name": "",
"document_name": "見積書",
"partner_name_suffix": "御中",
"tags": [
""
],
"pdf_url": "",
"is_locked": false,
"is_downloaded": true,
"order_status": "default",
"transmit_status": "default",
"posting_status": "default"
},
"relationships": {
"items": {
"data": [
{
"id": "BgEWUTj-6DYQ0AclwsDsQg",
"type": "quote_item"
}
]
}
}
}
],
"included": [
{
"id": "BgEWUTj-6DYQ0AclwsDsQg",
"type": "quote_item",
"attributes": {
"item_code": "",
"name": "■発送費",
"detail": "",
"quantity": null,
"unit_price": null,
"unit": "",
"price": null,
"disp_order": 0,
"created_at": "2020-06-12T10:51:50.000+09:00",
"updated_at": "2020-06-17T09:44:41.000+09:00",
"excise": true
}
}
],
"meta": {
"total_count": 1,
"total_pages": 1,
"current_page": 1,
"per_page": 100,
"excise_type": "boolean"
}
}

=
インポートを押して画面を閉じます。

■検証
これまでに設定に問題がなければ、検証に成功しました。と表示されるはずです。

テスト→を押して画面を進めます。

4. テスト

テストの画面に進む前に、テストする前にカスタム コネクタを作成する必要がありますとアラートが出ますので、コネクタの作成を押して保存します。

あらためて、コネクタの編集画面を開き４.テストを押してテストまで画面を進めます。

＋新しい接続を選び

作成を選ぶとMF請求の認証画面に進みます。

許可を選ぶとカスタムコネクタの接続画面に戻り、接続認証が完了します。

接続が完了すると、作成したカスタムコネクタが接続済みの状態になります。

あらためて、コネクタの編集画面を開き４.テストを押してテストまで画面を進めます。

この様に、コネクターが接続されている状態を確認したら、各項目を入力してテスト送信を行います。

• q：検索文字列。
  取引先(完全一致)、ステータス、件名etcを入れてみてください。見積番号でもOKでした。

• range[key]： created_at
  keyの部分にあたるものは、「created_at／quote_date／expired_date」のいずれかを入力。

• range[from]：2020-01-01"
  開始日

• range[to]：2020-07-30"
  終了日

• page:1
  ページ指定

• par_page：100
  １ページに表示する件数

• excise_type:boolean
  消費税項目のデータ型

keyがない場合には「created_at」で検索が行われ、かつ、「from」・「to」が指定されていない場合には、それぞれリクエストした月の1日と末日となる仕様です。

入力が終わったら、最後にテスト操作を押して、きちんとリクエストが帰ってくるのか、確認します。長い長い設定がようやく終了します

HTTPレスポンスステータスコードで状態（200）が帰ってきたら大成功です！

ようやくカスタムコネクターの設定が完了しました。
次回は、Power Appsでカスタムコネクターを設定して、実際にデータを表示させます。

お楽しみに！