🐲 Slack Next-gen platform で Reaction をつけると DeepL でメッセージを翻訳してくれるアプリを作ってみました✌️ (EDOCODE Advent Calendar 2022🎄)

（この記事は、| 🎅 EDOCODE Advent Calendar 2022🎄 | 12月16日の記事です！😀）

こんにちは、EDOCODE で採用を担当している山田です！採用が主な仕事ですが、EDOCODE の組織全般に責任を持っています。

今回は、

• EDOCODE の社内の様子を知ってもらう！
• 最近リリースされた Slack Next-gen platform でのアプリの作り方を知ってもらう！

をネタに、Advent Calendar の記事を書いていこうと思います！🙌

つくるアプリ

タイトルにもあるとおり、「Reaction をつけると DeepL でメッセージを翻訳してくれるアプリ」を作成しました。例えば Slack に日本語のメッセージがあり、それを英語に翻訳してほしい場合は、日本語の元メッセージに専用のリアクションをつけます。そうすると、DeepL 翻訳された英語のメッセージがそのチャンネルに投稿されます。元メッセージが英語の場合は、日本語の翻訳メッセージが投稿されます。

少し話がそれますが、EDOCODE では予定の空いている社員がランダムで 4人選ばれるランチ会が毎日行われています。そのランチを抽選しているアプリに "Puff" という名前がついているのですが、今回の翻訳アプリも Puff のキャラクターを使い、ランチではなく DeepL 翻訳してくれる機能を持っていることから "Deep Puff" という名前にしています。

こちらのアイコンは現行バージョンのもので、2年前に開発しました。今回は、Slack から 2022年9月にβリリース された "Slack Next-gen platform" を触ってみたいなーと思っていたので、このアプリをゼロから作り直してみました。

ちなみに Puff というのは、Peter Paul & Mary の『Puff, The Magic Dragon』という曲が元ネタです🐲🎸

なぜこのアプリがあると良いのか？

背景

EDOCODE には 2022年11月現在で 17人のメンバーが在籍しています。そのうち、約 35% にあたる 6人が日本語ネイティブではない人です。つまり 3分の1 のメンバーが日本語ネイティブではありません。またこれまでは採用要件で「流暢な日本語」を必須にしていたのですが、徐々にこの要件を緩和しています。実際、6人のうち直近で入社した 1人は、まだ日本語でのコミュニケーションがとれないメンバーです。

さらに新規プロダクトの PUSHCODE では、最初から「グローバルなチームで」「グローバルにサービスを提供する」ことを前提に立ち上げを行いました。会社全体が "純ジャパニーズ" な会社から、少しずつ "英語フレンドリー" な会社へと転換していく過程の中にいます。こうした背景から、日英語の翻訳が必要な場面が以前から増えてきていました。

会社を英語化することの難しさ

EDOCODE はずっと日本語でやってきた会社ですが、それを英語化するのはなかなか難しいです。ですが、会社の英語化は世の中の趨勢として待ったなしでもあります。ここでトップダウンで転換を急ごうとしたところで、反作用があるのは確実に思えます。そもそもトップが英語ができない問題がありますし・・🥲 むしろ皆さんから英語を教えていただいている毎日です🙇🏻

経営メンバーと相談して、そういう方針でいこう！と特に決めたわけではないのですが、少しずつ英語に抵抗感をなくすような、気づいたら英語がなんか身近になってたわ、という感覚を日本語ネイティブの社員に持ってもらうのが良いんじゃないかなーと思い、そういう気持ちと狙いで個人的にはここ 2年ちょっとの間、EDOCODE の英語化を進めてきました。

DeepL の登場

ちょうどコロナ禍が始まった 2020年の初頭に DeepL が日本語に対応 しました。振り返ってみると、リモートワーク環境と DeepL の登場が EDOCODE の英語化にとってとてもタイミング良かった気がします。リモートワークにより対面や口頭でのコミュニケーションが相対的に減り、Slack や Notion によるテキストコミュニケーションが増えました。そうすると、仮に英語で情報が流れてきても、DeepL すれば大半のことは問題ありません。

