GASでChatworkのBotを作ろう！（ローカル開発編）

初めまして
今回は、GoogleAppScriptを使いつつ、スプレッドシートを編集するだけで、定期的にChatWorkにタスクを投げるといったものを作っていきたいと思います。

技術的仕様

• Node 15.1.0
• Clasp 2.3.0
• Webpack 4.44.2

##　スプレッドシートのスクリプトエディタは使いにくい

ブラウザでコードを書いていっても良いのですが、やはりシンタックスも効かないし、普段使っているエディタでコードを書きたいですよね。
GASをローカル開発環境に落とし込むライブラリ「Clasp」があったのでそれを使っていきます。

Claspのインストール方法や使い方は下記記事が参考になりました

GAS のGoogle謹製CLIツール clasp

また、jsの最新記法も気兼ねなく使いたかったので、Webpack+Babelを使用することにしました。
本当は、有志が作成したdate処理のライブラリやchatworkのライブラリを使用したかったのですが、gasで実行すると、エラー多発だったので、ライブラリを使用することは諦めて、gasに準拠したライブラリのみ使用することにしました。

Webpackは4系を使いました。gasが5系にまだ対応していないみたいなので、4系にダウングレードしたらうまく実行してくれました。

webpackの構成ファイルを載せておきます。

Webpack.config.js

const path = require('path')
const GasPlugin = require('gas-webpack-plugin')

module.exports = {
    mode: "development",
    devtool: false,
    entry: {
        app: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
  
    module: {
      rules: [
        {
          // 拡張子 .js の場合
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              // Babel を利用する
              loader: "babel-loader",
              // Babel のオプションを指定する
              options: {
                babelrc: false,
                presets: [[
                  // プリセットを指定することで、ES2020 を ES5 に変換
                  "@babel/preset-env", {
                    modules: false,
                    useBuiltIns: 'entry',
                    corejs: 3
                  }
                ]],
                plugins: [
                  ['@babel/plugin-transform-runtime', { 'corejs': 3 }]
                ],
              }
            }
          ]
        }
      ]
    },
    resolve: {
        extensions: ['.js']
    },
    plugins: [new GasPlugin({
      comment: false
    })]
  }

おそらく、余計な設定が多く入っていますが、これで動きました。

実際の製作物について

下図のようなスプレッドシートを作成します。

スイッチ	ルームID	タスク実行人	タスク内容	期限	タスクを投げる日
ボタン	Text	Text	Text	text	text

スイッチがtrueの行のみ、処理を実行します。

ChatWorkの下記エンドポイントにHTTPリクエストを投げます。

"https://api.chatwork.com/v2/rooms/{ルームID}/tasks?body={タスク内容}&limit={期限}&limit_type=date&to_ids={タスク実行人}"

gasでは、

UrlFetchApp.fetch(endpoint, data)

でAPIにリクエストを投げられます。

endpointを設定します。

let endpoint = https://api.chatwork.com/v2/rooms/{ルームID}/tasks

ルームIDの部分は、タスクを投げたいルームのIDです。
Chatwork公式ヘルプのルームIDの確認方法を参考にしました。

ルームIDを確認する

そして、下記オブジェクトを作成します。

let data = {
 method: 'post',
 header: { 'X-ChatWorkToken': ENV.CHATWORK_API_TOKEN },
 payload: {
  'body': {タスク内容},
  'limit': {期限},
  'limit_type': 'date',
  'to_ids': {タスク実行人}
 }
}

タスク内容
期限
タスク実行人
はそれぞれ、スプレッドシートから取得します。

期限は、UNIX時間を秒表記に直します。
タスク実行人は、実行者のChatworkアカウントのユーザーidを入力します。

これでURLFetchすれば、chatworkにタスクが出現！
無事完成です。
あとは、トリガーの設定やらがありますが、続きは次回！

※こちらの記事は、追ってより詳しく再編集いたします。