はじめに

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

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

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

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

WOFF アプリとは

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

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

社員証画面イメージ

社員証表示アプリの作成

1. 機能概要

社員証表示アプリは、次の情報を画面に表示します。

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

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

2. 実装手順

(1) WOFF アプリを登録

LINE WORKS の Developer Console で以下を設定します。

Endpoint URL: アプリのホスティング URL
スコープ: profile

(2) コード例

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

<!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 のサンプルコードです。

<!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>

社員証読み取りイメージ

まとめ

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