CodeZine(コードジン)

特集ページ一覧

モダンな環境に対応する便利で多様なコンポーネント ~ バーコード/Excel/PDF/高解像度対応/タッチ操作/タイル

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/04/07 14:00

 コンポーネントを選択肢の一つとして持つことで、自社で同等の機能を開発する場合との比較を行い、仕様検討、見積もり、開発時に指針を得ることができ、工数軽減やリスク回避が可能になります。今回は、Excelとの連携やPDFといったよく使う機能から、タッチ対応、Windows 8以降のスタート画面でおなじみのタイルなど、さまざまなコンポーネントをグレープシティ社のComponentOne Studioから紹介します。ComponentOne StudioはWindows Formsだけでなく、WPFやASP.NET、最新のUWP用といったコンポーネントも提供しているため、自社のスキルや顧客の要望に合わせて、適したプラットフォームでの開発が可能となります。

 ComponentOne Studioについては、以下の一覧も参照ください。

今回紹介するコンポーネント

 本記事では以下のコンポーネントを紹介します。

BarCode(BarCode for WinForms)

 さまざまな形式のバーコードを表示できるコンポーネントです。画像のようにQRコードを表示することも可能です。

C1BarCode
C1BarCode

Excel(Excel for .NET)

 Excel形式のファイルを作成、更新、保存できるコンポーネントです。本記事ではExcelファイルを開き、内容を更新して保存するサンプルを紹介します。

PDF(PDF for .NET)

 PDF形式でファイルを保存できるコンポーネントです。文字だけでなく画像や図形も描画でき、しおり機能やフォームの作成にも対応しています。本記事中では文字や画像を含めたPDFファイルを保存する方法について紹介します。

sample.pdfが保存される
sample.pdfが保存される

Sizer(Sizer for WinForms)

 Sizerは高解像度ディスプレイへの対応を可能にするコンポーネントです。

 近年の高解像度化に対応していないアプリケーションを高い解像度のディスプレイで表示すると、文字やボタンが小さく表示されてしまい、読みにくい、操作し辛いという問題が発生します。Sizerはこの高解像度の解決策を簡潔に提供します。

 本記事ではプログラミング無しでアプリケーションを高解像度対応する方法を紹介します。

TouchToolkit(TouchToolkit for WinForms)

 TouchToolkitコンポーネントはタブレットやタッチ対応ディスプレイを想定したタッチ操作を可能にします。

 タッチ対応といえば、タブレットを視野に入れたWindows 8以降に登場したWindowsストアアプリケーションや、Universal Windows Platform(UWP)で開発が思い浮かびますが、TouchToolkitを利用すればWindows Formsでも容易にタッチ対応を行うことができます。

TileControl

 TileControlはタブレット対応のWindowsストアアプリケーションのような、タイルコンポーネントを提供します。タッチしやすい大き目なタイルは、タッチ用途を想定したWindows PhoneやWindows 8以降のデスクトップOS用のアプリケーションから使われ始めたコンポーネントです。

 高解像度対応のSizer、タッチ対応のTouchToolkit、そしてTileControlを利用することでWindows Formsでもタッチ操作向けのアプリケーション開発が容易になります。

対象読者

 Visual Studioを利用してアプリケーションを作成した経験がある、またはC#、VisualBasicなどの.NET系言語での開発経験がある方。

必要な環境

 ComponentOne Studioを利用するには以下の環境が必要となります。

  • Visual Studio 2010/2012/2013/2015 日本語版
  • .NET Framework 3.5 SP1/3.5 Client Profile/4/4 Client Profile/4.5/4.5.1/4.5.2/4.6

 本記事はVisual Studio 2015(Enterprizeエディション)、.NET Framework 4.6環境で画像キャプチャーの取得、動作検証を行っております。

