WOFFの紹介

LINE WORKSミニアプリフレームワーク「WOFF」正式リリース！早わかり勉強会！
https://lwugdev.connpass.com/event/283964/

切磋琢磨（LINE WORKSミニアプリフレームワーク「WOFF」早わかり勉強会）＠LWTT大阪
https://lwugdev.connpass.com/event/284432/

LWTT名古屋 #3 LINE WORKS ミニアプリフレームワーク「WOFF」勉強会 & LT
https://lwugdev.connpass.com/event/288069/

Transcript

1. ⓒ WORKS MOBILE Japan Corp.
   WOFF (WORKS Front-end Framework)
   の紹介
   WORKS MOBILE JAPAN Corp.
   Shintaro Yamasaki
   

   View Slide

2. LINE WORKS の紹介
   

   View Slide

3. LINE WORKS とは︖
   LINE WORKSは、LINEの使いやすさはそのままに、
   各機能をビジネスに特化させたコミュニケーションアプリです。
   4
   ⼀般ユーザー向け
   モバイルメッセンジャー
   プラットフォーム
   ビジネス向け
   コミュニケーション&コラボレーション
   プラットフォーム
   LINE LINE WORKS
   

   View Slide

4. LINE WORKS 最⼤の特徴
   LINEのように、だれでも使えて教育の時間がほとんど必要ありません。
   管理機能により、コミュニケーションの活性化と安⼼なビジネス環境を両⽴します。
   5
   プライベート
   モバイルメッセンジャー
   プラットフォーム
   教育コスト不要
   ITリテラシーを問わず
   だれでも使えるサービス
   社内だけでなく、お客様とお取引先との
   コミュニケーションも
   LINE WORKSひとつで完結
   ⾦融機関も認める
   セキュリティをご提供
   お客様の⼤切な情報を守ります
   国内利⽤
   450万⼈
   LINEとつながる
   唯⼀のビジネスチャット
   管理もできて
   安⼼なセキュリティ
   

   View Slide

5. LINE WORKS でできること
   6
   トーク
   トーク
   フォルダ機能
   ・ファイル共有
   ・ペーパレス
   ・帳票管理
   ・BCP対策
   ・リンク共有
   アンケート
   ・意⾒収集
   ・集計の⾃動化
   ・従業員満⾜度向上
   ・安否確認
   ・社外アンケート
   掲⽰板
   ・社内情報展開/周知
   ・社内ポータルの構築
   ・情報の⼀⻫配信
   ・⽇報/業務報告
   ・ファイル共有
   ・マニュアル/ガイドライン
   展開
   カレンダー
   ・スケジュール管理
   ・社内共有
   ・プロジェクト管理
   連携サービス
   ・勤怠管理
   ・ワークフロー
   ・顧客管理
   ・⼈事管理
   ・バックオフィス系
   さまざまな業務を、LINE WORKSで効率的に
   LINE、外部LINE WORKS
   と連携して
   外部連携
   ・社内コミュニケーション
   ・⾳声/ビデオ通話
   ・ファイルの共有
   ・オンライン会議
   ・プロジェクト管理
   ・⽇報/業務報告
   ・BCP（緊急時の連絡網）
   ※ LINEとは⾳声/ビデオ通話を⾏うことはできません。
   ・社外コミュニケーション
   ・⾳声、ビデオ通話も可
   

   View Slide

6. アプリ連携
   7
   • 外部サービスと連携する「アプリ」を簡単に導⼊できる仕組み。
   • 管理画⾯から簡単に追加。
   さまざまなアプリを⽤意。
   ネットプリント コラボフロー
   fondesk
   チャットで勤怠
   (freee勤怠管理)
   Mail2Link 宅急便を送る 奉⾏クラウド らくしふ
   など
   New
   アルキラーNEX 熱中症アラート (β版)
   New
   New
   New
   

   View Slide

7. LINE WORKS Developersの紹介
   

   View Slide

