スマホ版のkintoneの詳細画面からレコードの内容でメールを作ったり、SMSを送ったり、地図アプリを開いたりしてみる。

公開日：2025-03-18

こんにちは。JavaScriptのことばかり書いているよなしろです。

ちょっと前に弊社にてkintoneの活用のお手伝いさせいただいているお客様よりこういうご相談をいただきました。

kintoneのレコードをそのまま利用してメールを送るのでしたら、gusuku CustomineのJob Runnerに、やることSendGrid でメールを送信するがあるので、それを使用すれば送ることができます。

ただ、今回の場合、

• 🙋🏻‍♀️ いつも使っているメールソフトで送りたい
• 🙋🏻‍♀️ メールの送信履歴を残しておきたい(送信済みトレイにいれたい)
• 🙋🏻‍♀️ 宛先はレコードに書かれているが、Ccをつける人が毎回変動する
• 🙋🏻‍♀️ 相手によって文章をちょっと変更したい

という意向がありましたので、それだと SendGrid を使用してメールを送る方法は向かないなぁ…という感じでした。

また、当時は メール共有オプションも発表される前でしたので、それでどうにか…という感じでもありませんでした。

JavaScriptを使えば、メールソフトを起動することはできるんだけど…という感じでだったのですが、gusuku Customineでカスタマイズされており、保守性の観点から「JavaScript を実行する」は使用しないという方針でしたので、難しいですね…ということで話が終わりました。

(このあたりの「保守性の観点からどのように開発をすすめていくか」のような社内でのアプリ作成ルール等や、ガバナンスをどう効かしていくかなどはキミノマホロで一緒に検討していくことも可能です!)

どうやるの?

「JavaScript を実行する」を使えばできるんですが、具体的に何をどうすればいいかという疑問が出てくるかと思います。

簡単にオチを書くと、JavaScriptを使用して メールソフトを起動するためのURLを開く ということで対応が可能です。

「メールソフトを起動するためのURLを開く」ってどういうURLかというと…

mailto:yonashirotest@example.com?subject=件名&body=本文だよー

みたいなURLです。

URLの構造

一般的にURLといえば https://www.r3it.com/ のような https: から始まるURLがよく使用されます。

URLの中の 最初から 「:」の手前までの文字のことを「URLスキーム」と言います。

URLスキームを見ることで、どのアプリで開くのかや、アプリがどういうプロトコル(通信の規格)でやりとりをするのかを判断する際に使用します。

代表的なURLスキームをいくつか紹介します。

一般的なURLスキーム

スキーム	用途
https	通常のWebサイトのリンク(暗号化されている)
http	暗号化されていないWebサイトのリンク
mailto	メールアプリを開いて特定のメールアドレスに新規メールを作成
tel	指定した電話番号に発信

スマートフォンで使用されることが多いURLスキーム

スキーム	用途
sms	SMSアプリを開いて特定の番号にメッセージを作成
maps	iOSにおいて標準のマップアプリで、指定した場所を表示する
geo	Androidにおいて標準のマップアプリで、指定した場所を表示する

URLスキームに対応したアプリがあって、このURLの時にはこのアプリを起動する。っていう設定が行なわれていれば、URLを開くことでそのアプリを起動してメールを作ったりすることが可能になります。

gusuku Customine の「JavaScript を実行する」を使用していろいろなURLを作って開いてみる

JavaScriptを使えばkintoneのフィールドの値を取得することができ、URLの生成もおもいのままです。

gusuku Customineでは、「JavaScript を実行する」というやることがあるので、そこにURLを生成してそのURLを開くコードを記述することでいろいろ試してみてみます。

今回は

• メールを送る画面を開く (mailto:)
• 電話をかける (tel:)
• SMSを送る画面を開く (sms:)
• スマートフォンで標準のマップアプリで指定した座標を開くボタンを設置する( maps: / geo: )

の4つに加え、

• Google Mapsアプリを開く

のサンプルを紹介します。

注意事項

「JavaScript を実行する」のドキュメント内の注意事項にも記載がありますが、

お客様が作成された JavaScript の内容に関しては、弊社サポートの範囲外とさせていただきます。

となっておりますので、この記事を見て動かしてみたけど動かない!ということをサポートに連絡いただいてもサポート対象外となります。あらかじめご了承ください。

また、悪意のあるユーザーがフィールドに悪用できる形でデータを入れていると思わぬトラブルが発生する可能性があります。 (電話番号のフィールドに 110 と入れておくとか…、悪意のあるプログラムが実行されたり誤動作したりするURLを生成するフィールド値が入れられているとか…)

こちらには注意を払ったうえで利用してください。

フィールド構成

今回は下記のようなフィールド構成にしました。

