ⓒ 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サービスに必要な環境と同じ環境が必要