8. LINE WORKS Developers
   9
   普段のLINE WORKSに+αするための連携機能。
   社内システム
   外部サービス
   LINE WORKS Developers
   LINE WORKSを通してさまざまなシステムと接続
   → フロントエンドがLINE WORKSに集約。利便性アップ。
   Bot API
   WOFF SSO
   

   View Slide

9. 活⽤例
   10
   業務に合わせたBotを開発し、ご活⽤いただいてます。
   中森農産株式会社 様
   業種: 農林畜産
   時報Bot
   • 農作業者への注意喚起と安否確認のためのBot
   • 全従業員に定時連絡を⾃動化。
   • 既読がつくことが安否確認にもなる。
   業務活動管理Bot
   パナソニック ホームズ株式会社 様
   業種: 不動産・住宅
   参考: https://line.worksmobile.com/jp/cases/nai-organic/ 参考: https://line.worksmobile.com/jp/cases/homes-panasonic
   • トーク画⾯から会話形式で活動内容を記録。
   • 感覚で項⽬を選択することができるため、負担なく作業を⾏える
   

   View Slide

10. 活⽤例
    11
    https://line.worksmobile.com/jp/cases/
    [業務⾃動化・Bot] [連携ツール] を選択
    導⼊事例ページを参照ください
    

    View Slide

11. LINE WORKS Developers の主な機能
    12
    WOFF
    LINE WORKS上で動くミニアプリを
    開発
    今⽇はこちらを紹介
    Bot
    LINE WORKSのトークルームで
    使⽤できるチャットボット
    API
    LINE WORKS との連携アプリを開
    発するための Web API
    SSO
    シングルサインオンを使って、
    1 つのログイン情報で複数の
    サービスへログイン。
    

    View Slide

12. WOFF (WORKS Front-end Framework)
    の紹介
    

    View Slide

13. WOFFとは
    WORKS Front-end Framework（WOFF）は、LINE WORKS上で動くWeb アプリを実装できる開発プラットフォームです。
    このWOFFで作られた Web アプリ（= WOFFアプリ）は、トークメッセージなどからシームレスに⽴ち上がるミニアプリとして、幅
    広い連携を実現します。
    

    View Slide

14. WOFFの特徴
    ü LINE WORKSアプリ上からすぐにサービスを利⽤で
    きる
    ü サービスの利⽤のために個別のアプリインストールが
    不要
    ü Webアプリ/モバイルアプリと同様の使⽤感
    ユーザー視点のメリット
    ü LINE WORKSを、サービス提供のためのプラット
    フォームとして活⽤できる
    ü WOFF SDKを通して、LINE WORKSの機能やユー
    ザー情報との連携が可能
    ü Webアプリと同様の⽅式で開発
    開発者・サービス提供者視点のメリット
    WOFFの最⼤の特徴としては、LINE WORKS上でさまざまなアプリを利⽤できるようになること。
    LINE WORKSというアプリの上で動くミニアプリとして、さまざまなサービスをLINE WORKSを通して提供できる。
    

    View Slide

15. WOFFの機能
    WOFF SDKを通してさまざまな機能が提供されている。基本的な機能は以下の通り。
    • ユーザーIDの取得
    • トークへメッセージの送信
    • QRコードのスキャン
    

    View Slide

16. Bot と WOFF アプリの違い
    Bot も WOFF アプリも、LINE WORKS を通してさまざまな業務ツールを利⽤可能にする開発者機能。
    Room reservation
    Room A
    Room B
    Room C
    Room D
    Bot WOFFアプリ
    トークルーム上でやりとりする会話形式のUIを提
    供。
    ユーザーとのトークと同じような体験を提供でき
    るユーザーフレンドリーな機能。
    # インターフェース
    n Bot APIを通して提供されているなさまざま
    なメッセージタイプやメニューを使って設計。
    # その他
    n トークルームを開いてアクセス。
    n プッシュ通知あり。
    # 使い所
    n 会話形式にやりとりするもの(⼀問⼀答)。
    n FAQチャットボットや、簡易な⼊⼒のみで
    ⼗分な場合。
    Webアプリとして、ブラウザを通したグラフィ
    カルなUIを提供する。
    WOFFブラウザ上に⾃由なレイアウトで情報を
    表⽰。
    # インターフェース
    n Webアプリとして、ボタンやフォーム⼊⼒
    等を実装し、複数項⽬の⼀括⼊⼒・表⽰など
    を⾃由に設計可能。
    # その他
    n WOFF URLを開いて起動。
    # 使い所
    n 複雑な⼊⼒やグラフィカルな表⽰を必要とす
    る場合。
    それぞれの特徴を踏まえて、組み合わせて利⽤する。
    

    View Slide

