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
450
連携を加速させる「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
37
LINE WORKSとシステムを繋ぐ LINE WORKSのDevelopers機能紹介
mmclsntr
0
190
HL2024 LINE WORKSの紹介
mmclsntr
0
34
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
350
LINE Developersの紹介
mmclsntr
0
140
HL2023 LINE WORKS の紹介
mmclsntr
0
100
WOFFの紹介
mmclsntr
0
1k
LINE WORKS Developers の紹介
mmclsntr
1
670
[HL2022] LINE WORKS APIの紹介
mmclsntr
0
290
Other Decks in Technology
See All in Technology
High Performance PHP
cmuench
0
110
Women in Agile
kawaguti
PRO
3
180
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
190
DeepSeek on AWS
hariby
1
170
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
2
1.3k
SCSAから学ぶセキュリティ管理
masakamayama
0
120
private spaceについてあれこれ調べてみた
operando
1
210
The 5 Obstacles to Empowered Teams - Twice the Value in Half the Time
mdalmijn
0
140
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
0
370
教師なし学習の基礎
kanojikajino
4
370
panicを深ぼってみる
kworkdev
PRO
2
160
アーキテクチャわからん、の話
shirayanagiryuji
0
220
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Why Our Code Smells
bkeepers
PRO
335
57k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Automating Front-end Workflow
addyosmani
1367
200k
Designing for humans not robots
tammielis
250
25k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How GitHub (no longer) Works
holman
313
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
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サービスに必要な環境と同じ環境が必要