2020.09.30「freeeのAPIで作る業務効率化LINE bot」

2020.09.30「freee / IBM Cloud / LINE API アプリ開発勉強会」
https://freee.connpass.com/event/186936/

Transcript

1. freeeのAPIで作る業務効率化
   LINE bot
   Koki Miura(@k_miura_io)
   

   View Slide

2. 自己紹介
   • 三浦 耕生（こうき）
   • 名古屋のゲーム会社
   のサーバーエンジニア
   @k_miura_io koki.miura05
   

   View Slide

3. アジェンダ
   • 今回作ったアプリの紹介
   • 使用技術の紹介
   • DEMO
   • アプリ開発のためのTips
   • ソースコード
   

   View Slide

4. View Slide

5. View Slide

6. 2つの困りごと
   • 経費精算が大変
   • レシートの中身を打ち込むのがめんどくさい
   • 月の締日にまとめて精算するのではなく忘れないうちにやりたい
   • 打刻忘れが多い（昔の僕）
   • 打刻専用のパソコンでやらないとだめ
   • 忘れたら何故か理由を書かされる（未だに納得できない）
   

   View Slide

7. これを手元でできれば解決できるのでは？
   

   View Slide

8. 今回作ったアプリ
   • freeeのAPIを連携した業務効率化する
   LINE bot
   • 打刻、打刻修正、経費精算
   • レシートの文字起こし（←ポイント）
   • freeeのAPIトークンを自動更新
   

   View Slide

9. 使用技術
   • Python(Flask)
   • freee API
   • Messaging API
   • Clova OCR
   • IBM Cloud Functions
   • Cloundant
   

   View Slide

10. システム構成
    

    View Slide

11. アプリのメイン機能
    

    View Slide

12. freeeのAPI
    • OAuth2認証
    • APIトークンの有効期限が短い(24時間)
    • リフレッシュトークンをつかって工夫をしなければならない
    （工夫については後ほど紹介）
    • freeeがWebで提供している各種サービス（労務、会計）
    の機能をAPIで提供している
    • プランによって使用できるAPIに制限がある
    →開発者用の事業所を立てれば全部のAPIが無料で使える
    ※APIでやるよりもWeb上で設定したほうが早い場合も
    

    View Slide

13. 用途
    • 雇用者のID、ユーザ名の取得
    • 打刻
    • 打刻修正
    • 経費申請（APIでは下書きのみ）
    

    View Slide

14. Clova OCR
    • 最近リリースした文字起こしサービス
    • 今回はレシートの画像を送信するとレシート情報を整
    理してJSONが返ってくるレシート向けのAPIを使用
    • 店舗名(支店名)、購入品目、金額、支払い方法などを
    きれいにまとめてくれる
    • よくわからんがしゅごいAPI
    • コンテスト参加者だけに提供される（無料）！！
    

    View Slide

15. 用途
    • ユーザーが撮影したレシートの画像から購入内容を取得
    • レシートの内容を立替申請としてfreeeの経費精算APIへ
    

    View Slide

16. Messaging API
    • LINE botを動かすために使うAPI
    • とにかく機能が多い
    • 無料で使い放題
    • ドキュメントめちゃくちゃわかりやすい
    • 各言語に対応したSDKが提供されている
    

    View Slide

17. 用途
    • botのやり取り（メッセージの受信、送信）
    • ユーザが送った画像データの取得
    • リッチメニューの設定、切り替え
    • 友達追加したときの挨拶 退勤
    

    View Slide

18. LIFF
    • LINE Front End Frameworkの略
    • LINEアプリ上で開くと自動ログインをする
    • LINEアプリ上で表示サイズを3つ設定できる
    （個人的にはTallがおすすめ）
    • JavaScriptのSDKでユーザ情報を取得する
    ことができる
    • LINEのミニアプリの元になる技術
    

    View Slide

19. 用途
    • LINEのユーザーIDとfreeeの従業員IDの
    紐付け（打刻のAPIを行うときに必要）
    • 表示しているfreeeのユーザー名ももちろ
    んAPIから取得
    • 友だち追加したときに送信されるメッセージ
    の中にあるFlexMessageのボタンの中に
    LIFF URLを仕込んでいる
    

    View Slide

20. 用途その2
    • 打刻修正のフォームを用意し日時を入力
    • UIが殺風景なのは勘弁してくださいm(_ _)m
    • 修正ボタンを押すとLIFFを閉じて代わりにbot
    にメッセージを送信する
    

    View Slide

21. freeeのトークンを自動更新
    

    View Slide

22. IBM Cloud Functions
    • IBM Cloudが提供するサーバーレス環境
    • 対応言語が豊富
    • クレジットカード無くても使える（無料で使える）
    • 一定時間に実行するコードを書いたりちょっとしたAPIを
    作りたいときに便利
    

    View Slide

23. 用途
    • freeeのAPIトークンの有効期限が来る前に12時間おきにトークンを更新
    • 取得したトークンとリフレッシュトークンはCloudantへ
    

    View Slide

24. Cloudant
    • IBM Cloudで提供されているNoSQLのデータベース
    • １GBまで無料
    • DBを接続するために認証情報を用意する必要あり
    →有効期限なし
    • IBM Cloud Functionsではデフォルトで使えるように
    SDKがプリインストールされている
    

    View Slide

25. 用途
    • APIトークン、リフレッシュトークンの保存（初回のトークンは事前に登
    録しておく必要あり）
    • LINE botのユーザID、freeeの従業員IDの保存
    • botのやり取りの保存（ドキュメントのIDにLINEのユーザIDを使用）
    

    View Slide

26. DEMO
    

    View Slide

27. いざというときのための動画w
    

    View Slide

28. アプリ開発のためのTips
    • 動作検証でAPIを使うときには公式リファレンスにトークンを入れれば試
    せる
    • 会計freeeのAPIであればSDKを使って開発ができる（JavaとC#のみ）
    • APIトークンは有効期限があることを忘れないように
    • APIの活用事例はｆreeeの開発者ブログでも紹介されている
    https://developers.freee.co.jp/
    

    View Slide

29. 今回のソースコード
    https://github.com/Miura55/freee_labor_bot
    

    View Slide

30. END
    

    View Slide