kintone Webhook × Zapierでレコード内文章を簡単に翻訳＆表示してみよう！ – cybozu developer network

（著者：武井琢治）

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

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

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

完成形サンプル

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

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

システム概略図

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

準備

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

kintoneアプリ

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

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

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

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

■PC用のJavaScriptファイル

translation.js（詳細後述）

Zapier

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プログラム解説

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

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

編集保存した際に、議事録の内容が変更された場合は、翻訳結果をブランクに戻しています。
全件取得関数（fetchRecords関数）につきましては「offset の制限値を考慮したレコード一括取得について」をご参照ください。

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

拡張

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

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

終わりに

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

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