AppSheetでLINE予約投稿システムを作ろう

## 1. AppSheetの設定
### 1-1. スプレッドシートの新規作成
AppSheetで使うスプレッドシートを新規作成しておきます。下記URLにアクセスしてください。

https://sheet.new

### 1-2. カラム設定
A1セルに `ステータス`、B1セルに `投稿日時` 、C1セルに `メッセージ`、D1セルに `画像`、E1セルに `URL`、F1セルに `待ち時間` とそれぞれ入力してください。スプレッドシートの名前はお好きな名前を設定してください。今回は「予約投稿アプリ」としました。

![](https://storage.googleapis.com/zenn-user-upload/889d5bf2146c-20220822.png)

### 1-3. プロジェクト作成
下記URLにアクセスして、［無料トライアル］ボタンをクリックします。

https://cloud.google.com/appsheet?hl=ja

![](https://storage.googleapis.com/zenn-user-upload/1nkrv517kjeqhbn64nf0xkrywnci)

一番左にある `Start with your own data` をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/df3677c29b01-20220822.png)

お好きなプロジェクト名①とカテゴリ②を設定して、［Choose your data］ボタン③をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/a326523a5700-20220822.png)

1-2で作成したスプレッドシートを選択します。

![](https://storage.googleapis.com/zenn-user-upload/9091eef9c666-20220822.png)

`Customize your app` をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/2f8ee3390bf0-20220822.png)

### 1-4. データ項目編集
AppSheetのプロジェクト管理画面が表示されます。左側メニューのData①→Columns②→シート1③をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/29bb126df567-20220822.png)

ステータスデータを編集します。鉛筆ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/0dd1456c7605-20220822.png)

ステータスのボタンを設定します。「今すぐ投稿」と「予約投稿」のボタンを設定しています。設定したら右上の［Done］ボタン⑤をクリックします。

|項目|値|
|:--|:--|
|①Type|Enum|
|②Add|２回クリック|
|③Values|今すぐ投稿、予約投稿項目を追加|
|④Input mode|Buttons|

![](https://storage.googleapis.com/zenn-user-upload/1d339ecfca28-20220822.png)

続いて投稿日時データを編集します。投稿日時にある鉛筆ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/b721a43f81c1-20220822.png)

設定は下記の通りです。

|項目|値|
|:--|:--|
|①Type|DateTime|
|②Require?|チェックを入れる|
|③Initial Value|クリックする|

![](https://storage.googleapis.com/zenn-user-upload/85da90bf95d0-20220822.png)

初期値に現在時刻を取得する処理を追加します。NOW()行にある［Insert］ボタンをクリックして［Save］ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/db835ed45af0-20220822.png)

設定が終われば右上の［Done］ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/89e371290bf8-20220822.png)

続いて画像データを編集します。画像にある鉛筆ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/f3d8422faa06-20220822.png)

Typeは `Image` を選択します。

![](https://storage.googleapis.com/zenn-user-upload/bbd32341299d-20220822.png)

続いて待ち時間データを編集します。待ち時間にある鉛筆ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/03263c84a28e-20220822.png)

Typeは `Duration` を選択します。

![](https://storage.googleapis.com/zenn-user-upload/8cb53bd9d556-20220822.png)

_RowNumberにあるKEY?部分だけにチェックを入れてください。ステータス部分のチェックは外しておきます。
設定が終われば右上の［SAVE］ボタン②をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/e21308431da2-20220822.png)

### 1-5. セキュリティ設定
デフォルトのままだと画像を投稿してもセキュリティがかかっていて、誰でも見ることができません。
LINEに投稿する画像は誰でも見ることができるようにしないといけないので、AppSheetの設定を行います。

左側メニューのSecurity①→Optionsタブ②→Require Image and File URL Signing③をオフにする

![](https://storage.googleapis.com/zenn-user-upload/036c74ae7b76-20220822.png)

### 1-6. 動作確認

ここまで設定したら一度シミュレーターで確認してみましょう。画面右側のシミュレーターから［＋］ボタン①をクリックして、投稿ステータスを設定②します。投稿日時、メッセージ、画像を選択したら右下の［Save］ボタン③をクリックします。すると設定した項目④が自動的に追加されます。

![](https://storage.googleapis.com/zenn-user-upload/ee692c7325ba-20220822.png)

追加した情報はスプレッドシートにも自動的に反映されます。

![](https://storage.googleapis.com/zenn-user-upload/081e9397af76-20220822.png)


## 2. LINEの設定

### 2-1. 新規チャネルを作成する
LINE DeveloperページへアクセスしてLINEログインしてください。

https://developers.line.biz/ja/

まだプロバイダー設定してない方は「新規プロバイダー作成」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/31d22d1df1d4-20220822.png)

プロバイダー名はお好きなものを入力して、「作成」ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/95987d2abec4-20220822.png)

`Messaging API` をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/921d30e89603-20220822.png)

各種項目を埋めていきます。会社・事業者の所在国・地域は「日本」を選択します。

![](https://storage.googleapis.com/zenn-user-upload/8d34d15304b1-20220822.png)

各種項目を埋めていきます。

|項目|値|
|:--|:--|
|①チャネル名|【デモ】予約投稿|
|②チャネル説明|【デモ】予約投稿|
|③大業種|個人|
|④小業種|個人（その他）|
|⑤メールアドレス|あなたのメールアドレスを入力してください|

![](https://storage.googleapis.com/zenn-user-upload/abf889beb3d6-20220822.png)

2つのチェックを入れて、［作成］ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/08f83b821c59-20220822.png)

［OK］ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/23b5375f92e3-20220822.png)

［同意する］ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/6852d6587ba0-20220822.png)

### 2-2. ボットと友だちなる
作成したボットと友だちになっておきます。「Messaging API設定」タブにあるQRコードをLINEアプリから読み取って友だちになっておいてください。

![](https://storage.googleapis.com/zenn-user-upload/94d8c0a584b1-20220822.png)

### 2-3. アクセストークンを発行する
下の方にスクロールして、チャネルアクセストークンカテゴリにある「発行」ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/30203658da15-20220822.png)

後ほど使いますので、発行されたチャネルアクセストークをメモしておきましょう。

![](https://storage.googleapis.com/zenn-user-upload/e7cc263787cf-20220822.png)

## 3. AppSheet Automationの設定
### 3-1. Botを設定する
AppSheetに何かしらの変化があれば、何かを行うという `自動化` の処理を設定します。
今回は、スタータスの値に応じて、「今すぐ投稿」するのか、「予約投稿」で指定時間経過するまで待つのかを自動化していきます。

Automation①からBots②タブの「＋New Bot」③をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/7d7ccbe60cb0-20220822.png)

Bot名は `LINE予約投稿` ①と入力して、「Configure event」②ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/73edfdcfef33-20220822.png)

「Create a custom event」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/8552e57265ab-20220822.png)

下記設定を行います。設定が終われば「Add a step」③ボタンをクリックします。

|項目|値|
|:--|:--|
|Event Name①|新規追加|
|Event Type②|Adds Onlyを選択|

![](https://storage.googleapis.com/zenn-user-upload/3dd2e2eb3bb5-20220822.png)

「Create a custom step」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/0d7ab0eb7b2f-20220822.png)

「データ更新」とプロセス名①を変更して、Run a taskのプルダウンメニューから「Run a data action」を選択します。

