[MF請求API仕様確認編]他のサービスに繋げよう！Power Appsカスタム コネクタの使い方

##皆さん！カスタム コネクタ繋げてますか！

Power Appsには沢山の標準コネクタが用意されていますが、当然まだ対応してないサービスも沢山あります。

私も、1年前からマネーフォワード請求（MF請求）へ接続して、見積もりの詳細を既存のアプリに取り込みたくて、挑戦しては挫折を繰り返していました。

しかし、今年のde:code2020を視聴して、ようやく各項目の機能とか入力内容を理解できたのと、他のサービスにつなげる際の注意点について、皆さんに共有させてもらいたいと思って、この記事を書きました。

少し長くなるので、分割して書かせてくださいね。

あ！先にお断りですが、他のサービスにPower Appsを繋げたくて、このブログに辿り着いたかも知れませんが、**カスタム コネクタはプレミアムコネクタで有料**となります。
詳しくは、下記のページを参照してください。
https://powerapps.microsoft.com/ja-jp/pricing/

#Part１：MF請求APIの仕様確認編
##繋げるサービスのAPI仕様を確認しよう
まずは、繋げたいサービスに、どんな機能があるのか、API仕様について確認します。

※市民開発者の方へ：APIとは、別のアプリから情報をやり取りする為の接続口を指します。接続口には、見積を検索する機能など、サービス提供してくれる会社が用意している機能が用意されていますので仕様を確認します。

■今回はMF請求のAPI仕様書を確認します。
https://invoice.moneyforward.com/api/v2/swagger_ui?_ga=2.179953634.759551439.1594435535-613194841.1594435535
ページをみていただくと、沢山の機能が用意されているのがわかります。

私は、見積もり検索して見積項目や単価、合計金額などをデータとして取り込みたいので、見積書一覧の検索を確認しました。
![MF見積一覧APIスクショ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/478a757d-7939-1cd1-14e5-2de3794b095d.png)

「見積書一覧の検索」の項目を開くと、どんな値を送ってあげる必要があるのか確認できます。
![パラメーター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/de996266-41dd-11f4-8a21-dcdd552e9d91.png)
この機能では、必須かどうかは別ですが、下記データを送る必要があるとわかります。

- q(string)：```検索文字列```
- range(object)：```詳細後程記述```
- page(integer):```ページ番号```
- par_page(integer)```1ページあたりの表示数```
- excise_type:消```費税項目のデータ型```

####ここで、大きく挫折したんですよ💦
**「*range(object)って何*」**

入力ボックスがあるだけで、何を送るのか例もないので全然わからない、、、
何も入力せずに送信テストすると当月分の見積もりを検索対象に応答してくる（サラッと書きますが、ここ気付くのに相当時間が掛かりました）ので、rangeは期間の範囲だと連想しましたが、どんな値を送るのかは記載されていないので、ここは諦めてMF請求のサポートに連絡して教えてもらいました。

>Swaggerから見積書検索のAPIを利用する場合、お手数ではございますが、下記のようなJSONのフォーマットで入力をお願いいたします。

>{
>    "range[key]": "created_at",
>    "range[from]": "2020-02-10",
>    "range[to]": "2020-07-30"
>}

>keyの部分にあたるものは、「created_at／quote_date／expired_date」のいずれかを入力していただきますようお願い申し上げます。

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

>生成されるURLにつきましては、下記の通りとなります。
>/api/v2/quotes/search?range[key]=created_at&range[from]=2020-02-10&range[to]=2020-07-30”

おぉ！なるほど、こんな形で送ってあげるのね！！
めちゃめちゃ納得です:hugging:

以上で、仕様の把握が出来ました。

##MF請求の画面でテストする

ということで、MF請求APIは、この画面で動作テストができますので、試してみます。

テストをする前に、誰でも自分の見積書に繋げて内容を見られると困りますよね？💦
ですので、MF請求に繋げるには、認証（ログインみたいなもの）をしなくてはいけません。
これはサービス毎に違いまして、API Key方式やOAuth方式などがあります。
MF請求ではOAuth方式を採用していますので、事前に設定をします。

####1.MF請求へログイン
右上の歯車から「API連携β（開発者向け）」を選びます。
![MF請求API画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/bece99f7-2805-731a-273d-05a4c78d7132.png)

####2.接続設定
「新規作成」ボタンを押して表示された画面に
![接続テスト設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/3ccc425e-60cf-978f-0fff-a8def6d0174d.png)

上記のように入力します。

- 名前：```好きなネーミングで大丈夫です```
- Redirect URI：```https://invoice.moneyforward.com/api/swagger_ui/oauth2_redirect```
<br>アクセス認可が終わった後にリダイレクトされる URI を指定しています。<br>何を見てこのURIを入力しているかというと、先ほどのMF請求API仕様ページにある「OAuth認証手順」にRedirect URIについて書かれています。<br>
 https://invoice.moneyforward.com/api/v2/swagger_ui?_ga=2.179953634.759551439.1594435535-613194841.1594435535 ←
- Scopes：readとwriteがありますが、今回は読み出しなので```read。```

「マネーフォワード クラウド請求書API利用規約を確認した上で内容に同意する」のチェックボックスをチェックして、「作成」を押します。

![リダイレクトURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/4636940b-2960-23c6-42e3-0a235aa43323.png)

- Client ID
- Client Secret

この二つの値は、テスト動作をするページで利用しますので、どこかに控えるか、別タブとして開いておいてください。

####３.API仕様ページからテスト送信を試す。
先ほどの、MF請求API仕様ページに戻って、ページ上部にある「Authorize」ボタンを押します。
![オーソライズボタン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/9b943b50-95af-2a85-e937-22625419e57b.png)
https://invoice.moneyforward.com/api/v2/swagger_ui?_ga=2.179953634.759551439.1594435535-613194841.1594435535

表示画面に、先ほどメモした
![クライアントキー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d4961023-b4ad-7dd8-0e19-6a2bb6e8f683.png)
- Client ID
- Client Secret
を入力。
- Scopeはreadを選びます。

入力終わったら、「Authorize」ボタンを押すと許可完了画面が表示される筈です。
![オーソライズOK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d51b2b8d-9b08-d5ec-4186-de304be56f93.png)

「Close」ボタンを押すと元のAPI一覧画面に戻りますので、以上で接続設定が完了です。

ページ下部にスクロールして、先ほどの「見積書一覧の検索」の項目を開いて、「Try it out」ボタンを押して各項目を入力します。
![パラメーター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/de996266-41dd-11f4-8a21-dcdd552e9d91.png)

- q：```検索文字列。```<br>取引先(完全一致)、ステータス、件名etcを入れてみてください。見積番号でもOKでした。
- range：<br>{<br>
    "range[key]": "created_at",<br>
    "range[from]": "2020-01-01",<br>
    "range[to]": "2020-07-30"<br>
}
- page:```1```
- par_page：```100```
- excise_type:```boolean```

最後に「Execute」ボタンを押すと、成功すると、下記のように200のレスポンスコードが返ってきます。
![レスポンス結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d56a6f67-d365-bf6c-cb0d-f7e34fdbbdb5.png)
Response bodyに、指定したキーワードや期間の検索結果が表示されていれば、動作確認は終了です。

Power Appsでのカスタム コネクタの設定は、次回ご説明します。
お楽しみに！