Zenn
コラボスタイル DevelopersPublicationへの投稿
📱

LINE WORKS のミニアプリ「WOFF」を触ってみたお話

Shota
2023/07/18に公開
HTML
JavaScript
ngrok
LINE WORKS
woff
tech

はじめに

今年の5月ごろにワークスモバイル社が、「WOFF」を提供開始されました。
https://developers.worksmobile.com/jp/news/detail?id=620

まずは手っ取り早く動くものを作ってみよう

とりあえず、動くものを作ってみたかったので、
ドキュメントと、ワークスモバイル社の山崎さんの記事を参考にやってみました。

手順としては以下のような感じ。

  1. HTML を自由に書く
  2. WOFF SDK を使いつつ、JavascriptでDOM操作
  3. LINE WORKS DevelopperConsole にデプロイ

3ステップくらいで簡単に実装可能です。
https://developers.worksmobile.com/jp/docs/woff-guide
https://qiita.com/mmclsntr/items/ab3987938da6ecd8d9b1

【結果】 めちゃくちゃ簡単に作れた

こんな感じの画面になりました。

デモ画面。ちょっと画面変わっていますが気になさらず。
画面ではIDのが消せなかったりで、面倒だったので、
HTMLごと抹消してやりました。）

メッセージの送信などなど、できるようになりました。
LINE WORKS SDK を使って、WOFF のあらゆるメソッドを使っていろんなことができます。

以下は実装した一部コードを抜粋

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>WOFF APP</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
		<div>
			<h2>あなたのプロフィールをさらけ出しましょう(^^♪</h2>
		</div>
        <table>
            <tr>
                <th>domainId</th>
                <td id="domainIdField"></td>
            </tr>
            <tr>
                <th>userId</th>
                <td id="userIdProfileField"></td>
            </tr>
            <tr>
                <th>displayName</th>
                <td id="displayNameField"></td>
            </tr>
        </table>
        <h2>トークルームにメッセージを送る</h2>
        <div class="buttonRow">
            <input type="text" value="text" name="message" id="sendMessageText">
            <button id="sendMessageButton" class="btn">送信
			</button>
        </div>
		<div>
			<button id="qrButton">QRリーダーを起動する</button>
		</div>
		<div>
			<Button id="onOpenButton">今日の運勢占い</Button>
		</div>	
		<div>
			<button id="onBackButton">ブラウザーを閉じる</button>
		</div>
        <script src="https://static.worksmobile.net/static/wm/woff/edge/2/sdk.js"> </script>
        <script type="module" src="index.js"></script>
    </body>
</html>
index.js
import { woffId } from './params.js'


const getProfile = () => {
    // Get profile
    woff.getProfile().then((profile) => {
        console.log(profile)

        // Set user info
        document.getElementById('domainIdField').textContent = profile.domainId;
        document.getElementById('userIdProfileField').textContent = profile.userId;
        document.getElementById('displayNameField').textContent = profile.displayName;
    }).catch((err) => {
        // Error
		woff.login({ redirectUri: 'https://localhost:8080'});
        console.log(err)
        // window.alert(err);
    });
}

const registerButtonHandlers = () => {
    document.getElementById('sendMessageButton').addEventListener('click', function() {
        let msg = document.getElementById('sendMessageText').value

        woff.sendMessage({ 'content': msg }).then(() => {
            // Success
            console.log("message sent: " + msg)
            window.alert('Message sent');
        }).catch((err) => {
            // Error
            console.log(err)
            window.alert(err);
        });
    }
    )
}

const qrButtonHandler = () => {
	document.getElementById('qrButton').addEventListener('click', function() {
		woff.scanQR().then((qr) => {
			window.alert("QRコードを読み取りました")
			.catch((err) => {
				console.log(err)
				window.alert(err);
			});
		});
	});
}

const onOpenHandler = () => {
	document.getElementById('onOpenButton').addEventListener('click', function() {
		woff.openWindow({ url: "https://www.vogue.co.jp/horoscope/daily", external: false}).then(() => {
			window.alert("ウィンドウを開きました")
			.catch((err) => {
				console.log(err)
				window.alert(err);
			});
		});
	});
}

const onBackHandler = () => {
	document.getElementById('onBackButton').addEventListener('click', function() {
		woff.closeWindow().then(() => {
			window.alert("ウィンドウを閉じました")
			.catch((err) => {
				console.log(err)
				window.alert(err);
			});
		});
	});
}

window.addEventListener('load', () => {
    woff.init({ woffId: woffId })
        .then(() => {
            // Get profile
            getProfile();

            // Button handler
            registerButtonHandlers();

            // QR Button handler
	    qrButtonHandler();

            // Open Button handler
	    onOpenHandler();

            // Back Button handler
	    onBackHandler();
        })
        .catch((err) => {
            // Error
            window.alert(err);
            woff.login();
        });
});

今後 WOFF でやってみたいこと

  • React を使ってミニアプリ開発をしてみたい！
    WOFF SDK が、npm 等で公開されれば気軽に開発ができそう。。

  • LINE WORKS の API や BOT と組み合わせても面白そう
    どんなことができるかは未知数ですが、色々遊べそう。。

  • ニーズがありそうなアプリを開発したい
    コラボフローと絡めて～とかkintone と絡めて～もアリかも。

夢が広がりますね！

おわりに

もっと出来の良いアプリができたら、github で公開します！
では！

コラボスタイル Developers
コラボスタイル DevelopersPublication

「ワークスタイルの未来を切り拓く」を理念に掲げ、リアルとデジタルの2つの働く場に向けた事業展開に留まらず、自社が率先して新しいワークスタイルに挑戦し、発信を行うことでワークスタイルの未来を切り拓いていきます。

Discussion