お客様が望んでいるモダンデスクトップアプリとは？／傾向と対策 part2

お客様が望んでいるモダンデスクトップアプリとは？

傾向と対策

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

デベロッパーエバンジェリスト

池原大然

dikehara@infragistics.com

@Neri78

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

代表取締役シニア UX アーキテクト

東賢

kazuma@infragistics.com

@kenazuma

ここからは

Office が要件に与える影響

インフラジスティックスが提供する Office UI

Officeが要件に

与える影響

顧客から例示されるアプリケーション

要件 標準コンポーネント

作業見積り

Office のようなリボン形式でメニューを表示できること

顧客ごとに受注レコードを展開して表示できること

複数列の並べ替えができること

Excel 2010 のようなフィルタリングができること

Excelの枠の固定を実現できること。特定の列については右に固定

セル内部において桁数表示を行うこと

Outlook のように任意にビューを切り替えられること

テンプレートのエクセルを読み込み、入力された内容をもとにExcel ファイルを出力すること

ユーザーが任意にテーブル上のレイアウトを操作し、保存・ロードできること

統一感のある外観をユーザーに提供すること

要件例

要件 標準コンポーネント

作業見積り

Office のようなリボン形式でメニューを表示できること × 5

顧客ごとに受注レコードを展開して表示できること △ 3

複数列の並べ替えができること ○ 1

Excel 2010 のようなフィルタリングができること × 5

Excelの枠の固定を実現できること。特定の列については右に固定 × 5

セル内部において桁数表示を行うこと ○ 1

Outlook のように任意にビューを切り替えられること × 5テンプレートのエクセルを読み込み、入力された内容をもとにExcel ファイルを出力すること △ 3

ユーザーが任意にテーブル上のレイアウトを操作し、保存・ロードできること × 5

統一感のある外観をユーザーに提供すること △（×） 3

標準コントロール

