kintoneにGoogleカレンダーやダッシュボードを埋め込む方法｜AIで作るiframeアプリ

「Googleカレンダーの休業日をkintoneを開くだけで確認したい」「Looker Studioのダッシュボードをkintoneの中に表示できないか」——kintoneを業務の中心にしている企業ほど、外部サービスの画面も一箇所にまとめたいという要望が出てきます。

この記事では、kintoneのアプリ画面に外部サービスをiframeで埋め込む方法を解説します。AIを活用してJSカスタマイズを生成する手順から、埋め込めるサービスの一覧、そして見落としがちな公開設定やセキュリティの注意点まで、実務で使える情報をまとめました。

この記事でわかること

kintoneにiframeで外部コンテンツを埋め込む仕組み
AIでJSカスタマイズを生成し、ノーコードで運用する方法
埋め込めるサービス一覧と、サービスごとの公開設定・注意点
埋め込む前に確認すべきセキュリティのポイント
ソトバコポータルのタブと組み合わせた活用例

iframeとは？kintoneに外部コンテンツを表示する仕組み

iframe（インラインフレーム）とは、Webページの中に別のWebページを表示する仕組みです。

たとえば、kintoneのアプリ画面の中にGoogleカレンダーの画面を表示したり、Looker Studioのダッシュボードを表示したりできます。kintoneを開くだけで外部サービスの情報が見られるため、画面の切り替えが不要になります。

ただし、kintone標準にはiframeで外部コンテンツを埋め込む機能がありません。実現するにはJSカスタマイズ（JavaScriptによるカスタマイズ）が必要です。

「JSカスタマイズなんて書けない」と思った方もご安心ください。この記事では、AIにコードを生成させる方法をご紹介します。

AIでiframe埋め込みアプリを作る

ステップ1：kintoneアプリを作成する

まず、kintoneで設定用のアプリを作成します。以下の4つのフィールドを追加してください。

フィールド名	フィールドコード	種類	用途
埋め込みURL	`embed_url`	文字列（1行）	iframeに表示するURL
表示高さ(px)	`embed_height`	数値	iframeの高さ（デフォルト600）
表示幅(px)	`embed_width`	数値	iframeの最大幅（空欄で制限なし）
タイトル	`embed_title`	文字列（1行）	画面に表示するタイトル

一覧ビューを2つ作成します。

表示 — iframe表示用のビュー
設定 — URL・サイズ変更用のビュー

ステップ2：AIにJSカスタマイズを生成させる

Claude、ChatGPT、GeminiなどのAIに、以下のような指示を出してコードを生成します。

kintoneのJSカスタマイズを作成してください。アプリのフィールド構成は以下の通りです。

embed_url（文字列）: iframeのsrc

embed_height（数値）: iframeの高さ

embed_width（数値）: iframeの最大幅

embed_title（文字列）: タイトル

要件：

一覧ビュー「表示」ではiframeを全画面表示（kintone標準UIを非表示）

一覧ビュー「設定」ではURL・サイズ・タイトルの設定フォームを表示

レコード1件のみで運用（設定アプリとして機能）

URLはhttpsのみ許可、cybozu.com/kintone.comドメインはブロック

iframeにはsandbox属性を設定

AIが生成したJSファイルを、kintoneのアプリ設定から「JavaScript / CSSでカスタマイズ」でアップロードすれば完了です。

ステップ3：設定画面からURLを登録する

コードをアップロードした後は、コードを触る必要はありません。

アプリを開き、「設定」ビューに切り替える
埋め込みたいサービスのURLを入力
表示サイズを調整して保存
「表示」ビューに切り替えると、iframeが表示される

URLや表示サイズの変更も、すべて設定画面から操作できます。

埋め込めるサービス一覧と注意点

iframe埋め込みに対応しているサービスは多数ありますが、ほとんどのサービスで何らかの公開設定が必要です。サービスごとの要件と注意点を整理しました。

Googleカレンダー

項目	内容
用途例	休業日カレンダー、会議室予約状況
必要な公開設定	カレンダーを「一般公開」にする
埋め込みURLの取得	カレンダー設定 → カレンダーの統合 → 埋め込みコード

