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のユーザ、ドメイン情報を取得可能です。
- ユーザ名
- ドメイン
- ユーザID
使用する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