Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WOFFの紹介

 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/

Shintaro Yamasaki

May 30, 2023
Tweet

More Decks by Shintaro Yamasaki

Other Decks in Technology

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