20200930_freee / IBM Cloud / LINE API アプリ開発勉強会

Fecdd3417cd7375cc0bd0352d72db27e?s=47 1ft-seabass
September 30, 2020

20200930_freee / IBM Cloud / LINE API アプリ開発勉強会

freee / IBM Cloud / LINE API アプリ開発勉強会「IBM Cloud と freee API 連携によるアプリ開発」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass

September 30, 2020
Tweet

Transcript

  1. [サブタイトル] [タイトル] ワンフットシーバス 田中正吾 freee / IBM Cloud / LINE

    API アプリ開発勉強会 IBM Cloud と freee API 連携によるアプリ開発 ワンフットシーバス 田中正吾
  2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!

  3. 田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。

  4. わたくしフリーランスエンジニア

  5. 仕事のお金の管理は大事 便利にしていきたい

  6. 秘書さんがいると考えてみて やってくれたらいいなと思うところ ➔ 月末にクライアント支払がどれくらいあった か知りたい ➔ 大きいお金の支払いがあったら通知欲しい ➔ 機材をどれだけ買ったか把握したい ➔

    預金出納帳(口座のお金)の入力が合ってる か知りたい ➔ などなど
  7. 秘書さんがいると考えてみて やってくれたらいいなと思うところ

  8. 今日はこれ 月末にクライアント支払がどれくらい あったか知りたい

  9. こんな仕組みを作ります

  10. リアルな経理データはさすがに見せられないので 開発用テスト環境を使います!便利! https://app.secure.freee.co.jp/developers/demo_companies/description

  11. こんな仕組み IBM Cloud から freee API でデータを取得して LINE と連携します

  12. IBM Cloud で作った Node-RED で freee API とつなぎます Node-RED freee

    API LINE Bot
  13. そのデータを良い具合にして LINE Bot でメッセージを出します Node-RED freee API LINE Bot

  14. デモを見せてみます

  15. IBM Cloud で Node-RED をつくる Node-RED freee API LINE Bot

  16. IBM Cloud で Node-RED をつくる IBM Cloud で Node-RED スターターキットで準備を始めます

  17. このキットをポチポチしてアプリのデプロイ アプリのデプロイ時は初の構築なので5~10分待ちます。

  18. このあたりの作り方は 以下の記事が参考になります https://qiita.com/nishikyon/items/46c15bc392e6274dd41d

  19. アプリURLでNode-REDが出来てはじめられます

  20. IBM Cloud の Node-RED から freee API につなげる Node-RED freee

    API LINE Bot
  21. アプリケーションを作成するチュートリアルを 参考に開発アプリを一つ作ります! https://developer.freee.co.jp/tutorials/starting-api

  22. コールバックURLを IBM Cloud で作った Node-RED の http in に向けて指定。WEBアプリ認証用URLにも反映されるので、これ で認可コードを

    Node-RED がもらう
  23. Node-RED が freee の OAuth2.0 から受け取るあ たりのコード。 code という値で来るので Node-RED

    内に記録します。
  24. 認可コード取得から、すぐアクセストークン取りに行って、アク セストークン・リフレッシュトークンを Node-RED 内に確保。

  25. アクセストークンはexpireされるのが 1日くらいだから、12時間でリフレッシュ

  26. トークン更新不安になるので チャットにログ出しとくと安寧が訪れます

  27. こんなかんじで Discord に出すフロー Discord は Webhook を手軽に発行でき接続しやすいのでログ監視に便利 Node-REDはすぐこういう風に拡張できるのもいいところ

  28. ウォームアップ!

  29. companies GET にアクセストークンでつないで、 事業所情報を取得

  30. freee のDeals 取引(収入/支出) 情報取得

  31. freee のDeals 取引(収入/支出) 情報取得

  32. このあたりブログに情報まとめました! https://www.1ft-seabass.jp/memo/2020/09/29/freee-api-and-ibm-cloud-nodered-firststep/

  33. IBM Cloud の Node-RED から freee API から取得したデータを LINE に連携

    Node-RED freee API LINE Bot
  34. LINE Botはつくっておく

  35. 追加しておきましょう

  36. Webhook URLを先ほどのNode-REDのURLへ設定 /linebot/webhook をつけたもの。サッと HTTPS で作られるのもいい。

  37. @n0bisuke さんの作った node-red-contrib-line-messaging-api ノード便利。 こんな感じでフロー作って、すぐつなげられる。 https://flows.nodered.org/node/node-red-contrib-line-messaging-api

  38. 設定の詳細 シンプルな例でどうなっているかお伝えします

  39. 余談:勘定科目IDを探すBot https://twitter.com/1ft_seabass/status/1306874026611089410

  40. 勘定科目ID調べてくるだけの ニッチなLINE BotのNode-REDフロー

  41. リフレッシュトークンの話

  42. いよいよ今月のクライアント入金を 知らせてくれる秘書さんをつくる

  43. LINE Botの応答をつくる

  44. freee APIからデータをイイ感じに取ってくる Node-RED freee API LINE Bot

  45. 取引API deals で、売掛金 ・収入 income・9月中の期間設定・ ステータス完了 settled で絞りこみ

  46. amount 値で金額が取れるので、 今月のクライアント支払いを集計

  47. メッセージを細かくデザインする メッセージタイプをテキスト以外に画像にしたかったり、テキストでも絵文字やスタンプを加えたいときは http request ノードで、直接HTTPSリクエストをします。change ノードでリクエストする詳細内容を設定。

  48. 絵文字メッセージの設定の様子

  49. change ノードでリクエストする詳細内容を設定。 messages 配列の 0番目 の設定例。 絵文字メッセージの例と Gyazo の画像URLから画像メッセージを送る例

  50. http request ノードで 細かくメッセージを作って出来た結果がこちら フリー素材のブタさん貯金箱を出した後に、今月のクライアント支払いを集計して通知してくれる

  51. あとは inject ノードで定期実行

  52. 月1でも良いなと思ったが 週1くらいでもいいかもしれない

  53. もし月1にしたい場合は 週1実行で月初かどうかのチェックをする

  54. エクストラ 時間があれば話したい • 他の楽しそうな freee API 群から考えてみる • LINE Messaging

    API で対話ではなくて LINE Notify でもいいかもしれないケースもある • obniz という IoT デバイスに先ほどの売上通 知を出す
  55. エクストラ obniz という IoT デバイスに先ほどの売上通知を出す

  56. エクストラ obniz メッセージング機能でHTTPでメッセージが手軽に出せる https://obniz.com/ja/doc/reference/common/messaging

  57. エクストラ Node-RED から obniz メッセージングにHTTPリクエスト

  58. エクストラ できたらデモしてみます!

  59. freee API + IBM Cloud+ LINE 色々楽しく連携できます! ぜひ使ってみてください!