この辺りで、「日本語・英語・中国語であれば、自分と相手との間で一番コミュニケーションしやすい言語で Slack しても良いですよ」と社内にアナウンスした気がします。同じチャンネルにいる人で英語が読めない人でも、その人が非同期的に DeepL すれば問題ないですし、会社としてはコミュニケーションコストが低く、より生産的な意思疎通をしてもらったほうが良いからです。とは言え、まだこの時期は表立って、ある意味で「遠慮なく」そういうことをやる社員は出てきませんでした。

ようやく今になって活躍の機会が・・！

現行バージョンを作成した 2年前は、上記のような感じでした。複数人が参加しているプロジェクトごとのチャンネルでは、みんな日本語でポストするのが基本。1対1 の個別の DM では一番快適な言語で話をしていたと聞いています。ですが会社としては「もっと英語とか中国語とか、みんなが一番自分の考えをネイティブに表現できる言語で発信して良いですよ」というスタンスです。普通に考えたら、「理想を言うのは簡単だけど、実際そんなことされたら大変でしょ！」と思うのが当たり前です。

で、長くなりましたが、そういう気持ちが普通だったらみんな持つだろうな〜〜と思い、じゃあリアクションをつけるだけで翻訳してくれる Slack アプリを作れば、各自の翻訳にかかるコストも心理的コストも下がるのでは？と思い、Deep Puff を作成したのでした。結果としては、ほぼ誰も使ってくれずに 2年が過ぎていました😅（この記事を書くためにさっき commit log を調べたら 2年前に開発していてびっくりしました）

そして現在はというと、上でも触れた日本語がまだできない新入社員のために大活躍しています。EDOCODE は労務まわりの業務をグループ会社である Wano に委託していますが、Wano 側の労務担当の方は英語ができません。そこで Deep Puff を両名に紹介して、労務関係のコミュニケーションをやっていただいています。もしこのアプリがなかったら、かなり大変だったのではないかと思います。自画自賛ですが。

（↓こんな感じのやりとりを言語の問題なく、また手間をかけずにできています🙂）

Slack Next-gen platform

前半は EDOCODE の様子をご紹介しました！後半は Slack の次世代プラットフォームでのアプリの作り方を簡単にご紹介したいと思います💪 たぶんこの手の記事は Qiita や Zenn などの技術情報メディアで詳しく解説されていると思いますので、この記事ではざっくりとだけ紹介したいと思います。

特徴

このプラットフォームの大きな特徴は以下があると思います。影響度の高い順で。

• Slack がインフラを用意してくれる
• CLI が充実している
• Bolt SDK よりもなんか作りやすい
• Deno で開発できる

何よりも良いと感じたのは、Slack が実行環境を用意してくれるところです。これがめちゃくちゃ良いです。現行の Deep Puff やシャッフルランチをサポートしている Puff Lunch は Firebase Functions で実行しています。まずこういうのがいりません。なので作って動かすまでのハードルがかなり低いです。また Slack の外で実行する場合、Slack の Trigger を listen するためのコードから書き始める必要がありました。もっと言えば、Trigger した場合にどの URL へリクエストを送るだとか、認証がどうだとか、そういう「やるべき設定」がたくさんありました。😮‍💨 こうしたものが全てなくなったというのは、かなり画期的な気がします。

導入手順

めっちゃ簡単なので、説明の必要がないぐらいです、という説明をしたいがためのパートです。😌 公式のページにあるインストラクションどおりにやっていけば、何も問題はありません。以前はもっと大変でしたが、新しいプラットフォームでは、

1. CLI をインストールする
2. CLI で認証を通す
3. コマンドで create slack app する
4. コマンドで trigger を作成する
5. ローカル環境でアプリを起動する

で開発を開始できます。はやすぎ！！

各機能の紹介

まったく初めての方にとって、以下の機能を把握しとけばだいたいアプリが作れます、というものを簡単に紹介しておきます。開発中によく参照した Slack の公式ドキュメントのページをベースにまとめています。

