LINE WORKS の WOFF アプリから kintone アプリにデータ入力

サイボウズさん主催の kintone devCamp Boost! のセッションで提供したハンズオンの内容を記事にしました。

https://page.cybozu.co.jp/-/devcampboost/

LINE WORKS の WOFF を利用した入力画面から kintone アプリにデータを入力します。

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

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)

## Power Automate で WOFF を作成
### トリガー作成
フローのトリガーとして [HTTP 要求の受信時] を用います。
一覧から探すか、または検索して "要求" を選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/bdf9e462-8e3c-ca77-fabf-4f072c4b5560.png)

トリガーで "HTTP 要求の受信時" を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/9acbb3e8-9775-0fc2-2870-241088b1487e.png)

[詳細オプションを表示する] をクリックします。
![l_147288799_194_01d893b21ddb6b4c6f94aaee2badc0ba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/947af3d9-350c-8ac4-353d-947517378e1f.png)

[method] で "GET" を選択します。
![l_147288799_193_7703a7cab797b3770f7b6c323965f181.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1ca0403c-4ffb-6e34-b2ee-156081cf8f29.png)

### アクション作成
[+ 新しいステップ] をクリック。
![l_147288799_195_8ca8f510221da877d5de0dfcf68db8f5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/a6dca726-7de8-b9b9-e1a4-d72918ad8708.png)

"Http 要求の受信時" で受けた Get のリクエストに応じて WOFF を表示するために、[応答] のアクションを追加します。
一覧から探すか、または検索して [要求] を選択し、[応答] のアクションを指定してください。
![l_147288799_181_ed0bed98cdbf8f86f6884dad2703b483.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f76347cd-a733-cd95-6a28-6cfdd0a7cbe0.png)

![l_147288799_182_66bf83f05cf08e08b2b4564a5f289b32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/089f8405-6ec2-369e-bd1a-41de989d0ad0.png)


[応答] のアクションが追加されました。
![l_147288799_196_b40fd63af2743aade8c9abc213ed146c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/d9f8d2db-69a9-6679-4930-f3bdd9c7bd5e.png)

各項目を以下のとおり指定します。

ヘッダーは以下のとおりです。

キー: 

```
Content-Type
```

値: 

```
text/html; charset=UTF-8
```

本文は以下をコピー、ペーストしてください。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>devCamp Boost ハンズオン</title>
<script>
// WOFF ID を書き換えてください
const WOFF_ID = "i658h0DFhT-mSlGssQa6_Q";
// HTTP POST の URL を書き換えてください
const url = "https://prod-13.japaneast.logic.azure.com:443/workflows/4f8b1e46a6df44e1b48b0939a1e62f35/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=lrPlc5_GGqRmHuux_XVD7VU8TsnKss2yr7N2zmTOmwc";
</script>
    <script charset="utf-8" src="https://static.worksmobile.net/static/wm/woff/edge/3.6/sdk.js"></script>
    <style>
        /* Global Styles */
        body {
            font-family: 'Arial', sans-serif;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            margin-bottom: 15px;
        }

        input, select, button {
            width: 100%;
            margin-bottom: 15px;
            padding: 10px;
            box-sizing: border-box;
            font-size: 16px;
        }

        /* Toggle Switch CSS */
        .switch {
            position: relative;
            width: 60px;
            height: 34px;
        }

        .switch input { 
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
        }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

        /* Label for Toggle */
        label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
    </style>
</head>
<body>
<h1>devCamp Boost</h1>

<label for="displayNameInput">表示名:</label>
<input type="text" id="displayNameInput" placeholder="名前を入力" required>

<label for="dateInput">日付:</label>
<input type="date" id="dateInput" required>

<label for="timeInput">開始時刻:</label>
<input type="time" id="timeInput" required>

<label for="workTypeSelect">作業種別:</label>
<select id="workTypeSelect">
    <option value="組み立て">組み立て</option>
    <option value="検査">検査</option>
    <option value="洗浄">洗浄</option>
    <option value="塗装">塗装</option>
</select>

<label>
    位置情報を送信: 
    <div class="switch">
        <input type="checkbox" id="locationToggle">
        <span class="slider round"></span>
    </div>
</label>

<button onclick="sendData()">送信</button>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            woff.init({
                woffId: WOFF_ID
            })
            .then(() => {
                return woff.getProfile();
            })
            .then(profile => {
                const input = document.getElementById("displayNameInput");
                input.value = profile.displayName;
            })
            .catch(err => {
                console.log(err.code, err.message);
            });
        });

        function getLocation() {
            return new Promise((resolve, reject) => {
                if (!navigator.geolocation) {
                    reject(new Error("Geolocation is not supported by your browser."));
                } else {
                    navigator.geolocation.getCurrentPosition(
                        position => {
                            resolve({
                                lat: position.coords.latitude,
                                lng: position.coords.longitude
                            });
                        },
                        error => {
                            reject(new Error("Unable to retrieve your location."));
                        }
                    );
                }
            });
        }

        async function sendData() {
            const displayNameValue = document.getElementById("displayNameInput").value;
            const dateValue = document.getElementById("dateInput").value;
            const timeValue = document.getElementById("timeInput").value;
            const workTypeValue = document.getElementById("workTypeSelect").value;
            const locationToggle = document.getElementById("locationToggle").checked;
            let locationData = null;

            if (locationToggle) {
                try {
                    locationData = await getLocation();
                } catch (err) {
                    console.error(err.message);
                    return;
                }
            }

            const data = {
                displayName: displayNameValue,
                date: dateValue,
                time: timeValue,
                workType: workTypeValue,
                location: locationData
            };



            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => {
                if (response.ok) {
                    woff.closeWindow();
                } else {
                    return response.json();
                }
            })
            .then(dataResponse => {
                if (dataResponse) {
                    console.log(dataResponse);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>
```
#### WOFF ID と HTTP POST の URL
以下の部分は後ほど書き換えます。
```
// WOFF ID を書き換えてください
const WOFF_ID = "i658h0DFhT-mSlGssQa6_Q";
// HTTP POST の URL を書き換えてください
const url = "https://prod-13.japaneast.logic.azure.com:443/workflows/4f8b1e46a6df44e1b48b0939a1e62f35/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=lrPlc5_GGqRmHuux_XVD7VU8TsnKss2yr7N2zmTOmwc";
```

[保存] をクリックします。
![l_147288799_185_45a3436af6fb589bf4f779078b611a43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1afb3d95-67bd-02b7-591a-93c3878d263f.png)

"HTTP 要求の受信時" の "HTTP POST の URL" が生成されているので、コピーボタンをクリックし、いずれかの場所にメモしてください。
![l_147288799_186_5acb734325516d8e82c476ec7de90d75.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/ea748a98-2863-1394-032c-174eafc449a8.png)

### LINE WORKS Developer Console で WOFF アプリ登録
https://developers.worksmobile.com/jp/docs/developer-console

LINE WORKS Developer Console にアクセスします。
https://dev.worksmobile.com/jp/console/openapi/v2/app/list/view

WOFF アプリを登録します。
https://developers.worksmobile.com/jp/docs/woff-guide#create-woff-app

WOFFアプリで [登録] ボタンをクリック。
![l_147288799_188_b9761640c2522b6c793d4908b3573392.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0c1684f2-caad-00b9-a37f-32b635e00b08.png)

WOFF名: 任意の名前を指定
Endpoint URL を PowerAutomate で生成された HTTP 要求の受信時の URL を指定
サイズ: [Tall] を選択

[保存] ボタンをクリックしてください。
![l_147288799_189_d298ebf8a6090fa2f2a4d26a2a6504fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/7a6ef5d8-46f4-d040-2e29-941753fbb36c.png)

WOFF ID をコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/6cb786d5-5e16-3ff2-69c2-6375c3d1c3ec.png)

[応答] アクションの本文の WOFF ID を書き換えてください。
![l_147288799_295_d9ecebddfc57a19fdb61372ebb6e238a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/41012897-7bd8-70cd-ce96-d201dede7377.png)

[保存] してください。
![l_147288799_296_b4b49d490bc6c80d54335308c83272d6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/4f5506d6-dec7-2a11-1643-247331fb6372.png)

## 動作確認
WOFF アプリの [URL] コピー ボタンをクリックします。
![l_147288799_190_e75690d9382079a5e9d743415e764cb6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/068a5e04-8fd1-819c-6850-394b2e675fa3.png)

コピーした URL を LINE WORKS のトークで自分に送ります。
![l_217128028_5_a601005897c9ea57ec7608d42a4b07fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b7ab2c91-8d3e-67b7-ded8-10d64281053e.png)

トークルームで URL をタップすると WOFF アプリが表示されます。
モバイルアプリで実行すると、[表示名] に WOFF SDK で取得されたログイン中の LINE WORKS ID の表示名が既定値として入力された状態になります。
![l_217128028_7_4eb67a1bfbb91ad7284889faef4b8eef.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/60e077dc-b091-22b0-4c96-05416c54a920.png)

この時点では [送信ボタン] は、まだ正しく動作しません。タップしないでください。

## Power Automate で WOFF アプリからのデータを受信するフローを作成
### Kintone アプリの APIトークンの設定
Kintone アプリの APIトークンを設定します。
該当のヘルプ記事は以下です。
https://jp.cybozu.help/k/ja/user/app_settings/api_token.html

アプリの画面の右側の歯車アイコン横の下向き矢印をクリックするとプルダウン メニュが表示されます。
[カスタマイズ／サービス連携] の [APIトークン] をクリックします。
![l_147288799_279_74a9033e0f7d33f7d39d00e81cea2676.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/6e7ce7db-be66-1113-8be7-bc3c8477bd38.png)


APIトークンの設定画面で [生成する] をクリックします。
![l_147288799_289_3f9f1e367d253733646164e28a0e0e20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/529b2795-c5bf-0aee-0ac1-9bd668dbd41e.png)

生成された APIトークンはメモしてください。また、アクセス権で [レコード追加] を選択してください。
[保存] します。
![l_147288799_290_0b1746d356b6a8141f09c2ad44b0caf6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/eda1f2b1-46f2-dbbb-37c4-ee49e867f92f.png)

[アプリの設定] で [アプリを更新] をクリック。
![l_147288799_285_14408cfeed2974e8b0e96128b167af73.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e714813f-9bff-9841-4584-abacb7f36141.png)

### トリガー作成
Power Automate のフローのトリガーとして [HTTP 要求の受信時] を用います。
これにより、WOFF のフォームから送信されたメッセージを受信します。

一覧から探すか、または検索して "要求" を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/bdf9e462-8e3c-ca77-fabf-4f072c4b5560.png)

トリガーで "HTTP 要求の受信時" を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/9acbb3e8-9775-0fc2-2870-241088b1487e.png)

要求本文の JSON スキーマに以下を記入。
![l_147288799_255_3c12b5132a12f241454bec708cf4e83c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f9062aee-a7ce-6546-7729-092d46d77ecc.png)

```
{
    "type": "object",
    "properties": {
        "displayName": {
            "type": "string"
        },
        "date": {
            "type": "string"
        },
        "time": {
            "type": "string"
        },
        "workType": {
            "type": "string"
        },
        "location": {
            "type": "object",
            "properties": {
                "lat": {
                    "type": "number"
                },
                "lng": {
                    "type": "number"
                }
            }
        }
    }
}
```

[詳細オプションを表示する] をクリックします。
![l_147288799_194_01d893b21ddb6b4c6f94aaee2badc0ba.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/947af3d9-350c-8ac4-353d-947517378e1f.png)

method で "POST" を選択。
![l_147288799_197_f5be79d230db5900d7cc3d5d0a597e6e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e295aa37-964d-d669-6454-60d3cfd3802b.png)


### アクション作成
[+ 新しいステップ] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/5f62c908-14b6-7cfb-789b-0055278d203b.png)

"Http 要求の受信時" で受けた内容を基に kintone の API リクエストを送信するために[HTTP] のアクションを追加します。
一覧から探すか、または検索して "HTTP" を選択し、[HTTP] のアクションを指定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1f1e5938-ff3b-6921-b114-79149b58fcb1.png)

[HTTP] が追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b9d2d5fb-1045-c80b-ed3d-214f2ea06a34.png)

以下のとおり、各入力項目の値を登録します。
方法: プルダウンから "POST" を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0519fdbf-6dd7-0d25-0e7e-2432713ddb41.png)

URI: 自分の環境の URL を基に記述します。
![l_147288799_291_e67f426a99557d7316aa06195d5729cd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1dfa2f9b-6515-6232-54c9-156ee4bd3c47.png)

```
https://sample.cybozu.com/k/v1/record.json
```

cybozu developer network の以下の記事を参照してください。
https://cybozu.dev/ja/kintone/docs/rest-api/records/get-record/

![l_147288799_231_d3775bd2811134a35c28c6822c7f8464.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/821bc3a3-a8cd-afe4-0ad9-ce4c97f4d2d4.png)

ヘッダーは以下のとおりです。

キー: 

```
X-Cybozu-API-Token
```

値: 

```
kintone アプリの設定で生成したトークン値
```

キー:
```
Content-Type
```

値: 

```
application/json
```

本文は以下をコピー、ペーストしたうえで、

```
{
  "app": <アプリ ID を記入>,
  "record": {
    "worker": {
      "type": "SINGLE_LINE_TEXT",
      "value": "@{triggerBody()?['displayName']}"
    },
    "日付": {
      "type": "DATE",
      "value": "@{triggerBody()?['date']}"
    },
    "時刻": {
      "type": "TIME",
      "value": "@{triggerBody()?['time']}"
    },
    "workType": {
      "type": "SINGLE_LINE_TEXT",
      "value": "@{triggerBody()?['workType']}"
    },
    "lng": {
      "type": "SINGLE_LINE_TEXT",
      "value": "@{triggerBody()?['location']?['lng']}"
    },
    "lat": {
      "type": "SINGLE_LINE_TEXT",
      "value": "@{triggerBody()?['location']?['lat']}"
    }
  }
}
```
app の id は対象のアプリの id に書き換えてください。

![l_147288799_291_e67f426a99557d7316aa06195d5729cd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/64fdffa1-7937-4dde-715b-430c24f53f03.png)

URL 末尾の数字が ID です。

[+ 新しいステップ] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/5f62c908-14b6-7cfb-789b-0055278d203b.png)

kintone アプリのレコード登録完了を LINE WORKS の Bot で通知するため [HTTP] のアクションを追加します。
一覧から探すか、または検索して "HTTP" を選択し、[HTTP] のアクションを指定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1f1e5938-ff3b-6921-b114-79149b58fcb1.png)

[HTTP] が追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b9d2d5fb-1045-c80b-ed3d-214f2ea06a34.png)

以下のとおり、各入力項目の値を登録します。
方法: プルダウンから "POST" を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0519fdbf-6dd7-0d25-0e7e-2432713ddb41.png)

URI: Bot ID は LINE WORKS Developer Console で登録した自分の Bot の Bot ID を記述します。先ほどメモしたものです。

```
https://www.worksapis.com/v1.0/bots/{botId}/users/{userId}/messages
```
![l_1517737_1831_40de7112ec6d55361af480116326d9a0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/ee4f22b9-be7c-f7eb-8a85-be75923ef563.png)

userID は、自分の LINE WORKS ID を指定します。


ヘッダーは以下のとおりです。

キー: 

```
Content-Type
```

値: 

```
application/json
```

キー:
```
Authorization
```

値: 

```
Bearer <token>
```

本文は以下をコピー、ペーストします。

```
{
  "content": {
    "type": "text",
    "text": "kintone アプリに登録したよ!\nレコード番号 @{outputs('HTTP')?['body']?['id']}  \nお疲れ様でした☺"
  }
}
```
[保存] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/369cadec-eb61-cb2b-625e-50b3e3114cf2.png)

"HTTP 要求の受信時" の "HTTP POST の URL" が生成されているので、コピーボタンをクリックし、いずれかの場所にメモしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c3aa6892-b86b-6b1d-a4b7-b6235a5e3ee6.png)

この URL を以下の記事のスクリプト内に記述します。
https://qiita.com/iwaohig/private/5273a52bad121449403f#woff-id-%E3%81%A8-http-post-%E3%81%AE-url
![l_147288799_297_c8e52a8b6a47820f4faef9d06f161437.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8cfce003-ac88-a765-b479-02aa9115bebc.png)



## 動作確認

前の手順で自分に送信した WOFF URL から WOFF の画面を表示します。
![l_217128028_5_a601005897c9ea57ec7608d42a4b07fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b7ab2c91-8d3e-67b7-ded8-10d64281053e.png)

各項目を入力します。

モバイルアプリから実行すると表示名が WOFF SDK の woff.getProfile() で取得した値が初期値として示されます。
https://developers.worksmobile.com/jp/docs/woff-api#woff-getprofile

日付、時刻、リストボックスなどは Bot のテキストより直感的な UI を提供できます。
![l_217128028_7_4eb67a1bfbb91ad7284889faef4b8eef.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/60e077dc-b091-22b0-4c96-05416c54a920.png)
![l_217128028_12_675dbb99b307f9ee29ce2bb2506f5b5e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e49b01ae-9d8b-8870-c1c9-170bc79179e1.png)
![l_217128028_13_4d7f0596872d4925432388a24cf4169d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1c723e47-2e71-dcf7-2af6-e0d53f435dd7.png)

[位置情報を送信] のトグル スイッチを有効にすると、位置情報を取得して送信されます。
![l_217128028_15_96bf66c3b61e71c89fd810f5baca5f5f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8c0af9b4-de92-2f58-bd6e-a4ecae2f96cf.png)

送信ボタンをタップまたはクリックし、正しくデータ送信されると WOFF SDK の woff.closeWindow() メソッドでアプリが終了します。
https://developers.worksmobile.com/jp/docs/woff-api#close-woff-app

kintone アプリにデータが登録されます。
![l_217128028_16_b3013c29059090c63b11757df45c1189.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/9cac6813-c653-dc5e-9722-18c4536d46e5.png)

また通知 Bot からレコード登録のお知らせが届きます。
![l_147288799_293_4a72558df2e4276edce7ca72e06a7e52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f52f1579-7db1-0d47-65bd-7ca56a0f0ffb.png)

## WOFF を固定メニューから起動できるようにする
LINE WORKS の Bot の固定メニューから WOFF を起動できるように登録します。

### トリガー作成
[モバイルの Flow ボタン] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/dbf5944b-0a55-ae21-dcde-cbede9493a48.png)

フローのトリガーとして [手動でフローをトリガーします] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8de136e8-0833-57c5-f3f5-2d0db7ebf0d2.png)

### アクション作成
[+ 新しいステップ] をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/172f19fc-caa3-9d2f-c837-7d3579be567f.png)

[HTTP] のアクションを追加します。
一覧から探すか、または検索して "HTTP" を選択し、[HTTP] のアクションを指定してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/1f1e5938-ff3b-6921-b114-79149b58fcb1.png)

[HTTP] が追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/b9d2d5fb-1045-c80b-ed3d-214f2ea06a34.png)

以下のとおり、各入力項目の値を登録します。
方法: プルダウンから "POST" を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/0519fdbf-6dd7-0d25-0e7e-2432713ddb41.png)

URI: 以下の URI を使います。

```
https://www.worksapis.com/v1.0/bots/{botId}/persistentmenu
```
{BotID} は書き換えてください。

ヘッダーは以下のとおりです。

キー: 

```
Content-Type
```

値: 

```
application/json
```
キー: 

```
Authorization
```

値: 

```
Bearer <token>
```

本文は以下です。
<WOFF URL> LINE WORKS Developer Console で生成されたものに書き換えてください。

```
{
  "content": {
    "actions": [
      {
        "type": "uri",
        "label": "WOFF",
        "uri": "<WOFF URL>"
      }
    ]
  }
}
```
[保存] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/369cadec-eb61-cb2b-625e-50b3e3114cf2.png)

## 実行
フローを実行します。
![l_147288799_323_ebbc39cdf38c19ef9e746086c87fea19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f6f22da0-2bd4-ae62-a5c5-b68db37f1330.png)

![l_147288799_324_2251b11e64f93ec03b4e28f083663127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/421279e5-dea9-9c3b-56ed-2ca42822420c.png)

固定メニューから WOFF アプリを実行できます。
![l_147288799_327_1577fb2eec82520ff4d34e0f123aec33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/ddd2fb91-626f-13ca-6ac6-fce549c650a2.png)

![l_147288799_328_e626bf7ff442fa1f6ebbbaf80b165fc8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/f3b89e95-5f74-9deb-7299-820d3d45996c.png)