対象読者
- 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月現在）。
ダウンロードした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で開き、ビルドして実行してみましょう（次の画像）。
セルの結合
標準のGridViewのようにバインドしたデータを表形式で表示できるだけでなく、FlexGridではセルを結合することも可能です（「Cell Merging」サンプル、次の画像）。
セルの結合は、コードビハインドで次のように設定するだけです。
flexgrid1.AllowMerging = AllowMerging.Cells; //セルの結合を有効にする flexgrid1.Columns["Country"].AllowMerging = true; //「Country」列で結合
上のコードでは、「Country」列で同じ値が連続していると、それらのセルが結合されます。
グルーピング／ソート／フィルタリング
バインドするデータをC1CollectionViewクラス（C1.Xaml名前空間）に変換すると、FlexGrid上でグルーピングなどが可能になります（「Sort, Filter, Group」サンプル、次の画像）。
C1CollectionViewクラスは次のコードのように使います。
ObservableCollectionlist = ……; //バインドしたいデータを取得する // 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では、表示しているグリッドの印刷も楽に実装できます（「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には、次のようなコンポーネントが含まれています。
グリッド & データ管理
- 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（ベータ版）の豊富な機能を駆け足で紹介してきましたが、その魅力は伝わったでしょうか。ベータ版と一緒にインストールされるサンプルコードは多数あります。この記事で紹介したサンプルアプリは、その中のごくごく一部です。読者の皆さまも、どうぞサンプルコードを試してみてください。
そして、UWPアプリ開発を楽しみましょう！