ComponentOne Studioのインストール

 ComponentOne Studioを導入するには、製品を購入するかトライアル版を利用する方法があります。

 トライアル版の入手は以下のURLのフォームから申し込みを行います。

 製品の購入は以下のURLから手続きを行ってください。

 手続きを進めることでComponentOne Studioのインストーラーがダウンロード可能になります。

ComponentOne Studioインストーラー起動画面
ComponentOne Studioインストーラー起動画面

 本記事ではインストールする製品として「WinForms」のみ選択したものとして進めます。

インストールする製品
インストールする製品

BarCode

 BarCodeコンポーネントは、さまざまな形式のバーコードを生成し、表示することができます。

 BarCodeコンポーネントを利用することで、アプリケーションにQRコードを表示する機能や、業務ではバーコードリーダー読み取り用のバーコードを生成して印刷するアプリケーションなどを手軽に作成することができます。

 表示できるバーコードについては以下のURLを参照ください。

 本記事ではBarCodeコンポーネントを利用して、QRコードを生成する方法を紹介します。

プロジェクトの作成

 「C1BarCodeSample」という名前で、Windowsフォームアプリケーションを作成します。

BarCodeプロジェクトの作成
BarCodeプロジェクトの作成

BarCodeコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1BarCodeにチェックを入れて「OK」をクリックします。

 下画像のように複数C1BarCodeが表示されている場合は、名前空間が「C1.Win.BarCode」の方をチェックしてください。またComponentOne Studioのインストール時にASP.NET WebForms版もインストールした場合、ASP.NET WebForms版も表示されますので、「ディレクトリ」などを参考にして適切なものを追加してください。

C1BarCodeコンポーネントの追加
C1BarCodeコンポーネントの追加

BarCodeの配置

 ツールボックスからC1BarCodeコンポーネントをForm1.csのデザイン画面にドロップして追加します。

 プロジェクトの作成直後であればデザイン画面が表示されているはずですが、閉じてしまった場合はソリューションエクスプローラーのForm1.csをダブルクリックして表示してください。

 ツールボックスからC1BarCodeが見つけ難い場合は、下画像のように検索します。

C1BarCodeの配置
C1BarCodeの配置

QRコードの表示

 デザイン画面に配置したC1BarCodeコンポーネントを選択した状態で、「プロパティ」ウィンドウのCodeTypeプロパティをQRCodeに変更します。

QRコードの表示
QRコードの表示

その他コンポーネントの配置

 ツールボックスから文字入力用のTextBoxと、QRコード生成用のButtonコンポーネントを追加します。

その他コンポーネントの配置
その他コンポーネントの配置

 配置したButtonコンポーネントを選択しTextプロパティを「生成」に変更します。

ボタンイベントの作成

 配置したButtonコンポーネントをダブルクリックします。Form1.csにbutton1_Clickメソッドが自動で追加されます。

button1_Clickメソッドが自動で追加される
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {

    }
}

 button1_Clickメソッドを以下のように修正します。

button1_Clickメソッドを修正
private void button1_Click(object sender, EventArgs e)
{
    this.c1BarCode1.Text = this.textBox1.Text;
}

 デバッグを実行し、テキストボックスに文字入力後に生成ボタンをクリックすると、入力されたテキストのQRコードを生成するサンプルが確認できます。

QRコードサンプルの実行結果
QRコードサンプルの実行結果

Excel

 Excelコンポーネントを利用すると、Excelファイルの読み取り、編集、保存が可能になります。

 業務でExcel利用するケースは多く、これまで顧客がExcelで編集していた作業をアプリケーションで簡略化したい場合などに、Excelコンポーネントは力を発揮するでしょう。また、開発したアプリケーションを動作させるPCにExcelをインストールする必要が無いこともポイントです。

 本記事ではExcelファイルの読み込み、内容の取得・変更・保存、Excelの数式を利用するサンプルを紹介します。

プロジェクトの作成

 「C1XLBookSample」という名前で、Windowsフォームアプリケーションを作成します。

