Money Forward Developers Blog

株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。

20230215130734

DeepL翻訳と翻訳結果の送信ができるSlackアプリを作ってみた

こんにちは! CIO室コーポレートエンジニアリンググループでインターンをしている赤羽です。


この記事は、マネフォアドベントカレンダー2021 7日目の投稿です。


今回はSlack上でショートカットから呼び出せるDeepL翻訳アプリを紹介します。

今回紹介するアプリはこちらで公開されているソースコードを参考にさせていただき、機能を追加したりアレンジしたものをPythonで作成しました。


完成品使用例

[video width="1280" height="720" mp4="https://moneyforward.com/engineers_blog/wp-content/uploads/2021/12/deepl-slack1.mp4"][/video]


使用方法

/deeplと入力してショートカットを呼び出すとDeepL翻訳のポップアップウィンドウ(モーダル)が開きます。

あとは画像の手順通りですが、説明がなくても直感的に操作できるようになっていると思います。


ツール作成の背景

マネーフォワードでエンジニアの公用語が英語になるということで、英語が不得手だったり、翻訳を使いながら会話したい方々に向けて今回のツールを作ることとなりました。

わざわざ翻訳サイトを訪れなくても、Slack内で手軽に英和・和英の翻訳ができて会話できるようにすることを目的に作りました。


コード(Python)

↓ ソースコードはこちら ↓

Githubリポジトリ:https://github.com/Maya-Rald/deepl_slackapp

今回のコードは全て上記のGithubリポジトリに格納してあります。Herokuのデプロイボタンを設置する予定なので、ボタンクリックと変数設定でどこのワークスペースでも簡単にこのアプリを設置できるようになります。


ファイル構成

  • deepl.py: DeepL API Proを使用して翻訳を行う関数が入ったファイルです。

  • main3.py: bolt for python を使用した、主にSlackアプリを構成するコードが入っています。表示するモーダルのレイアウト(view)が全て入っているため、非常に長いです。

  • Procfile: Heroku上で実行してもらうファイルを明示するファイルです。

  • requirements.txt: スクリプトで使用するライブラリを明示するファイルです。

  • runtime.txt: Pythonのバージョンを明示するファイルです。

基本的にdeepl.pymain3.pyがBotのコードが入っているPythonファイルで、そのほかはHerokuにデプロイするために必要な設定ファイルです。


関数解説

コードはmain.pyが結構長めなのでGithub上で確認していただくとして、deepl.pymain.pyにある関数の説明だけざっと行おうと思います。「コードは興味ないよ〜」という方は、飛ばしていただいて大丈夫です。

main.pyの関数は、Bolt for Pythonのドキュメントと合わせて参照していただくとわかりやすいです。


deepl関数 (deepl.py)

DeepL API Proを使用して、引数のテキストを該当の言語へ翻訳し、翻訳結果を返す関数です。


open_modal関数 (main.py)

ショートカットで呼び出される関数で、モーダルを立ち上げます。viewの中の「options」を追加することで、翻訳対応の言語を増やすことができます。

handle_submission関数 (main.py)

モーダルの「Translate/翻訳」ボタンを押したときに呼び出される関数です。ロード画面のモーダル表示、DeepL翻訳、翻訳結果のモーダル表示を行います。

send_submission関数 (main.py)

モーダルの「Send Text」ボタンを押したときに呼び出される関数です。選択されたチャンネルに翻訳結果を送信します。

try_again関数 (main.py)

モーダルの「Retry Translation / 翻訳をやり直す」ボタンを押したときに呼び出される関数です。翻訳の原文を入力した状態でモーダルを表示します。

  • open_modalとほぼ同じ内容のモーダルを表示するため、open_modal関数のviewを変更した場合にはtry_again関数のviewも同様に修正する必要があります。
  • (例:open_modalでoptionsを追加して対応言語を増やした場合には、try_againのviewにも同じoptionsを追加する。)


詰まったところ

SlackのBoltというフレームワーク自体初めて使ったということもあり、最初は使い方に戸惑いました。ですが今回、開発言語は違えどseratchさんが公開してくださっているコードを参考に進められたのと、Bolt for Pythonの資料が非常にわかりやすかったため、基本的には詰むことなくスムーズに開発できました。

特にBolt for Pythonの資料は全てのアクションにサンプルコードが備えられており、非常にわかりやすいドキュメントでした。

ショートカットが呼び出されたチャンネルを取得する