注意: 一般公開にしたカレンダーは、URLを知っている人なら誰でも閲覧できます。商談名や顧客名が入った業務カレンダーは絶対に公開しないでください。埋め込み用に「休業日カレンダー」「会議室予約」など、見られても問題ない専用カレンダーを作成して使いましょう。

Looker Studio（旧Googleデータポータル）

項目	内容
用途例	売上ダッシュボード、KPI表示、アクセス解析
必要な公開設定	レポートの共有設定を「リンクを知っている全員」に変更
埋め込みURLの取得	ファイル → レポートを埋め込む → URLをコピー

注意: 「リンクを知っている全員」に公開すると、URLが流出した場合に社外からも閲覧できます。売上の詳細や顧客別の集計など、社外秘のデータを含むダッシュボードは慎重に判断してください。Google Workspaceを利用している場合は「組織内のユーザー」に限定する設定も検討しましょう。

Googleスプレッドシート

項目	内容
用途例	予算管理表、在庫一覧、共有データ
必要な公開設定	共有設定を「リンクを知っている全員」に変更
埋め込みURLの取得	ファイル → 共有 → ウェブに公開 → 埋め込み

注意: ウェブに公開すると、URLを知っている人は誰でもスプレッドシートを閲覧できます。個人情報や社外秘の数値データを含むシートは公開しないでください。

Googleフォーム

項目	内容
用途例	社内アンケート、日報入力、フィードバック収集
必要な公開設定	フォームを公開するだけでOK（回答データは非公開）
埋め込みURLの取得	送信 → 埋め込みアイコン → URLをコピー

注意: フォーム自体は公開されますが、回答データは公開されないため比較的安全です。ただし、個人情報を収集するフォームの場合は、Googleフォーム側で回答者の制限（組織内のユーザーのみ等）を設定することを推奨します。

YouTube

項目	内容
用途例	社内研修動画、製品説明、操作マニュアル動画
必要な公開設定	「限定公開」でOK
埋め込みURLの取得	動画の共有 → 埋め込む → URLをコピー

注意: 限定公開の動画はURLを知っている人なら視聴できます。iframe経由で埋め込むとそのURL自体がページのソースコードから確認できる点に注意してください。完全に非公開の動画は埋め込みできません。

Notion

項目	内容
用途例	社内Wiki、業務マニュアル、ナレッジベース
必要な公開設定	ページを「Web公開」にする
埋め込みURLの取得	ページ右上の共有 → Web公開 → リンクをコピー

注意: 公開したページからリンクで繋がっている他のページも公開される場合があります。公開範囲を事前に確認し、埋め込み用の独立したページを作成することを推奨します。

Power BI

項目	内容
用途例	業務ダッシュボード、経営指標、データ分析
必要な公開設定	「Webに公開」設定が必要
埋め込みURLの取得	ファイル → レポートの埋め込み → Webに公開

注意: 「Webに公開」するとURLを知っている人は誰でもアクセスできます。Power BI Proライセンスをお持ちの場合は「組織内に公開」オプションも検討してください。

Googleマップ（マイマップ）

項目	内容
用途例	拠点マップ、営業エリア表示、店舗一覧
必要な公開設定	マイマップを「リンクを知っている全員」に公開
埋め込みURLの取得	マイマップ → 共有 → サイトに埋め込む

注意: 顧客住所や個人情報を含むマップは公開しないでください。拠点や営業エリアなど、公開情報のみで構成した専用マップを作成しましょう。

埋め込む前に確認すべき3つのポイント

iframeによる埋め込みは便利ですが、公開設定にはリスクが伴います。安易に埋め込んで情報漏洩につながることがないよう、以下の3つのポイントを必ず確認してください。

ポイント1：公開設定＝社外にも見える可能性がある

iframeで外部サービスを埋め込むには、そのサービスのコンテンツを「URLでアクセスできる状態」にする必要があります。これは、kintoneにログインしていない人でもURLを直接開けば閲覧できることを意味します。

kintoneのアクセス権限はiframeの中のコンテンツには適用されません。kintoneにログインできるユーザーだけが見られるのはkintoneのアプリ画面であり、iframe内のコンテンツの閲覧制限は埋め込み元のサービス側で管理する必要があります。