C1XLBookSampleプロジェクトの作成
C1XLBookSampleプロジェクトの作成

C1XLBookコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1XLBookにチェックを入れて「OK」をクリックします。

C1XLBookコンポーネントの追加
C1XLBookコンポーネントの追加

C1XLBookの配置

 C1XLBookは画面に何か表示するわけではありませんが、他のコンポーネント同様ツールボックスからデザイン画面にドロップすることで、参照に追加され利用可能になります。

 下画像のようにデザイン画面下に追加したC1XLBookが表示されます(画像ではNameプロパティの「c1XLBook1」として表示されています)。

C1XLBookの配置
C1XLBookの配置

その他コンポーネントの追加

 ツールボックスから文字表示用のLabel、文字入力用のTextBoxと、Buttonコンポーネントを追加します。

その他コンポーネントの追加
その他コンポーネントの追加

Excelファイルを開く

 Excelファイルを開くために、ドキュメントフォルダに以下画像のように、1行目A列にsampleと書かれたExcelファイル「sample.xlsx」を用意しておきます。

Excelファイルをあらかじめ用意
Excelファイルをあらかじめ用意

 Form1.csのデザイン画面から、外枠のウィンドウをダブルクリックします。ダブルクリックするとForm1.csにForm1_Loadメソッドが自動で生成されます。

Form1_Loadメソッドが自動で追加される
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void Form1_Load(object sender, EventArgs e)
    {
    }
}

 Form1_LoadメソッドにExcelファイルを開き、1行目A列の文字を取得する処理を記述します。

Excelファイルを開き1行目A列の文字を取得する
private void Form1_Load(object sender, EventArgs e)
{
    // エクセルファイルを開く
    this.c1XLBook1.Load(System.Environment.GetFolderPath(Environment.SpecialFolder.Personal) + "\\sample.xlsx");

    // 一番目のシートの一列一行目の文字列を取得
    this.label1.Text = c1XLBook1.Sheets[0][0, 0].Text;
}

Excelファイルを編集して保存する

 Form1.csのデザイン画面を表示し、Buttonコンポーネントをダブルクリックします。Form1.csにButtonをクリックした際のイベントハンドラーbutton1_Clickメソッドが自動で追加されます。

 button1_Clickメソッドを以下のように修正します。

Excelファイルを開き1行目A列の文字を取得する
private void button1_Click(object sender, EventArgs e)
{
    // 一列一行目の値を書き換える
    c1XLBook1.Sheets[0][0, 0].Value = this.textBox1.Text;

    this.label1.Text = this.textBox1.Text;

    // エクセルファイルを保存する
    c1XLBook1.Save(System.Environment.GetFolderPath(Environment.SpecialFolder.Personal) + "\\sample.xlsx");
}

 プログラムを実行してExcelファイルの読み込みと、編集が行われることを確認してみてください。

C1XLBookSampleの実行
C1XLBookSampleの実行

Excelの数式を利用する

 Excelの数式をプログラムから利用することも可能です。以下のようにbutton1_Clickにコードを追記します。

数式を利用する
private void button1_Click(object sender, EventArgs e)
{
    // 一列一行目の値を書き換える
    c1XLBook1.Sheets[0][0, 0].Value = this.textBox1.Text;

    this.label1.Text = this.textBox1.Text;

    // エクセルの数式を使って計算する
    c1XLBook1.Sheets[0][3, 0].Value = 5;
    c1XLBook1.Sheets[0][4, 0].Value = 2;

    c1XLBook1.Sheets[0][5, 0].Formula = "=SUM(A4:A5)";

    // エクセルファイルを保存する
    c1XLBook1.Save(System.Environment.GetFolderPath(Environment.SpecialFolder.Personal) + "\\sample.xlsx");
}

 数式はFormulaプロパティに設定します。プログラムを実行すると、以下のようにSUM(合計)がA列6行目に表示されます。

数式の実行結果
数式の実行結果

