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/

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 色々楽しく連携できます！ ぜひ使ってみてください！