はじめに
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 を活用した社員証表示と読み取りアプリの作成例を紹介しました。