PDF

 C1PdfDocumentコンポーネントを利用すると、PDFファイルを作成することができます。

 アプリケーションのデータをPDFでダウンロード展開できる機能は、便利な付加価値をアプリケーションに加えることができます。

プロジェクトの作成

 「C1PdfDocumentSample」という名前で、Windowsフォームアプリケーションを作成します。

C1PdfDocumentSampleプロジェクトの作成
C1PdfDocumentSampleプロジェクトの作成

C1PdfDocumentコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1PdfDocumentにチェックを入れて「OK」をクリックします。

C1PdfDocumentコンポーネントの追加
C1PdfDocumentコンポーネントの追加

C1PdfDocumentの配置

 C1PdfDocumentもC1XLBook同様に画面に何か表示するわけではありませんが、他のコンポーネント同様ツールボックスからデザイン画面にドロップすることで参照に追加され利用可能になります。

 下画像のようにデザイン画面下に追加したC1PdfDocumentが表示されます(画像ではNameプロパティの「c1PdfDocument1」として表示されています)。

C1PdfDocumentの配置
C1PdfDocumentの配置

その他コンポーネントの配置

 ツールボックスから画像表示用のPictureBoxとButtonコンポーネントを追加します。

 PictureBoxを選択し、「プロパティ」ウィンドウからImageLocationに表示したい画像のパス、もしくはURLを指定し、SizeModeをStretchImageに指定します(本記事ではImageLocationに"http://coelacanth.heteml.jp/blog/wp-content/uploads/2013/08/cropped-icon.png"を指定しています)。

その他コンポーネントの追加
その他コンポーネントの追加

PDFを保存する

 Buttonコンポーネントをダブルクリックしてbutton1_Clickメソッドを自動生成します。

 button1_Clickメソッドを以下のように修正します。

PDFファイルを保存する
private void button1_Click(object sender, EventArgs e)
{
    // PDFに文字を表示する
    this.c1PdfDocument1.DrawString("PDF Sample", new Font(FontFamily.GenericSerif, 16), Brushes.Black, PointF.Empty);


    // 画像を表示する
    RectangleF rect = c1PdfDocument1.PageRectangle;
    rect.Inflate(-120, -240);

    this.c1PdfDocument1.DrawImage(pictureBox1.Image, rect);

    // 保存する
    this.c1PdfDocument1.Save(System.Environment.GetFolderPath(Environment.SpecialFolder.Personal) + "\\sample.pdf");
}

 プロジェクトを実行し「PDFを保存する」ボタンをクリックすると、ドキュメントフォルダにsample.pdfが生成されます。

sample.pdfが保存される
sample.pdfが保存される

Sizer

 最近のディスプレイやノートPC高解像度化が進み、旧来のアプリケーションを表示すると小さく操作し辛いという事態が発生します。

 C1SizerLight(およびC1Sizer)コンポーネントは、アプリケーションの高解像度対応を簡単に実現できます。

 Sizerの効果は実際に画面を確認するのが良いでしょう。

 高解像度のディスプレイ(2560×1440ピクセル)で高解像度対応していないアプリケーションを実行した場合、下画像のようにウィンドウを拡大しても表示文字のサイズが変更されません。

高解像度非対応のアプリケーション
高解像度非対応のアプリケーション

 C1SizerLightコンポーネントを利用した結果が下画像です。ウィンドウを拡大すると、表示している文字のサイズも拡大されます。

 サンプルでは、文字だけでなく、コントロールのサイズもウィンドウの拡大縮小に合わせて変更されることも確認できます。

高解像度対応のアプリケーション
高解像度対応のアプリケーション

 サンプルでは、文字だけでなく、コントロールのサイズもウィンドウの拡大縮小に合わせて変更されることも確認できます。C1SizerLightコンポーネントは、以下のようにプログラムコードを書くことなく利用することができます。

