UWPアプリ開発に必携のコンポーネントライブラリー「ComponentOne Studio」（AD）

なじみのないUWPアプリ開発にはコンポーネントを試してみよう

biac[著]

2016/02/23 14:00

ポスト

　グレープシティから「ComponentOne Studio for UWP」が2016年5月にリリースされる予定です。本記事では、それに先駆けて公開されたベータ版を使って、この新しいコンポーネントの特徴を紹介します。

ポスト

対象読者

UWPアプリを開発していてUI構築に不便を感じている方
なじみのないUWPアプリ開発に躊躇しているWindowsフォーム／WPF／ASP.NETの開発者の方

はじめに

　グレープシティのComponentOne Studioは、.NET Frameworkでの開発に必須のライブラリーといえます。WindowsフォームやWPF用のFlexGridコントロール、金額や電話番号などの入力に便利な各種の入力コントロール、あるいはASP.NET用のGridViewコントロールなど、ComponentOne Studioに含まれているコンポーネントを列挙していけば「あれか！お世話になってるよ」と思い当たる読者も多いと思います。

　そのComponentOne Studioに、Windows 10のユニバーサルWindowsプラットフォーム（UWP）アプリ開発用のコンポーネントが追加されることになりました。これもUWPアプリ開発には必須のものになることでしょう。

　ComponentOne Studio for UWPのリリースは2016年5月の予定とアナウンスされています。この記事では、それに先駆けて公開されたベータ版を使って、その機能や特徴を紹介していきます。

UWPアプリとは？

　UWPアプリは、すべてのWindows 10デバイスで実行できます。PCやタブレットだけでなく、Windows 10 Mobileを搭載したスマートフォン（いわゆるWindows Phone）や組み込み用のコンピューター（Windows 10 IoT）でも動きます。Xbox Oneでも、また、Surface HubやHoloLensといった新しいデバイスでも動作します。ComponentOne Studioが、そのようなさまざまなデバイスで動くUWPアプリの開発にも利用できるのです。

おことわり

　この記事は2016年2月現在のベータ版に基づいているため、正式リリース時には内容が異なっている場合があります。

必要な環境

　ComponentOne Studio for UWPを試してみるには、UWPアプリ開発の環境が必要です。具体的には、Windows 10^注1とVisual Studio 2015が必要になります。

　Visual Studio 2015は無償の「Visual Studio Community 2015」で構いませんが、以下のことにご注意ください。

Communityエディションは個人開発者向けです。それ以外での利用は、ライセンス条件を確認してください（条件を満たせば企業／団体組織でも利用可能です）。
Communityエディションの標準インストールではUWPアプリ開発環境が入りません。インストール時にオプションを選択してください。

注1　Windows 10のエディション

　テスト／デバッグにMobileエミュレーターを利用するには、Hyper-Vの動作する64bit版のWindows 10 Proが必要です。Mobileの実機を使ってテスト／デバッグするのであれば、Windows 10のエディションは問いません。

ベータ版をインストールする

　ComponentOne Studio for UWPのベータ版は、次のURLからダウンロードできます（2016年2月現在）。

ダウンロード - ComponentOne | グレープシティコンポーネント製品

　ダウンロードしたZIPファイルには、ComponentOne Studio 2015J v3が入っています。ZIPファイルを展開したら、インストーラーを起動します。インストーラーの画面を進めていくと、次の画像のような製品選択画面になります。ここで「UWP」にチェックを入れてインストール作業を進めてください。

　このインストーラーには、ComponentOne Studioの全製品が含まれています。画面左側に大きく「Studio」と表示されているチェックボックスを選ぶと、全製品が入ったEnterpriseエディションがインストールされます。右側に小さめのアイコンのチェックボックスが8個並んでいるのが、個別の製品です。この記事では紹介しませんが、個別の製品にはWindowsストアプリ用の「WinRT XAML」もあります（UWPのすぐ上）。Windowsストアアプリ開発をしている方は、「WinRT XAML」も試してみてください。

　なお、インストールできる条件が整っていないと、チェックボックスの右に警告マークが付きます。この画像では、開発環境にSilverlightのランタイムが導入されていなかったため、Silverlight用のところに警告マークが出ています。

　インストールが完了したときに、ライセンス認証のダイアログが表示されます。トライアル版として利用するには、そのダイアログで［キャンセル］ボタンをクリックしてください。トライアル期限は、インストールしてから30日です。

FlexGrid

　FlexGridは、データを表形式で表示／編集するためのコントロールです。WindowsフォームやWPFのFlexGridと同じ感覚で使えます。

　さっそくFlexGridのサンプルコードを試してみましょう。

サンプルコード

　ComponentOne Studio for UWPのベータ版をインストールしたときに、たくさんのサンプルコードが次のフォルダーに配置されています。

%userprofile%\Documents\ComponentOne Samples\UWP