フィールドコード	フィールドタイプ
メアド	文字列1行
電話番号	文字列1行
件名	文字列1行
メールの中身	文字列複数行
緯度	文字列1行
経度	文字列1行

また、カスタマイズはgusuku Customineで行なっております。

基本は「ボタンを設置する」 → 「ボタンをクリックしたらJavaScriptが実行される」というものになります。

下図のような感じになります。

下にある「JavaScript を実行する」の中のコードをいろいろ変えることでやりたいことのためのURLを生成してそれを開く処理を起動しています。

画面上でのイメージは下図のようになります。

いろいろ遊びがいがあるので、スマホのときに使えるJavaScriptのコードを記載しています。

もしPCでやりたい場合は record を取得するところを kintone.app.record.get() に変更していただければ使えるかと思います。 (ただし、PCではmailtoとtelと最後のおまけの奴くらしか動かない気がします)

以下、JavaScript のコードの紹介です。

📤メールを送る画面を開く (mailto:)

(() => {
const record = kintone.mobile.app.record.get();
const to = record.record["メアド"]["value"];
const subject = encodeURIComponent(record.record["件名"]["value"]);
const body = encodeURIComponent(record.record["メールの中身"]["value"]);
const url = 'mailto:' + to + '?subject=' + subject + '&body=' + body;
window.open(url);
})()

このJSではメアド宛てに、件名とメール本文を記述した状態のメールソフトが起動するようになっています。

ただし、メール本文に含まれる改行が正常に処理されるかは開くメールソフトによって挙動が変わりますので注意が必要です。 (Gmailとはあまり相性がよくない可能性があります)

📲電話をかける (tel:)

(() => {
const record = kintone.mobile.app.record.get();
const phone = record.record["電話番号"]["value"];
const url = 'tel:' + phone;
window.open(url);
})()

指定した電話番号に電話をかける画面が出てきます。

PCでtel:を使用したURLを開くと、一部のソフトフォンをインストールしている場合にソフトフォンから発信することが可能な場合もあります。
(詳細はソフトフォンのマニュアル等をご確認ください。)

💬SMSを送る画面を開く (sms:)

(() => {
const record = kintone.mobile.app.record.get();
const phone = record.record["電話番号"]["value"];
const body = encodeURIComponent(record.record["メールの中身"]["value"]);
const url = 'sms:' + phone + '?body=' + body;
window.open(url);
})()

指定した電話番号宛てに、本文がセットされた状態でSMS作成画面が表示されます。

🗺️標準のマップアプリで指定した座標を開くボタンを設置する

(() => {
const record = kintone.mobile.app.record.get();
let prefix = ""
const userAgent = window.navigator.userAgent;
if (/android/i.test(userAgent)) {
    prefix = 'geo';
} else if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
    prefix = "maps://?ll=";
} else {
    prefix = "https://www.google.com/maps?q=";
}
const lat = record.record["緯度"]["value"];
const lng = record.record["経度"]["value"];
const url = prefix + lat + "," + lng;
window.open(url);
})()

移動フィールド・経度フィールドに指定された座標を各スマートフォンの標準マップアプリで開く処理をしています。 URLスキームがiOSとAndroidで異なるため、判別処理を行なっています。

すみません…Android持ってないので動作確認していません…

緯度・経度をフィールドにセットするには、gusuku Customineのやること「住所から緯度経度を取得する」の利用が便利です。

🗺️ 番外編: Google Mapsアプリを開く

Google Maps アプリがインストールされている場合、https://www.google.com/maps から始まるURLにアクセスすると、Google Maps アプリが起動します。それを利用して指定の座標をGoogle Mapsアプリで開いてみます。

(() => {
const record = kintone.mobile.app.record.get();
const lat = record.record["緯度"]["value"];
const lng = record.record["経度"]["value"];
const url = 'https://www.google.com/maps?q=' + lat + "," + lng;
window.open(url);
})()

記載されているJavaScriptのコードを修正したり、gusuku Customineの他のアクションと組み合わせて便利に使ってみてください!

次回予告?

JavaScriptの話を書きすぎたので、次回(来月予定)からは別のことをシリーズもので書く予定です。おたのしみに!

投稿者プロフィール

よなしろ

沖縄で業務しています。オンプレ生まれ・クラウド育ち。

最新の投稿

この投稿者のすべての記事

• kintone2025年3月18日スマホ版のkintoneの詳細画面からレコードの内容でメールを作ったり、SMSを送ったり、地図アプリを開いたりしてみる。
• kintone2025年2月18日生成AIを活用してkintoneを便利に使うためのプログラムを精度よく生成するには?
• kintone2025年1月30日kintoneアプリの転記、面倒くさくない? 昔ながらの技で効率アップ!
• kintone2023年8月24日kintoneのフィールドに入っている名前を姓名で分割する