Open11

denoで動くSlackBotを作る

remrem

前提知識

denoとは何なのか?

Denoは、Node.jsを作ったRyan Dahlによって作られた新しいJavaScript/TypeScriptランタイムである。Node.jsの問題点、例えばTypeScriptを使用する際に別のビルドステップが必要な点などを解決することを目的としている。DenoにはTypeScriptとWebAssemblyのサポートが組み込まれており、npmのようなパッケージ・マネージャーに頼るのではなく、URLを使ってコードを直接インポートする。
このアプローチにより、Denoは、各モジュールがサンドボックス環境で実行される、より安全でモジュール化されたアーキテクチャを持つことができる。
しかし、Denoはまだ比較的新しい技術であり、サードパーティ・ライブラリのエコシステムはまだ成長中である。

要約すると、DenoはJavaScriptとTypeScriptのための新しいランタイムであり、TypeScriptとWebAssemblyのビルトインサポートと、URLを使ってコードをインポートするユニークなアプローチによって、ウェブ開発によりセキュアでモジュール化された環境を提供することを目的としている。

【参考リンク】
https://zenn.dev/uki00a/books/effective-deno/viewer/what-is-deno
https://kinsta.com/jp/blog/deno-js/

denoの特徴

  1. セキュリティDenoには、実行時にコードのパーミッションを制御できる独自のパーミッションシステムがあります。デフォルトでは、Denoはネットワークアクセス、ファイルアクセス、またはその他の潜在的に危険な操作を許可しません。コマンドラインフラグまたは--allowフラグを使用して、これらのパーミッションを明示的に許可する必要があります。
  2. TypeScriptのサポート:DenoはTypeScriptをビルトインでサポートしています。つまり、TypeScriptでコードを記述し、別のビルドステップを必要とせずに直接実行することができます。
  3. ウェブ標準:DenoはWeb標準に準拠するように設計されており、JavaScriptとTypeScriptの最新機能をサポートしています。また、Denoで動作することが保証された、レビュー済みの標準モジュールのセットも含まれています。
  4. モジュール性:Denoは、URLを使ってコードをインポートできるモジュラーアーキテクチャを採用しています。このアプローチにより、再利用可能なコードモジュールの作成と共有が容易になります。
  5. パフォーマンスDenoはRustとV8を使用して構築されているため、Node.jsよりも高速で効率的です。
  6. 相互運用性:Denoは、WebAssemblyやRustなど、他の言語やプラットフォームとの相互運用性をサポートしています。
  7. Denoのエコシステム:Denoは、サードパーティライブラリとツールのエコシステムを拡大しており、ウェブアプリケーションとサービスの構築とデプロイを容易にします。

【参考リンク】
https://gk-fe.com/article/deno-introduction/

denoで動くSlackApp概要

https://deno.com/blog/slack-open-beta

概要
Slackは、Denoを採用した新プラットフォームのオープンベータをリリースした。
新プラットフォームは、ファンクション、トリガー、ワークフローなどのビルディングブロックを備えたモジュラーアーキテクチャを特徴としており、再利用性を可能にし、メンテナンスコストや技術的負債を削減します。このプラットフォームは、Slackのマネージド・インフラストラクチャとDenoのセキュア・バイ・デフォルト・ランタイム上に構築され、セキュアなサーバーレス・デプロイメントを提供します。このプラットフォームのセキュリティ機能には、ファイルシステムや外部ドメインへのアクセスを制限したコードを実行するためのきめ細かな制御機能が組み込まれており、アプリが初日からエンタープライズグレードであることを保証します。オープンベータは誰でも試すことができ、開発者やチームはタスクを自動化し、仕事のやり方を変えることができる。

動作環境

deno v1.39.1

remrem

環境構築

  1. denoのインストール
  2. slack cliのインストール

denoのインストール

Macユーザならbrewでのインストールが楽ちん。
筆者はasdfを浸かっているのでasdfでdenoのイメージを落としてきてディレクトリに適用した。

brewの場合

brew install deno

asdfの場合

denoプラグインのインストール

asdf plugin-add deno https://github.com/asdf-community/asdf-deno.git

denoのインストール

asdf install deno 1.39.1

ディレクトリにdenoを有効化する

