2020/9/17
合同会社アクアビット
長井 祥和
freeeとkintoneを繋いでみよう
ハンズオン編
当資料は、freee & kintone BizTech hack のハンズオン用に作成された資料です。
資料作成
合同会社アクアビット 長井 祥和
ビットリバー株式会社 安藤 光昭
当資料について
講師及びフォロー体制についてご説明します
・講師
・合同会社アクアビット 長井 祥和
・フォロー体制
・講師の他に進捗をフォローするメンターが待機しています
不明点はzoomのチャットでコメントください。
講師・メンター
ハンズオンの目的
freeeとkintoneの連携開発について身近に感じていただく
・kintoneとfreeeのAPI連携するkintoneアプリを実際に開発し
ていただきます。
・kintone JavaScriptでどのように実装しているか解説します。
・ご自身でkintoneとfreeeの連携を開発するイメージを
つかんでいただくところをゴールに設定しています。
ハンズオンの目的 ①
本セッションを通して以下の改善につなげて頂ければ
before
・取引先が増えるたびに、
kintoneもfreeeもマスタをメンテナンスしなければ・・・
あ～～大変だ～
解決したい課題 ①
after
・取引先が増えても、
kintone側でメンテナンスした内容をAPIでfreeeに連携！
転記の手間や、漏れ、二重登録がなくなり、
スマートに業務できる
本セッションを通して以下の改善につなげて頂ければ
before
・kintoneで作成した取引のステータスが請求フェーズに進んだ。
もう一回取引情報をfreeeに打ち直すのか・・・
あ～～面倒～
解決したい課題 ②
after
・kintoneのプロセス管理機能を使い、ステータスが変わったら、
kintoneの取引データをAPIでfreeeに連携！
転記の手間や、漏れ、二重登録がなくなり、
スマートに業務できる
タイムテーブル
全体のスケジュールをご紹介します
タイムテーブル ①
本セッションの目的
タイムテーブル
進め方の確認
freeeの取引アプリ確認
事前準備
kintoneのfreee認証用アプリに取引作成用レコード追加
kintoneのfreee認証用アプリに取引先作成用レコード追加
kintoneに 取引先データ取込み
kintoneからfreeeに
取引先作成
kintoneに商品データ取込み
kintoneのアプリ作成
freeeの取引先アプリ確認
JavaScriptファイルの確認
kintoneからfreeeに
取引データ作成
JavaScriptファイルの確認
準備
実践
実践
進め方の確認
ハンズオンの環境についてご説明します
・kintone
・参加者全員が共通のサブドメインを利用します
fk-biztech.cybozu.com
・参加者ごとに「スペース」を作成し、
スペース内にアプリを作成していただきます
・freee
・参加者全員に新たなログイン情報を配布し、皆で共通の事業所
を利用します。
・参加者ごとに二つのアプリを利用します
（事前に事務局が作成済）
進め方の確認 ①
全体のアプリ構成図についてご説明します
進め方の確認 ③
その他の注意事項など
進め方の確認 ④
・本セッションでは、kintoneとfreeeをつなぐ認証情報は、
アプリのレコードに保存する手法を採っています。
また、プログラムの中で認証情報を保持するため、
セッションストレージという仕組みを利用しています。
※サイボウズ社から出されている、
JavaScript内にパスワードを含めないガイドラインに準拠しています。
※サイボウズ社からは、セッションストレージに情報を保持する手法も非推奨となる見込みです。
※プラグインで開発すると認証情報は隠蔽できますが、
本セッションでは利便性を考慮してセッションストレージを採用しています。
※サイボウズさんには、機能の追加を熱望しましょう！
事前準備
ファイルのダウンロードはお済でしょうか？
・ダウンロードしたfreee-kintone-BizTech-hack-master.zipには以下のファイルが含まれています。
必ず解凍しましょう。
・ハンズオン用テンプレートファイル「freee & kintone BizTech hack.zip」 ・商品リストアプリ用データ「商品リスト(freee & kintone BizTech hack).csv」 20件 ・取引先リストアプリ用データ「取引先リスト(freee & kintone BizTech hack).csv」100件 ・取引先リストアプリに組み込み済みのjsファイル「取引先登録.js」 ・取引管理アプリに組み込み済みのjsファイル「取引登録.js」 ・ハンズオンの中でコピーした情報を貼り付ける為の「ハンズオン用のメモ.txt」
事前準備 ①
kintoneのハンズオン環境には入れていますか？
・ハンズオン参加者の皆さまは全員このサブドメイン内で作業をしていただき
ます。
もし入れない場合はzoomのチャットでご連絡くださいませ。
事前準備 ②
ハンズオン各種情報アプリを開いて下さい。
・ハンズオン参加者様毎に以下の情報が含まれたレコードを作成しています。
・参加者名
・freeeアカウント名／パスワード
・kintoneアカウント名／パスワード
・kintoneスペース名
・freee取引先アプリのリンク
・freee取引アプリのリンク
・進捗を報告して頂く項目 をご用意しています
事前準備 ③
←このスペース名をコピーして下さい。
※他の方の情報は見えません。
kintoneのハンズオン環境にスペースを作りましょう
・ここで作ったスペースの中にアプリを作ってもらう想定です。
事前準備 ④
「・・・（オプション）」
⇓
「スペースを追加」
上二つをチェック⇒
先程コピーしたスペース名を
←貼り付け
事前にお送りしたfreeeの環境にログインして下さい。
・このfreee環境でハンズオンの結果を確認していただきます。
事前準備 ⑤
freeeの中はまだ
触らないでください
freeeのログイン情報
このタイミングで出席確認にもチェックを入れてください(^^♪
全体のスケジュールをご紹介します
タイムテーブル ①
本セッションの目的
タイムテーブル
進め方の確認
freeeの取引アプリ確認
事前準備
kintoneのfreee認証用アプリに取引作成用レコード追加
kintoneのfreee認証用アプリに取引先作成用レコード追加
kintoneに 取引先データ取込み
kintoneからfreeeに
取引先作成
kintoneに商品データ取込み
kintoneのアプリ作成
freeeの取引先アプリ確認
JavaScriptファイルの確認
kintoneからfreeeに
取引データ作成
JavaScriptファイルの確認
準備
実践
実践
kintoneのアプリ作成
ダウンロードしたテンプレートからアプリを作成しましょう！
・以下のファイルを使います。
ハンズオン用テンプレートファイル 「freee & kintone BizTech hack.zip」 ※freee-kintone-BizTech-hack-master.zip ではないので注意しましょう。 「・・・（オプション）」⇒ 「アプリを追加」⇒ 「テンプレートファイルを読み込んで作成」
kintoneのアプリ作成 ①
※この作業は必ずスペース内から行ってください
作成したアプリを確認しましょう！
・生成されたアプリ
・アプリ：取引先リスト(freee & kintone BizTech hack)
※このアプリは取引先作成用のfreeeアプリに紐づきます。
※このアプリのurl(https://fk-biztech.cybozu.com/k/***/)を
取引先リストURLとしてコピーし、ハンズオン用のメモ.txtに貼り付けましょう。
・アプリ：商品リスト(freee & kintone BizTech hack)
・アプリ：取引管理(freee & kintone BizTech hack)
※このアプリは取引作成用のfreeeアプリに紐づきます。
※このアプリのurl(https://fk-biztech.cybozu.com/k/***/)を
取引管理URLとしてコピーし、ハンズオン用のメモ.txtに貼り付けましょう。
・アプリ：freee認証用(freee & kintone BizTech hack)
kintoneのアプリ作成 ②
一つだけ注意があります！
・以下のアプリを開くと警告がでます。
・アプリ：取引先リスト(freee & kintone BizTech hack)
・アプリ：取引管理(freee & kintone BizTech hack)
こちらの二つを開くと、以下のようなメッセージが出ます。
最初は問題ありません。
kintoneのアプリ作成 ③
freeeの取引先アプリ確認
参加者の皆さまに向けに作成したアプリを開きましょう！
・freee取引先アプリのリンクをクリックして開きましょう。
freeeの取引先アプリ確認 ①
基本情報タブのコールバックURLを変えましょう！
urn:ietf:wg:oauth:2.0:oob
を
https://fk-biztech.cybozu.com/k/**/
に変えましょう
先ほど取引先リストURLとしてコピーして頂いたURLです
freeeの取引先アプリ確認 ②
権限設定タブの[会計]取引先にチェックを入れましょう！
参照にも更新にも
チェックを入れましょう
freeeの取引先アプリ確認 ③
基本情報タブの必要情報をコピーしましょう！
・Client IDとClient Secretの
値をコピーして、
ハンズオン用のメモ.txtに
貼り付けましょう
freeeの取引先アプリ確認 ④
・取引先リスト(freee & kintone BizTech hack)
URL：https://fk-biztech.cybozu.com/k/**/
Client ID：aerjyaeriuhoafie45r;p7l:pw5l:ukjaejwijq35
Client Secret：q5juk5jjijjljo15:42uu4egsdfitg998ay9qw45u74524
kintoneの
freee認証用アプリに
取引先作成用レコード追加
https://fk-biztech.cybozu.com/k/**/
kintoneのfreee認証用アプリにレコードを追加しましょう！
・以下の様にレコードを追加しましょう。
Client IDにはコピーしたClient IDを、
Client SecretにはコピーしたClient Secret を
ハンズオン用のメモ.txt
からコピー＆ペーストしましょう！
kintoneのfreee認証用アプリに
取引先作成用レコード追加 ①
freeeの取引アプリを確認
参加者の皆さまに向けに作成したアプリを開きましょう！
freeeで取引アプリを開く ①
・freee取引アプリのリンクをクリックして開きましょう。
基本情報タブのコールバックURLを変えましょう！
urn:ietf:wg:oauth:2.0:oob
を
https://fk-biztech.cybozu.com/k/**/
に変えましょう
先ほど取引管理URLとしてコピーして
頂いたURLです
freeeで取引アプリを開く ②
権限設定タブの[会計]取引にチェックを入れましょう！
参照にも更新にも
チェックを入れましょう
freeeで取引アプリを開く ③
基本情報タブの必要情報をコピーしましょう！
・Client IDとClient Secretの
値をコピーして、
ハンズオン用のメモ.txtに
貼り付けましょう
freeeで取引アプリを開く ④
・取引管理(freee & kintone BizTech hack)
URL：https://fk-biztech.cybozu.com/k/**/
Client ID：aerjyaeriuhoafie45r;p7l:pw5l:ukjaejwijq35
Client Secret：q5juk5jjijjljo15:42uu4egsdfitg998ay9qw45u74524
kintoneの
freee認証用アプリに
取引作成用レコード追加
https://fk-biztech.cybozu.com/k/**/
kintoneのfreee認証用アプリにレコードを追加しましょう！
ここでコピーするClient IDとClient Secretはfreeeの見積アプリの値を
貼り付けてください
kintoneのfreee認証用アプリに
取引作成用レコード追加 ①
・以下の様にレコードを追加しましょう。
Client IDにはコピーしたClient IDを、
Client SecretにはコピーしたClient Secret を
ハンズオン用のメモ.txt
からコピー＆ペーストしましょう！
全体のスケジュールをご紹介します
タイムテーブル ①
本セッションの目的
タイムテーブル
進め方の確認
freeeの取引アプリ確認
事前準備
kintoneのfreee認証用アプリに取引作成用レコード追加
kintoneのfreee認証用アプリに取引先作成用レコード追加
kintoneに 取引先データ取込み
kintoneからfreeeに
取引先作成
kintoneに商品データ取込み
kintoneのアプリ作成
freeeの取引先アプリ確認
JavaScriptファイルの確認
kintoneからfreeeに
取引データ作成
JavaScriptファイルの確認
準備
実践
実践
kintoneに
取引先データ取込み
https://fk-biztech.cybozu.com/k/**/
最初の認証が求められます！
・
で作成した
・アプリ：取引先リスト
(freee & kintone BizTech hack)
を開いてください。
・右のような画面が開くので、
「許可する」をクリックします。
kintoneに取引先データ取込み ①
kintoneのアプリ作成 ②
https://fk-biztech.cybozu.com/k/**/
kintoneの取引先リストアプリにレコードを追加しましょう！
・ で作成した
アプリ：取引先リスト(freee & kintone BizTech hack)には、
まだレコードが含まれていないため、追加します。
・ でダウンロードしたファイルです。
取引先リストアプリ用サンプルデータ
「取引先リスト(freee & kintone BizTech hack).csv」 100件
・kintoneの・・・(オプション)⇒「ファイルの読み込み」を使います。
kintoneに取引先データ取込み ②
事前準備 ①
kintoneのアプリ作成 ②
kintoneに
商品データ取込み
https://fk-biztech.cybozu.com/k/**/
kintoneの商品リストアプリにレコードを追加しましょう！
・ で作成した
アプリ：商品リスト(freee & kintone BizTech hack)には、
まだレコードが含まれていないため、追加します。
・ でダウンロードしたファイルです。
商品アプリ用サンプルデータ
「商品リスト(freee & kintone BizTech hack).csv」 20件
・kintoneの・・・(オプション)⇒「ファイルの読み込み」を使います。
kintoneに商品データ取込み ①
事前準備 ①
kintoneのアプリ作成 ②
進捗を進めて下さい
・レコードを編集モードにして、進捗確認（１）のチェックを"済"にして、保存しましょう。
kintoneからfreeeに取引先作成
kintoneからfreeeへ連動するためのアプリを開きましょう！
・ で開いたハンズオン各種情報アプリに情報があります。
kintoneからfreeeに取引先作成 ①
事前準備 ③
取引先（１）に記載された取引先を使用してください。
一覧から取引先となる顧客を選びます！
・ で使った取引先リストアプリを開くと下図の一覧が表示されます。割り当ての取引先を開きましょう
kintoneからfreeeに取引先作成 ②
kintoneに取引先データ取込み ①
取引先のレコード詳細から、ボタンを押します！
・レコード詳細のヘッダースペースに
「取引先の作成」ボタンがあります。
押しましょう！
・すると下のダイアログボックスが！
kintoneからfreeeに取引先作成 ③
freeeに取引先が追加されているか確認しましょう！
kintoneからfreeeに取引先作成 ④
・設定⇒取引先の設定 から追加された取引先が確認できます
https://secure.freee.co.jp/partners
進捗を進めて下さい
・レコードを編集モードにして、進捗確認（２）のチェックを"済"にして、保存しましょう。
全体のスケジュールをご紹介します
タイムテーブル ①
本セッションの目的
タイムテーブル
進め方の確認
freeeの取引アプリ確認
事前準備
kintoneのfreee認証用アプリに取引作成用レコード追加
kintoneのfreee認証用アプリに取引先作成用レコード追加
kintoneに 取引先データ取込み
kintoneからfreeeに
取引先作成
kintoneに商品データ取込み
kintoneのアプリ作成
freeeの取引先アプリ確認
JavaScriptファイルの確認
kintoneからfreeeに
取引データ作成
JavaScriptファイルの確認
準備
実践
実践
JavaScriptファイルの確認
JavaScriptのファイルをご説明します！
・ で保存して頂いたJavaScriptをご説明します
JavaScriptファイルの確認 ①
事前準備 ①
・以下のファイルがダウンロード可能です。
取引先リストアプリに組み込み済みのjsファイル 「取引先登録.js」
kintoneからfreeeに
取引データ作成
kintoneの取引管理アプリを開きましょう！
・ で作成した以下のアプリを開きます
kintoneからfreeeに取引作成 ①
kintoneのアプリ作成 ②
・生成されたアプリ
・アプリ：取引管理(freee & kintone BizTech hack)
※このアプリは取引作成用のfreeeアプリに紐づきます。
kintoneからfreeeに取引作成 ②
最初の認証が求められます！
・アプリを開くと
認証が求められるはずです。
・「許可する」をクリックしてください。
kintoneで取引データを作成しましょう！
・入力画面では
で選んだ取引先を選びます。
kintoneからfreeeに取引作成 ③
kintoneからfreeeに取引先作成 ①
・型番は適当なものを選び、
数量も入力してください。
・入力が終われば保存しま
す。
kintoneでステータスを進めましょう！
kintoneからfreeeに取引作成 ④
・上部のアクションから未処理⇒「処理開始」⇒「完了する」
と進めて下さい。ステータスが見積中⇒請求済と進みます。
ダイアログが！
freeeに取引が追加されているか確認しましょう！
kintoneからfreeeに取引作成 ⑤
・取引⇒取引の一覧・登録 から追加された取引が確認できます
←に追加されています
進捗を進めて下さい
・レコードを編集モードにして、進捗確認（３）のチェックを"済"にして、保存しましょう。
JavaScriptファイルの確認
JavaScriptのファイルをご説明します！
・ で保存して頂いたJavaScriptをご説明します
JavaScriptファイルの確認 ①
事前準備 ①
・以下のファイルがダウンロード可能です。
取引管理アプリに組み込み済みのjsファイル 「取引登録.js」
全体のスケジュールをご紹介します
タイムテーブル ①
本セッションの目的
タイムテーブル
進め方の確認
freeeの取引アプリ確認
事前準備
kintoneのfreee認証用アプリに取引作成用レコード追加
kintoneのfreee認証用アプリに取引先作成用レコード追加
kintoneに 取引先データ取込み
kintoneからfreeeに
取引先作成
kintoneに商品データ取込み
kintoneのアプリ作成
freeeの取引先アプリ確認
JavaScriptファイルの確認
kintoneからfreeeに
取引データ作成
JavaScriptファイルの確認
準備
実践
実践
おさらい
全体のアプリ構成図について再度ご説明します
おさらい ①
お疲れ様でした！
合同会社アクアビット
長井 祥和