　その下の「C1.UWP.FlexGrid\CS\FlexGridSamples」フォルダーにFlexGridのサンプルがあります。そのソリューションをVisual Studio 2015で開き、ビルドして実行してみましょう（次の画像）。

FlexGridのサンプルプログラム（Windows 10 Mobileエミュレーターで実行）

セルの結合

　標準のGridViewのようにバインドしたデータを表形式で表示できるだけでなく、FlexGridではセルを結合することも可能です（「Cell Merging」サンプル、次の画像）。

FlexGridではセルを結合して表示できます（画像はデスクトップですが、もちろんMobileも）

　セルの結合は、コードビハインドで次のように設定するだけです。

セルの結合を設定するコード例（上の画像とは異なります）

flexgrid1.AllowMerging = AllowMerging.Cells; //セルの結合を有効にする
flexgrid1.Columns["Country"].AllowMerging = true; //「Country」列で結合

　上のコードでは、「Country」列で同じ値が連続していると、それらのセルが結合されます。

グルーピング／ソート／フィルタリング

　バインドするデータをC1CollectionViewクラス（C1.Xaml名前空間）に変換すると、FlexGrid上でグルーピングなどが可能になります（「Sort, Filter, Group」サンプル、次の画像）。

　C1CollectionViewクラスは次のコードのように使います。

グルーピングを設定するコード例（上の画像とは異なります）

ObservableCollection list = ……; //バインドしたいデータを取得する
// C1CollectionViewオブジェクトを作り、グルーピングを設定する
_view = new C1.Xaml.C1CollectionView(list);
_view.GroupDescriptions.Add(new C1.Xaml.PropertyGroupDescription("Country"));
// 注：この「_view」はメンバー変数で、FlexGridにデータバインディングしている

カスタムセル

　CellFactoryクラス（C1.Xaml.FlexGrid名前空間）を継承するとカスタムセルを実装できます。例えば、整数のデータを「☆」の数で表示するといった、データテンプレートやバリューコンバーターでは難しい表現も簡単に出来ます（「Custom Cells」サンプル、次の画像）。

編集

　もちろんFlexGridでは、双方向バインディングしたデータの編集もサポートしています。編集可能なドロップダウンリストもあります（「Editing」サンプル、次の画像）。

　編集モードに入るにはセルをダブルクリックするか［F2］キー、あるいは、タッチ操作ならダブルタップします。すると、デスクトップではその場で編集、Mobileでは編集画面に切り替わるのでそこで編集します。なお、タッチ操作のときには、セル幅を変えるためのハンドルがヘッダー部に表示されます（次の画像）。

FlexGridはタッチ操作でもセル幅変更などの操作が可能です（赤丸内にセル幅を変更するためのハンドルが見えています）

印刷

　FlexGridでは、表示しているグリッドの印刷も楽に実装できます（「Printing」サンプル、次の画像）。

　ただし、FlexGridのPrintメソッドは（おそらくWPF版などとの互換性のためでしょう）存在してはいますが、UWPでの印刷には利用できません。UWPでの印刷は、システムからのリクエストに答える形で1ページ分ずつ印刷するオブジェクトをアプリから返す、という仕組みになっています。FlexGridに用意されているGetPageImagesメソッドを使うと、ページごとに分割された印刷用のオブジェクトを取得できます。それをシステムに渡せばよいのです。

　なお、UWPで印刷するときは、上の画像のような印刷プレビューダイアログが必ず表示されます（Windows側で表示しています）。これはUWPの印刷の仕組み上、表示せずに印刷することはできませんのでご注意ください^注2。

注2　ローカルリソースへのアクセス制限

　UWPはセキュリティに配慮した設計になっていて、ローカルリソース（ファイル／プリンター／カメラなど）をアプリから利用するには原則としてエンドユーザーの承認が必要とされます。ファイルやプリンターなどの利用のたびにダイアログが表示されるもの、WebカメラやGPSなどの1回承認すればよいもの、そして、インターネット接続などのマニフェストに宣言する（その内容はWindowsストアに表示される）だけでよいものがあります。

ヘルプ

　以上、FlexGridの主な特徴を紹介してきました。もっと詳しく知りたい、あるいは、実際のコードの書き方が分からないといったときには、Webで公開されている次のドキュメントをご覧になってください。

さまざまなコンポーネント（1）

　ComponentOne Studio for UWPには、次のようなコンポーネントが含まれています。

ComponentOne Studio for UWPに収録されているコンポーネント

グリッド & データ管理

FlexGrid
ListBox
CollectionView

レポート＆ドキュメント

PdfViewer
Excel

スケジューラー

Calendar
Scheduler

データ視覚化

Gauges
Maps
Sparkline
OrgChart

入力＆編集

RichTextBox
DateTime Editors
Input
DropDown
Color Picker

ナビゲーション＆レイアウト

Book
Layout Panel
Menus
RadialMenu
Tiles
TileView
TreeView
TabControl

