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

by 1ft-seabass

Slide 1

Slide 1 text

[サブタイトル] [タイトル] ワンフットシーバス田中正吾 freee / IBM Cloud / LINE API アプリ開発勉強会 IBM Cloud と freee API 連携によるアプリ開発ワンフットシーバス田中正吾

Slide 2

Slide 2 text

私の話はスライドを後ほど共有します。話す内容に注力いただいて大丈夫です！

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

秘書さんがいると考えてみてやってくれたらいいなと思うところ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

こんな仕組みを作ります

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

デモを見せてみます

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

IBM Cloud の Node-RED から freee API につなげる Node-RED freee API LINE Bot

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Node-RED が freee の OAuth2.0 から受け取るあたりのコード。 code という値で来るので Node-RED 内に記録します。

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ウォームアップ！

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

freee のDeals 取引（収入／支出）情報取得

Slide 31

Slide 31 text

freee のDeals 取引（収入／支出）情報取得

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

LINE Botはつくっておく

Slide 35

Slide 35 text

追加しておきましょう

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

LINE Botの応答をつくる

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

エクストラ時間があれば話したい ● 他の楽しそうな freee API 群から考えてみる ● LINE Messaging API で対話ではなくて LINE Notify でもいいかもしれないケースもある ● obniz という IoT デバイスに先ほどの売上通知を出す

Slide 55

Slide 55 text

エクストラ obniz という IoT デバイスに先ほどの売上通知を出す

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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