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
590
連携を加速させる「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
65
LINE WORKSとシステムを繋ぐ LINE WORKSのDevelopers機能紹介
mmclsntr
0
220
HL2024 LINE WORKSの紹介
mmclsntr
0
55
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
500
LINE Developersの紹介
mmclsntr
0
180
HL2023 LINE WORKS の紹介
mmclsntr
0
120
WOFFの紹介
mmclsntr
0
1.2k
LINE WORKS Developers の紹介
mmclsntr
1
730
[HL2022] LINE WORKS APIの紹介
mmclsntr
0
320
Other Decks in Technology
See All in Technology
IAMのマニアックな話 2025を執筆して、 見えてきたAWSアカウント管理の現在
nrinetcom
PRO
4
620
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
230
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
50
30k
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
120
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
430
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
7.5k
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
780
Devin(Deep) Wiki/Searchの活用で変わる開発の世界観/devin-wiki-search-impact
tomoki10
0
660
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.3k
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
8
1.7k
Whats_new_in_Podman_and_CRI-O_2025-06
orimanabu
3
180
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
ymty
1
470
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
A Modern Web Designer's Workflow
chriscoyier
693
190k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
The Pragmatic Product Professional
lauravandoore
35
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Statistics for Hackers
jakevdp
799
220k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Stop Working from a Prison Cell
hatefulcrawdad
269
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サービスに必要な環境と同じ環境が必要