照明制御 アプリケーション (Windows 版) ユーザー …...1 ユーザーズ・マニュアル 1.11..1. 概概要要概要 概要 1111----1.11..1. 概概要要概要 概要
NucliOS 概要
-
date post
20-Aug-2015 -
Category
Technology
-
view
460 -
download
1
Transcript of NucliOS 概要
![Page 1: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/1.jpg)
池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
@Neri78
Xamarin 対応iOS 用UI コンポーネントNucliOS のご紹介
![Page 2: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/2.jpg)
会社概要名称 インフラジスティックス・ジャパン株式会社
設立 2006 年
所在地 東京都渋谷区神宮前 3-25-12
不二ビルディング原宿 3F
資本金 100,000,000 円
事業内容 ソフトウェア開発・販売
Design / Develop / Experience
http://jp.infragistics.com
![Page 3: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/3.jpg)
はじめに
![Page 4: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/4.jpg)
Q. 業務アプリで利用されているUIコントロール?
1
23
いずれもデータを扱ううえで必須
インプットエディター
データチャート
データグリッド
![Page 5: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/5.jpg)
![Page 6: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/6.jpg)
ハイブリッド ネイティブ
![Page 7: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/7.jpg)
ネイティブiPhone, iPad, Android タブレット/スマートフォン、Windows Phone 及びWindows 8 タブレット用ネイティブコントロール
![Page 8: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/8.jpg)
ハイブリッドWeb 標準準拠、HTML5/jQuery
ネイティブ
![Page 9: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/9.jpg)
Indigo Studio
Windows Forms
ASP.NET
WPF
Silverlight
Reporting
Ignite UI - HTML5/jQuery
Windows 8
NuCLiOS - iOS
Windows Phone
Icons
![Page 10: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/10.jpg)
3 つのポイント 開発生産性
パフォー
マンス
スタイリ
ング
![Page 11: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/11.jpg)
NucliOS概要
![Page 12: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/12.jpg)
NucliOS
• ネイティブ iOS コントロール
• Objective-C, Xamarin 双方に対応
![Page 13: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/13.jpg)
AppStore
“NucliOS” で検索!
![Page 14: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/14.jpg)
収録コントロール
グリッド チャート ゲージ
カレンダーフロー
レイアウトタブ
バーコード オーバーレイ インジケーター
ラベル
![Page 15: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/15.jpg)
Demoサンプル ブラウザー
![Page 16: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/16.jpg)
開発生産性
![Page 17: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/17.jpg)
開発生産性•機能が豊富であること
•(標準では)提供されていない UI パターンを提供すること
•上記の設定が比較的容易に実現できること
![Page 18: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/18.jpg)
IGGridView
• UITableView と似た仕組みで複数列データの表示を可能にするグリッド コントロール
• データソースヘルパー クラスを提供しており、様々な機能をプロパティ ベースで利用することができる
フィルタリング
コンテキスト メニュー
ロード用プルダウン
ショートカットバー
行移動 列移動 行削除 列削除
行挿入 列挿入 固定列 セクション表示
無限スクロール
スライド行 ソート テーマ
![Page 19: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/19.jpg)
Demo標準 UITableView との差異
iOS 「らしい」機能を持ったグリッド
![Page 20: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/20.jpg)
データソースヘルパー
IGGridView
データソース ヘルパー
データ オブジェクト
表示部分を制御ユーザーの操作から
ヘルパーにデータ操作を伝達
ソート、グループ化、フィルタリングなど
のデータ処理ロジックを
実装
![Page 21: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/21.jpg)
“機能” を“容易” に実現
プロパティ設定のみで様々な機能を有効化
// DataSource HelperIGGridViewDataSourceHelper helper = new IGGridViewDataSourceHelper ();
// Disable AutoGenerateColumnshelper.AutoGenerateColumns = false;
// Column Definitionforeach (var column in columns) {
helper.ColumnDefinitions.Add (new LookupColumn (column));}
// DataSourcehelper.Data = data.ToArray();
// 列移動を有効化helper.AllowColumnReordering = true;
// Use helper instance for grid's datasourcegridView.DataSource = helper;
![Page 22: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/22.jpg)
業務アプリで利用されているUIコントロール
1
23
いずれもデータを扱ううえで必須
インプットエディター
データチャート
データグリッド
![Page 23: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/23.jpg)
IGChartView
•標準では提供されていない
• “Shared” コントロール• WPF、Silverlight、Windows ストア、HTML5
• 特に金融系で実績あり
•様々な種類、トレンドラインを実現
エリア 棒 柱状 折れ線
ポイント スプライン 散布図 積層型
極座標 ラジアル 円 財務指標
![Page 24: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/24.jpg)
DemoXamarin + NucliOS で実現する業務用モバイル アプリケーション
![Page 25: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/25.jpg)
パフォーマンス
![Page 26: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/26.jpg)
ユーザーがモバイル アプリに想定していること
「ヌルサク」といわれるような軽快な操作感
考え抜かれたユーザーインターフェイス
タッチ=早い!”perfomant”
![Page 27: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/27.jpg)
Demo予め、パフォーマンス チューニングを実施
![Page 28: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/28.jpg)
スタイリング
![Page 29: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/29.jpg)
NucliOS+テーマ
•予めいくつかの定義済みテーマを提供
•コードによるカスタム テーマの作成にも対応
![Page 30: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/30.jpg)
Demoテーマの適用
![Page 31: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/31.jpg)
カスタムテーマ
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;
![Page 32: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/32.jpg)
終わりに
![Page 33: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/33.jpg)
NucliOS から得られるもの
開発生産性
パフォーマンス
スタイリング
![Page 34: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/34.jpg)
UIコントロールを活用した開発
重要なポイント
設計にコンポーネントを合わせるのではなく、コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカバーできない仕様は、追加開発の為の設計が必要
• 多機能なコンポーネントを前提とすることで、多くの仕様を吸収することが可能
• 早期に多くの機能を備えたプロトタイプの実装が可能
実装(拡張) • 標準コントロールの拡張• 単体テスト
• コンポーネントの機能の範囲で仕様が決定している場合、拡張は不要
本実装 • コーディング等負荷大• 機能が増えればその分テス
トの負荷大
• プロパティベースの効率的な開発
• 製品でテスト済みなので単体テストの負荷小
結合テスト • Bugfixの負荷大• パフォーマンスチューニン
グの負荷大
• Bugfixの負荷小• パフォーマンスチューニング
の負荷小
![Page 35: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/35.jpg)
![Page 36: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/36.jpg)
リソース
• Infragistics NucliOS 製品ページhttp://jp.icons.infragistics.com/NucliOS
• NucliOS サンプル ブラウザーhttp://bit.ly/NucliOSAppStore
• オンライン ヘルプhttp://help.jp.infragistics.com/iOS/2014.1
• Bloghttp://blogs.jp.infragistics.com/blogs/
![Page 37: NucliOS 概要](https://reader031.fdocuments.net/reader031/viewer/2022013115/55d56b11bb61eb2f6e8b469f/html5/thumbnails/37.jpg)