figma-notification

TypeScript + Heroku で作成している Slack Bot です。

機能

• Figmaファイルのバージョン更新をSlackに通知
• Figmaファイル上のコメントをSlackに通知
  • コメントがTrelloカードへのリンクを含んでいる場合は、TrelloにFigmaファイルを添付

環境構築

• ngrokをインストール

  • brew cask install ngrokなど

• heroku CLIをインストール

• このリポジトリを clone して、以下実行

  asdf install
  asdf reshim yarn
  yarn

開発

テスト環境

• .env-templateファイルを基に.envファイルを作成し、Slack Botのトークンを記述する。
• yarn buildでbackend.jsファイルを生成する。
• figma-notificationリポジトリ上で heroku localを実行(yarn startでも可)。localhostの5000番ポートでリクエストを受信できる
• ngrok http 5000で、先程のlocalhost:5000をngrok proxy 経由で露出
• Figma APIサイト上で、SiiiboチームのWebhookを登録
  • Webhook新規登録の場合はPOSTリクエスト
  • Webhook Endpoint URL更新の場合はPUTリクエスト

本番環境

• Herokuに free dyno でデプロイする
• アカウントは[email protected]。認証情報は既存メンバから取得する
  • Heroku CLIをインストールすればローカルから情報の取得や設定ができる
• ローカル開発時に.envに設定している認証情報は、Heroku では Config Var として設定する
  • 待ち受けポートは、自動的に Heroku によってPORT環境変数経由で設定される
• GitHub リポジトリと同期しているので、GitHub にmasterブランチを push すればデプロイされる
  • HerokuのNode.jsビルドパックのビルドプロセスにしたがって、build及びheroku-postbuildなどのスクリプトが実行される
  • サーバ起動コマンドはProcfileに記述する

補足

GASへの移行について

当初figma-notificationはGoogle Apps Scriptで作成する予定だったが、Figma Webhookの制限のため断念した。現在はHerokuで実装しているが、Heroku無料枠の信頼性の低さから上記の制限が緩和されたらGASへの移行をしたい。

以下、GASで実装する際の注意点(https://github.com/siiibo/shujinosuke より)

TypeScriptを使ってローカルでGASの開発を行う方法

• GASはデフォルトではファイルモジュールがサポートされていない
  • ファイルを分割していてもグローバルスコープとなる
• ファイルモジュールが必要ない場合は clasp を利用するとTS→JSへのコンパイルを自動で行ってくれる
• ファイルモジュールを扱うにはローカルで設定する必要があり、Figma-notificationは webpack を利用することで実現している
  • 関連する設定ファイルは
    • webpack.config.js
    • tsconfig.json
• デプロイまでの流れは以下の通り
  • webpack でビルド
  • clasp push でコードをGAS環境にpush
  • clasp deploy -i <deploymentID> でデプロイの更新
• GASプロジェクトをローカルで管理する場合、以下の２つのファイルが必要
  • .clasp.json
    • clasp でpushやdeployする対象のGASプロジェクトを設定
  • appsscript.json
    • ランタイムやタイムゾーンなど、GAS側で必要な情報の設定
    • ブラウザ上で新規プロジェクトを作成する場合は自動で作成される
      • 初期設定ではオンラインエディタ上に表示されないようになっているが変更することで表示可能

SlackのWebClientについて

• SlackのWebClientには @slack/web-apiという公式ツールがある
• しかしGASはNode.jsと完全な互換性はないので上記ツールを利用することができない
• 上記ツールにはTypeScriptで開発する上で便利な情報が定義されているため、これをGASでも利用できるようにした
  • リンクはhi-se/node-slack-sdk
  • https://gitpkg.now.sh/を利用して yarn install している