一箇所詰まったのが、翻訳結果をチャンネルに送信するアクションを作っている時でした。理想では送信ボタンを押せばショートカットを起動したチャンネルに自動で送信してくれる機能を想像していたのですが、使用している@app.viewアクションにあるはずのsay()が使えない...。

バグなのか仕様なのかわからなかったため、Slackに問い合わせてみたところ、バグの可能性があるからGithubにIssueを立ち上げてくれとのことでした。Bolt for PythonのリポジトリにIssueを立ち上げて再度問い合わせてみたところ、参考にしていたソースコードを書いていた方であるseratchさんから回答をいただきました(びっくり)。


結論を言うとグローバルショートカットを使っているがためにsay()が使えないとのこと。グローバルショートカットはチャンネル以外でも起動できるため、ショートカットのアクションでチャンネルIDをそもそも取得していないらしいです。

Bolt for Pythonのドキュメントにも記載があったのですが、ショートカットのアクション内ではなかったため大丈夫だと思い込んでいました。考えてみるとショートカット呼び出しの時点でチャンネルを取得できていなければ、それ以外でチャンネルを取得する術はないので当たり前なのですが。。。

ありがたいことに回答の中にアドバイスもいただいたのですが、結局ドキュメントにもあった「conversations_select」を使うことにしました。


結局ショートカットを呼び出したチャンネルに送信することはできないのですが、ユーザーに送信先のチャンネルを選んでもらうことにより、翻訳結果をチャンネルに送信する機能を実装することができました。


工夫・意識したところ

翻訳結果を編集できるように

翻訳結果をモーダルのテキストボックスに格納することにより、翻訳結果を直接編集できるようにしました!

翻訳結果の英文に、ワンフレーズ足してみたかったり、ニュアンスを少し変えたい時などに役立ちます。もちろん編集せずにそのままの文章をつかうこともことも可能です。


編集した翻訳結果をそのまま送信したい

Slack上で翻訳しても、それをコピーしてつかうのではなくSlackチャンネルに直接翻訳結果を送信できるようにしました!

そして、送信すると Botが自分になり代わって送信してくれます!この機能によりぱっと見で誰の発言かわかりやすくなっています。

自分とBotの発言の全く見分けがつかないと、セキュリティー上問題ですが、Botのなりきり発言には、「アプリ」のロゴがついており、見分けがつくようになっています。


原文を入力済みの状態で「翻訳をやり直す」

DeepL翻訳アプリで、この先よく起こるであろう問題が「思っていた翻訳結果が出ない」ことだと思います。

簡単な誤字はDeepLが本来の意味を予測してくれますが、大文字にし忘れたり、誤字脱字で翻訳されなかったということはよくあることです。

長文を入力していて、翻訳がうまくいかなかったからやり直そう!とやり直しボタンを押したら、原文をコピーし忘れていて書いていた内容が全てパーになる...なんてトラブルを避けるため、今回の機能をつけました。私自身、地味に大事な機能だと思っています。


結果・反響(LGTM賞)

このアプリを作成して、全体向けにお知らせしたところ大きな反響をいただくことができました!これから英語が公用語になるエンジニアさん方には、ぜひ活用していただきたいです✨

そしてなんと!2021年10月のLGTM賞1位に選ばれることができました!感動!嬉しい! 所属しているCIO室では初の受賞らしいのですが、インターンという立場でも受賞できて感動しています。

LGTM賞というのは、マネーフォワードが毎月1回全従業員を対象に、その月に最もテクノロジードリブンを体現した活動を表彰する賞です。今回以外にも何度か他のツールで推薦いただいたことはあるのですが、実際に1位を受賞できたのは今回は初めてでした。


参考資料

元々オリジナルのアプリを使いたい方はこちら(翻訳結果の編集や送信機能は無し) → DeepL を Slack から使おう!


マネーフォワードでは、エンジニアを募集しています。 ご応募お待ちしています。

【サイトのご案内】 ■マネーフォワード採用サイトWantedly京都開発拠点

【プロダクトのご紹介】 ■お金の見える化サービス 『マネーフォワード ME』 iPhone,iPad Android

ビジネス向けバックオフィス向け業務効率化ソリューション 『マネーフォワード クラウド』

おつり貯金アプリ 『しらたま』

お金の悩みを無料で相談 『マネーフォワード お金の相談』

だれでも貯まって増える お金の体質改善サービス 『マネーフォワード おかねせんせい』

金融商品の比較・申し込みサイト 『Money Forward Mall』

くらしの経済メディア 『MONEY PLUS』