プロジェクトの作成

 「C1SizerLightSample」という名前で、Windowsフォームアプリケーションを作成します。

C1SizerLightSampleプロジェクトの作成
C1SizerLightSampleプロジェクトの作成

C1SizerLightコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1SizerLightにチェックを入れて「OK」をクリックします。

C1SizerLightコンポーネントの追加
C1SizerLightコンポーネントの追加

その他コンポーネントの配置

 C1SizerLightコンポーネントによる拡大がわかるようにForm1.csのデザイン画面にLabelコンポーネントとButtonコンポーネントを追加します。

画面にLabelコンポーネントを配置
画面にその他コンポーネントを配置

C1SizerLightの配置

 ツールボックスのC1SizerLightをデザイン画面のLabelにドロップします。

C1SizerLightの配置
C1SizerLightの配置

 プロジェクトを実行し、アプリケーションのウィンドウを拡大縮小すると合わせてLabelの文字が拡大縮小することや、Buttonコンポーネントの大きさが変更されることも確認できます。

ウィンドウサイズを変更するとコントロールのサイズや相対位置が自動調整される
ウィンドウサイズを変更するとコントロールのサイズや相対位置が自動調整される

TouchToolkit

 TouchToolkitコンポーネントを利用すると、アプリケーションにタッチ操作でのズームや、パンなどの操作を追加することができます。

 タブレットでの操作を想定したアプリケーションでのタッチ操作対応に関しては、Windowsストアアプリのようなあらかじめタブレット操作を想定したプラットフォームの方が開発しやすいという側面がありました。しかしWindowsストアアプリが新しいプラットフォームであり、開発経験者が少ないという問題もあります。

 TouchToolkitを利用すれば、Windows Formsの開発スキルを活かしたい、Windows Formsの豊富なライブラリを利用したいという開発チームの強みを失わずにタッチ対応のアプリケーションが開発可能になります。

 TouchToolkitにはさまざまな機能がありますが、本記事ではアプリケーションをズーム可能にするC1Zoomコンポーネントについて紹介します。

 サンプルの動作を確認する場合、タッチ対応のタブレット、ノートPCまたはディスプレイが必要になります。

 タッチ対応でない環境でお試しいただく場合は、C1ZoomコントロールのAllowMouseWheelZoomプロパティをTrueにすることで、[CTRL]+マウスホイール操作による拡大・縮小が可能です。

 また、既定ではC1ZoomコントロールのAllowMouseWheelScrollプロパティの各フラグがONになっており、それぞれマウスホイールによる上下スクロール、[SHIFT]+マウスホイールによる左右スクロールが可能となっています。

プロジェクトの作成

 「C1ZoomSample」という名前で、Windowsフォームアプリケーションを作成します。

C1ZoomSampleプロジェクトの作成
C1ZoomSampleプロジェクトの作成

C1Zoomコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1Zoomにチェックを入れて「OK」をクリックします。

C1Zoomコンポーネントの追加
C1Zoomコンポーネントの追加

その他コンポーネントの配置

 C1Zoomコンポーネントによるズーム操作がわかるようにForm1.csのデザイン画面にLabelコンポーネントとButtonコンポーネントを追加します。

 ズームした結果がわかりやすいように画面の幅を広く取り、Labelコンポーネントを画面中央に配置します。

画面にLabelコンポーネントを配置
画面にその他コンポーネントを配置

C1Zoomの配置

 ツールボックスのC1Zoomをデザイン画面のウィンドウ内にドロップします。

C1Zoomの配置
C1Zoomの配置

 プロジェクトを実行し、アプリケーションのウィンドウをズーム操作するとLabelコンポーネントの文字やButtonコンポーネントを拡大縮小することができます。

ウィンドウをズーム操作するとコントロールが拡大される
ウィンドウをズーム操作するとコントロールが拡大される

TileControl

 TileControlを利用するとWindowsストアアプリケーションのようなタイル形式のレイアウトが実現できます。

