LINE WORKS の WOFF アプリを GitHub からコピーして簡単に試してみる

## WOFF とは
https://line.worksmobile.com/jp/pr/20230510/

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/LINEWORKS?src=hash&amp;ref_src=twsrc%5Etfw">#LINEWORKS</a> の WOFF の簡単なサンプル。<br><br>WOFF SDK でユーザー情報を取得したり、トークルームにメッセージを送ったり、QR コードリーダーを使ったりできます。<br><br>また、Web アプリ側で位置情報を取得するなども可能です。 <a href="https://t.co/sNnbZM9HKD">https://t.co/sNnbZM9HKD</a> <a href="https://t.co/2lesYv1afq">pic.twitter.com/2lesYv1afq</a></p>&mdash; iwaohig (@iwaohig) <a href="https://twitter.com/iwaohig/status/1696052796083331118?ref_src=twsrc%5Etfw">August 28, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

WORKS Front-end Framework（以下、WOFF）は、「LINE WORKS」上で動くWeb アプリを実装できる開発プラットフォームです。このWOFFで作られた Web アプリ（以下、WOFFアプリ）は、トークメッセージなどからシームレスに立ち上がるミニアプリとして、幅広い連携を実現します。
WOFFアプリは HTML と JavaScript をベースとした Web アプリです。WOFF アプリを実行したユーザーの情報の取得や、WOFF アプリを呼び出したトークルームへのメッセージの送信などができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/77d35290-ce4e-f27d-0009-dc40c7f8a893.png)

## GitHub Pages で WOFF アプリを実行する
GitHub にサンプルを用意しました。

WOFF は Web アプリなので Web サーバーが必要ですが、ここでは、GitHub Pages の機能で Web サーバーを代用します。

そのため、GitHub のアカウントがあれば (なくてもサインアップすれば) 複製して簡単に試せます。

https://github.com/iwaohig/WOFFSample

以下、手順です。

GitHub にアクセス。
https://github.co.jp/

![l_147288799_421_01f738b1bcc019bb3f4b7d1b7226e631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/3c9aa5ac-24b4-209a-e44d-2dc616a6b879.png)

サインインもしくはサインアップしてください。

https://github.com/iwaohig/WOFFSample にアクセス。

![l_147288799_423_4951b94b78bd8d5e3d711d04c4056f13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/787df7e5-6327-9efe-fcf9-1a5b9dee45ee.png)

右上の [Fork] をクリック。

![l_147288799_424_417b8d0b7c5d185a76c7211ae14e900d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/226d7742-fac4-3d8c-875c-1c5ef59d5f60.png)

"Owner" と "Repository name" は必要に応じて選択、変更してください。
名前が重複しているなどがなければ、そのままで大丈夫です。
右下の緑の [Create fork] をクリック。

![l_147288799_426_15c6d44ce5b718df519c590ff8e8896b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/a486188c-26c3-a42e-c753-92efa7383647.png)
フォークが完了したら、[Settings] をクリック。

![l_147288799_427_6df9a4c0150ed1266a8f02b812bfe5ac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/d5f220d6-ae92-58b8-d1ab-e29741aa1329.png)
[Pages] のメニューをクリック。

![l_147288799_428_6586fa29f60ac64db0c6e5e9ce07bcb4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/61cd0bf5-bf95-c42c-6ade-e1900c4664bb.png)
"GitHub Pages" の設定で、"Branch" が [None] の場合はプルダウンから [main] を指定。

![l_147288799_430_cd4172dc5c5864b8d14ca2d1ca99cef1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c5313dd9-3a95-3797-2acf-77c654cbf32d.png)

![l_147288799_431_2d43ba7f83631b67e0745a32412542e7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b81f5159-f552-bc5c-c93f-cf3a650d6a01.png)
[Save] します。

数分後に URL が確認できるようになります。表示されないときはリロードなどしてください。URL はこの後で使うのでコピーしてください。
![l_147288799_432_c33b2417689d756d8d71e23653f173f8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/d9204882-3998-2d5d-ad6f-87f879375f21.png)

## LINE WORKS Developer Console の設定
LINE WORKS Developer Console にアクセス
https://dev.worksmobile.com/jp/console/openapi/v2/app/list/view

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/9166680c-96fb-adcb-6806-236f5863ee65.png)
"アプリの新規追加" をクリック

![l_147288799_450_5a0f4678fd18739ae13b873cb67190c6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/68a227ee-3c6a-471d-d6f8-ed038d15a4d0.png)
任意のアプリ名を指定し、[同意して利用する] をクリック。

![l_147288799_451_9c20e8d395bf849068b7eb68e89f5425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e626a186-aaf8-6bb7-d4e5-eeb5f11514e2.png)
OAuth Scopes の [管理] をクリック。

![l_147288799_452_cf5658d9ce99a192efd7ca97e0770484.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/585b150b-9a5e-1fb3-5487-1e377795b712.png)
[Bot] をチェックします。

![l_147288799_453_494d53660d8734751e7827909cdfc6fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/fc1ee065-51fc-1a0f-534f-40dc9e20bd25.png)
保存します。

![l_147288799_454_4207e3f0e94ef418d55fd39cb6fbd9dc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b99833d9-2e62-9509-95a4-129cc3b674ac.png)
WOFF アプリの [登録] をクリック。

![l_147288799_433_14c0ced6fc2728a29577051f071afad9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/a068b191-e94e-74b2-8fb7-9fc806667f60.png)
任意の "WOFF 名" を指定、"Endpoint URL" は GitHub Pages の URL を指定します。
サイズは任意の設定を行ってください。後から変更することもできます。
"Scan QR" を有効化。
[保存] をクリック。

![l_147288799_434_28e8c6701157d55c94fc591bd2d7bf2a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/6ef96515-2c81-6541-3925-8d3bb2b3c825.png)
"WOFF ID" をメモしてください。
また、[URL] コピーをクリックして、こちらもメモしてください。

## GitHub でコードの修正
![l_147288799_435_595aa9d0329d7ce24ddb838a0de2dc09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/bb659035-ca3c-2ace-79e8-5649ec5159da.png)
GitHub に戻ります。
左上の "<> Code" をクリック。

![l_147288799_436_5a3190e1f22c1269e9c79253c12fcd49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/cba8a2e0-bb11-8e52-7a9b-c8f5bc2757c5.png)
"index.html" をクリック。

![l_147288799_437_16dc70143f32f25067ae54e2c77fdd1e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/2fd7980f-d9f5-e60a-4e31-68a1c037b3e5.png)
鉛筆のアイコンをクリックして、Edit の状態にします。

![l_147288799_438_ddc7a120c892a1d3fa9119c9f9f2b810.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/733ae947-d508-3302-17a2-ef07218c224f.png)
10 行目の "woffId" を書き換えてください。
右上の [Commit changes...] をクリック。

![l_147288799_439_7c875ce2a0874a18a1417811685c2837.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/d041cda2-84f6-668e-a776-52344dc7ecaf.png)
[Commit changes] をクリック。

## WOFF アプリの実行
![l_147288799_455_a8b4e1fff617fa9b2f33cce40759185c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/5db433be-5f9a-cb8d-1c3b-c50372bc8aa0.png)
メモした WOFF URL を自分宛のトークルームなどに送ります。URL をタップしてください。

![l_147288799_456_19585f54908854a0dfbfb7465441e587.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/02e33a21-a7fa-fa40-83de-aa60f8866c0c.png)
WOFF アプリが起動します。