WOFF とは
#LINEWORKS の WOFF の簡単なサンプル。
— iwaohig (@iwaohig) August 28, 2023
WOFF SDK でユーザー情報を取得したり、トークルームにメッセージを送ったり、QR コードリーダーを使ったりできます。
また、Web アプリ側で位置情報を取得するなども可能です。 https://t.co/sNnbZM9HKD pic.twitter.com/2lesYv1afq
WORKS Front-end Framework（以下、WOFF）は、「LINE WORKS」上で動くWeb アプリを実装できる開発プラットフォームです。このWOFFで作られた Web アプリ（以下、WOFFアプリ）は、トークメッセージなどからシームレスに立ち上がるミニアプリとして、幅広い連携を実現します。
WOFFアプリは HTML と JavaScript をベースとした Web アプリです。WOFF アプリを実行したユーザーの情報の取得や、WOFF アプリを呼び出したトークルームへのメッセージの送信などができるようになります。
GitHub Pages で WOFF アプリを実行する
GitHub にサンプルを用意しました。
WOFF は Web アプリなので Web サーバーが必要ですが、ここでは、GitHub Pages の機能で Web サーバーを代用します。
そのため、GitHub のアカウントがあれば (なくてもサインアップすれば) 複製して簡単に試せます。
以下、手順です。
GitHub にアクセス。
https://github.co.jp/
サインインもしくはサインアップしてください。
https://github.com/iwaohig/WOFFSample にアクセス。
右上の [Fork] をクリック。
"Owner" と "Repository name" は必要に応じて選択、変更してください。
名前が重複しているなどがなければ、そのままで大丈夫です。
右下の緑の [Create fork] をクリック。
フォークが完了したら、[Settings] をクリック。
[Pages] のメニューをクリック。
"GitHub Pages" の設定で、"Branch" が [None] の場合はプルダウンから [main] を指定。
[Save] します。
数分後に URL が確認できるようになります。表示されないときはリロードなどしてください。URL はこの後で使うのでコピーしてください。
LINE WORKS Developer Console の設定
LINE WORKS Developer Console にアクセス
https://dev.worksmobile.com/jp/console/openapi/v2/app/list/view
"アプリの新規追加" をクリック
任意のアプリ名を指定し、[同意して利用する] をクリック。
OAuth Scopes の [管理] をクリック。
[Bot] をチェックします。
保存します。
WOFF アプリの [登録] をクリック。
任意の "WOFF 名" を指定、"Endpoint URL" は GitHub Pages の URL を指定します。
サイズは任意の設定を行ってください。後から変更することもできます。
"Scan QR" を有効化。
[保存] をクリック。
"WOFF ID" をメモしてください。
また、[URL] コピーをクリックして、こちらもメモしてください。
GitHub でコードの修正
GitHub に戻ります。
左上の "<> Code" をクリック。
"index.html" をクリック。
鉛筆のアイコンをクリックして、Edit の状態にします。
10 行目の "woffId" を書き換えてください。
右上の [Commit changes...] をクリック。
[Commit changes] をクリック。
WOFF アプリの実行
メモした WOFF URL を自分宛のトークルームなどに送ります。URL をタップしてください。
WOFF アプリが起動します。