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
88
連携を加速させる「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 Developersの紹介
mmclsntr
0
47
HL2023 LINE WORKS の紹介
mmclsntr
0
70
WOFFの紹介
mmclsntr
0
620
LINE WORKS Developers の紹介
mmclsntr
1
470
[HL2022] LINE WORKS APIの紹介
mmclsntr
0
190
LINE WORKS API 2.0について
mmclsntr
1
2k
cloudpackの運用保守は俺たちが支える! 〜運用自動化への取り組み〜
mmclsntr
0
290
AWS運用を頑張らないために何が出来るのか
mmclsntr
1
760
GCPの基本〜AWSとGCPのここが違う!〜
mmclsntr
0
210
Other Decks in Technology
See All in Technology
Azureの基本的な権限管理の勉強会
yhana
1
2.1k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
740
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
7
1.3k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
620
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
4k
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
340
Cracking the KubeCon CfP
inductor
2
270
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2.1k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
400
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
MapLibreとAmazon Location Service
dayjournal
1
190
Featured
See All Featured
Debugging Ruby Performance
tmm1
70
11k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
What the flash - Photography Introduction
edds
64
11k
GitHub's CSS Performance
jonrohan
1025
450k
Optimizing for Happiness
mojombo
370
69k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Why Our Code Smells
bkeepers
PRO
331
56k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Faster Mobile Websites
deanohume
300
30k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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サービスに必要な環境と同じ環境が必要