Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
連携を加速させる「WOFF」の紹介 - LWUG勉強会240411
Search
Shintaro Yamasaki
April 11, 2024
Technology
0
490
連携を加速させる「WOFF」の紹介 - LWUG勉強会240411
2024/04/11 LWUG勉強会 知ってると上級者?連携を加速させる「WOFF」の紹介
https://lwug.connpass.com/event/313802/
Shintaro Yamasaki
April 11, 2024
Tweet
Share
More Decks by Shintaro Yamasaki
See All by Shintaro Yamasaki
LINE WORKSのDevelopers機能紹介
mmclsntr
0
42
LINE WORKSとシステムを繋ぐ LINE WORKSのDevelopers機能紹介
mmclsntr
0
190
HL2024 LINE WORKSの紹介
mmclsntr
0
36
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
380
LINE Developersの紹介
mmclsntr
0
150
HL2023 LINE WORKS の紹介
mmclsntr
0
100
WOFFの紹介
mmclsntr
0
1.1k
LINE WORKS Developers の紹介
mmclsntr
1
680
[HL2022] LINE WORKS APIの紹介
mmclsntr
0
300
Other Decks in Technology
See All in Technology
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
210
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
130
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
140
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.7k
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
260
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
160
Goで作って学ぶWebSocket
ryuichi1208
3
2.7k
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
110
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
630
実は強い 非ViTな画像認識モデル
tattaka
2
1.2k
OPENLOGI Company Profile for engineer
hr01
1
20k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
65k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Building Your Own Lightsaber
phodgson
104
6.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Music & Morning Musume
bryan
46
6.4k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
How GitHub (no longer) Works
holman
314
140k
Transcript
ⓒ LINE WORKS Corp. 知ってると上級者︖ 連携を加速させる「WOFF」の紹介 プロダクトマネジメント本部 ⼭﨑慎太郎 LWUG勉強会 2024/04/11
まずは今⽇の要点まとめ 2 l「WOFF」は LINE WORKS の連携機能の1つで、LINE WORKS上で動くWebアプリを実装 できる仕組み。 lWOFFの特徴は、 LINE
WORKS アプリ上にさまざまなミニアプリを載せられること。 lWOFFはWebベースであるため、UIは⾃由に設計できる。 lWOFFは Bot にとって変わるものではない。Botと⼀緒に活⽤することで、連携アプリの設計 の幅が広がる。 lWOFFアプリを作りには、Webサービスに必要な環境と同じ環境が必要
3 LINE WORKS の連携機能について
LINE WORKS でできること トーク トーク フォルダ機能 ・ファイル共有 ・ペーパレス ・BCP対策 ・リンク共有
アンケート ・意⾒収集 ・集計の⾃動化 ・従業員満⾜度向上 ・安否確認 ・社外アンケート 掲⽰板 ・社内情報展開/周知 ・情報の⼀⻫配信 ・⽇報/業務報告 ・ファイル共有 ・マニュアル/ガイドライン 展開 カレンダー ・スケジュール管理 ・社内共有 ・会議室、社内設備予約 連携サービス ・勤怠管理 ・ワークフロー ・顧客管理 ・⼈事管理 ・バックオフィス系 さまざまな業務を、LINE WORKSで効率的に LINE、外部LINE WORKS と連携して 外部連携 ・社内コミュニケーション ・⾳声/ビデオ通話 ・ファイルの共有 ・オンライン会議 ・⽇報/業務報告 ・BCP(緊急時の連絡網) ※ LINEとは⾳声/ビデオ通話を⾏うことはできません。 ・社外コミュニケーション ・⾳声、ビデオ通話も可 さまざまな外部サービスとつながる連携機能 4
連携機能を通して外部サービスとつながる 連携機能を使えば、LINE WORKSと外部サービスや⾃社のシステムと繋がることができます。 LINE WORKSを通してさまざまなシステムと接続 → フロントエンドがLINE WORKSに集約。利便性アップ。 5 LINE
WORKSの基本機能 外部サービスの機能 勤怠・ワークフロー・顧客管理・配送・購買など トーク・カレンダー・掲⽰板・アンケートなど
外部サービスとつながるには 外部サービスとつながる⽅法は、⼤きく分けて2種類。 「アプリディレクトリ」を利⽤ 「LINE WORKS Developers」を活⽤ 提供されている連携アプリを利⽤ 業務に合わせた連携アプリを⾃作 6 Bot
API SSO WOFF BotやAPI、WOFFといった連携機能を使って、 業務に合わせた連携アプリを⾃由に開発できます。 主な機能 アプリ⼀例 多くのアプリが提供されており、 管理者画⾯から数ステップで利⽤開始できます。
LINE WORKS Developers とは 普段のLINE WORKSに+αするための連携機能。業務に合わせた連携アプリを⾃由に開発できます。 7 WOFF LINE WORKS上で動くミニアプリを
開発 今⽇はこちらを紹介 Bot LINE WORKSのトークルームで 使⽤できるチャットボット API LINE WORKS との連携アプリを開発 するための Web API SSO シングルサインオンを使って、 1 つのログイン情報で複数の サービスへログイン。 主な機能
8 WOFF (WORKS Front-end Framework) の紹介
WOFFとは 9 WORKS Front-end Framework(WOFF)は、LINE WORKS上で動くWeb アプリを実装できる仕組 みです。 トークメッセージなどからシームレスにアクセスできるミニアプリとして機能し、⾃由度の⾼いUI/UXに よって幅広い連携を実現します。
WOFFアプリ例 10 フォーム⼊⼒ (例. ⽇報登録、申請、予約登録等) 通常のWebアプリと同様の体験を、LINE WORKS上に構築できます。 テーブル表⽰ (例. 在庫管理、情報閲覧等)
グラフ表⽰ (例. 実績表⽰、分析結果表⽰等) 画⾯の⼀例
WOFFの特徴 11 ü LINE WORKSアプリ上からサービスを利⽤できる ü サービス専⽤のアプリが不要 ü LINE WORKSアプリの⼀部のような体験
• ユーザー視点 ü LINE WORKSを、サービス提供のためのプラット フォームとして活⽤できる ü WOFF SDKを通して、LINE WORKSの機能やユーザー 情報との連携が可能 ü Webアプリと同様の⽅式で開発 • 開発者・サービス提供者視点 WOFFの最⼤の特徴としては、 LINE WORKS アプリ上にさまざまなミニアプリを載せられること。
BotとWOFFアプリの違い 12 LINE WORKSの連携機能としては、以前より「Bot」があります。 Bot WOFF 特徴 チャットボット機能として、トークルーム上で やりとりする会話形式のUIを提供。 ユーザーと会話するの同じような体験で利⽤で
きることが特徴。 LINE WORKS上で動くWebアプリとして、ア プリ内ブラウザを通してグラフィカルなUIを 提供。 表⽰ Botが対応しているさまざまなメッセージタイ プを使い分けて、トーク上にで情報を表⽰。 Webベースに、WOFFブラウザ上に⾃由なレ イアウトで情報を表⽰。 ⼊⼒ Botへトーク送信・ボタン選択 テキスト・スタンプ・画像などのトーク送信や、Flex Messageやリッチメニュー、クイックリプライを 使ったアクションによって⼊⼒。 Webブラウザ上で可能な⼊⼒⽅式 ボタンやフォーム⼊⼒を使って複数項⽬の⼀括⼊⼒ など。 開き⽅ Botとのトークルームを開く。 通知を受け取り、通知から開くことも可能 トークルーム上で専⽤のWOFF URLにアクセ スして開く。 Botのテンプレートメッセージやメニューのボタン から開く等 使い所 会話形式にやりとりするもの。 FAQチャットボットや、簡易な⼊⼒のみで⼗分な場合。 複雑な⼊⼒やグラフィカルな表⽰を必要とす るもの。 Room reservation Room A Room B Room C Room D Botはチャットボット機能として、会話形式のUIになります。WOFFはWebベースであるため、UIは⾃由に設計できます。 → Bot における制約を WOFF が補う WOFFはBotにとって変わるものではありません。 両⽅活⽤することで、連携アプリの設計の幅が広がります。
事例紹介 : 関⻄クリアセンター株式会社 様 13 kitnone をデータベースに、⼊⼒画⾯をWOFFで作成し、LINE WORKS上から申請できるようにしています。 有給休暇等の各種社内申請にBotとWOFFを活⽤いただいています。 “
WOFFアプリによる申請⼿続きは、申請者側の負荷軽減だけでなく、管理側もkintoneに ⼀元管理できたことで業務負担が軽減し、効率的なシフト管理を実現しています。” 業種: 建設・⼯事 これだけでなく、配⾞調整や産廃コンテナ所在地管理など、 複数のWOFFアプリを開発して利⽤されています。 https://line-works.com/cases/kansai-cc/
WOFFアプリを作るために必要なもの 14 Ø LINE WORKS環境 Ø WOFFはフリープランから利⽤可能です。 Ø Webサーバー環境、または、それに類するもの Ø
基本的なWeb開発の知識 Webサーバー WOFFアプリは HTML と JavaScript をベースとしたWeb アプリです。 Webサービスに必要な環境と同じ環境が必要です。 必要なもの WOFFブラウザ Webページを表⽰
デモ : WOFFを使ってkintoneへの情報⼊⼒ 15 WOFFを利⽤した、実績登録アプリのサンプルをお⾒せします。 WebサーバーにはAWSを利⽤しています。 構成図 ⽇付や開始・終了⽇時、訪問先をWOFFアプリ上で登録すると、kitnone側にレコードが追加されます。
WOFFを使ってみたくなったら 16 WOFFの詳細な仕様やサンプルコードは LINE WORKS Developers サイトをご覧ください。 LINE WORKS developers
https://developers.worksmobile.com/jp
WOFFを使ってみたくなったら 17 また、具体的な実装例やTipsなどは、さまざまな記事がQiitaに掲載されています。 LINE WORKS WOFF https://qiita.com/mmclsntr/items/4d91ee73e163b34053da https://qiita.com/mmclsntr/items/5893b1ba70d039aa2d0d
まとめ 18 l「WOFF」は LINE WORKS の連携機能の1つで、LINE WORKS上で動くWebアプリを実装 できる仕組み。 lWOFFの特徴は、 LINE
WORKS アプリ上にさまざまなミニアプリを載せられること。 lWOFFはWebベースであるため、UIは⾃由に設計できる。 lWOFFは Bot にとって変わるものではない。Botと⼀緒に活⽤することで、連携アプリの設計 の幅が広がる。 lWOFFアプリを作りには、Webサービスに必要な環境と同じ環境が必要