Triggers（トリガー）

• アプリの働きを起動する「きっかけ」の部分
• 何があったらアプリの処理を始めるの？ということを定義します
• Link, Scheduled, Event, Webhook の 4つのトリガーがあります
• 今回作った Deep Puff は「リアクションしたら」なので Event Trigger の reaction added を利用しています

Workflows（ワークフロー）

• 起動したらどんな順番でどんな処理をしていくのか？を定義します
• 処理に対しての入力を決めたり、処理が終わった後のデータを出力して、次に渡したりもできます
• Slack へ何かの動作を行わせたいときも、ここに書くことができます

Functions（関数）

• 具体的な処理を記述します
• 関数には以下にある Buit-in Functions と Custom Functions の２つのタイプがあります

Buit-in Functions（組み込み関数）

• Slack が事前に用意してくれている関数です
• よく使う Slack と連携した処理が用意されていて便利です
• 例えば「Slack にメッセージを送る」などは Built-in Function があるのですぐに実装できます

Custom Functions（独自関数）

• 開発者独自の処理を定義できます
• 例えば Slack 外のサービスとの連携を書くことができます
• Slack の各種 API を利用しつつ、色んな処理を組み合わせることももちろん可能です

Slack API Methods（Slack API のメソッド）

• どうやってこのプラットフォームで Slack API を利用するの？という説明が書かれています
• 素晴らしいのは、従来のように Slack API を使うための Token などを管理しつつコードに書く必要がないことです
• なぜなら、ここ にあるとおり token という引数を渡すだけで、コンテキストとしてそれを利用できるからです
• • これは Slack のインフラで動かしているからなせることですね😀

Third-party API Calls（外部 API の呼び出し）

• 外部 API を呼ぶにはどうしたら良いの？という説明が書かれています
• 認証情報はハードコーディングせずに .env に書いて、コンテキストを利用して使ってね、と示されています
• 公式のサンプルコードは Deno の fetch で紹介されていますが、Deep Puff は Ky を利用しました

Deploy to Slack（デプロイ）

• 本番用にデプロイする際にはアプリのビルドが走ります
• このとき、自分で関数を定義していると TypeScript のビルドチェックが入ります
• • 自分は恥ずかしながら TypeScript が初めてだったので、エラーを見ながら型注釈をつけていくのに 2時間ぐらいとられてしまいました・・😓
• このページ自体には特に重要な情報はありません

実際のコードサンプル

最後に実際のコードサンプルを掲示しておきます。興味ない人はここで読み終えてください！

Triggers

// #/triggers/deep_puff_trigger.ts

import { Trigger } from "deno-slack-api/types.ts";
import DeepPuffWorkflow from "../workflows/deep_puff_workflow.ts";

const deepPuffReactionTrigger: Trigger<typeof DeepPuffWorkflow.definition> = {
  type: "event",
  name: "Deep Puff Reaction Trigger",
  description: "This trigger will run by adding the Deep Puff reaction.",
  workflow: "#/workflows/deep_puff_workflow",
  event: {
    event_type: "slack#/events/reaction_added",
    channel_ids: ["xxxxxxxx"],
    filter: {
      version: 1,
      root: {
        operator: "OR",
        inputs: [{
          statement: "{{data.reaction}} == deep-puff"
        },
        {
          statement: "{{data.reaction}} == deep-puff-right"
        }],
      },
    },
  },
  inputs: {
    user_id: {
      value: "{{data.user_id}}",
    },
    message_ts: {
      value: "{{data.message_ts}}",
    },
    channel_id: {
      value: "{{data.channel_id}}",
    },
  },
};

export default deepPuffReactionTrigger;

• Trigger は event で、その type を reaction_added と定義
• filter で :deep-puff: または :deep-puff-right: というリアクションがあったときのみトリガーさせる
• inputs では reaction_added から渡ってくるデータのうちどれどんな名前で使うのかを定義

Workflows

// #/workflows/deep_puff_workflow.ts

