TS + ReactでLINE WORKS WOFF入門


## TR;DL

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

## LINE WORKS WOFFとは？？

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

[公式サイトより引用](https://developers.worksmobile.com/jp/docs/woff-guide)

## 本記事について

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


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

https://github.com/1411381/WOFF-Sample-App

## 手順


https://github.com/1411381/WOFF-Sample-App/blob/main/README.md

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

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

WOFFアプリのendpoint URLは実際の動作環境に変更ください。
下図では、ローカルホストで実行する場合の設定となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/53136f2c-fd87-43d5-ae86-1009cba9837f.png)


WOFFアプリを登録すると、以下のようになります。
赤枠部のWOFF_IDは今後のステップで利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/255bed01-b62a-4b80-b0da-a827bcc93227.png)


#### Step1 
git cloneでソースコードをローカルへダウンロードし、該当ディレクトリへ移動します。
```bash
git clone https://github.com/1411381/WOFF-Sample-App.git
cd WOFF-Sample-App
```

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

ルート直下に `.env`ファイルを作成し、Step0で取得したWOFF_IDを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/a2bfb602-b5a3-4cd8-9df1-5ee3bede741e.png)

#### Step3

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

#### Step4
ローカルでの動作確認

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

```bash
npm run dev
```

ブラウザにて、http://localhost:5173/ を開くことで、
トップページが表示され
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/8f08e6c7-66c9-4fcb-9d22-d638cf8510fe.png)
LINE WORKSアカウントでログインすると、以下のような画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/0a10d47f-9b58-45fc-bcc8-716bb8285efe.png)

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

WOFFアプリも無事に起動した( はず? )なので、各場所が何をしているか説明したいと思います。
主に以下2軸で説明します。
- 情報取得系
    - ユーザ情報の取得
    - 動作環境
    - WOFFアプリ情報
- 操作・処理系
    - URLを開く
    - QRリーダ
    - チャットを送る

### 情報取得系

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

#### プロファイル( ユーザ情報の取得 )
LINE WORKSのユーザ、ドメイン情報を取得可能です。
- ユーザ名
- ドメイン
- ユーザID
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/667feda8-bcb4-4df8-8197-83926b0e1576.png)

使用するWOFFメソッド
[getProfile()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getprofile)

#### 動作環境
WOFFの各種動作環境を取得可能です。
- OS ( android,ios,web )
- WOFF SDK Version
- 言語設定
- LINE WORKS Version ※PCブラウザの場合、表示されません。
- WOFFアプリの実行ブラウザ情報( WOFFブラウザ・外部ブラウザどちらか )

[WOFFブラウザの場合]
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/94fc1574-fef2-42d7-aa53-5c43686e304d.png" />

[外部ブラウザの場合]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/a3f787cf-2723-4b2e-9fe8-c7abcfe42380.png)


使用するWOFFメソッド
[getOS()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getos)
[getVersion()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getversion)
[getLanguage()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getlanguage)
[getWorksVersion()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getworksversion)
[isInClient()](https://developers.worksmobile.com/jp/docs/woff-api#woff-isinclient)

#### WOFFアプリ情報
WOFFアプリの各種設定情報を取得可能です。
- WOFFアプリサイズ
- エンドポイントURI
- Client ID
- 実行環境(PC_WEB、MOBILE_APP、PC_APP)

[WOFFブラウザの場合]
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/ad35fb70-74bb-40a0-aedd-426ea7edad8f.png" />

[外部ブラウザの場合]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/5f8c1cab-e3eb-43d4-b3a7-b11395b3ce55.png)

https://developers.worksmobile.com/jp/docs/woff-api#woff-isinclient

使用するWOFFメソッド
[getContext()](https://developers.worksmobile.com/jp/docs/woff-api#woff-getcontext)

### 操作・処理系

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

#### OpenURL( URLを開く )

WOFFアプリから特定のURLを開く事ができます。
パラメータにて、LINE WORKSアプリ内で開くか、外部ブラウザで開くかを選択可能。
( LINE WORKSモバイルアプリでWOFFを開いた時のみ制御可能です )
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/dcb98da7-db10-4019-8f5c-1644fb86841a.png)

使用するWOFFメソッド
[openWindow](https://developers.worksmobile.com/jp/docs/woff-api#woff-openwindow)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/7a4b6f39-596a-4170-be8f-515641ba3c91.png)

[モバイルアプリでカメラ起動時]
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/d9b5f03d-de53-4ab2-985f-95f54165fd25.png" />

[読み取り後]
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/1b1ed277-65b9-4266-a4b3-58527383495a.png" />

使用するWOFFメソッド
[scanQR](https://developers.worksmobile.com/jp/docs/woff-api#woff-scanqr)

#### チャットを送る( LINE WORKSモバイルアプリでのみ利用可能 )
WOFFアプリを開いたチャットルームへメッセージを送信可能です。
テキストのみのメッセージとFlexテンプレートを用いたメッセージを送信可能です。
[送信画面]
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/5d1f2cea-c5a5-446d-981a-dcfe926ebd6a.png" />
[実際に送られた画面]
"はろー"というテキストメッセージと"Welcome to the team!"というFlexMessageが送信されています。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430353/d8db0779-48c6-45a8-9e34-4ba76a28c3cc.png" />


使用するWOFFメソッド
[sendMessage](https://developers.worksmobile.com/jp/docs/woff-api#woff-sendmessage)
[sendFlexMessage](https://developers.worksmobile.com/jp/docs/woff-api#woff-sendflexmessage)


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

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