はじめに
こんにちは。Kentaroです!
いきなりですが、こんなお悩みありませんか？
- 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);
});
})();作成したjsをkintoneにアップロード。
3. 外部サイトから埋め込みタグを取得&レコード編集画面で外部サイト埋め込みタグを入力
外部サイトから埋め込みタグを取得します。※サイトによって埋め込みタグの取得方法は異なります。
▼Googleマップの取得方法
取得した埋め込みタグを[外部サイト埋め込みタグ]フィールドに入力し保存します。
完成！！
レコード詳細画面に外部サイトが埋め込まれました！！
如何でしたか？埋め込みタグを毎回取得しkintoneに入力するのは少し手間ですが、とっても簡単だったと思います！また、基本的に埋め込みタグさえあればどんなサイトでも表示できちゃいます。
ただし、外部サイトを詰め込みすぎると画面表示が遅くなる原因になります！！！用法用量をお守りください（笑）
（おまけ）外部サイトいろいろ表示させてみた！
Googleカレンダー
Googleスライド
spotifyプレイリスト
天気
株価
最後に
今回は「kintoneの詳細画面に外部サイトを埋め込む方法」を紹介しました。
株式会社Crena（クレナ）では、中小企業様を中心に『低コスト&短納期』でのkintone導入を構築を支援しております。システムを構築する前段階である、業務の洗い出しから課題の抽出、最適な業務フローの構築からサポートいたしますので、まずはお気軽にご相談ください。
kintoneアプリ開発のご依頼は株式会社Crenaへ
| 会社名 | 株式会社Crena（クレナ） |
|---|---|
| TEL | 043-388-8819 |
| 設立 | 2020年8月 |
| 代表取締役 | 平野 賢太郎 (Hirano Kentaro) |
| 事業内容 |
クラウドソリューション事業 システム開発事業 ビジネスソリューション事業 |
| URL | https://create-new-air.com/ |
投稿者プロフィール