ポイント2：社外秘データは埋め込まない

ダッシュボードや管理表に顧客情報や売上詳細が含まれている場合、URLの流出がそのまま情報漏洩になります。

埋め込む対象は、以下のような見られても問題ないコンテンツに限定してください。

会社の休業日カレンダー
公開可能なKPI（目標達成率の概要など）
社内アンケートフォーム
研修動画や操作マニュアル
拠点マップ

ポイント3：既存の資料をそのまま埋め込まない

業務で使っているカレンダーやスプレッドシートをそのまま公開して埋め込むのは危険です。後から社外秘の情報が追記される可能性があります。

埋め込み用の専用コンテンツを作成することを強く推奨します。たとえば、業務カレンダーとは別に「休業日カレンダー」を新規作成し、それだけを公開・埋め込みに使うようにしましょう。

セキュリティ対策：アプリ側でできること

iframe埋め込みアプリのJSカスタマイズ側でも、いくつかのセキュリティ対策を施すことができます。

httpsのみ許可

埋め込みURLをhttps（暗号化通信）に限定し、httpのURLは拒否します。通信の盗聴やデータの改ざんを防止できます。

cybozu.com / kintone.comドメインのブロック

kintone自身のURL（cybozu.com、kintone.com）をiframeに埋め込むことをブロックします。kintoneの画面をiframe内に表示すると、操作権限を悪用されるリスクがあるためです。

sandbox属性の設定

iframeに sandbox 属性を設定し、埋め込みコンテンツの権限を必要最小限に制限します。外部コンテンツが勝手にファイルをダウンロードしたり、ページ全体を書き換えたりすることを防ぎます。

アプリのアクセス権限

kintoneのアプリ設定で、レコードの閲覧・編集権限を制限できます。URL設定の変更を管理者だけに限定すれば、意図しないURLへの変更を防止できます。

レコード閲覧: 全ユーザーに許可（iframeを表示するため）
レコード編集: 管理者のみに制限（URL変更の権限）
レコード追加: 管理者のみに制限

ソトバコポータルと組み合わせた活用例

iframe埋め込みアプリを単体で使うだけでなく、ソトバコポータルのタブ機能と組み合わせることで、さらに便利に活用できます。

タブごとに異なるコンテンツを配置

ソトバコポータルのタブに、それぞれ異なるiframe埋め込みアプリを割り当てると、1つのポータルで複数のコンテンツを切り替えて表示できます。

タブ名	埋め込むコンテンツ
カレンダー	Googleカレンダー（休業日・イベント）
ダッシュボード	Looker Studio（売上概要）
マニュアル	Notion（業務マニュアル）
研修動画	YouTube（新人研修プレイリスト）

kintoneを開くだけで、業務に必要な情報がすべて揃っている状態を作れます。

タブの閲覧権限でアクセス制御

ソトバコポータルにはタブごとに閲覧権限を設定する機能があります。

たとえば、経営ダッシュボードのタブは経営層だけに表示し、研修動画のタブは新入社員だけに表示する、といった使い分けが可能です。iframe内のコンテンツ自体は公開状態ですが、そのコンテンツが埋め込まれたタブの存在を知らなければアクセスする手段がない、という形で運用上のリスクを軽減できます。

タブの設計方法について詳しくは「ソトバコポータルのタブ設計ガイド｜3つのパターンで迷わず作れる」をご覧ください。

まとめ

kintoneにiframeで外部サービスを埋め込むには、JSカスタマイズが必要
AIを使えばコードを自動生成でき、運用はノーコードの設定画面から操作可能
Googleカレンダー、Looker Studio、YouTube、Notionなど多くのサービスが埋め込みに対応
ほとんどのサービスで公開設定が必要。社外秘データは埋め込まず、専用コンテンツを作成するのが鉄則
ソトバコポータルのタブと組み合わせれば、kintoneを開くだけで必要な情報がすべて揃う環境を構築できる

ソトバコポータルは、kintoneのポータルを部署別に整理し、タブで情報を見せ分けるサービスです。iframe埋め込みアプリとの組み合わせで、kintoneをさらに便利に活用してみませんか？

ソトバコポータルの詳細を見る