box・googleドライブ埋め込みプラグイン
URLフィールドに埋め込み用URLを入力すると、レコードの詳細・作成・編集画面の指定したスペースに、 BoxまたはGoogleドライブの埋め込みビューを表示します。契約書やプロジェクト資料のフォルダを、 kintoneのレコード画面から直接確認できるようになります。
ユースケース
案件レコードに「契約書フォルダURL」フィールドを持たせ、Boxの共有リンクを入力しておくと、レコードを開くたびに最新のフォルダ内容がその場で確認できます。ファイルをkintone側にアップロードし直す必要がありません。
「見積書」「契約書」「納品物」のように用途別にBox/Googleドライブのフォルダを分けている場合、埋め込みをタブごとに複数設定できます。タブを切り替えて必要な資料だけを表示できます。
プロジェクトの詳細画面にGoogleドライブのフォルダを埋め込み、議事録やデザインファイルなどをレコードを開くだけで一覧できるようにします。フォルダの中身が更新されても、URLはそのままなので設定変更は不要です。
Googleドライブのファイル(スプレッドシート・ドキュメント等)の共有リンクを直接埋め込み用URLに指定すれば、フォルダだけでなく単一ファイルのプレビュー表示にも利用できます。
セットアップ手順
- アプリのフォームに、埋め込み表示先となる「スペース」フィールドを配置する。
- 同じフォームに、埋め込み用URLを保持する「文字列(1行)」または「リンク」フィールドを配置する。
- プラグインをアプリに追加し、設定画面を開く。
- 「+ 埋め込みを追加」で埋め込み枠を作成し、表示先スペースフィールド・URLフィールド・サービス(Box / Googleドライブ)・幅高さを選択して保存する。
- レコードのURLフィールドに、Boxの共有リンク(
https://app.box.com/s/…)またはGoogleドライブの共有リンク(https://drive.google.com/…)を入力する。 - レコードの詳細・作成・編集画面を開くと、指定したスペースに埋め込みビューが表示される。
複数の埋め込みを設定すると、レコード画面にタブとして切り替え表示されます。
セキュリティレビュー結果サマリ
kintoneセキュアコーディングガイドラインに沿って実装時にチェックしています。特に重要な点は次のとおりです。
- 埋め込み用URLは「https://から始まる」「Box(box.com)またはGoogleドライブ(drive.google.com/docs.google.com)のドメインのみ」を許可するチェックを行ってから画面に埋め込んでおり、それ以外のURLやhttpのURLは表示されません。
- 入力値(タブ名・URL等)を画面に表示する際はすべて
textContentを使っており、任意のHTMLが実行される穴(XSS)はありません。 - 外部サーバーへの通信(fetch/XHR)は一切行いません。表示は
iframeによる埋め込みのみです。 - 外部ライブラリを一切使用せず、vanilla JavaScriptのみで実装しています。
- 認証情報・APIキーのやり取りは行いません(埋め込みURLは利用者が手動で入力する共有リンクのみ)。
詳細な確認項目・確認日は下記GitHubのチェックリストに全項目を掲載しています。
設定画面イメージ
API実行数について
このプラグインはREST APIを一切実行しません。フィールド・レイアウトの取得は
kintone.app.getFormLayout()等のJavaScript APIのみで行い、レコード画面での動作は
iframeへの埋め込み表示のみで完結します。API実行数制限に影響することはありません。