![](https://storage.googleapis.com/zenn-user-upload/46a8ec7c0169-20220822.png)

set row values①を選択し、「Add」ボタン②を2回クリック、`URL`と`待ち時間`を選択③します。
URL側をクリックして編集④します。

![](https://storage.googleapis.com/zenn-user-upload/40642c974a24-20220822.png)

下記を入力してください。途中にある `アプリ名`はご利用環境によって異なります。設定
できれば「Save」をクリック②します。

```
concatenate(“https://www.appsheet.com/Template/gettablefileurl?”, 
“appname=”, encodeurl(“アプリ名”), 
“&tablename=”, encodeurl(“シート1”), 
“&filename=”, encodeurl([画像]))
```

![](https://storage.googleapis.com/zenn-user-upload/489f7bcefb4d-20220822.png)

アプリ名はURLに明記されています。

![](https://storage.googleapis.com/zenn-user-upload/7d22e67d0491-20220822.png)

待ち時間を設定します。配信日時から現在時刻を引き算して算出します。この秒数待機してくれるようになります。

![](https://storage.googleapis.com/zenn-user-upload/1bb8dc1f10ec-20220822.png)

待ち時間を処理しますので、下記コード①を適応して、「Save」ボタン②をクリックします。

```
[投稿日時] - NOW()
```

![](https://storage.googleapis.com/zenn-user-upload/27a02621da80-20220822.png)

「Add a step」ボタンをクリックします。

![](https://storage.googleapis.com/zenn-user-upload/aea26e9d026b-20220822.png)

「Create a custom step」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/d74722ae494d-20220822.png)

プロセス名を「ステータス判定」①に変更し、プルダウンメニュー②から「Branch on a condition」③をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/b46528d9a7ed-20220822.png)

ステータス判定するための式を設定します。

![](https://storage.googleapis.com/zenn-user-upload/8f962fca9e3f-20220822.png)

式は下記の通りです。

```
[ステータス] = “今すぐ投稿”
```

![](https://storage.googleapis.com/zenn-user-upload/b5ed95b690ec-20220822.png)

NO側の「＋」をクリックします。これで、ステータスが「予約投稿」の場合にNOへ遷移します。

![](https://storage.googleapis.com/zenn-user-upload/2f8e8d146726-20220822.png)

「Create a Custom step」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/739d542b5d85-20220822.png)

「Wait」をプルダウンメニューから選択します。

![](https://storage.googleapis.com/zenn-user-upload/54a92a5b1c7c-20220822.png)

下記設定を行います。

|項目|値|
|:--|:--|
|Wait for①|A period of time|
|Period②|[待ち時間]|

![](https://storage.googleapis.com/zenn-user-upload/b76b9d80d128-20220822.png)

![](https://storage.googleapis.com/zenn-user-upload/d71b9f0b11ad-20220822.png)

「Add a step」をクリックします。

![](https://storage.googleapis.com/zenn-user-upload/9a8b5d2ec155-20220822.png)

プロセス名を「LINE投稿」①に変更し、「Call a webhook」②を選択します。
URLは `https://api.line.me/v2/bot/message/broadcast`を③設定し、HTTP Verbは `Post`を④選択します。

![](https://storage.googleapis.com/zenn-user-upload/ac20ccee1c8b-20220822.png)

下にスクロールするとBody項目①があるので、下記を入力します。HTTP Headersは `Authorization:  "Bearer 2-3で取得したアクセストークン"`を②設定します。設定できれば「Save」③をクリックします。

```
{
  "messages": [
    {
      "type":"text",
      "text":"<<メッセージ>>"
    },
    {
      "type": "image",
      "originalContentUrl": "<<URL>>",
      "previewImageUrl": "<<URL>>"
    }
  ]
}
```

![](https://storage.googleapis.com/zenn-user-upload/c35d2bde0a28-20220822.png)

### 3-2. 動作確認
ここまで設定ができていれば、「今すぐ投稿」や「予約投稿」を試してみてください。
今すぐ投稿だと瞬時にLINEは投稿されます。「予約投稿」は指定時間になればLINEへ投稿されます。

![](https://storage.googleapis.com/zenn-user-upload/3e47d00970b3-20220822.png)

:::message
予約投稿は最低5分先、最高30日先まで指定することができます。それ以外の範囲だとエラーになるので注意してください。
:::


### 3-3. まとめ
ノーコードでLINEの予約投稿を実現することができました。LINEの公式アカウントにある管理画面からでも予約投稿することは可能なのですが、不特定多数のユーザーが同一の公式アカウントに投稿するケースや、LINE公式アカウントのログイン情報共有したくない場合にこちらのアプリが使えるのではないでしょうか？

AppSheet Automationは色々機能があるので、是非試してみてください。

システム化のご検討やご相談は弊社までお問い合わせください。

https://www.i-enter.co.jp/