🧑‍🔧
Glitchでウェブツールを連携する

2024/11/15に公開
 ツールはクラウド一択技術課のプログラマYです

いつもはUnityエンジニアとしてゲーム開発していますが、

本日はツール作成についての内容となります。
プロジェクトの中でもウェブツールの利用が多くを占めるようになってきた昨今。

そんな中でも最近は複数のウェブツールを連携したネットワークツールを作る時に、Glitch を使用しています。

Glitch はAPIのURLを簡単に提供できるため、

いろいろなウェブツールとも容易に連携できるのがよいところです。

なによりマシンが落ちてました！なんて面倒すぎる！

ツールはクラウドにおきたいですね。

今回は Glitch を使って簡単なアプリケーションを作るまでを記載していこうと思います。

 Glitchを使用するメリット使用開始までが手軽

Node.js によるアプリケーション開発がサポートされているので、ソースコードの理解がしやすい
他の人が作成したツールもそのまま利用しやすい（Remix）

マシン管理が不要
アプリケーションのURLが即座に発行できる

 Slackからオウム返しするアプリケーションを作るまずは小さなアプリケーションを作ってみましょう。

botにメッセージを送るとそのままオウム返しするアプリケーションを作ってみます。

（Slack だけとの連携の場合Glitch を使用しなくても何とかなりますが）

Slack アプリケーションを用意する

Glitch プロジェクトを作成する

Slackアプリから Glitchアプリを呼び出す

 1. Slackアプリケーションを用意するSlack App Directory からアプリを作成します

https://api.slack.com/apps
アプリケーションを作成

Create New App から作成

From scratch で作成
アプリ名、ワークスペースを選択して適宜入力

アプリケーションに権限を付与

OAuth & Permissions で下記の Scope を追加
chat:write
channels:history
groups:history

アプリケーションの基本情報を追記

App Home で App Display Name を編集

Show Tabs＞Message Tab＞Allow users to send Slach commands and messages from the message tab にチェック

アプリケーションのIDを手元に取っておく

Basic Infomation＞Signing Secret をコピーしておく

アプリケーションを有効化する

Install App を実行

Bot User OAuth Token をコピーしておく

 2. Glitchプロジェクトを作成するまずはアカウントを作成します

https://glitch.com/
新規プロジェクトを作成する

今回は glitch-hello-node をもとに作っていきます

New project＞glitch-hello-node

.env に環境変数を記載する

これは nodejs のパッケージ dotenv の機能ですが、Glitch ではデフォルトで動作します

.env は公開されないので、秘密にしておくIDなどをまとめておきます
下記を記載しておきます
SLACK_SIGNING_SECRET（先ほどの Signing Secret）
SLACK_BOT_TOKEN（先ほどの Bot User OAuth Token）

Slack のライブラリを追加する

salck/bolt パッケージを使用します

package.json の dependencies に "@slack/bolt": "^3.9.0" を追加します

アプリケーションのJavaScriptを記載します

glitch-hello-node にはコードが記載されていますが、今回はすべて置き換えます
server.js を下記で書き換えますconst { App } = require('@slack/bolt');
const app = new App({
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  token: process.env.SLACK_BOT_TOKEN
});
// メッセージが投稿された時に呼ばれるメソッド
app.message(async ({ message, say }) => {
  await say({
    text: message.text,
    thread_ts: message.ts,
  });
});
// アプリが起動時に呼ばれるメソッド
(async () => {
  await app.start(process.env.PORT || 3000);
  console.log('⚡️ Bolt app is running!!');
})();

Glitchアプリケーションの起動

ここで'⚡️ Bolt app is running!!' がコンソールに出てくればOKです

出てこないようであれば、TERMINAL から直接起動しましょう
npm update
npm install
node server.js

Glitch アプリケーションの実装完了

Glitch アプリケーションは実装完了となります

Share ボタンを押して出てくるダイアログから Live site のURLをコピーしておきます

このURLが、今回作成したアプリのURLです

 3. SlackアプリからGlitchのアプリを呼び出す先ほど作成したSlack アプリと、Glitch アプリケーションを接続します
作成したSlack のアプリケーションページを開きます

Glitch アプリケーションにAPI接続

Event Subscriptions ページから、先ほどのURLにリクエストを飛ばします

Request URL に[[先ほどのURL]]/slack/eventsと入れると、

動作確認が自動的に開始されます

Verified! と出ればOK

URLリクエストをトリガーするSlack 側のイベントを設定します

Event Subscriptions＞Subscrib to bot eventsから下記のイベントを指定します
message.channels
message.groups

Save Changes で保存します

Slack アプリケーションを再インストールする

Install App＞Reinstall App で再インストールします

Slak のチャンネルにボットを追加する

後は、Slack のお好きなチャンネルにアプリを追加するだけです

チャンネルの詳細＞インテグレーション＞アプリの追加
メンションしてみるとオウム返ししてくれるはずです

 最後に作成したプロジェクトはこちらです

https://glitch.com/edit/#!/enthusiastic-cool-casquette

Glitch アカウントを作成していれば、Remix からそのまま使用することができます。
Glitch は、ウェブツールを初めて触る場合によい選択肢と思います。

実際のプロジェクトでは、プロジェクト管理ツールから資料を作成したり、

プロジェクト管理ツールのルーチンをSlack から実行するなどで使用しています。

何より実際のマシンを意識しなくてよいのは非常に健康的です。

再起動に悩まされたことのある方は検討してはいかがでしょうか。

 注意点Glitchで進めるべきかの判断基準は、社内に閉じたアプリケーションを使用するかになります。

社内に閉じたアプリケーションと連携する場合はよい選択ではないかもしれません。

また、常時稼働させたい場合はProプラン を検討をおすすめします。
ツールはクラウド一択

Glitchを使用するメリット

Slackからオウム返しするアプリケーションを作る

1. Slackアプリケーションを用意する

2. Glitchプロジェクトを作成する

3. SlackアプリからGlitchのアプリを呼び出す

最後に

注意点

Discussion
