kintoneにGoogle Driveのファイルを表示・埋め込む方法（無料）

契約書や見積書をGoogle DriveやBoxで管理していると、kintoneのレコードとファイルを行き来するのが面倒になりがちです。この記事では、無料プラグインでレコード画面にGoogle Drive・Boxのフォルダを直接埋め込んで表示する方法を、実際の設定画面と、許可していないサイトのURLが自動的にブロックされる挙動つきで解説します。

→ 対応プラグインを見る

執筆者: 羽鳥達郎(合同会社Pons) ／ kintoneアプリデザインスペシャリスト・基本情報技術者・cybozuオフィシャルパートナー ※本サイトで配布するプラグインは、サイボウズ株式会社のオフィシャルプロダクトではありません。

こんな方におすすめ

kintone標準機能ではどこまでできるか

kintoneの標準機能にはリンク(LINK)フィールドがあり、URLをクリック可能なリンクとして表示できますが、クリックすると別タブが開くだけで、レコード画面の中にフォルダの中身を埋め込んで表示することはできません。JavaScriptカスタマイズを自作すれば<iframe>での埋め込み自体は実現できますが、Google Drive・Boxそれぞれの埋め込み専用URLへの変換や、任意のドメインを埋め込めてしまわないようにする安全対策まで考慮すると、簡単な作業ではありません。

JavaScript自作・他社プラグインとの比較、なぜGovAppsプラグインか

「Google Drive・Boxのフォルダをkintoneのレコード画面に埋め込む」機能を用意する方法は、大きく4つあります。それぞれの向き不向きをまとめました。

方法	向いている場合	注意点
kintone標準のリンクフィールドのみ	別タブでの確認で構わない場合	レコード画面内にフォルダの中身を埋め込めない
JavaScriptを自作する	社内に開発者がいて、独自の埋め込みUIが必要な場合	URL変換・許可ドメインの検証の実装・保守が必要
有料の他社プラグイン	予算があり、より多くの外部サービス連携を求める場合	月額課金が発生する。ソースコードが非公開で、外部通信の有無を利用者側で確認しにくいことが多い
GovAppsプラグイン(このプラグイン)	無料で試したい、社内・庁内でセキュリティを確認してから導入したい場合	対応サービスはBox・Google Driveの2つのみ

GovAppsのプラグインはすべて無料・広告なしで、追加課金なしで使い続けられます。ソースコードはGitHubで全公開しているオープンソースなので、「どのドメインへの埋め込みを許可しているか」を自治体・企業のセキュリティ担当者自身の目で確認できます(このプラグインも個別ページにセキュリティレビュー結果を掲載しています)。

box・googleドライブ埋め込みプラグインでの実現方法

box・googleドライブ埋め込みプラグインは、表示先のスペースフィールド・埋め込みURLフィールド・サービス(Box/Googleドライブ)を設定するだけです。今回は「フォルダ名」「フォルダURL」を持つアプリで設定しました。

「埋め込みを追加」でタブを作り、タブ名を入力する
今回は「契約書フォルダ」というタブ名にしました。
表示先スペースフィールド・埋め込みURLフィールド・サービスを選ぶ
あらかじめフォームに配置した「スペース」フィールドと、URLを保持する「フォルダURL」 (文字列1行)フィールドを選び、サービスは「Googleドライブ」にしました。
幅・高さを指定して保存し、アプリを更新する
幅600px・高さ400pxにしました。保存しただけではプレビュー状態のため、必ず「アプリを更新」まで行います。

box・googleドライブ埋め込みプラグインの設定画面。タブ名「契約書フォルダ」、表示先スペースフィールド、埋め込みURLフィールドに「フォルダURL」、サービスに「Googleドライブ」、幅600px・高さ400pxを設定した状態のスクリーンショット。

実行結果: 許可ドメインは埋め込み表示、それ以外は自動的にブロック

フォルダURLに実在するGoogle Driveのフォルダ共有リンク(https://drive.google.com/drive/folders/...) を入力してレコードを保存すると、詳細画面ではそのURLがGoogle Drive純正のリスト表示用埋め込みURL(https://drive.google.com/embeddedfolderview?id=...#list)へ自動的に変換され、iframeとして描画されます。Boxの共有リンク(https://app.box.com/s/...) を指定した場合も、同様にBox純正の埋め込み専用URLへ変換されます。

一方、許可リストに無いドメイン(Google Drive・Box以外)のURLを入力した場合は、iframeを描画せず、「埋め込みURLの形式が正しくないか、許可されていないサイトのため表示できません。」という案内だけを表示します。意図しないサイトを画面内に埋め込んでしまう事故を防ぐ安全対策です。

レコード詳細画面。フォルダURLに許可リストに無いドメイン(example.com)のURLが入力されており、iframeの代わりに「埋め込みURLの形式が正しくないか、許可されていないサイトのため表示できません。」というメッセージが表示されている状態のスクリーンショット。

URLが未入力の場合も同様にiframeは描画されず、「埋め込みURLが設定されていません。」という案内が表示されるだけなので、画面が壊れて見えることはありません。

あわせて確認したいポイント

埋め込み先ドメインはサービスごとにサーバーサイドではなくクライアント側の許可リストで判定しています(Box: box.com、Google: drive.google.com/docs.google.com)。https以外のプロトコルも拒否されます。
埋め込みURLフィールドの値は、レコード保存や画面描画に使う前にURLとしてパースできるかを検証してから使います。パースできない値・許可外ドメインはiframeを生成せず、案内メッセージのみをtextContentで表示します(innerHTMLは使いません)。
1つのアプリに複数の埋め込みタブを設定でき、タブUIで切り替えて表示できます。
Google Driveのフォルダを埋め込むには、そのフォルダが「リンクを知っている全員」等、埋め込み表示できる権限で共有されている必要があります(プラグイン個別ページのセキュリティレビューサマリ参照)。

対応するプラグイン

無料プラグイン

box・googleドライブ埋め込みプラグイン

URLフィールドの値をもとに、Box・Google Driveのフォルダをレコード画面に埋め込み表示

プラグイン詳細を見る →