![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
2020/3/26
合同会社アクアビット
長井 祥和
エバンジェリストが APIを触って見た!
Open Guild トライアル
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
アプリ作成から連携まで
自己紹介
合同会社アクアビットという
会社を経営しております。
のエバンジェリストでもあります。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
長井 祥和(ながい よしかず)
と申します。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857648/portrait.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6761842/2019-AppDesignSP-Vertical-RGB.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6761843/2019-Associate-Vertical-RGB.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6842995/si.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6895584/2019-CustomizationSP-Vertical-RGB.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/7184593/sa_kintone.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/7184596/ke-v-bg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/5280140/pasted-from-clipboard.png)
私の経歴
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
自宅警備・・・・・・1年
入力オペレーター・・2年
黒歴史・・・・・・・数年
プログラマー・・20n年
システム開発者・20n年
良きパパ・夫(?)・・20年
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
簿記3級(*^▽^*)
と言っても取得したの四半世紀前・・・
顧問税理士の先生がfreeeの二つ星 認定アドバイザー
経理は完全にお任せ状態
つまり会計にはかなり疎い(´・ω・`)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
は御存じですか?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
システム開発の知識がない
現場の方が
簡単にドラッグ&ドロップで
インプット⇒データ⇒アウトプットの流れが
アプリの画面とデータベーステーブルが
ノンコーディングで!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/2955126/kintone2.png)
の画面
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
システムを使う現場の方々が
システムの内部を理解する
-
現場の方にシステムの当事者意識が身に付く
-
業務への理解が深まる
-
現場の方々と開発者のコミュニケーションが増す
-
バグや仕様変更への喧嘩が減る
の拡張の可能性
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/2955187/kintone3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843173/pasted-from-clipboard.png)
そこでfreee for kinoneです!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843186/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
例えばこんな連携も!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843219/pasted-from-clipboard.png)
裏ではREST APIが活躍
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843219/pasted-from-clipboard.png)
から
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
kintoneからのリクエスト
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
freeeの内側
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
freee
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
から
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
二月のBiz Tech Frontierで
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
Webhookの実装予定発表!
ここからfreee APIの
探究に旅立ちます
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843441/00_最初.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843787/pasted-from-clipboard.png)
https://developer.freee.co.jp/
からスタートガイドに分け入ります
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
まず最初に
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
このスタートガイド
とてもいいです!
分かりやすい!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
順番に何をすべきか導いてくれます
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844071/pasted-from-clipboard.png)
1.セットアップから
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844124/pasted-from-clipboard.png)
のリンクをクリックすると、
→の画面が表示されるので、
下端の
「新しい法人事業所でログイン」
をクリックします。
1ー2.開発用テスト環境の作成
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844071/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
今回はベーシックプランで作ってみました。
1ー2.開発用テスト環境の作成
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844201/01_開発用テスト環境の作成.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
開発者テスト環境の作成中も案内が出てきます。
1ー2.開発用テスト環境の作成
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844209/02_開発用テスト環境の作成中.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
続いて、freeeアプリの追加を行います。
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844235/03_セットアップ3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
続いて、freeeアプリを
追加する事業部を選びます。
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844476/04_アプリストア選択.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
右上のボタンからアプリを追加します。
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844487/05_関連アプリ一覧.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
右上のボタンからアプリを追加します。
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844540/06_新しいアプリの作成.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
とりあえずこんな内容で。
UIがわかりやすいので、迷いなく来れています
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844920/07_新しいアプリの作成.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844926/08_新しいアプリの作成.png)
Client ID
Client Secret
Access Token取得用url
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844071/pasted-from-clipboard.png)
1ー3.freeeアプリの追加
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844071/pasted-from-clipboard.png)
1ー4.Client IDのコピー
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844926/08_新しいアプリの作成.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー1.アクセストークン取得
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866879/09_2.APIを叩いてみる_アクセストークン取得.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866886/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844926/08_新しいアプリの作成.png)
Access Token取得用url
実は作成したアプリの画面にurlが用意されていてニクい!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー1.アクセストークン取得
ここで作ったアプリの連携の確認が登場するので許可するをポチ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866922/11_アプリ連携の開始.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー1.アクセストークン取得
お待ちかねのアクセストークンが取得できました。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866930/12_アプリ連携の開始.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
アクセストークンを使って認証処理を行ってみます。
今回は会計APIのみ試していますが、人事労務も同様ですね。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866959/14_2.APIを叩いてみる_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866964/15_Authorize.png)
導線がわかりやすい!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866959/14_2.APIを叩いてみる_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
導線がわかりやすい!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866959/14_2.APIを叩いてみる_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866976/16_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
導線がわかりやすい!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866976/16_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866978/17_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867004/18_Authorize.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867005/19_Authorize.png)
やった!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
3.事業所情報取得
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867009/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
3.事業所情報取得
先ほどAuthorizeを行ったページをスクロールすると
各APIの仕様とテスト実行ができる!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867011/21_事業所情報取得.png)
このつながりもいいです!
Try It Out
させられました!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
3.事業所情報取得
Try It OutするとExecute可能な画面に遷移
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867017/22_事業所情報取得.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
3.事業所情報取得
その場でAPIの実行結果が表示されましたっ!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867018/23_事業所情報取得.png)
各APIコマンドの
仕様と結果とエラーと
使用法が直観で理解できます
色んなサービスのAPI仕様書見てきたけど
本当にわかりやすいです!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
3.事業所情報取得
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867018/23_事業所情報取得.png)
このJSON形式のレスポンスの
"id": 2029418
が事業所ID
※API群を実行するのに最も重要!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
さて、APIの実行ができたが
この後は何をすれば?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867009/pasted-from-clipboard.png)
簿記三級のしょぼい知識で・・・
取引? 勘定科目?
まずAPIの一覧を眺める
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867092/API一覧_1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867093/API一覧_2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867094/API一覧_3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867095/API一覧_4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867096/API一覧_5.png)
さらに3/23には見積書APIも!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
すると難敵だったAPIの一覧
に規則性が見えてきました
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
例えば・・各データ毎に用意された処理は?
② 詳細の取得
① 一覧を取得
③ 詳細の作成
④ 詳細の更新
⑤ 詳細の削除
勘定科目の場合、以下の5API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
例えば一覧を取得してみる
① 一覧を取得
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867122/pasted-from-clipboard.png)
クリックで開く
一覧取得には先ほど取得したcompany_id (事業所ID)をリクエストに含めればよい
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
Requestはこんな感じに
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867191/pasted-from-clipboard.png)
この辺のUIもGood!
CurlコマンドやRequest URLも生成されコーディングに生かせる!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
Responseはこんな感じに
この辺のUIもGood!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867206/pasted-from-clipboard.png)
responseが全部ダウンロードできる!
成功したから200番Getだぜ!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
ResponseのJson定義は?
200
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867213/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867221/pasted-from-clipboard.png)
400
401
500
レスポンスコード毎のサンプルも!
200の場合の
サンプル
スキーマ(定義)
を見たければ
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
ResponseのJson定義は?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867230/pasted-from-clipboard.png)
階層もクリック開閉されるので理解しやすい
}
定義も理解しやすく書かれている。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を取得してみる
company_id (事業所ID)
② 詳細の取得
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867248/pasted-from-clipboard.png)
一覧から取得した任意の勘定科目ID
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を取得してみる
company_id (事業所ID)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867257/pasted-from-clipboard.png)
この辺のUIもGood!
responseが全部ダウンロードできる!
成功したから200番Getだぜ!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を追加してみる
③ 詳細の作成
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867379/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867379/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を追加してみる
あれ?エラーが。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867384/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を追加してみる
エラーメッセージに「アクセス権限」の文字があったのですぐ見当がついた。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867334/pasted-from-clipboard.png)
やっぱり
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867404/pasted-from-clipboard.png)
以下のように更新
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を追加してみる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866879/09_2.APIを叩いてみる_アクセストークン取得.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6844926/08_新しいアプリの作成.png)
Access Token取得用url
アプリの権限を更新したら
アクセストークンを取り直し!!
※10分間はまったのでfreeeさんここは追記をお願いします
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を追加してみる
無事に追加できました!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867408/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を更新してみる
更新する対象の
勘定科目IDを入力
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868551/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を更新してみる
ここに更新するJSONを直に入力する
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
}
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868553/pasted-from-clipboard.png)
更新するJSONの書式はこちら
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を更新してみる
更新できました。
※ちなみにアプリの権限で「更新」にチェックが入っていないとここでもエラーになります
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868559/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を削除してみる
削除する対象の
勘定科目IDを入力
⑤ 詳細の削除
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867116/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868563/pasted-from-clipboard.png)
company_id (事業所ID)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を削除してみる
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868564/pasted-from-clipboard.png)
削除出来たっぽい
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
詳細を削除してみる
削除した詳細IDを取得すると
エラーが出たOK!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6868565/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
では から
へ繋いでみましょう
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
こんな アプリを用意
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869683/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
その前に
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869333/pasted-from-clipboard.png)
アプリを修正します
コールバックURL
を修正します
デフォルトを
kintoneアプリのURLに変更
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
から APIにRequestを投げるには
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6762968/pasted-from-clipboard.png)
kintone.proxyという関数を使うのが吉
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
cybozu developer network
に答えが
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869764/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
つまりkintoneから
kintone.proxy(
freee APIの対象のURL,
処理の種類,
ヘッダー,
データ,
成功時の関数,
失敗時の関数
)
を渡せば処理ができてしまうのです
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
kintone.proxy(
freee APIの対象のURL,
処理の種類,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869807/pasted-from-clipboard.png)
に
を足したのが
freee API対象のURL
}
処理の種類は
この4種類
GET,POST,PUT,DELETE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
kintone.proxy(
ヘッダー,
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869823/pasted-from-clipboard.png)
'Authorization': 'Bearer akusesutookunmojiretsu’
のJSONオブジェクトをヘッダーに指定すればOK
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー1.アクセストークン取得
お待ちかねのアクセストークンが取得できました。
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6866930/12_アプリ連携の開始.png)
akusesutookunmojiretsu
の部分はさっき取得したあの文字列です
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869807/pasted-from-clipboard.png)
では から
以下のAPIのデータを取得するには
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
kintone.proxy(
https://api.freee.co.jp/api/1/account_items/{id},
'GET',
{'Authorization': 'Bearer akusesutookunmojiretsu’},
[],
function(){},
function(){}
)
データはGETでは空配列。PUTやPOSTでは追加更新するデータをJSONで
ここで疑問がでませんか?
kintone内に書くプログラムはJavaScriptやろ?
アクセストークンをJavaScriptに直に書いてええんやったっけ?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
その通り!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869923/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
2ー2.オーソライズ処理
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867004/18_Authorize.png)
さっき以下のような処理をしました
それと同じような処理をJavaScriptの中でするとよいです
ヒントは
SessionStorageです
※外部サーバーのphpやOauth.io
やAuth0も使えるかも
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
こうしたOAuthの実装例は
Webにあまりアップされていません
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6900237/pasted-from-clipboard.png)
またはこちらの記事もお勧め!
https://bit.ly/2M1Jq1q
Auth屋さんのサイト
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
さらに!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
4/24に予定されている
をお楽しみに!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/7184617/pasted-from-clipboard.png)
連携コードもお教えします
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6843186/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
例えばこんな連携も自前で!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6867092/API一覧_1.png)
トランザクション
マスター
マスター
マスター
二種類のデータをkintoneとやりとりすればよいのか!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6869096/pasted-from-clipboard.png)
freee for kintoneを使わなくても!
✓
✓
✓
✓
✓
どのプランでも!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6870043/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/3033685/image.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
freee APIの素晴らしいリファレンス
のお陰です!!
拍手!!
以下のTwitterをフォローくださいませ~♪
合同会社アクアビット
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/4857654/akvabit_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6490207/pasted-from-clipboard.png)
個人
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/6490244/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/5920472/twitter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/470831/images/5920472/twitter.png)
法人
freee Open Guild トライアル
By Yoshikazu Nagai
freee Open Guild トライアル
kintone エバンジェリストがfreee APIを触って見た!アプリ作成から連携まで
- 998