17. 使い所
    想定される活⽤として主に3種類
    1.複数項⽬を⼊⼒させたい時
    2.情報検索や複雑な情報の表⽰をしたい時
    3.グラフィカルなUI/UXを提供したい時
    

    View Slide

18. 使い所
    1. 複数項⽬を⼊⼒させたい時
    • 複数の情報を⼀度に⼊⼒し、フォーム送信 (e.g. 実績登録、予約登録など)
    例. アプリ連携 > 宅急便を送る アプリ
    届け先住所の登録で利⽤。
    • 取得したユーザーIDを使って、⼊⼒した
    ユーザーの特定も可能。
    

    View Slide

19. 使い所
    2.情報検索や複雑な情報の表⽰をしたい時
    • 情報の検索や表⽰をするケース。 (e.g. 在庫管理、ファイル検索など)
    • テーブル表⽰やエクスプローラー機能をWOFFアプリで実現。
    例. アプリ連携 > Dropbox アプリ
    ファイルを検索し、ファイルリンクのトークへの共有
    • メッセージ送信機能でトークルームへ
    共有も可能。
    • QRコードのスキャン機能でQRコード
    から検索することも可能。
    

    View Slide

20. 使い所
    3.グラフィカルなUI/UXを提供したい時
    • グラフィカルなUIを表⽰させて、⾃由度の⾼い体験を実装したいケース。(e.g. 実績表⽰、使⽤量表⽰、分析結果表⽰など)
    • Webベースなので、リッチなUIを実現可能。
    • 取得したユーザーIDを使って、⼊⼒した
    ユーザーの特定も可能。
    

    View Slide

21. 利⽤要件
    lプラン
    l フリープランから利⽤可能
    l環境
    l モバイル版・PC版・Web版で利⽤可能
    l システム要件 に則る
    l アプリバージョン: バージョン3.6以上推奨 (v3.6未満の場合、⼀部利⽤できない機能があります。)
    

    View Slide

22. 補⾜
    LINE の「LIFF」も WOFF と同様に、LINE アプリ上に Web アプリを実装できる開発者向け機能。
    同じようにユーザー連携やメッセージ送信などの基本機能を持つが、異なる点も多い。LIFF にはあって
    WOFF にはない機能も多くある (liff.shareTargetPicker(), liff.getIDToken()など)。
    なので、LIFFのコードをそのまま転⽤するということはできない (SDKも異なる)
    違いがあることを認識して、「WOFF」のドキュメントを参照して開発する。
    「LIFF」と⽐べて
    

    View Slide

23. デモ
    Qiitaの記事に沿って紹介します
    https://qiita.com/mmclsntr/items/ab3987938da6ecd8d9b1
    

    View Slide

24. ドキュメント
    APIリファレンスは「LINE WORKS Developers」のドキュメントにあります。
    LINE WORKS developer
    https://developers.worksmobile.com/jp
    

    View Slide

25. ドキュメント
    26
    QiitaにTipsが多く投稿されています。こちらも参考ください。
    「LINEWORKS」タグで検索 「ワークスモバイルジャパン株式会社」Organizationもあります。
    

    View Slide

26. コミュニティ
    疑問点などありましたら、コミュニティもぜひご活⽤ください。
    https://forum.worksmobile.com/jp/
    

    View Slide

27. ありがとうございました
    

    View Slide