Garoonにkintoneアプリを表示する方法を比較しました（HTML vs iframe）

（著者：サイボウズ 性能検証担当）

Index

• はじめに
• 方法①：HTMLタグを使う
• 方法②：iframeタグを使う
• 検証実施
• 検証結果
• メリットとデメリット
• まとめ
• （参考）サンプルプログラム

はじめに

Garoonのポータルにkintoneアプリを表示する場合、レコード一括取得REST API でレコードを取得し、HTMLタグ(tableタグ等)で表示するHTMLポートレットを作成する方法がよくあると思います。(以下、「方法①：HTML」)

上述以外では、HTMLポートレット内にiframeタグのみ記載し、kintoneアプリを埋め込み表示する方法があります。(以下、「方法②：iframe」)

この記事では、2つの方法の比較について、動作検証の結果とともに紹介していきたいと思います。

方法①：HTMLタグを使う

レコード一括取得REST API でレコードを取得し、取得したレコードをHTMLタグで表示を整えます。

Garoonの実装方法としては、ファイル管理にJavascriptファイルとCSSファイルを登録し、HTMLポートレットには登録したファイル管理を呼び出す処理を記載しています。

方法②：iframeタグを使う

GaroonのHTMLポートレット内には、以下のように、シンプルにiframeタグを利用したkintoneアプリへのURLのみを記述します。

iframe表示するとkintone画面のヘッダー部等の不要な部分は表示されないよう自動調整されます。

検証実施

上述の2つの方法では、動作に差があるのでしょうか。

以下の条件の下検証し、サーバー応答秒数を確認しました。

検証環境

• 2018年 9月版
• cybozu.com検証環境
• 案件管理アプリ※：10万件

※ 案件管理アプリはアプリストアで公開しているものを利用

検証条件

• 絞り込み：[案件担当者名]がログインユーザー、[見込み時期]が2015年8月31日以降
• ソート：[見込み時期]の降順
• 件数：100件

検証内容

• ユーザー300名が以下のシナリオでcybozu.comへアクセスする負荷検証
• シナリオによるアクセス以外にはcybozu.comへアクセスがない環境で検証
• シナリオ手順
  1. cybozu.comにログインする
  2. Garoonのポータルを表示する
  3. cybozu.comからログアウトする

検証結果

• 応答秒数の比較を見ると、「方法②：iframe」は、「方法①：HTML」に比べて検証開始17分ごろから応答秒数が長くなっていることがわかります。
• 「方法①：HTML」ではレコード一括取得APIを1回実行しているだけですが、「方法②：iframe」は、iframe表示時に実行されるレコード一括取得以外の内部APIが呼び出されます。それが影響し今回の検証条件下では、「方法②：iframe」の方が応答秒数の伸びるタイミングが早かったと考えます。
• 今回の検証で利用した「方法①：HTML」のHTMLポートレット内容は、レコード一括取得REST APIを1回のみ実行するシンプルな内容になっています。
• 利用目的に合わせて、レコード一括取得を複数回実行したり、レコード更新処理を追加したりとコードが複雑化することで、「方法①：HTML」の応答秒数も早いタイミングで長くなりkintone全体負荷にも影響することが想定されます。

メリットとデメリット

「方法①：HTML」、「方法②：iframe」の一般的なメリットとデメリットをまとめました。 

「方法①：HTML」

• ○: 利用目的に合わせて好きなようにHTMLタグを記述することができる。
• ×: コード作成にある程度時間が必要となり、コードが複雑化しやすい。

「方法②：iframe」

• ○: iframeタグの記述のみで動作するため、コード作成が容易。
• ○: kintoneアプリを埋め込んでいるため、直接kintoneを開いたように操作できる。
  • 例として、フィールド名をクリックしてソート、レコード一覧画面でのレコード編集など
  • kintoneをiframe表示すると、画面ヘッダー部等の不要な部分は表示されないよう自動調整される点

まとめ

Garoonにkintoneアプリを表示する場合の方法2つを比較してみました。iframe表示する方法は簡単にチャレンジできるので是非参考にしていただければと思います。

今回はシンプルな処理をHTMLポートレットで実装し、ポータルに1つ配置しました。
しかし、利用状況(例：利用ユーザー数、取得データ量、取得データ操作)によって、応答秒数は変わってきます。

2つの方法で共通することですが、ポータルにHTMLポートレットは配置しすぎないよう留意ください。
常時、参照する必要がない情報であれば、別ポータルに分けて配置するなど、必要な時のみデータを
取得するような仕組みを検討してください。 

（参考）サンプルプログラム

参考までに、検証に使用したサンプルプログラムを公開します。Garoonとkintoneの環境の準備については以下を参考にしてください。
注: お客様環境と環境設定等すべてが同等ではないことを留意ください。

サンプルコード（GaroonSample.zip）のダウンロードはこちら

1. kintone アプリの作成

kintoneはアプリストアより「案件管理アプリ」はアプリストアで公開しているものを利用します。

アプリの作成方法は、kintoneヘルプ -アプリストアからアプリを追加する- をご確認ください。

サンプルプログラムに対応して、会社名、部署名、先方担当者、見込み時期、案件担当者名、製品名のフィールドコードを、
フィールド名と同じになるように変更する必要があります。（例: 会社名のフィールドコードのデフォルト「文字列__1 行_」を「会社名」に変更）

また、JavaScript側のクエリで「案件担当者名」をログインユーザーである絞り込みを行っているため、
「案件担当者名」がログインユーザーであるレコードを適宜ご用意ください。

2. 必要なリソースの準備

ダウンロードしたサンプルコードについて、次のように環境に合わせて書き換えてください。

• GaroonSample.zip の内容 
  • JavaScriptファイル：script.js（10行目のkintone アプリIDを環境に合わせて書き換えてください）
  • CSSファイル：style.css
    ⇒ script.js および style.css は、ファイル管理等にアップロードします。
  • HTMLポートレットのソース：
    • html.txt（2行目と13行目のファイルのURL※を環境に合わせて書き換えてください） 
      ※Garoonのファイル管理に登録されたファイルの場合、URLは、ファイル管理のダウンロードボタンを右クリックし「リンクのアドレスをコピー」で取得できます。
    • iframe.txt（1行目のkintone アプリのURL※を環境に合わせて書き換えてください）
      ※kintone アプリを開いたときのURLです。 例）https://{subdomain}.cybozu.com/k/1

3. Garoon HTMLポートレットの追加

2. の手順で準備したHTMLポートレットのソースを用いて、Garoon のHTMLポートレットを追加します。
HTMLポートレットの作成方法は、Garoon ヘルプ - HTMLポートレットを追加する　クラウド版・パッケージ版 をご確認ください。 

以上で検証に必要な準備ができました。実際の検証方法については本記事には記載しておりません。

このTipsは、2018年9月版 kintoneを検証環境で確認したものになります。

 Top