LINE WORKSとシステムを繋ぐ LINE WORKSのDevelopers機能紹介

9/17 【大阪】システム連携勉強会（LINE WORKS DAY 24 in 大阪 前夜祭）
https://lwug.connpass.com/event/324172/

Transcript

1. ⓒ LINE WORKS Corp. LINE WORKSとシステムを繋ぐ LINE WORKSのDevelopers機能紹介 2024/09/17 LWUG勉強会 WOFF & Incoming Webhookアプリ
2. 自己紹介 山﨑 慎太郎 Shintaro Yamasaki LINE WORKS株式会社 プロダクトマネジメント本部 役割 : プロダクトマネージャー 主な担当 : Developer機能周り 拠点 : 大阪 2022/03 入社 前職は AWS を中心とした設計・構築やバックエンド開発・チャットボット開発に従事していました。 特にサーバーレスが好き。メインは Python
3. LINE WORKS でできること トーク トーク フォルダ機能 ・ファイル共有 ・ペーパレス ・帳票管理 ・BCP対策 ・リンク共有 アンケート ・意見収集 ・集計の自動化 ・従業員満足度向上 ・安否確認 ・社外アンケート 掲示板 ・社内情報展開/周知 ・社内ポータルの構築 ・情報の一斉配信 ・日報/業務報告 ・ファイル共有 ・マニュアル/ガイドライン 展開 カレンダー ・スケジュール管理 ・社内共有 ・プロジェクト管理 連携サービス ・勤怠管理 ・ワークフロー ・顧客管理 ・人事管理 ・バックオフィス系 さまざまな業務を、LINE WORKSで効率的に LINE、外部LINE WORKSと 連携して 外部連携 ・社内コミュニケーション ・音声/ビデオ通話 ・ファイルの共有 ・オンライン会議 ・プロジェクト管理 ・日報/業務報告 ・BCP（緊急時の連絡網） ※ LINEとは音声/ビデオ通話を行うことはできません。 ・社外コミュニケーション ・音声、ビデオ通話も可 さまざまな外部サービスとつながる連携機能
4. 連携機能を通して外部サービスとつながる 連携機能を使えば、LINE WORKSと外部サービスや自社のシステムと繋がることができます。 LINE WORKSを通してさまざまなシステムと接続 → フロントエンドがLINE WORKSに集約。利便性アップ。 LINE WORKSの基本機能 外部サービスの機能 勤怠・ワークフロー・顧客管理・配送・購買など トーク・カレンダー・掲示板・アンケートなど
5. 外部サービスとつながるには 外部サービスとつながる方法は、大きく分けて2種類。 「アプリディレクトリ」を利用 「LINE WORKS Developers」を活用 ① 提供されている連携アプリを利用 ② 業務に合わせた連携アプリを自作 BotやAPI、WOFFといった連携機能を使って、 業務に合わせた連携アプリを自由に開発できます。 アプリ一例 多くのアプリが提供されており、 管理者画面から数ステップで利用開始できます。 など Bot API WOFF 主な機能 Incoming Webhook
6. LINE WORKS Developers とは 普段のLINE WORKSに+αするための連携機能。業務に合わせた連携アプリを自由に開発できます。 WOFF LINE WORKS上で動くミニアプリを 開発 Bot LINE WORKSのトークルームで使 用できるチャットボット API LINE WORKS との連携アプリを開発 するための Web API 主な機能 Incoming Webhook トークルームに簡単に送信できるよう になるチャットボットアプリ
7. WOFF Incoming Webhook Bot & API トークルーム上で双方向の連携。 会話形式のUI。 トークを受信 APIを通して トーク送信 Webアプリを通して データ連携 Webアプリ表示 LINE WORKSアプリ上で動くWebアプリ。 自由に UI を設計可能。 Webhook URLから トーク送信 トークルームに通知連携。 連携の ”基本となる” 機能 連携の “幅を広げる” 機能 連携を “より手軽にする” 機能
8. 8 WOFF (WORKS Front-end Framework) の紹 介
9. 「WOFF」とは WORKS Front-end Framework（WOFF）は、LINE WORKS上で動くWeb アプリを実装できる仕組みで す。 トークメッセージなどからシームレスにアクセスできるミニアプリとして機能し、自由度の高いUI/UXに よって幅広い連携を実現します。
10. LINE WORKS 上にミニアプリを構築 LINE WORKS アプリの上で 自身が開発した Web アプリを表示させることができます。 フォーム入力 (例. 日報登録、申請、予約登録等) テーブル表示 (例. 在庫管理、情報閲覧等) グラフ表示 (例. 実績表示、分析結果表示等) 画面の一例
12. BotとWOFFアプリの違い LINE WORKSの連携機能としては、以前より「Bot」があります。 Bot WOFF 特徴 チャットボット機能として、トークルーム上で やりとりする会話形式のUIを提供。 ユーザーと会話するの同じような体験で利用で きることが特徴。 LINE WORKS上で動くWebアプリとして、ア プリ内ブラウザを通してグラフィカルなUIを 提供。 表示 Botが対応しているさまざまなメッセージタイ プを使い分けて、トーク上にで情報を表示。 Webベースに、WOFFブラウザ上に自由なレイ アウトで情報を表示。 入力 Botへトーク送信・ボタン選択 テキスト・スタンプ・画像などのトーク送信や、Flex Messageやリッチメニュー、クイックリプライを 使ったアクションによって入力。 Webブラウザ上で可能な入力方式 ボタンやフォーム入力を使って複数項目の一括入力 など。 開き方 Botとのトークルームを開く。 通知を受け取り、通知から開くことも可能 トークルーム上で専用のWOFF URLにアクセ スして開く。 Botのテンプレートメッセージやメニューのボタン から開く等 使い所 会話形式にやりとりするもの。 FAQチャットボットや、簡易な入力のみで十分な場合。 複雑な入力やグラフィカルな表示を必要とす るもの。 Botはチャットボット機能として、会話形式のUIになります。WOFFはWebベースであるため、UIは自由に設計できます。 → Bot における制約を WOFF が補う WOFF は 従来の Bot にとって変わるものではありません。 両方を活用することで、より幅広い連携アプリの設計が可能です。 Room reservation Room A Room B Room C Room D
13. WOFFアプリを作るために必要なもの 13 ➢ LINE WORKS環境 ➢ WOFFはフリープランから利用可能です。 ➢ Webサーバー環境、または、それに類するもの ➢ 基本的なWeb開発の知識 Webサーバー WOFFアプリは HTML と JavaScript をベースとしたWeb アプリです。 Webサービスに必要な環境と同じ環境が必要です。 必要なもの WOFFブラウザ Webページを表示
14. WOFFを使ってみたくなったら また、具体的な実装例やTipsなどは、さまざまな記事がQiitaに掲載されています。 LINE WORKS WOFF https://qiita.com/mmclsntr/items/4d91ee73e163b34053da https://qiita.com/mmclsntr/items/5893b1ba70d039aa2d0d
15. 15 Incoming Webhook アプリの紹介
16. Incoming Webhook アプリ 他のWebサービスや自社システムからの情報を、LINE WORKSのトークルームに簡単に送信 できるようになるチャットボットアプリです。 外部のWebサービスや自社システム アプリディレクトリの無料アプリとして提供されます。 LINE WORKS 無償プラン・有償プランどちらにも提供します。
17. 利用シナリオ ファイルやレコードの更新通知をトークで受け取る ストレージ/データベース Incoming Webhook ワークフロー Incoming Webhook ワークフローの申請・承認通知等をトークで受け取る 監視ツール 異常を検知した際の通知をトークで受け取る 問い合わせ内容をトークで受け取る 問い合わせフォーム Incoming Webhook Incoming Webhook アップロード 通知 送信 異常検知 通知 送信 通知 送信 通知 送信 申請・承認 問い合わせ
18. 〇〇ルーム このアプリの仕組み 機能としてはシンプルで、このアプリで発行したWebhook URLへHTTPリクエストを送るこ とで、トークルームにメッセージが送信されます。 Incoming Webhook … Webhook URL 自社システム 外部サービス アプリから発行。 トークルームに紐づいているURL。 HTTPリクエスト トークへ送信 Webhook URLへリクエストを送るだけで、 それに紐づいたトークルームへ簡単にメッセージを送信することができます。
20. 特徴 通常のBot開発の場合 Incoming Webhookアプリの最大の特徴は、通常のBotと比べて簡単に構築できること。 サーバー環境の構築・運用 プログラミング トークン発行処理 アクセストークンの管理 メッセージ送信処理 外部サービスからの受信 Developer Consoleや管理者画面でのBot追加作業 Developer Console Botの作成・設定 トークン発行のための設定 管理者画面 Botの追加・設定 管理者画面 (アプリ連携) アプリの追加・設定 通知連携の実装作業 LINE WORKS側の設定作業 連携支援ツールを活用してノーコードに実装可能 など Incoming Webhook Webhook URL 発行 管理者画面から数ステップで追加 & Webhook URL の発行 Incoming Webhook の場合
21. 特徴 通常のBotの場合 外部サービス Developer Console Botの作成・設定 トークン発行のための設定 管理者画面 Botの追加・設定 トークン発行処理 アクセストークンの管理 メッセージ送信処理 外部サービスからの受信 . . . サーバー環境の構築・運用保守 サーバー 通常のBot 利用者 LINE WORKS Bot追加 Developer Console上での設定作業や、Bot APIを利用するためのアクセストークン発行処理・管理が 強く負担となっていた。 メッセージ送信 通知 イベント送信 Incoming Webhookアプリの最大の特徴は、通常のBotと比べて簡単に構築できること。
22. Incoming Webhook アプリの場合 外部サービス 管理者画面 (アプリディレクトリ) アプリの追加・設定 Incoming Webhookアプリ 利用者 LINE WORKS Webhook URL発行 Bot追加 Developer Console上での設定作業や、アクセストークン発行処理・管理がなくなり、シンプルに Webhookなら連携支援ツールとの連携も容易で、活用すればノーコードで構築可能 連携支援ツール など 連携設定 Webhook URLへリクエスト イベント送信 通知 特徴 Incoming Webhookアプリの最大の特徴は、通常のBotと比べて簡単に構築できること。
23. 連携構築例 kintone連携 Trello連携 アプリ Incoming Webhookアプリ webhook レコードの追加 レコードの編集 レコードの削除など Board Incoming Webhookアプリ カード追加 カード編集 カード削除など
24. 制限事項 1. 双方向でのやり取り • 連携サービス to LINE WORKSという1方向のみ対応。Botからユーザーへ送信されるのみで、 ユーザーからのトークを受信することはできません。 2. 画像を含むファイルの送信やメッセージのフォーマットの指定 • 送信メッセージはあらかじめ決められたテキストをベースのフォーマットに従う必要があります。 3. リッチメニュー/固定メニューの設定 • トークルーム下部のメニューには、Incoming Webhookアプリ用の項目が表示されます。 機能面として、以下のことはできません。 非機能面として、以下の制限があります。 1. 発行可能なWebhook URLは 5 つまでです。 • 複数人トークルームへの情報共有にご利用ください。 2. リクエストにRate Limitがあります。1 ドメインあたり 120 リクエスト/分です。 • Webhook URL単位にかかる制限ではありません。 • 1 URL利用 : 1 URLあたり平均 120 リクエスト/分 • 5 URL利用 : 1 URLあたり平均 24 リクエスト/分 • ※ 補足: API とは分離されているため、通常の API の Rate Limit には影響ありません。 → これらを行いたい場合は、通常のBot開発が必要です。
25. ドキュメント https://developers.worksmobile.com/jp/docs/webhook 仕様書 LINE WORKS Developers をご参照ください https://line-works.com/blog/solution/incoming-webhook-app/ ブログ 「LINE WORKS へ通知！Incoming Webhook アプリの紹 介」