TR;DL

とりあえずWOFFアプリを触ってみたい!
WOFFアプリでどういう事ができるかを知りたい!
という方向けの記事です。

LINE WORKS WOFFとは？？

WOFF (WORKS Front-end Framework) は、LINE WORKS が提供する Web アプリのプラットフォームです。このプラットフォームで動作する Web アプリを「WOFF アプリ」と呼びます。
WOFF アプリの実体は HTML と JavaScript をベースとした Web アプリです。WOFF アプリを実行したユーザーの情報の取得や、WOFF アプリを呼び出したトークルームへのメッセージの送信などができます。

公式サイトより引用

本記事について

React + Vite + Typescriptで作成したサンプルアプリをベースに、
コードを書く事なくWOFFで出来る事を一通り( ※ 2025/05/14時点 )試す事ができます。

サンプルアプリのソースコード

手順

READMEの手順通り、進めていきます。

Step0

※ npmなどのinstallは省いてます。
LINE WORKS Developer Consoleへログインし、WOFFアプリの登録。
https://developers.worksmobile.com/jp/docs/woff-guide#create-woff-app

WOFFアプリのendpoint URLは実際の動作環境に変更ください。
下図では、ローカルホストで実行する場合の設定となります。

WOFFアプリを登録すると、以下のようになります。
赤枠部のWOFF_IDは今後のステップで利用します。

Step1

git cloneでソースコードをローカルへダウンロードし、該当ディレクトリへ移動します。

git clone https://github.com/1411381/WOFF-Sample-App.git
cd WOFF-Sample-App

Step2

.envで環境変数の設定を行います。

ルート直下に .envファイルを作成し、Step0で取得したWOFF_IDを設定します。

Step3

プロジェクトの初期化と依存関係の設定
以下、コマンドをルートにて実行し、npmの初期化と各種パッケージのインストールを行います。

npm init -y
npm install

Step4

ローカルでの動作確認

以下コマンドを実行することで、開発環境が実行されます。

npm run dev

ブラウザにて、http://localhost:5173/ を開くことで、
トップページが表示され

LINE WORKSアカウントでログインすると、以下のような画面が表示されます。

WOFFサンプルアプリの各種説明

WOFFアプリも無事に起動した( はず? )なので、各場所が何をしているか説明したいと思います。
主に以下2軸で説明します。

情報取得系
- ユーザ情報の取得
- 動作環境
- WOFFアプリ情報
操作・処理系
- URLを開く
- QRリーダ
- チャットを送る

情報取得系

WOFFを利用しているユーザ情報やWOFFの動作環境などを確認する事ができます。

プロファイル( ユーザ情報の取得 )

LINE WORKSのユーザ、ドメイン情報を取得可能です。

使用するWOFFメソッド
getProfile()

動作環境

WOFFの各種動作環境を取得可能です。

OS ( android,ios,web )
WOFF SDK Version
言語設定
LINE WORKS Version ※PCブラウザの場合、表示されません。
WOFFアプリの実行ブラウザ情報( WOFFブラウザ・外部ブラウザどちらか )

[WOFFブラウザの場合]

[外部ブラウザの場合]

使用するWOFFメソッド
getOS()
getVersion()
getLanguage()
getWorksVersion()
isInClient()

WOFFアプリ情報

WOFFアプリの各種設定情報を取得可能です。

WOFFアプリサイズ
エンドポイントURI
Client ID
実行環境(PC_WEB、MOBILE_APP、PC_APP)

[WOFFブラウザの場合]

[外部ブラウザの場合]

使用するWOFFメソッド
getContext()

操作・処理系

URLを開いたり、カメラを起動したり、LINE WORKSにチャットを送信したりする事ができます。

OpenURL( URLを開く )

WOFFアプリから特定のURLを開く事ができます。
パラメータにて、LINE WORKSアプリ内で開くか、外部ブラウザで開くかを選択可能。
( LINE WORKSモバイルアプリでWOFFを開いた時のみ制御可能です )

使用するWOFFメソッド
openWindow

QRコードを読み込む

WOFFアプリからデバイスのカメラを起動し、QRコードを読み取る事が可能です。
サンプルアプリでは、読み取り結果にて内容を確認可能です。

[モバイルアプリでカメラ起動時]

[読み取り後]

使用するWOFFメソッド
scanQR

チャットを送る( LINE WORKSモバイルアプリでのみ利用可能 )

WOFFアプリを開いたチャットルームへメッセージを送信可能です。
テキストのみのメッセージとFlexテンプレートを用いたメッセージを送信可能です。
[送信画面]

[実際に送られた画面]
"はろー"というテキストメッセージと"Welcome to the team!"というFlexMessageが送信されています。

使用するWOFFメソッド
sendMessage
sendFlexMessage

最後に

WOFFアプリを作るとなるとハードルを高く感じる人も多いかと思いますが、
このサンプルコードを試して頂ければ10分以内でWOFFを始められると思います。
ぜひこの機会にWOFFを試して貰えればと思います🙇‍♂️

また、Azureへdeployする方法もサンプルコードには記載しておりますので、
これを機に興味が湧いた方はAzureへのdeployもぜひお試しくださいm(__)m