立ち上げたメールソフトにkintoneの情報をセットするワザ

著者名:北川 恭平(サイボウズ株式会社)

目次

はじめに

今回はレコード詳細画面に配置したリンクをクリックすることでメールソフトを立ち上げ、 kintoneの情報を元に宛先・件名・本文をあらかじめ入力する方法を紹介します。
利用シーンとして、kintoneで管理した情報を社外の人に共有したいというケースがあると思います。
その場合、メールソフトを立ち上げる、件名の情報をレコード詳細画面からコピペする、本文の情報をレコード詳細画面からコピペする、とちょっと手間ですよね。
そんなコピペの手間を減らすカスタマイズを紹介します。

実装の手順と流れ

  1. リンクを配置する場所の要素を取得する。
  2. ログインユーザーのE-mail情報とレコード詳細画面の情報を取得する。
  3. 1で取得した要素の子要素として2の情報を設定したリンクを追加する。
    リンクはaタグを使用する。

レコード詳細画面を開いたときにリンクを作成するので、レコード詳細画面のイベントを設定します。

1
kintone.events.on('app.record.detail.show', (event) =>{

メニューの上側の要素を取得する を参考に、今回はレコード詳細画面の右側の要素を取得します。

1
2
// レコード詳細画面右側の空白部分の要素を取得
const el = kintone.app.record.getHeaderMenuSpaceElement();

赤い点線部分の要素を取得

レコード詳細画面の情報を取得する

レコード詳細画面の情報を取得します。
今回は例としてフィールドコードtitlehonbunの文字列を取得します。

1
2
3
// 文字列フィールドの取得
const title = event.record.title.value;
const honbun = event.record.honbun.value;

レコード内の文字列を取得

メニュー右側の空白部分にaタグを配置します。
aタグには、取得したレコード情報のtitlehonbunをセットします。

1
2
3
4
5
6
7
// aタグの生成
const link = document.createElement('a');
link.href = 'mailto:' + 'sample@hoge.com' + '?subject=' + title + '&body=' + honbun; link.id = 'Send'; link.name = 'mailSend';
// 要素の追加
el.appendChild(link);
link.appendChild(document.createTextNode(' メール送信 '));
});

配置したリンクを押して、挙動を確認します。

レコード詳細画面のリンクをクリック

メールソフト起動時の画面

注意事項

メールソフトの起動設定はユーザが利用する個々のブラウザーの設定に依存します。
設定によってはメールソフトが起動しない場合もあります。

information

このTipsは、2014年4月版kintoneで動作を確認しています。