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

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

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

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

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

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

ゴール

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

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

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

kintoneの詳細画面に埋め込まれたGoogleマップの例 — 取引先レコードの詳細画面で地図（Googleマップ）を閲覧

kintoneの詳細画面に埋め込まれたYouTube動画の例 — マニュアルアプリのレコード詳細画面で参考動画（YouTube）を視聴

手順

手順はたったの3つ！！

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

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

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

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

フィールド型：文字列（複数行）
フィールド名：外部サイト埋め込みタグ
フィールドコード：iframeText

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

フィールド型：スペース
フィールドコード：iframeSpace

文字列複数行フィールドでiframeタグを入力する設定 — 外部サイトの埋め込みタグ（iframe）を入力するためのフィールド

スペースフィールドで埋め込み表示エリアを確保した画面 — 外部サイトを表示するためのスペースフィールド

2js作成&アップロード

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

javascript

(() => {
  '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);
  });
})();