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

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

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


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

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

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

![MF請求API設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/475c611d-48ee-25fd-8440-025f950fa9da.png)

- 名前：```好きなネーミングで大丈夫です```
- 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を、後ほどの設定で使うので、画面を開いておいてください。
![クライアントID確認資料](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/1767d8cd-b274-bd3d-ce41-f1b64929c174.png)

##ようやくカスタム コネクタを作成
それでは、Power Appsを開き、左メニューから「カスタム コネクタ」を選択して、「カスタム コネクタの新規作成」から「一から作成」を選びます。
![スクリーンショット_2020_07_18_0_07_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/27d2f79d-e4c4-21e9-062b-62f3acf38635.png)

次画面で名前をつけます。ここでは「MFInvoiceConnector」とします。
![コネクタ名.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/def7ad02-cb14-3a4d-cff1-243717ef3078.png)
```続行```を押します。


##1. 全般
![全般設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/19cada66-8a84-2e8b-beb2-2240a226d5b4.png)
設定項目は以下のとおり

- コネクタアイコンのアップロード<br>```好きな画像を設定してください```<br><br>
- アイコンの背景色<br>```ウェブカラーで指定します。```<br><br>
- 説明<br>```カスタムコネクターの説明を書きます。```私は忘れない様にAPI仕様について書いているページのURLを書きました<br><br>
- スキーマー（必須）<br>ここは接続先のサービスの仕様になります。<br>MF請求の仕様書https://invoice.moneyforward.com/api/v2/swagger_ui<br>には![MF請求スキーマー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/baa94690-4d51-49ca-9e37-55dbd38cf20a.png)<br>と、記載されているので、```https```を選びます<br><br>
- ホスト（必須）<br>ここにはスキーマーで設定した以外のURLを記載します。<br>```invoice.moneyforward.com```<br><br>
- ベースURL（必須）<br>APIの機能でディレクトリごとに分かれている場合には、ここに階層の文字列を記載しますが、今回は```/```を指定します。

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

##2. セキュリティー
![セキュリティー設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/93a20d47-f2a8-ce77-a536-9dd03ed0b2c1.png)
設定項目は以下のとおり

- 認証タイプ：<br>```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```<br>このURLは前回MF請求側でAPIをテストした時に記載されていた赤枠の情報です。![許可URL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/25f35ae4-d1c6-f509-4912-26cf412c6e0a.png)

- 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へ送る値や送られてくる項目や値を設定します。
![定義画面解説図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/0638bbff-080c-50fb-f42f-1d8680fe1278.png)

**■全般**

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

**■要求**
ここで具体的にAPIでデータをやりとりする値を設定します。
```＋サンプルからのインポート```をクリックして
![サンプルからのインポート画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/66c50470-c748-9329-ab4b-198f0cee0609.png)

- 動詞（必須）:```GET```
- URL（必須）:前回の記事でMF請求のAPI仕様ページの***見積書一覧の検索***のテストを成功させた時に記載されていた***Request URL***をコピペします。<br>![見積書一覧の検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/40972e62-eda7-b528-2c49-4f39adb2dedf.png)![リクエストURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/4fe5615f-44f2-f9f9-64e5-fa9aa2d3a914.png)<br>```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```<br><br>
- ヘッダー：無記入でOKです。<br>
```インポート```を押して画面を閉じます。

**■応答**
ここでは、要求したデータに応答があった時に、どの様な種類のデータを受け取るのかを設定します。
![応答.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/c11b19ae-b722-202a-78e2-68d14f040467.png)
```既定の応答を追加する```を押して表示される画面に
![再度サンプル取り込み.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/b76196d8-0f66-9e53-27c3-98ceebfac9d7.png)

- ヘッダー：無記入で大丈夫です。
- 本文：ここにも前回の記事で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"
>  }
>}


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

**■検証**
これまでに設定に問題がなければ、```検証に成功しました。```と表示されるはずです。
![検証.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/16f0d167-4aaa-d37c-1765-d3d0d4bfedf2.png)
```テスト→```を押して画面を進めます。

##4. テスト
テストの画面に進む前に、***テストする前にカスタム コネクタを作成する必要があります***とアラートが出ますので、```コネクタの作成```を押して保存します。
![保存する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d9e84ce1-7629-dc47-b3cf-01beb28f2c2c.png)

あらためて、コネクタの編集画面を開き```４.テスト```を押してテストまで画面を進めます。
![テスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/342ab960-0a86-92bc-d7aa-0326388e5649.png)
```＋新しい接続```を選び

![MF接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/347024f6-8b32-b5bc-3398-6027162d7432.png)
```作成```を選ぶとMF請求の認証画面に進みます。

![MF接続確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/94afe07a-0730-19a6-3419-275717c83005.png)
```許可```を選ぶとカスタムコネクタの接続画面に戻り、接続認証が完了します。

![接続完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/f2bf3bf9-96bb-1e04-8efc-d04d7cae9188.png)
接続が完了すると、作成したカスタムコネクタが接続済みの状態になります。

あらためて、コネクタの編集画面を開き```４.テスト```を押してテストまで画面を進めます。
![接続済み状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/a87692ce-517e-6c98-cf32-fe0976ad9ced.png)
この様に、コネクターが接続されている状態を確認したら、各項目を入力してテスト送信を行います。

![APIに値を送信.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/36f97cb5-6615-0e4b-efbf-d5dd6fe26d1d.png)

- q：```検索文字列。```<br>取引先(完全一致)、ステータス、件名etcを入れてみてください。見積番号でもOKでした。
- range[key]： ```created_at```<br>keyの部分にあたるものは、「created_at／quote_date／expired_date」のいずれかを入力。

- range[from]：```2020-01-01"```<br>開始日
- range[to]：```2020-07-30"```<br>終了日
- page:```1```<br>ページ指定
- par_page：```100```<br>１ページに表示する件数
- excise_type:```boolean```<br>消費税項目のデータ型

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

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

![応答200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/a9bd0192-3011-75ed-4cee-edba0bc68669.png)
HTTPレスポンスステータスコードで状態（200）が帰ってきたら大成功です！

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

お楽しみに！