LINE WORKS WOFF アプリでデジタル社員証を作成！～表示と読み取り～

## はじめに

LINE WORKS の **WOFF（WORKS Front-end Framework）** は、LINE WORKS アプリ内で動作するミニアプリを開発できる仕組みです。

本記事では、WOFF を活用して以下の 2 つのアプリを作成します。

1. **社員証表示アプリ**: 社員情報と QR コードを表示。
2. **社員証読み取りアプリ**: QR コードをスキャンして社員情報を取得。

これらのアプリを組み合わせることで、デジタル社員証システムの運用を試してみます。

## WOFF アプリとは

**WOFF アプリ** は、LINE WORKS アプリ内で動作する Web アプリケーションです。JavaScript と HTML を使用して作成し、WOFF SDK を利用することで、ユーザー情報の取得や QR コードのスキャンなどが可能になります。

| 機能              | 社員証表示アプリ                     | 社員証読み取りアプリ               |
|-------------------|-----------------------------------|-----------------------------------|
| 主な目的          | 社員情報と QR コードを表示           | QR コードをスキャンして情報を取得 |
| 必要なスコープ    | `profile`               | `scanQR`                        |
| 利用場面      | 社員証の表示                       | 社員証の確認                     |

## 社員証画面イメージ
![temp_1735290256970.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/fc6eea1f-8b29-f472-602a-328555b849a7.png)

## 社員証表示アプリの作成

### 1. 機能概要
社員証表示アプリは、次の情報を画面に表示します。

- **社員名**
- **社員 ID**
- **QR コード（有効期限付き）**

QR コードには社員情報をエンコードし、有効期限を設定することでセキュリティを強化しています。

### 2. 実装手順

#### **(1) WOFF アプリを登録**
LINE WORKS の [Developer Console](https://dev.worksmobile.com/jp/console/openapi/v2/app/list/view) で以下を設定します。
- **Endpoint URL**: アプリのホスティング URL
- **スコープ**: `profile`

#### **(2) コード例**

以下は、社員証表示アプリの HTML と JavaScript のサンプル コードです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社員証表示</title>
    <script charset="utf-8" src="https://static.worksmobile.net/static/wm/woff/edge/3.6.2/sdk.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</head>
<body>
    <div id="card">
        <h1>社員証</h1>
        <p>名前: <span id="name"></span></p>
        <p>ID: <span id="userId"></span></p>
        <div id="qrcode"></div>
    </div>
    <script>
        woff.init({ woffId: "YOUR_WOFF_ID" })
        .then(() => woff.getProfile())
        .then(profile => {
            document.getElementById("name").textContent = profile.displayName;
            document.getElementById("userId").textContent = profile.userId;

            const qrData = JSON.stringify({
                displayName: profile.displayName,
                userId: profile.userId,
                timestamp: Date.now(),
                expiry: Date.now() + 300000 // 有効期限 5 分
            });
            new QRCode(document.getElementById("qrcode"), qrData);
        })
        .catch(console.error);
    </script>
</body>
</html>
```

## 社員証読み取りアプリの作成

### 1. 機能概要
社員証読み取りアプリでは、QR コードをスキャンして以下を確認します。

- **社員情報**
- **有効期限の確認**

有効期限切れの QR コードに対してはエラー メッセージを表示します。

### 2. 実装手順

#### **(1) WOFF アプリを登録**
LINE WORKS Developer Console で以下を設定します。
- **スコープ**: `scanQR`

#### **(2) コード例**

以下は社員証読み取りアプリの HTML と JavaScript のサンプル コードです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社員証読み取り</title>
    <script charset="utf-8" src="https://static.worksmobile.net/static/wm/woff/edge/3.6.2/sdk.js"></script>
</head>
<body>
    <button id="scan">QR コードをスキャン</button>
    <div id="result"></div>
    <script>
        woff.init({ woffId: "YOUR_WOFF_ID" })
        .then(() => {
            document.getElementById("scan").addEventListener("click", () => {
                woff.scanQR()
                .then(data => {
                    const result = JSON.parse(data.value);
                    const currentTimestamp = Date.now();
                    if (currentTimestamp > result.expiry) {
                        document.getElementById("result").textContent = "期限切れの QR コードです。";
                    } else {
                        document.getElementById("result").textContent =
                            `名前: ${result.displayName}, ID: ${result.userId}`;
                    }
                })
                .catch(console.error);
            });
        })
        .catch(console.error);
    </script>
</body>
</html>
```
## 社員証読み取りイメージ
![temp_1735290504242.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/38a1fa14-7425-edb6-932a-127098d3de9a.png)
![temp_1735290553367.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/07eba1aa-fe63-f4c0-c267-963dfd06cb8a.png)

## まとめ

この記事では、LINE WORKS の WOFF を活用した社員証表示と読み取りアプリの作成例を紹介しました。