2022.09.5
2025.07.29

5分でできる！Googleマップ（地図）やYoutube（動画）をkintone詳細画面に埋め込む方法！

kintone

いきなりですが、こんなお悩みはありませんか？

「kintoneの詳細画面に GoogleマップやYouTubeを埋め込みたい…」
「でも、APIとか使うのって難しそう…」
「プラグインを使えばできるかも？でも、費用がかかるのはちょっと…」

そんな方のために今回は、kintoneの詳細画面にGoogleマップやYouTubeなどの外部サイトをカンタンに埋め込む方法をご紹介します！

たった 5分で設定できて、しかも無料。手軽にkintoneをもっと便利にできるので、ぜひ最後までご覧ください！

それでは、さっそくいきましょう。

ゴール

ゴールは「kintoneの詳細画面にGoogleマップやYoutubeなどの外部サイトを埋め込む」です。

kintoneの詳細画面に外部サイトを埋め込むことで次のようなことができます。

取引先レコードの詳細画面で地図（Googleマップ）を閲覧
マニュアルアプリのレコード詳細画面で参考動画（Youtube）を視聴
▼ 取引先レコードの詳細画面で地図（Googleマップ）を閲覧
▼マニュアルアプリのレコード詳細画面で参考動画（Youtube）を視聴

手順

手順はたったの3つ！！

アプリにフィールドを追加
js作成 & アップロード
外部サイトから埋め込みタグを取得 & レコード編集画面で外部サイト埋め込みタグを入力

1. アプリにフィールドを追加

外部サイトを埋め込みたいアプリに次の2つのフィールドを追加します。

外部サイトの埋め込みタグ（iframe）を入力するためのフィールド
- フィールド型：文字列（複数行）
- フィールド名：外部サイト埋め込みタグ
- フィールドコード：iframeText
外部サイトを表示するためのフィールド
- フィルド型：スペース
- フィールドコード：iframeSpace

▼ 外部サイトの埋め込みタグ（iframe）を入力するためのフィールド

▼ 外部サイトを表示するためのフィールド

2. js作成&アップロード

次は、jsで作成していきます。※フィールドコードを上記の通り設定していればソースをコピーするだけで動きます。

(() => {
　'use strict';
　kintone.events.on('app.record.detail.show', (event) => {
　　let iframeText = '';
　　iframeText = event.record.iframeText.value;
　　const iframeSpace = kintone.app.record.getSpaceElement('iframeSpace');
　　iframeSpace.insertAdjacentHTML( 'beforeend', iframeText);
　　//外部サイトの埋め込みタグ（iframe）を入力するためのフィールドを非表示にする
　　kintone.app.record.setFieldShown('iframeText', false);
　});
})();