ユーティリティ

Zip
Imaging
Barcode

　これらのうち、FlexGridは先に紹介しました。そのほかのコンポーネントから、特に興味深いものをいくつか、簡単に紹介していきましょう。

Excelファイルの読み書き

　Excelコンポーネントは特に業務アプリの開発では重宝するコンポーネントでしょう。Open XML形式のExcelファイルを読み書きできます。Open XML SDKはオープンソースとしてMicrosoftから公開されているのですが、UWPアプリからは利用できません。UWPアプリでExcelファイルが扱えないという悩みを、このExcelコンポーネントは解消してくれます。

　ComponentOne Studio for UWPと共に、次のフォルダーにExcelコンポーネントを使ってExcelファイルを作成するサンプルコードがインストールされています。

%userprofile%\Documents\ComponentOne Samples\UWP\C1.UWP.Excel\CS\ExcelSamples

　UWP用ですから、もちろんこのサンプルもMobileで実行できます（次の画像）。

PDFファイル

　PdfViewerコンポーネントでPDFファイルを表示できます。Pdfコンポーネントを使えばPDFの生成／保存ができます。Windows 8.1からWindows.Data.Pdf名前空間としてPDFの描画がサポートされてはいますが、それを使ったプログラミングはかなり面倒です。PdfViewerコンポーネントは、簡単にPDFを表示できるだけでなく、連続ページ表示や検索など豊富な機能を提供しています。

　ComponentOne Studio for UWPと共に、次のフォルダーにPdfViewerコンポーネントを使ったサンプルコードがインストールされています。

%userprofile%\Documents\ComponentOne Samples\UWP\C1.UWP.Pdf\CS\PdfSamples

さまざまなコンポーネント（2）

豊富な描画コンポーネント

　表示できるのはPDFだけではありません。バーコードやグラフなど、描画のためのコンポーネントが豊富にそろっています。いくつか簡単に紹介しましょう。

BarCode（後に画像を掲載）：各種バーコードやQRコードなどを描画。チェックデジットは自動追加
Book（後に画像を掲載）：本の見開きのような表示。ページをめくるようにして画像を切り替える

Calendar：週の最初の曜日や休日などを指定できるカレンダー
Chart：折れ線グラフ、散布図、棒グラフ、円グラフ、面グラフなど、30以上のチャートをサポート。複数のチャートを重ね合わせることも可能
Gauges：円／直線／スピードメーターなど7種類のデータ視覚化ゲージ
Imaging：画像を表示するだけでなく、トリミングやサイズ／解像度の変更も可能。アニメーションGIFにも対応
Maps：ズームやパンをサポートした地図。既定ではBing Mapsのマップを利用
OrgChart：組織図や階層図を表示
SSRS Viewer：SQL Server Reporting Services（SSRS）のレポートを表示

便利なベーシックコンポーネント

　UI構築に欠かせないコンポーネントもそろっています。データの入力／選択、メニューなどのコンポーネントで、ComponentOne Studio内で「Basic Library」と呼ばれています。

　ComponentOne Studio for UWPと共に、次のフォルダーにBasic Libraryを使ったサンプルコードがインストールされています。

%userprofile%\Documents\ComponentOne Samples\UWP\C1.UWP\CS\BasicLibrarySamples

　Basic Libraryに含まれているコンポーネントも、いくつか簡単に紹介しましょう。

Input：電話番号や郵便番号などの入力に適したマスク付き入力用のMaskedTextBoxコントロールと、金額などの入力に適した数値入力用のNumericBoxコントロール（後に画像を掲載）
ListBox：UIの仮想化をサポートするほか、高速スクロール中などで適用されるPreviewテンプレートに描画の「軽い」アイテムを定義しておくことで、高速な表示を実現
Menu：WindowsフォームやWPFのような従来からのメニュー
RadialMenu（後に画像を掲載）：円形のポップアップメニュー。タッチ操作に向いている
TabControl：ページの上下左右に配置できるタブ
TreeView：データを階層的に表示するツリービュー

ヘルプ

　以上、さまざまなコンポーネントを紹介してきました。もっと詳しく知りたい、あるいは、実際のコードの書き方が分からないといったときには、Webに公開されているドキュメントをご覧になってください。次のWebページに、（前述したFlexGridも含めて）ドキュメントの一覧が掲載されています。

ComponentOne Studio for UWP 製品ヘルプ

まとめ

　正式リリースが近付いてきたComponentOne Studio for UWP（ベータ版）の豊富な機能を駆け足で紹介してきましたが、その魅力は伝わったでしょうか。ベータ版と一緒にインストールされるサンプルコードは多数あります。この記事で紹介したサンプルアプリは、その中のごくごく一部です。読者の皆さまも、どうぞサンプルコードを試してみてください。

　そして、UWPアプリ開発を楽しみましょう！

この記事は参考になりましたか？