2014 年 6 月 27 日に弊社池原 (@Neri78) がセッションさせていただいた内容です。製品の詳細につきましては http://jp.infragistics.com/NucliOS をご参照ください。

1. 池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
dikehara@infragistics.com
@Neri78
Xamarin 対応
iOS 用
UI コンポーネント
NucliOS のご紹介

2. 会社概要
名称 インフラジスティックス・ジャパン株式会社
設立 2006 年
所在地 東京都渋谷区神宮前 3-25-12
不二ビルディング原宿 3F
資本金 100,000,000 円
事業内容 ソフトウェア開発・販売
Design / Develop / Experience
http://jp.infragistics.com

3. はじめに

4. Q. 業務アプリで利用されているUIコントロール?
１
２
３
いずれもデータを扱ううえで必須
インプット
エディター
データ
チャート
データグリッド

6. ハイブリッド ネイティブ

7. ネイティブ
iPhone, iPad,
Android タブレット／スマートフォン、
Windows Phone 及び
Windows 8 タブレット用
ネイティブコントロール

8. ハイブリッド
Web 標準準拠、HTML5/jQuery
ネイティブ

9. Indigo Studio
Windows Forms
ASP.NET
WPF
Silverlight
Reporting
Ignite UI - HTML5/jQuery
Windows 8
NuCLiOS - iOS
Windows Phone
Icons

10. 3 つの
ポイント 開発生産性
パフォー
マンス
スタイリ
ング

11. NucliOS
概要

12. NucliOS
• ネイティブ iOS コントロール
• Objective-C, Xamarin 双方に対応

13. AppStore
“NucliOS” で検索!

14. 収録
コントロール
グリッド チャート ゲージ
カレンダー
フロー
レイアウト
タブ
バーコード オーバーレイ インジケーター
ラベル

15. Demo
サンプル ブラウザー

16. 開発生産性

17. 開発生産性
•機能が豊富であること
•（標準では）提供されて
いない UI パターンを
提供すること
•上記の設定が比較的容易に
実現できること

18. IGGridView
• UITableView と似た仕組みで複数列データ
の表示を可能にするグリッド コントロール
• データソースヘルパー クラスを提供してお
り、様々な機能をプロパティ ベースで利用
することができる
フィルタリン
グ
コンテキスト メ
ニュー
ロード用プルダ
ウン
ショートカット
バー
行移動 列移動 行削除 列削除
行挿入 列挿入 固定列 セクション表示
無限スクロー
ル
スライド行 ソート テーマ

19. Demo
標準 UITableView との差異
iOS 「らしい」機能を持ったグリッド

20. データ
ソース
ヘルパー
IGGridView
データソース ヘルパー
データ オブジェクト
表示部分を制御
ユーザーの操作から
ヘルパーに
データ操作を伝達
ソート、グループ化、
フィルタリングなど
のデータ処理
ロジックを
実装

21. “機能” を
“容易” に
実現
プロパティ設定
のみで様々な
機能を有効化
// DataSource Helper
IGGridViewDataSourceHelper helper = new
IGGridViewDataSourceHelper ();
// Disable AutoGenerateColumns
helper.AutoGenerateColumns = false;
// Column Definition
foreach (var column in columns) {
helper.ColumnDefinitions.Add (new LookupColumn (column));
}
// DataSource
helper.Data = data.ToArray();
// 列移動を有効化
helper.AllowColumnReordering = true;
// Use helper instance for grid's datasource
gridView.DataSource = helper;

22. 業務アプリで利用されているUIコントロール
１
２
３
いずれもデータを扱ううえで必須
インプットエ
ディター
データ
チャート
データグリッド

23. IGChartView
• 標準では提供されていない
• “Shared” コントロール
• WPF、Silverlight、Windows ストア、
HTML5
• 特に金融系で実績あり
• 様々な種類、トレンドラインを実現
エリア 棒 柱状 折れ線
ポイント スプライン 散布図 積層型
極座標 ラジアル 円 財務指標

24. Demo
Xamarin + NucliOS で実現する業務用モバイル アプリケーション

25. パフォーマンス

26. ユーザーが
モバイル アプリに
想定していること
「ヌルサク」といわれるような
軽快な操作感
考え抜かれた
ユーザーインターフェイス
タッチ＝早い！”perfomant”

27. Demo
予め、パフォーマンス チューニングを実施

28. スタイリング

29. NucliOS
+
テーマ
•予めいくつかの定義済み
テーマを提供
•コードによるカスタム テーマ
の作成にも対応

30. Demo
テーマの適用

31. カスタム
テーマ
IGChartThemeDefinition def = new IGChartThemeDefinition();
def.Font = UIFont.FromName("Helvetica", 12);
def.FontColor = new IGBrush(0,0,0,1);
def.LegendFont = UIFont.FromName("Helvetica", 12);
def.LegendFontColor = new IGBrush(0,0,0,1);
def.LegendBorderThickness = 1;
… 省略
IGChartPaletteItem item5 = new IGChartPaletteItem();
item5.Color = new IGBrush(0.98f,0.66f,0.06f,1);
item5.OutlineColor = new IGBrush(0,0,0,1);
def.SeriesPalettes.Add(item5);
IGChartPaletteItem axis = new IGChartPaletteItem();
axis.OutlineColor = new IGBrush(0.72f,0.72f,0.72f,1);
def.AxisPalette = axis;
chart.Theme = def;

32. 終わりに

33. NucliOS から得られるもの
開発生産性
パフォーマンス
スタイリング

34. UIコントロールを活用した開発
重要なポイント
設計にコンポーネントを合わせるのではなく、コンポーネントを
設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカ
バーできない仕様は、追加
開発の為の設計が必要
• 多機能なコンポーネントを前
提とすることで、多くの仕様
を吸収することが可能
• 早期に多くの機能を備えたプ
ロトタイプの実装が可能
実装（拡張） • 標準コントロールの拡張
• 単体テスト
• コンポーネントの機能の範囲
で仕様が決定している場合、
拡張は不要
本実装 • コーディング等負荷大
• 機能が増えればその分テス
トの負荷大
• プロパティベースの効率的な
開発
• 製品でテスト済みなので単体
テストの負荷小
結合テスト • Bugfixの負荷大
• パフォーマンスチューニン
グの負荷大
• Bugfixの負荷小
• パフォーマンスチューニング
の負荷小

36. リソース
• Infragistics NucliOS 製品ページ
http://jp.icons.infragistics.com/NucliOS
• NucliOS サンプル ブラウザー
http://bit.ly/NucliOSAppStore
• オンライン ヘルプ
http://help.jp.infragistics.com/iOS/201
4.1
• Blog
http://blogs.jp.infragistics.com/blogs/