【LINE WORKS】WOFF チュートリアルしてみた

５月のアップデートで WOFF なる新機能が公開されました。なんだか犬っぽい名前？色々なことができそうな気がするのですが、あまりよくわかっていないので情報収集をしていたところ、公式の中の人がチュートリアル記事を書いてくれていました！感謝！ヾ(*´∀｀*)ﾉ

[【LINE WORKS】WOFFを使って簡易なミニアプリを作ってみる](https://qiita.com/mmclsntr/items/ab3987938da6ecd8d9b1)

今回はこの記事に沿って、WOFF アプリを作ってみようと思います。(^_-)-☆

# WOFF のミニアプリを作るのに必要なものは？
ざっと記事を読んでいったのですが、サンプルコードは Python で作成されている様子。自分の PC をサーバー代わりにして動作を試している、と。ふむふむ(*'ω'*)

まず、事前準備として次のことが必要ですね。

1. python のインストール
1. サンプルプログラムのダウンロード
1. ngrok アカウントの登録＆プログラムの入手
1. サンプルプログラムの実行環境の準備

私は VSCode を使っているので、サンプルプログラムの実行環境は問題ないです。python もコード書き換えるだけならたぶん大丈夫。よし、きっとできる！やってみよー！ヾ(*´∀｀*)ﾉ

### 1. python のインストール

インストール方法は Microsoft 公式ドキュメントを参考にしました。私は Windows なので[こちら](https://learn.microsoft.com/ja-jp/training/modules/python-install-vscode/3-exercise-install-python3?pivots=windows)を参考にしました。（リンク先には Mac/Linux のドキュメントもあります）
ちょっと時間かかりましたがすぐできました。

### 2. サンプルプログラムのダウンロード

サンプルプログラムは GitHub に公開されているので[こちら](https://github.com/mmclsntr/woff-simple-app)からダウンロード。
`Code` -> `Download Zip` で丸っとダウンロードします。

### 3. ngrok アカウントの登録＆アプリの入手

[ngrok のサイト](https://ngrok.com/)にアクセスして、右上の `Sign up` をクリック。
Google アカウントで登録できたので、ほとんど何も入力せず登録完了！楽ちん('Д')
マイページ（？）に入るとすぐにダウンロードボタンがあるので ngrok プログラムをダウンロード。
![1684833863.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/3804e9fd-246b-4283-92ed-20239e189205.png)

ダウンロードしたら解凍して実行します。

![1684834084.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/0830c690-1d44-ad61-ae73-5f9e1440028c.png)

マイページの auth token を登録します（これやらないとあとでログイン求められて面倒）
![1684834187.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/730d1293-1f69-8331-9a61-80eda0c7bce7.png)

`ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxx` をコピーして貼り付けて実行すると `Authtoken saved to configuration file: C:\Users\xxxxxxx\AppData\Local/ngrok/ngrok.yml` が表示されて登録完了！

### 4. サンプルプログラムの実行環境の準備

ダウンロードしたサンプルコードを VSCode で開いて準備完了でーす！ヾ(*´∀｀*)ﾉ
![1684834617.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/55f1062b-d55e-79c4-5586-eb763c5c4471.png)

## WOFF ミニアプリを動かす

事前準備が終わったので、WOFF のミニアプリを動かしていきましょー。順番は次の通り。

1. ngrok を実行して URL を取得
1. LINE WORKS で WOFF を登録して ID を取得
1. サンプルコードを書き替えてプログラムを実行
1. LINE WORKS のトーク画面で WOFF URL をクリック

### 1. ngrok を実行して URL を取得
まずは ngrok を起動して URL を取得します。
`ngrok http 8000` と入力して Enter！('Д')

![1684894823.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/511da00a-8948-5f62-0fc6-747d84814f1e.png)

はい。URL が発行されましたね。これをコピーしておきましょう。

### 2. LINE WORKS で WOFF を登録して ID を取得
[Developer Console] にアクセスして、まずは新規アプリを登録します。

![1684895103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/e41733d8-6741-f0b1-1f25-c01546fce50d.png)

アプリ名や説明は適当に入力します。
OAuth Scopes を設定する必要があるので「管理」をクリックします。

![1684895233.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/c76b4658-2216-c5f2-2e5b-84d06ce00e7d.png)

Bot にチェックをいれます。説明文に WOFF って書いてありますねー('ω')

![1684895364.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/090a45d3-956f-e470-eb48-d15159c31274.png)

設定を保存すると WOFF の設定画面が表示されます。前は無かった。新しく追加されてるー( ﾟДﾟ)
URL コピーして自分とのトーク画面に張り付けておきます。

![1684895858.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/fa417502-a19b-3b68-4efd-3d79d3c245ba.png)

![1684918058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/be0099d5-f5ab-ac53-eee3-23417aec8ed2.png)

そしたらまた Developer Console に戻って WOFF ID をコピーしておきます。

![1684895878.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/df27c53a-b85e-34cb-63c3-06d041e2880e.png)

これで WOFF の設定は完了です！

### 3. サンプルコードを書き替えてプログラムを実行
GitHub からダウンロードしたサンプルコードを VSCode で開きます。別に実行環境はなんでもいいですよ。
`params.template.js` を開いて先ほどコピーした WOFF ID を貼り付けます。ぺったん。

![1684918412.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/ed8ea4de-991d-2c3d-8c26-f0910d4dc23c.png)

そして、`params.template.js` のファイル名を `params.js` に変更します。`README.md` にはテンプレートを参考に新しく作ってって書いてあるけど、これで動いたからきっと大丈夫。('Д')
気になる人は新規で作ってください。

![1684918455.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/1593dfe5-8552-5906-ed92-bd59562cf84a.png)

ターミナルを起動して `python -m http.server 8000` と打ち込んで実行！ヾ(*´∀｀*)ﾉ

![1684918934.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/66fcf880-8cb8-7376-c6ee-cdbbfa725780.png)

これでサンプルプログラムが動いているので、トーク画面から WOFF を起動してみましょー。

### 4. LINE WORKS のトーク画面で WOFF URL をクリック
さぁ、さっきトーク画面に送った URL をクリックしてみましょう！

![1684920331.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/85e2853b-d021-69fc-983a-d947b1362268.png)

おー！動いた動いた！ヾ(*´∀｀*)ﾉ
モザイクかけてますが、userId も domainId も取得できてるー。
他の API と連携して色々なことができそうな予感。日付選択とかプルダウンも使えるし、複数の情報を取得するのに楽っぽい。ふむふむ。

#### ちなみにブラウザだとうまく動きませんでした。
ログインが必要とかなんとか。なんだろ？取り合えずモバイルで動いたからよしとする。
![1684920639.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2726616/365f2db8-dd9e-aa21-6bb2-7f787c0ce613.png)

# 終わりに
ここまでお付き合いいただきありがとうございました。
私、JavaScript がメインなので Python のコードなので大丈夫かなー？と一瞬思いましたが、ID を書いて実行するだけだったのでまったく知識不要でした( ´艸｀)
サンプルコードあるの、凄くありがたいですねー。感謝です。
要は WEB アプリが LINE WORKS で動かせるってことですよね。
デザイン性も磨かないといけないのが辛い。。。センス磨かねば。

ではまた！(^^)/

# 参考にさせていただきましたm(_ _)m
[【LINE WORKS】WOFFを使って簡易なミニアプリを作ってみる](https://qiita.com/mmclsntr/items/ab3987938da6ecd8d9b1)
[LINE WORKS Developers WOFF ガイド](https://developers.worksmobile.com/jp/docs/woff-guide)