View
446
Download
1
Category
Preview:
Citation preview
池原 大然
デベロッパー エバンジェリスト
インフラジスティックス・ジャパン株式会社
dikehara@infragistics.com
@Neri78
Xamarin 対応iOS 用UI コンポーネントNucliOS のご紹介
会社概要名称 インフラジスティックス・ジャパン株式会社
設立 2006 年
所在地 東京都渋谷区神宮前 3-25-12
不二ビルディング原宿 3F
資本金 100,000,000 円
事業内容 ソフトウェア開発・販売
Design / Develop / Experience
http://jp.infragistics.com
はじめに
Q. 業務アプリで利用されているUIコントロール?
１
２３
いずれもデータを扱ううえで必須
インプットエディター
データチャート
データグリッド
ハイブリッド ネイティブ
ネイティブiPhone, iPad, Android タブレット／スマートフォン、Windows Phone 及びWindows 8 タブレット用ネイティブコントロール
ハイブリッドWeb 標準準拠、HTML5/jQuery
ネイティブ
Indigo Studio
Windows Forms
ASP.NET
WPF
Silverlight
Reporting
Ignite UI - HTML5/jQuery
Windows 8
NuCLiOS - iOS
Windows Phone
Icons
3 つのポイント 開発生産性
パフォー
マンス
スタイリ
ング
NucliOS概要
NucliOS
• ネイティブ iOS コントロール
• Objective-C, Xamarin 双方に対応
AppStore
“NucliOS” で検索!
収録コントロール
グリッド チャート ゲージ
カレンダーフロー
レイアウトタブ
バーコード オーバーレイ インジケーター
ラベル
Demoサンプル ブラウザー
開発生産性
開発生産性•機能が豊富であること
•（標準では）提供されていない UI パターンを提供すること
•上記の設定が比較的容易に実現できること
IGGridView
• UITableView と似た仕組みで複数列データの表示を可能にするグリッド コントロール
• データソースヘルパー クラスを提供しており、様々な機能をプロパティ ベースで利用することができる
フィルタリング
コンテキスト メニュー
ロード用プルダウン
ショートカットバー
行移動 列移動 行削除 列削除
行挿入 列挿入 固定列 セクション表示
無限スクロール
スライド行 ソート テーマ
Demo標準 UITableView との差異
iOS 「らしい」機能を持ったグリッド
データソースヘルパー
IGGridView
データソース ヘルパー
データ オブジェクト
表示部分を制御ユーザーの操作から
ヘルパーにデータ操作を伝達
ソート、グループ化、フィルタリングなど
のデータ処理ロジックを
実装
“機能” を“容易” に実現
プロパティ設定のみで様々な機能を有効化
// 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;
業務アプリで利用されているUIコントロール
１
２３
いずれもデータを扱ううえで必須
インプットエディター
データチャート
データグリッド
IGChartView
•標準では提供されていない
• “Shared” コントロール• WPF、Silverlight、Windows ストア、HTML5
• 特に金融系で実績あり
•様々な種類、トレンドラインを実現
エリア 棒 柱状 折れ線
ポイント スプライン 散布図 積層型
極座標 ラジアル 円 財務指標
DemoXamarin + NucliOS で実現する業務用モバイル アプリケーション
パフォーマンス
ユーザーがモバイル アプリに想定していること
「ヌルサク」といわれるような軽快な操作感
考え抜かれたユーザーインターフェイス
タッチ＝早い！”perfomant”
Demo予め、パフォーマンス チューニングを実施
スタイリング
NucliOS+テーマ
•予めいくつかの定義済みテーマを提供
•コードによるカスタム テーマの作成にも対応
Demoテーマの適用
カスタムテーマ
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;
終わりに
NucliOS から得られるもの
開発生産性
パフォーマンス
スタイリング
UIコントロールを活用した開発
重要なポイント
設計にコンポーネントを合わせるのではなく、コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカバーできない仕様は、追加開発の為の設計が必要
• 多機能なコンポーネントを前提とすることで、多くの仕様を吸収することが可能
• 早期に多くの機能を備えたプロトタイプの実装が可能
実装（拡張） • 標準コントロールの拡張• 単体テスト
• コンポーネントの機能の範囲で仕様が決定している場合、拡張は不要
本実装 • コーディング等負荷大• 機能が増えればその分テス
トの負荷大
• プロパティベースの効率的な開発
• 製品でテスト済みなので単体テストの負荷小
結合テスト • Bugfixの負荷大• パフォーマンスチューニン
グの負荷大
• Bugfixの負荷小• パフォーマンスチューニング
の負荷小
リソース
• 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/
Recommended