kintone Webhook × Zapierでレコード内文章を簡単に翻訳&表示してみよう!

フォローする

(著者:武井 琢治)

こんにちは。kintoneをより良くする武井です。

これからの時代はどなた様もダイバーシティ経営が大事になって来ますね。
多言語対応しているkintoneは時代のトレンドに沿っていると言えます。

ですが、kintoneにはまだ自動翻訳機能まではありません。
そこで今回は、レコード内にある文章に対して「半自動翻訳」のような機能をつける方法をご紹介したいと思います。

完成形サンプル

translation.gif

今回のカスタマイズでできること

  • ステータスを変更することで、議事録の内容を別のフィールドへ日英および日中翻訳して表示します。
  • 議事録の内容を変更した場合、翻訳内容を空にし、ステータスを未処理状態に戻します。

システム概略図

___2.png

今回は、上図のようにkintoneのWebhook機能を利用し、
Zapierにレコードデータを送信後、Zapierにてデータを翻訳、
そしてZapierの機能によってkintoneのレコードを翻訳後のデータに更新します。

準備

kintoneアプリおよびZapierの準備が必要です。

kintoneアプリ

1.以下のフィールドを持つ議事録アプリを作成します。

フィールドコード フィールドタイプ
日付 日付
議題 文字列(1行)
参加者 ユーザー選択
議事録 文字列(複数行)
英語 文字列(複数行)
中国語 文字列(複数行)

2.また、プロセス管理を有効にします。
ステータスは「未処理・翻訳開始・翻訳完了」の3つを作成します。
プロセスは以下のとおり設定します。

process.png

3.また、「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「translation.js」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。

■PC用のJavaScriptファイル

Zapier

今回はkintoneとのデータ連携を手軽に実現できるZapierを使用します。
なお、今回のカスタマイズを実現するためには、Zapierのプレミアムプラン契約が必要となります。
※3ステップ以上のzap(処理)を作成するためにはプレミアムプランが必要で、今回は3ステップ以上であるため。
新規アカウント登録から14日間はプレミアムプランと同様の機能を利用することが可能です(2017年3月現在)。

1.Zapierにアクセスします。

2.画面上部の「MAKE A ZAP」を選択します。

3.下図のように入力フォームに「webhooks」と入力すると出て来る「Webhooks by Zapier」を選択します。
zap1.png

4.「Catch Hook」を選択し、「Continue」を選択します。

5.「Pick Off a Child Key」の入力フォームに下記の内容を貼り付け、「Continue」を選択します。
※レコードの「議事録」フィールドのデータを取得するためのJSONスキーマとなります。

6.下図のように表示されるURLをコピーします。
zap2.png

7.kintoneの議事録アプリに戻り「アプリの設定 > Webhook」と選択し、
下図のように設定し、「保存」を選択し、アプリを更新します。
※コピー&ペーストの際「https://」が重複しないように注意してください。
zap3.png

8.Zapierに戻り「OK, I did this」を選択します。

9.kintoneで適当なレコードを作成し、そのレコードのステータスを「翻訳開始」にします。
※8.の手順からすばやく行ってください。

10.成功すると下図のような画面となるので「Continue」を選択します。
zap4.png

11.画面左の「+」ボタンを選択し「Filter」を選択します。
zap5.png

12.「Only Continue If...」が選択されているので「Save + Continue」を選択します。

13.下図のように設定し「Continue」を選択します。
zap6.png

14.「Test Filter」を選択後、「Continue」を選択します。

15.初期画面に戻るので、入力フォームに「translate」と入力すると出て来る「Translate by Zapier」を選択します。
zap7.png

16.「Translate Text」を選択し、「Save + Continue」を選択します。

17.各項目を下図のように入力し、「Continue」を選択します。
zap8.png

18.「Create & Continue」を選択します。

19.「Add a step」を選択します。

20.初期画面に戻るので、再び入力フォームに「translate」と入力すると出て来る「Translate by Zapier」を選択します。

21.「Translate Text」を選択し、「Save + Continue」を選択します。

22.各項目を下図のように入力し、「Continue」を選択します。
zap9.png

23.「Create & Continue」を選択します。

24.「Add a step」を選択します。

25.初期画面に戻るので、入力フォームに「kintone」と入力すると出て来る「Kintone」選択します。

26.「Update Record By Record ID」を選択し「Save + Continue」を選択します。

27.kintoneアカウントを選択して「Save + Continue」を選択します。
※登録しているアカウントがない場合は、新規に登録してください。

28.各項目を下図のように設定し「Continue」を選択します。
zap10.png

29.「Create & Continue」を選択します。

30.「Add a step」を選択します。

31.初期画面に戻るので、再び入力フォームに「kintone」と入力すると出て来る「Kintone」選択します。

32.「Update Status」を選択し「Save + Continue」を選択します。

33.kintoneアカウントを選択して「Save + Continue」を選択します。

34.各項目を下図のように設定し「Continue」を選択します。
zap11.png

35.「Skip test & Continue」を選択します。

36.「Continue」を選択します。

37.下図のように適当なzap名称を入力し、zapをオンにします。
zap12.png

これでZapierの設定は完了です。

プログラム解説

以上が全体のtranslation.jsとなります。
以下、スポット解説していきます。

中国語と英語のフィールドをdisabled(入力不可)にしています。
あくまで翻訳結果の表示用とするためです。

編集保存した際に、議事録の内容が変更された場合は、翻訳結果をブランクに戻しています。
全件取得関数(fetchRecords関数)につきましてはこちらをご参照ください。

議事録の内容をブランクにする際、ステータスについても「未処理」状態に戻します。
なお、上記のイベントと同時に行うとレコード更新エラーが出てしまうため、
イベントを分けて書いています。

拡張

さらに本プログラムを拡張することで、以下のようなことも可能になります。

  • 英語・中国語以外の言語に翻訳する。
  • 保存した瞬間に翻訳された文章を表示できるようにする(Microsoft Translator APIなどを使用してコードを書く必要あり)

終わりに

いかがでしたでしょうか。
今回kintoneに新しく実装されたWebhook機能の便利さの一端を見ることができたように思います。
翻訳の精度がもう少し上がると更に使い勝手が高まりそうですが、
ここはAI技術の進歩等により時間の問題かと思われます。

皆様の素晴らしいkintoneカスタマイズライフの一助となれたら幸いです。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk