はじめに

「WORKS Front-end Framework（WOFF）」は、LINE WORKS上で動くWeb アプリ (WOFFアプリ) を実装できる開発プラットフォームです。

WOFFアプリは HTML と JavaScript をベースとした Web アプリで、ユーザーの情報の取得やトークルームへのメッセージの送信などが可能です。

トークメッセージなどからシームレスにアクセスできるミニアプリとして機能し、自由度の高いUI/UXによって幅広い連携を実現します。

参考
LINE WORKS Developers 全般についてはこちら。

特徴

最大の特徴は さまざまなアプリをLINE WORKS上に載せられること です。

LINE WORKSというアプリの上で動くミニアプリとして、さまざまなサービスをLINE WORKSを通して提供できます。

■ ユーザー視点のメリット

LINE WORKSアプリ上からサービスを利用できる
- WOFFアプリはトークルームなどからシームレスに立ち上がり、LINE WORKSアプリの一部のような感覚で利用できる。
サービスの利用のために個別のアプリインストールが不要
- LINE WORKSを通して提供されるため、サービス個別にアプリのインストール作業は不要。
Botと比べて幅広いUI/UXで連携アプリを利用可能
- Botのようなチャットベースでのやりとりではなく、グラフィカルなUIで、Webアプリ/モバイルアプリと同じ体験で使用できる。

■ 開発者・サービス提供者視点のメリット

LINE WORKSをサービス提供のためのプラットフォームとして活用できる
- 業務のためのさまざまなツールをLINE WORKSの上で提供でき、シームレスなサービス連携を実現する。
- LINE WORKSが実行基盤の役割を保つため、その分の提供コスト・運用コストが削減される。
WOFF SDKを通して、LINE WORKSの機能やユーザー情報との連携が可能
- 単なるアプリ内ブラウザで開く場合との大きな違いとして、「WOFF SDK」が利用できる点がある。
- このWOFF SDKを通して、追加ログインなしでユーザーIDの取得
  、メッセージ送信などの機能を利用可能する。
Webアプリと同様の方式で開発
- Webアプリ開発のノウハウで作ることができる。OSごとにネイティブアプリを作成する必要もない。
- Webベースであるため自由に画面設計できる。

「WOFF SDK」を通してさまざまな機能が提供されています。基本的な機能は以下の通りです。

WOFF SDKの各メソッドの詳細についてはこちら

LINE WORKSの連携機能としては、以前より「Bot」が使用されていました。

WOFFアプリもBotと同じようにLINE WORKSの上でさまざまな業務ツールを利用可能にする開発者機能ですが、それぞれ以下のような違いがあります。

	Bot	WOFF
見た目
特徴	チャットボット機能として、トークルーム上でやりとりする会話形式のUIを提供する。ユーザーと会話するの同じような体験で利用できることが特徴。	LINE WORKS上で動くWebアプリとして、アプリ内ブラウザを通してグラフィカルなUIを提供する。
表示	Botが対応しているさまざまなメッセージタイプを使い分けて、トークで情報を表示。	Webベースに、WOFFブラウザ上に自由なレイアウトで情報を表示。
入力	基本、一問一答。テキスト・スタンプ・画像などのトーク送信や、Flex Messageやリッチメニュー、クイックリプライを使ったアクションによって入力。	Webで可能な範囲であれば基本的に実装可。ボタンやフォーム入力を使って複数項目の一括入力など。
開き方	Botとのトークルームを開く。	トークルーム上からWOFF URLを開く。
その他	プッシュ通知が可能
使い所	会話形式にやりとりするもの。 FAQチャットボットや、簡易な入力のみで十分な場合。	複雑な入力やグラフィカルな表示を必要とする場合。

Botを利用した連携アプリは、入力方法や表示方法などはBot APIで可能な範囲に制限されます。一方で、WOFFはWebベースであるため、UIは自由に設計できます。

それぞれ特徴を踏まえて両者を使い分け、作りたい連携アプリに適したユーザー体験を設計することが重要です。もちろん、BotとWOFFを同時に利用することもできます。

ユーザー事例

アプリディレクトリの一部のアプリでも活用されています。

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

WOFFブラウザ上ではDeveloper toolを表示できないため、コンソールログやネットワーク情報などを閲覧することができません。

それを解決するために、以下のツールを活用できます。

WOFFの実装例や機能をチェックできるサンプルコードが用意されています。

外部ブラウザで立ち上がるため、WOFFの実行の際は、ログイン処理が必要です。

woff.login() を呼びだして、ログイン画面を出し、ユーザーにログインしてもらう必要があります。

woff.sendMessage() でメッセージを送れるのは、モバイル版にてトークルーム上でWOFFアプリを開いた時のみです。トークルーム以外の場所で実行した時や外部ブラウザで実行した時には利用できません。

LINEの「LIFF」もWOFFと同様に、LINEアプリ上にWebアプリを実装できる開発者向け機能です。

LIFFも同じようにユーザー連携やメッセージ送信などの基本機能を持ちますが、異なる点も多いです。

LIFFにはあって WOFFにはない機能も多くあります (liff.shareTargetPicker(), liff.getIDToken()など)。

違いがあることを認識して、「WOFF」のドキュメントを参照して開発してください。