TileControlはタイル形式のレイアウトが可能に
TileControlはタイル形式のレイアウトが可能に

 TouchToolkitのタッチ機能と併用することで、タッチ対応のアプリケーション開発が更に容易になります。

プロジェクトの作成

 「C1TileControlSample」という名前で、Windowsフォームアプリケーションを作成します。

C1TileControlSampleプロジェクトの作成
C1TileControlSampleプロジェクトの作成

C1TileControlコンポーネントの追加

 上部メニューの「ツール」→「ツールボックスのアイテムの選択」をクリックします。

 ポップアップした「ツールボックスアイテムの選択」ウィンドウの「.NET Framework コンポーネント」タブからC1TileControlにチェックを入れて「OK」をクリックします。

C1TileControlコンポーネントの追加
C1TileControlコンポーネントの追加

C1TileControlの配置

 ツールボックスのC1TileControlをデザイン画面のウィンドウ内にドロップします。

C1TileControlの配置
C1TileControlの配置

 デフォルトの状態である程度のひな型のレイアウトが組まれているので、今回はそれをデザイン画面から編集していきます。

C1TileControlの編集

タイトルの編集

 デフォルトの状態では「C1TileControl1」と表示されているタイトルを変更します。タイトルの文字を編集するにはC1TileControlの外枠部分をクリックして、「プロパティ」ウィンドウのTextプロパティから編集します。

タイトルの編集
タイトルの編集

グループ名の変更

 デフォルトの状態では「グループ1」と記されているグループ名を変更します。

 グループ1という文字をクリックするとグループ情報を編集できるポップアップウィンドウが起動します。

グループ名の変更
グループ名の変更

 ポップアップウィンドウの「グループのテキスト」で表示されているグループ名を変更できます。

グループの追加

 新しいグループを追加する場合はC1TileControlコンポーネントのグループ名の上部でマウスの右クリック→グループの編集をクリックします。

グループの追加
グループの追加

 「C1TileControl.Groupsコレクションエディタ」が起動しますので「追加」ボタンでグループを追加します。

新しいグループを追加する
新しいグループを追加する

 これだけでは画面にグループが表示されませんので、グループを構成するタイルを追加します。

 「C1TileControl.Groupsコレクションエディタ」で新しく追加したグループを選択し、Tilesプロパティの「(コレクション)」と書かれた部分をクリックします。

タイルを追加する
タイルを追加する

 Group.Tileコレクションエディタの追加ボタンでタイルを追加することで新しいグループが追加されました。

 タイルの編集も同様でデザイン画面でのC1TileControlの編集は「プロパティウィンドウ」または「クリックすることで起動するエディタ」「右クリックメニューから起動するエディタ」の3つで行います。

グループの追加結果
グループの追加結果

まとめ

 ComponentOne Studioのコンポーネントを紹介してきました。業務アプリケーションの開発経験をお持ちの方であれば一度は受けたことがある要望に対応したコンポーネントがあったのではないでしょうか?

 記事を書く中で、コンポーネントのほとんどが共通の操作で導入できた点も、ComponentOne Studioのようなコンポーネント群を使うメリットだと感じました。またタッチ対応や高解像度対応により、既存アプリケーションを開発コストを割くことなく新しいニーズに応えるアプリケーションに作り変えられる点もポイントです。

 今回紹介したコンポーネントはこれまでCodeZineで紹介していないコンポーネントの中から選択しましたが、ComponentOne Studioには今回紹介したもの以外にも多数のコンポーネントが含まれています。繰り返しになりますがComponentOne StudioはWindows Formsだけでなく、WPF、Windowsストアアプリ、ASP.NETなど複数のプラットフォームに対応しています。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 西村 誠(ニシムラ マコト)

     Microsoft MVP Windows Platform Development。  Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。  ブログ:眠るシーラカンスと水底のプログラマー  著書:基礎から学ぶ Windows...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5