カバーできない部分の工数が跳ね上がる今回の見積もりでは 36 (人日？）

Infragisticsツール利用

要件 標準コンポーネント

作業見積り

Office のようなリボン形式でメニューを表示できること ○ 1

顧客ごとに受注レコードを展開して表示できること ○ 1

複数列の並べ替えができること ○ 1

Excel 2010 のようなフィルタリングができること ○ 1

Excelの枠の固定を実現できること。特定の列については右に固定 ○ 1

セル内部において桁数表示を行うこと ○ 1

Outlook のように任意にビューを切り替えられること ○ 1テンプレートのエクセルを読み込み、入力された内容をもとにExcel ファイルを出力すること △ 3

ユーザーが任意にテーブル上のレイアウトを操作し、保存・ロードできること ○ 1

統一感のある外観をユーザーに提供すること ○ 1

コンポーネントを利用した場合の見積もり12 (人日？）＝ 1/3 に低減

できるだけ部品をそのまま利用することによって、「作らない」ことを検討する。

そのために、標準コントロールだけでなく、多くのUIコントロールをカードとして持っておく。

既に顧客の頭の中にあるUIのイメージは標準コントロールの範囲を大幅に超えている。

インフラジスティックスが

提供するOffice UIコントロール

コンセプト

•圧倒的な機能セットの提供•開発生産性向上の仕組み•様々なサポートオプションの提供

生産性 ユーザビリティ 信頼性

• フィルタリング• 枠の固定• グルーピング• 集計• 条件付き書式• クリップボードサポート• スパークライン

• etc

データ グリッドにおけるOffice UI 機能の提供

WPFOffice UI

コントロール

Office UI パターンの提供

• Office 2007, 2010, 2013 形式リボンスタイル

• バックステージビューの搭載• タッチ対応デザイン• Office ライクなリボンウィンドウの提供

XamRibbon

• Outlook スタイルのナビゲーションバー

• 折り畳み、展開• グループ別の表示

• バックステージビューの搭載• タッチ対応デザイン• Office ライクなリボンウィンドウの提供

XamOutlookBar

• Project ライクなガントチャート

• Project XML ファイルのロード、保存

XamGanttView

• Excel ピボットテーブルを実現• フラットデータ• OLAP キューブ• データスライサー• データチャートコントロールとの連動によるドリルダウン

XamPivotGrid

• Outlook のスケジュールを実現

• 日、週、月表示• グループスケジュール表示• Exchange コネクター

XamSchedule

• OneNote MX メニューを実現

• タッチソリューション用メニュー

XamRadialMenu

継続的な

バージョンアップ

最近追加された Office UI コントロール

• XamDiagram • XamSpreadSheet

• Microsoft Visio のダイアグラムデザイン機能を実現

• 2タイプの項目の表現、編集• ノード(項目) –図形オブジェクト• 接続 –ノード間、あるいは点の接続をサポート

• データバインディングサポート• カスタムノードの実装サポート• 選択、切り取り、貼り付けなどのコマンドをサポート

XamDiagram

• Microsoft Excel ライクなセルベーステーブルコントロール• Data Grid は行ベーステーブル

• Infragistics Excel Engine でサポートされるデータモデルを表示・編集• ≒ Excel データ (.xlsx)

• セル編集・数式・図形の表示・ズームなど、Excel で提供されている機能の一部を実装

XamSpreadSheet

サポートされている機能

セルの配置 セル境界線 セル塗りつぶし

セルのインプレース編集

コマンド コンテキストメニュー

クリップボードサポート

フォントスタイル

数式バー 枠の固定 グリッド線 行列ヘッダー

行列非表示 セル、行、列の挿入・削除

サイズ変更 図形オブジェクトの表示（編集は未対応）

選択 元に戻す /

やり直し

ワークシートの背景

ズーム

今後随時拡充

構成要素 単一のコントロールxamSpreadSheet

コントロールの利用

• XamSpreadSheet コントロールを画面に追加

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:ig="http://schemas.infragistics.com/xaml"

x:Class="xamSpreadSheet_1.MainWindow"

Title="MainWindow" Height="350" Width="525">

<Grid>

<ig:XamSpreadsheet/>

</Grid>

</Window>

Infragistics Excel Engine を利用した既存ワークブックの読み込みと保存

• XamSpreadSheet.Workbook プロパティを利用

private void Button_Click(object sender, RoutedEventArgs e)

{// ファイルダイアログを開いて Excel ファイルをロード

OpenFileDialog diag = new OpenFileDialog();diag.Filter = "xlsx ファイル (*.xlsx)|*.xlsx";

if(diag.ShowDialog() == true)

{// ワークブックを DataContext に渡す

Workbook wb = Workbook.Load(diag.OpenFile());

this.DataContext = wb;

}

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{// ファイルダイアログを開いて Excel ファイルを保存

SaveFileDialog diag = new SaveFileDialog();diag.Filter = "xlsx ファイル (*.xlsx)|*.xlsx";

if (diag.ShowDialog() == true)

{// DataContext の Workbook オブジェクトを書き出す。

(this.DataContext as Workbook).Save(diag.FileName);

}

}

<ig:XamSpreadsheet Workbook="{Binding}" Grid.Row="1"/>

IGショーケース

• プロジェクトテンプレートを利用しMicrosoft Excel ライクなサンプルアプリケーションを利用

• ソースコードの参照

ユーザー ニーズの変化に対応できるコンポーネント「スイート」

•圧倒的な機能セットの提供•開発生産性向上の仕組み•様々なサポートオプションの提供

生産性 ユーザビリティ 信頼性

リソース

Infragistics Ultimate http://jp.infragistics.com/ULTIMATE

xamDiagram - ヘルプトピック

http://bit.ly/xamDiagramJP

xamSpreadSheet – ヘルプトピック

http://bit.ly/xamSpreadSheetJP

最高のアプリケーションを

工数を短縮し

実現する「武器」