asdf local deno 1.39.1

【参考リンク】
https://yoshixmk.github.io/deno-manual-ja/getting_started/installation.html

slack cliのインストール

curl -fsSL https://downloads.slack-edge.com/slack-cli/install.sh | bash

【参考リンク】
https://api.slack.com/automation/quickstart

remrem

アプリケーションの作成

以下コマンドを実行

slack create my-app

ワークスペースにログインする

cliでSkack WorkSpaceにログイン

slack login

Slack Appのテスト動作を実行

cd my-app
slack run

このコマンドを実行後WorkSpaceを選択します。
cliからアプリケーションの実行URLが発行されます。

⚡ Listing triggers installed to the app...

🔗 Shortcut trigger:

   Submit an issue (local) XXXXXXXXXX (shortcut)
   Created: 2024-01-05 19:25:05 +09:00 (2 months ago)
   Collaborators:
     your name XXXXXXXXX
   Can be found and used by:
     everyone in all workspaces in this org granted to this app
   https://slack.com/shortcuts/XXXXXXXXX/XXXXXXXXXXXXXXXXXXXXXXXXX

このURLを任意のチャンネルに貼り付けるとSlack Appが実行可能になります。

【参考リンク】
https://api.slack.com/automation/quickstart

remrem

今回作るAppの概要

英語でなんていうのか知りたいを答えてくれる。

OpneAIのAPIに英語表現してほしい内容を投げ込んで結果を得る。
レスポンスをパースしてSlack Appで返却する

構成

.
├── .gitignore
├── .slack
│   ├── apps.json
│   └── config.json
├── .vscode
│   └── settings.json
├── LICENSE
├── README.md
├── assets
│   └── default_new_app_icon.png
├── deno.jsonc
├── functions
│   └── post_issue_message.ts
├── import_map.json
├── manifest.ts
├── slack.json
├── triggers
│   └── submit_issue.ts
└── workflows
    └── submit_issue.ts

エディタ設定

  • vscode-deno

【参考リンク】
https://zenn.dev/uki00a/books/effective-deno/viewer/first-step
https://zenn.dev/wnr/articles/4a5be900e26e33

remrem

deno開発に便利なチートシート

Slack Appの開発だとほぼ使わないがAPIのテストなどをしたいときに参考にした。

また、denoのfmtやlintがあるのは便利なのでぜひ浸かってみてほしい。(prettierなどの設定が煩わしい人間なので特に嬉しい)
https://zenn.dev/uki00a/books/effective-deno/viewer/cheatsheet

remrem

デプロイ先の選定

Vercel

Vercelは、デノアプリケーションをホスティングするのに最適なサービスの1つです。Vercelを使うと、GitHubのアカウントを登録するだけで、サーバ構築やURLの発行などを自動的に行ってくれます。デプロイも簡単で、GitHubにプッシュするだけで自動的にアプリが更新されます。Vercelは初心者にも非常に便利なサービスです。

Netlify

Netlifyは、デノアプリケーションをホスティングできる別のサービスです。Vercelと同様に、GitHubやGitLabなどのリポジトリと連携して、簡単にデプロイできます。ビルドプロセスの設定も柔軟に行えるため、デノアプリケーションの特性に合わせてカスタマイズできます。

Kinsta

Kintaは、Node.jsアプリケーションをホスティングできるサービスです。アプリケーションポッドやビルドマシンなどを選択できるため、デノアプリケーションのリソース要件に合わせてホスティング環境をカスタマイズできます。また、24時間年中無休のサポートも魅力的です。

これらのサービスはいずれも、デノアプリケーションをホスティングするのに適しています。VercelやNetlifyは初心者にも使いやすく、Kintaは高度なカスタマイズ性を求める場合に適しています。ご自身のニーズに合わせて、最適なサービスを選択してください。

Citations:
[1] https://note.com/shufugaishi/n/ncd5854ad64a0
[2] https://kinsta.com/jp/blog/typescript-visual-studio/
[3] https://kinsta.com/jp/application-hosting/node-js/
[4] https://www.gmo.jp/security/ciphersecurity/connection-is-not-private/
[5] https://zenn.dev/uki00a/articles/frontend-development-in-deno-2022-spring

remrem

料金比較

Vercel

Vercelは、無料枠として月間100GB帯域幅と1GB RAM、1CPUを提供しています。
で説明されているように、GitHubアカウントを登録するだけで簡単にデプロイできるため、初心者にも使いやすいサービスです。

Netlify

Netlifyも無料枠として月間100GB帯域幅と300MB RAM、1CPU Coreを提供しています。
で紹介されているように、GitHubやGitLabなどのリポジトリと連携して簡単にデプロイできるため、Vercelと同様に初心者にも使いやすいサービスです。

その他

一方、Kintaは無料枠がなく、有料プランから利用する必要があります。有料プランの料金設定は比較的低めですが、VercelやNetlifyほど初心者向けではありません。
したがって、無料枠が大きく、初心者でも簡単に使えるVercelとNetlifyが、デノアプリケーションをホスティングするのに最適な選択肢だと言えます。

remrem

検索結果の情報をもとに、デプロイプロセスを簡潔にまとめる:

Slackオートメーションのデプロイ

Slack自動化アプリをデプロイするには、Slack CLIを使用し、プロジェクトディレクトリのルートでslack deployコマンドを実行します。[1][4][5]

重要なポイント

  • オートメーションの開発には有料のSlackプランが必要です。もしお持ちでない場合は、Slack Developer Programに参加することで、フルアクセス可能なサンドボックスを入手できます。[4][5]
  • slack deploy`を実行すると、アプリがパッケージ化され、指定したSlackワークスペースにデプロイされます。そのワークスペースのユーザーは、あなたのアプリを見つけて追加できるようになる。[5]
  • Slack Enterprise Gridにデプロイする場合、組織内の特定のワークスペースを選択するよう求められることがあります。org-workspace-grant`フラグを使用してワークスペースを指定することもできます。[5]
  • カスタム関数を配布して、他のユーザーがその関数を使用してワークフローを構築できるようにするには、デプロイ後に slack function distribute コマンドを使用します。共同作業者、特定のユーザー、全員など、アクセス権を与える相手を選択できます。[5]
  • ワークスペースでアプリの管理者承認が必要な場合、ユーザーがアプリをインストールする前に承認が必要になります。[5]

アプリに変更があった場合は、slack deployコマンドを使ってアプリを再デプロイする必要があります。[5]

引用
[1] https://api.slack.com/messaging/webhooks
[2] https://api.slack.com
[3] https://api.slack.com/apps
[4] https://api.slack.com/automation
[5] https://api.slack.com/automation/deploy

DeepL.com(無料版)で翻訳しました。

remrem

Denoでは環境変数を管理する方法

.envファイルを使う

  1. プロジェクトのルートディレクトリに.envファイルを作成します。
  2. 環境変数をKEY=VALUE形式で記述します。例:
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
  1. Denoアプリケーションでimport { config } from "dotenv";を使ってこのファイルを読み込みます。
  2. config()を呼び出すことで、環境変数がDenoのDeno.envオブジェクトに読み込まれます。

Denoの標準機能を使う

Denoには標準で環境変数を扱う機能が用意されています。

  1. Deno.env.get("KEY")で環境変数の値を取得できます。
  2. Deno.env.set("KEY", "VALUE")で環境変数を設定できます。
  3. Deno.env.toObject()で全ての環境変数をオブジェクトとして取得できます。

コマンドラインから設定する

Denoアプリケーションを実行する際に、--envオプションを使って環境変数を渡すことができます。

deno run --env=DB_HOST=localhost --env=DB_USER=myuser app.ts

これらの方法を組み合わせて、柔軟に環境変数を管理することができます。[1][2][3]

Citations:
[1] https://api.slack.com/automation/deploy
[2] https://slack.com/help/articles/13373269464211-Automation-apps-for-Slack-
[3] https://slack.com/blog/collaboration/coordinating-code-deploys-in-slack-channels
[4] https://api.slack.com/apps
[5] https://www.microfocus.com/marketplace/appdelivery/content/deployment-automation-slack-plugin

remrem

今回はSlackコマンドがdenoコマンドを内包する形になっているようなので上記の方法が使えない。
また、テスト中のアプリのためハードコードして管理する形に変更。