cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

Ignite UI (インフラジスティックス・ジャパン株式会社)

作成日
更新日

（著者：インフラジスティックス・ジャパン株式会社 山口 慧）

はじめに

こんにちは、インフラジスティックスの山口です。
本tipsでは、kintoneのユーザインタフェースをカスタマイズする際に「Ignite UI」を利用して、どの様な事が実現できるのか、またその方法をご紹介いたします。

Ignite UIとは？

Ignite UIは、HTML5/jQueryをベースにしたユーザインタフェース構築部品の有償ライブラリです。
kintoneで標準的に提供されているユーザインタフェースでは、「要件にマッチしない」、「機能が足りない」などの理由から工数をかけてカスタマイズを行う事がありますが、
Ignite UIを利用することで多機能かつリッチなUIを容易に実現することができます。

実現例 / 紹介

Ignite UIを利用したkintoneのカスタマイズ例をいくつか紹介します。 ここで紹介している例は、デモ環境で実際に触っていただく事もできるので デモ環境で試す をご確認下さい。

【例１】一覧の一括編集 / Excel出力

  • レコード一覧上での、横断的な複数レコードの直接編集(縦編集含む)及び一括更新
  • クライアントサイドでの 複数列ソート / 即時フィルタ
  • エクセル出力(クライアントサイドのみでExcelを生成し出力します。)

この例では、カスタマイズ形式の一覧を用意し、Ignite UIの igGrid コントロールと igExcelEngine フレームワークを利用して画面を構築しています。
また、その他にも以下のような事も容易に行えます。

  • クライアントサイドでの 列入替 / 列表示切替え / 幅変更
  • グループ化表現や集計表示
  • 同値セルの結合
  • 複数列ヘッダ表現
  • 階層表現による子レコードの表示
  • レスポンシブ対応（グリッドサイズに応じて列表示の切替えや表示テンプレートの切替えを行う）
  • セルの仮想化による描画性能の担保
    etc…

【例２】セルフBI画面

  • ユーザー操作によるインタラクティブなクロス集計
  • ディメンションやメジャーのドラッグ&ドロップによる直感的な切り替え操作
  • ドリルダウン操作（＋インジケータの展開）による集計の細分化
  • ディメンションのフィルタやソート
  • クロス集計に応じたチャートの表示及び動的な切り替え

この例では、カスタマイズ形式の一覧を用意し、Ignite UIの igPivotGrid コントロールと igDataChart コントロールを利用して画面を構築しています。

【例３】一覧情報のマッピング

  • 地図上に案件情報をプロット
  • データに応じて大きさや色など変更
  • ツールチップに詳細な情報を表示
  • クリック/タップ時に特定の画面に遷移させる

この例では、カスタマイズ形式の一覧を用意し、Ignite UIの igMap コントロールを利用して画面を構築しています。

デモ環境で試す

上記の「実現例」で紹介している各画面イメージをkintoneのデモ環境で実際にお試しいただけます。
デモ環境へのアクセス方法については、本ページ末尾の「最後に」に記載されている連絡先までお問合せ下さい。

利用イメージ

ここでは案件管理アプリ上にカスタマイズ形式の一覧を追加し、Ignite UIのigGridコントロールを利用して一覧の情報を表示する例に沿って、利用イメージを説明します。

利用手順は大きく分けて３ステップあります。

  1. ライブラリの追加
  2. HTMLの記述
  3. スクリプトの記述と追加

1．ライブラリの追加

Ignite UIはjQueryベースのUIコントロールライブラリです。利用いただく際には、"JavaScript / CSSでカスタマイズ"ページより、jQuery及びjQuery UIの参照を追加します。
ファイルを直接アップロードするか、Cybozu CDN上にアップされているリンクを「URL指定で追加」します。
jQueryを追加したら、続いてIgnite UIのライブラリも追加します。Ignite UIはセキュアCDNとしても提供されているので、必要な参照パスを「URL指定で追加」します。
ファイルサイズによる初期表示速度の低下を特に考慮しない場合は、下記の５ファイルを読み込むことでIgnite UIの全コントロールを利用することができます。
※下記はトライアル版であるため、実行時に”Ignite UI Trial Version”という文字が画面右下に表示されます。

  1. 日本語リソースファイル１：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/i18n/infragistics-ja.js
  2. Ignite UIの共通モジュール：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js
  3. データ視覚化系のコントロール：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.dv.js
  4. データ視覚化系以外のコントロール：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.lob.js
  5. 日本語リソースファイル２：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/modules/i18n/regional/infragistics.ui.regional-ja.js

※注：ファイルサイズを極力小さくし、画面初期ロード時間を短縮させる場合は、コントロール毎や機能毎に細分化されたファイルを読み込みませる事も可能です。

Javascriptファイルと同様に、CSSファイルについても追加します。

  1. InfragisticsコアCSS：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css 
  2. Infragisticsテーマファイル：https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css

※この例では、データ視覚化系のコントロールは利用しないため、「infragistics.dv.js」はアップロードしていません。

2．HTMLの記述

jQuery及びIgnite UIのライブラリが追加されたら、実際にIgnite UIのコントロールを利用してみましょう。この例ではカスタマイズ形式の一覧を追加しますが、
標準の一覧や詳細画面においてjQueryやJavascriptの記述でUIを追加する事も可能です。
「一覧の追加」からカスタマイズ形式の一覧を新たに追加します。以下の図のように、HTMLにはTableタグを1つだけ用意し、idを指定します。

idに”grid”を設定していますが、後々jQueryのid指定でこのTable属性にグリッドコントロール（一覧）を生成します。
グリッドを生成する際のid指定の記述と一致していれば任意の文字列で構いません。

3．スクリプトの記述と追加

続いて、igGridコントロールを使ったスクリプトを記述して登録します。
以下のソースコードで行っている主な処理は、kintone APIのevent.recordsより一覧に表示する情報を取得し、
その一覧の情報をデータソースとしてigGridコントロールを生成するというものです。igGridの生成時にdataSourceオプション以外にも各種設定を行っていますが、
詳細はIgnite UI APIヘルプをご参考にしてください。

※注 columnsオプションの設定で列幅や表示/非表示を変更していますが、ここでのkey値とkintone側の各フィールドの”フィールドコード”と一致している必要があります。

kintone API経由で一覧の情報を取得する際にcreateJsonDatasetsFromKintoneRecordsメソッドを通して取得していますが、
これはkintoneから受け渡されるjson形式のデータがフィールドごとのtype（数値、日付、ユーザー選択など）によってigGridへのバインディングに適さない形になっているため、
それを適した形に整形するものです。
以下のコードのようにtype毎に適した型及びフラットな構造に変換し返しています。（※全てのフィールドtypeを網羅しているわけではありませんのでご注意ください。）
createJsonDatasetsFromKintoneRecordsメソッドは以下の通りです。

これで準備完了です。 上記のスクリプトを含んだjsファイルを「アップロードして追加」します。

それでは、実行結果をみてみましょう！

クライアントサイドでフィルタやソート、列幅変更や列入替えができる一覧表が完成しました。 これを元に、一覧上での編集を許可させて編集内容をREST APIで一括更新したり、Excel出力の処理を加えたり・・・いろいろな事ができるようになりそうですね！

サポート対象ブラウザ

IE, Edge, Chrome, Fire Fox, Safariなどモバイルを含む主要なブラウザはカバーしております。詳細は以下のページの「JQUERY/HTML5」よりご確認下さい。

サポート環境：
http://jp.infragistics.com/support/supported-environments

その他リソース

最後に

Ignite UIは、kintoneのユーザインタフェースをよりリッチで使いやすいものとしてユーザーへ提供できる開発ツールです。
本記事では、Ignite UIを使ってできる事の一部分しか紹介していませんが、是非 オンラインサンプル や 開発ガイド を参考にkintoneユーザーへどのようなUI/UXを提供できるのか、一度検討してみてはいかがでしょうか？

なお、Ignite UIは有償のライブラリですが、無償トライアルから始めることができます。また、ご利用の際には技術サポートも受けることが可能です。
ライセンスに関するご不明点や具体的な案件への適用可否など、何でもお気軽にお問い合わせください。

インフラジスティックス・ジャパン株式会社
担当: 山口 慧（やまぐち さとる）
Tel: 050-1745-6258
Email: JapanSalesGroup@infragistics.com

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。