import { DefineWorkflow, Schema } from "deno-slack-sdk/mod.ts";
import { RetrieveMessageFunctionDefinition } from "../functions/retrieve_message_function.ts";
import { DeepLTranslatingFunctionDefinition } from "../functions/deepl_translating_function.ts";

const DeepPuffWorkflow = DefineWorkflow({
  callback_id: "deep_puff_workflow",
  title: "Deep Puff workflow",
  description: "Deep Puff Translating by Adding reaction.",
  input_parameters: {
    properties: {
      user_id: {
        type: Schema.slack.types.user_id,
      },
      message_ts: {
        type: Schema.types.string,
      },
      channel_id: {
        type: Schema.slack.types.channel_id,
      },
    },
    required: ["user_id", "message_ts", "channel_id"],
  },
});

const retrieveMessageFunctionStep = DeepPuffWorkflow.addStep(
  RetrieveMessageFunctionDefinition,
  {
    channel_id: DeepPuffWorkflow.inputs.channel_id,
    message_ts: DeepPuffWorkflow.inputs.message_ts,
  },
);

const deepLTranslatingFunctionStep = DeepPuffWorkflow.addStep(
  DeepLTranslatingFunctionDefinition,
  {
    text: retrieveMessageFunctionStep.outputs.message,
  },
);

DeepPuffWorkflow.addStep(Schema.slack.functions.SendMessage, {
  channel_id: DeepPuffWorkflow.inputs.channel_id,
  message: deepLTranslatingFunctionStep.outputs.translated,
});

export default DeepPuffWorkflow;

• DefineWorkflow では入力データのバリデーションを定義している
• • 型は Slack が用意してくれているもの でほとんど事足りる感じ
  • message_ts の型は Schema.slack.types.timestamp だとエラーになって最初ちょっとハマった
• ワークフローには 3つのステップを追加している
• • (1) リアクションの event 情報から、該当するメッセージを取得するステップ（retrieveMessageFunctionStep）
  • (2) 取得したメッセージのテキストを DeepL API で翻訳するステップ（deepLTranslatingFunctionStep）
  • (3) 翻訳済みのテキストをリアクションがついたメッセージと同じチャンネルにポストするステップ（Schema.slack.functions.SendMessage）

Functions

// #/functions/retrieve_message_function.ts

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { SlackAPI } from "deno-slack-api/mod.ts";

export const RetrieveMessageFunctionDefinition = DefineFunction({
  callback_id: "retrieve_message_function",
  title: "Retrieve Messge Function",
  description: "Retrieving a message which is added reaction.",
  source_file: "functions/retrieve_message_function.ts",
  input_parameters: {
    properties: {
      channel_id: {
        type: Schema.slack.types.channel_id,
      },
      message_ts: {
        type: Schema.types.string,
      },
    },
    required: ["channel_id", "message_ts"],
  },
  output_parameters: {
    properties: {
      message: {
        type: Schema.types.string,
        description: "Message to be translated.",
      },
    },
    required: ["message"],
  },
});

export default SlackFunction(
  RetrieveMessageFunctionDefinition,
  async ({ inputs, token }) => {
    const client = SlackAPI(token);
    const res = await client.conversations.history({
      channel: inputs.channel_id,
      oldest: inputs.message_ts,
      inclusive: true,
      limit: 1,
    });

    if (res.ok) {
      const message = res.messages[0].text;
      return { outputs: { message } };
    } else {
      throw "Error: on Slack conversations.history()";
    }
  },
);

• Slack API methods の conversations.history を使った処理
• • import { SlackAPI } して、コンテキストの { token } を引数に渡すだけで OK なのでとても楽
  • conversations.history() ではタイムスタンプで指定したメッセージを取得している（oldest, inclusive, limit）

// #/functions/deepl_translating_function.ts

import { DefineFunction, Schema, SlackFunction } from "deno-slack-sdk/mod.ts";
import { SlackAPI } from "deno-slack-api/mod.ts";
import ky from 'https://esm.sh/ky';

