kintone-sendgrid-pluginを更新しました(v11)

久しぶりにSendGrid kintoneプラグインをバージョンアップしました。使い方についてはドキュメントを見ていただくとして、この記事では、ドキュメントに盛り込まなかった裏の仕組みや、今回のバージョンアップ作業に伴い調査したことなどをメモします。

バージョンアップ概要

今回のバージョンアップ内容は以下のとおりです。

• Dynamic Transactional Template
• 文字列置換
• if〜else句
• イテレータ
• サンドボックスモード
• リクエストパラメータ表示
• リクエストパラメータのチェック
• To表示名
• 対応フィールドの種類拡張
• サポート対象ブラウザを明記
• Google Chrome
• Mozzila firefox

Dynamic Transactional Template

文字列置換

「文字列置換」はメール本文や件名に宛先（kintoneのレコード）ごとにkintoneフィールドの値を埋め込む機能です。この機能はこれまでサポートしてきたLegacy Transactional Templateでも利用できました。

Dynamic Transactional Templateではこれに加え、「if~else句」と「イテレータ」機能が利用できるようになりました。

if~else句

if~else句はBoolean値により表示を制御する機能です。テンプレートに以下のように記述するとタグ「show」の値に応じて表示を切り替えることができます。

{{if show}}
    showの値がtrueの場合に表示
{{else}}
    showの値がfalseの場合に表示
{{#if}}

kintoneの場合、（今のところ）Boolean値を返すフィールドは存在しないため、フィールドの値が指定されていない場合に返るnull値をfalse，値が指定されている状態をtrueとして判定する挙動を利用して制御します。より具体的には、以下の3種類のフィールドが値無指定の場合にnullを返すので、if〜else句の制御に利用できます。

• ドロップダウン
• 日付
• 時刻

イテレータ

イテレータは配列により可変長要素を生成する機能です。テンプレートに以下のように記述するとタグ「albums」の配列に応じてその内容が繰り返されます。

{{each albums}}
    タイトル：{{this.value.title.value}}
    説明：{{this.value.description.value}}
{{#each}}

イテレータに利用できるフィールドは（今のところ）以下のとおりです。

• チェックボックス
• 複数選択
• テーブル

チェックボックスと複数選択は文字列配列を返すフィールドです。一方、「テーブル」フィールドは、kintone上のサブテーブルのフィールドを自由に拡張して利用することができます。後述するサンドボックスモードを有効化することにより、プラグインが生成する送信リクエスト内のDynamic Template Dataを確認できるので、テンプレートに記述するタグの階層を調べるのに利用できます。

サンドボックスモード

サンドボックスモードは元々SendGridのメール送信APIの機能で、これを有効化してリクエストを行うとメール送信は行わず、リクエストパラメータの検証結果を返します。プラグインでは、リクエストパラメータの検証結果表示に加え、リクエストパラメータ（Dynamic Template Data）を画面に表示する機能を追加しました。これを利用して、前出のイテレータなど、テンプレートに記載するタグの階層を調べることができるので、テンプレート作成の際はサンドボックスモードを有効化しておくことをオススメします。

To表示名

To表示名はメールクライアント上に表示される宛先情報です。今までなんで対応してなかったんだってくらいメールでは基本的な機能です。To表示名に埋め込むkintoneフィールドを選択します。選択可能なkintoneフィールドは文字列データを返すフィールドです。

対応kintoneフィールドの拡張

これまで、Toに指定可能なkintoneフィールドは以下いずれかのフィールドでしたが、

• 「文字列(1行)」フィールド
• 「リンク」フィールド（入力値の種類＝メールアドレス）

今回のバージョン（v11）から、文字列を返すすべてのフィールドを指定できるようにしました。一つ注意が必要なのが、プラグインはメールアドレスの形式チェックを行わない点です。Toにメールアドレス以外のデータが入力された場合、メールの送信リクエストでエラーが発生したり、メール送信リクエストは成功するが、SendGridがメール送信を試みた際にエラー（バウンス）が発生する可能性があります。メールアドレスの形式チェックは利用者側で行うようにしてください。

サポート対象ブラウザを明記

今回のバージョンからサポート対象ブラウザをGoogle ChromeとMozzila firefoxに限定しました。EdgeとSafariはサポート対象には含めていませんが、動作することは確認しています。一方、Internet Explorer（IE）についてはサポート対象外かつ動作しないことを確認済みです。

サポート対象ブラウザは、SendGridの推奨ブラウザに合わせました。IEで動作しないのは、JavaScriptのasync/await構文を利用しているためです。この構文を採用することにより、非同期実装におけるエラー処理がシンプルになりコードのメンテナンス性が劇的に向上します。近代的なブラウザはasync/awaitをサポートしており、IE以外に代替手段は十分あると判断して、IEのサポートを切り捨てました。どうしてもIEでプラグインを利用したい場合は旧バージョンをご利用ください。

これ以降はkintoneプラグイン開発者向けの情報です。

plugin-packerの採用

今回から、plugin-packerというプラグインのパッケージングを支援する開発ツールを導入しました。このツールを導入する前は、コード修正後手動でパッケージングを行う必要がありましたが、plugin-packerはコードの変更を監視して自動的にパッケージングを行なってくれるため、開発効率が劇的に向上しました。

plugin-uploaderの採用

次に、plugin-uploaderというパッケージングしたプラグインをコマンドラインからkintoneに自動的にアップロードしてくれる開発ツールを導入しました。このツールを導入する前は、パッケージング後にkintoneのUIからプラグインファイルをアップロードする必要があり、非常に面倒でしたが、plugin-uploaderはパッケージファイルの変更を監視して自動的にアップロードを行なってくれるため、開発効率が劇的に向上します。

plugin-packerとplugin-uploaderを組み合わせると、ソースコードを修正後、kintoneの画面をリロードするだけで更新が反映されるのですぐに動作確認ができます。

ESLintの採用見送り

kintoneではプラグインの雛形を生成してくれるcreate-pluginというツールがあります。このツールでプラグインを生成すると、標準的な設定やファイル／フォルダ構成を自動的に作成してくれるので非常に便利です。この設定の中にESLintというJavaScriptの構文チェックツールが組み込まれているのですが、ここで設定されるプラグイン用のプリセットがES5用のものなんですよね。そしてasync/awaitをサポートしているES6のプリセットは用意されていません。いまさらES5で構文チェックは行いたくない、ということで今回はESLintの採用は見送りました。機が熟していないということか。残念。

さいごに

ようやくDynamic Transactional Templateに対応しました。Legacy Transactional Templateと比べて、フル機能使いこなそうとすると難易度があがるため、わかりやすい機能構成を維持するためにずいぶん長い間悩んでいた気がします。本来、Dynamic Template Dataに指定できるデータの階層は自由なのでプラグインでも自由なデータ構造を構築できるようにしたかったのですが、使いこなせる人がいないと思ったので「キー：値」のフラットな構造のみをサポートするよう制限しました。それでも、サブテーブルをイテレータに利用しようと思うと、プラグインが生成するDynamic Template Dataの中身を確認する必要があります。サンドボックスモードはこのための苦肉の策と思っていただければ幸いです。