export const DeepLTranslatingFunctionDefinition = DefineFunction({
callback_id: "deepl_translationg_function",
title: "DeepL Translating Function",
description: "Translating text via DeepL API.",
source_file: "functions/deepl_translating_function.ts",
input_parameters: {
properties: {
text: {
type: Schema.types.string,
description: "Text to be translated.",
},
},
required: ["text"],
},
output_parameters: {
properties: {
translated: {
type: Schema.types.string,
description: "Message translated.",
},
},
required: ["translated"],
},
});

const translate = async (source: string, authKey: string, targetLang = "JA") => {
const host = 'api.deepl.com';
const v = 'v2';
const type = 'translate';
const url = 'https://' + host + '/' + v + '/' + type;
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: "DeepL-Auth-Key " + authKey,
};
const text = source.replace(/<@\w+>/g, "");
const searchParams = { text, target_lang: targetLang };

interface Translation { detected_source_language: string, text: string }
interface DeepLResponse { translations: Translation[] }
const res: DeepLResponse = await ky.post(url, { headers, searchParams }).json();
let translated: string = res.translations[0].text;

if (res.translations[0].detected_source_language === targetLang) {
translated = await translate(source, authKey, "EN");
}

return translated;
}

export default SlackFunction(
DeepLTranslatingFunctionDefinition,
async ({ inputs, env }) => {
const source = inputs.text;
const authKey = env.DEEPL_AUTH_KEY;

const translated = await translate(source, authKey);

return { outputs: { translated } };
},
);

• HTTP クライントには Ky を使った
• DeepL API は 公式のドキュメント を参照
• • 利用は有料のアカウントが必要です！💵
• 独自に定義している translate() はデプロイ時に TypeScript のチェックが入るため、型注釈を各所に追加している
• const text = source.replace(/<@\w+>/g, ""); は DeepL に渡す翻訳元テキストから Slack のユーザー ID などの英数字を削除している
• 翻訳は、日本語だったら英語、英語だったら日本語に翻訳させるというのがアプリの要件
• • DeepL は API のレスポンスで入力したテキストの言語判定が返ってくる
  • それを見て、もし翻訳元テキストが日本語だった場合は、翻訳先言語（targetLang）を英語に指定して再度リクエストを投げ直している（実装としては再帰している）
• DeepL API の認証情報は .env に保管して { env } のコンテキストから呼び出している
• • Firebase Functions の現行バージョンだと、.env をやるにも NPM パッケージが必要だったので、本当にありがたい🙏

まとめ

ということで、EDOCODE のちょっとした文化と、それをサポートするためのツールを作った話をご紹介しました！😀

人事の担当者がこういう簡単なプログラミングができると、組織マターで「こういうの欲しい！」となったときにパッとつくって社内に提供できるので便利だなと感じます。普通の会社だとエンジニアは事業をまわす部署にいたりするので、こういうものは有志のエンジニアが空き時間につくってくれるのを期待したり、お願いしたりすることが多いのかなと。Slack Next-gen platform により、さらにグッとプログラミングの要求レベルが下がったので、これを機に非エンジニアやバックオフィスの担当者がどんどん必要なシーンでアプリをつくっていけるのではないかと思います！🙌

現行バージョンでは開発に 2, 3日はかかったと思いますが、今回のリニューアルでは開発環境の学習も含めて合計 12時間ぐらいしかかからなかったと思います。ハマりポイントが結構あったものの、そこさえクリアすればめちゃくちゃ簡単に実装できてしまうので、本当に便利だと思います！今さらですが、ハマったポイントを解説するべきでした！！！たぶんそういう記事があればもっと早く開発できてた。

新しいバージョンのアプリアイコンです👇🐉 Figma で適当にマッシュアップして作りました👨‍🍳

お知らせ

EDOCODE では、エンジニア・デザイナー・プロダクトマネジャーを募集しています！！！🚀

ご興味のある方は、
　　　ぜひ Wantedly で「話を聞きに行きたい」👇👇👇 してください！

また EDOCODE の採用ページもありますので、こちらもぜひご覧ください🙌
https://go.edocode.co.jp/jobs