Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Webアプリではまねできない、MultiRow&InputManを組み合わせた高機能入力フォーム

顧客と開発者の生産性を格段に向上させる、業務システムの画面UI 第1回

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

 業務アプリケーションを作成する際に、Webアプリケーションとして実装するか、デスクトップアプリケーションが適しているのかの判断を求められる場面があります。利用場所のネットワーク環境がオンラインなのかオフラインなのかや、複数人で利用する必要があるかどうかなど、ポイントはいくつかありますが「入力フォームをどこまで作りこむか」というのが大きな判断基準となることがあります。今回は、入力フォームの作りこみや、柔軟なリスト形式といった、複雑な要件に対応できるコンポーネント「MultiRow」と「InputMan」について紹介します。

サンプルファイル

 本記事にアップロードしているサンプルファイルは、GitHubでも公開しています。

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

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

InputMan

 InputManは、グレープシティ社の提供する、テキスト入力の支援機能を備えたコンポーネントです。日本で開発されたコンポーネントであるInputManは、日本語入力に強く、業務アプリケーションの複雑な入力作業を補助するさまざまな入力機能を備えているのが特徴です。

 本記事では「InputMan for Windows Forms」を中心に紹介しますが、同様の機能をASP.NET版にあたる「InputMan for ASP.NET」で実現可能な場合もありますので、その際は補足として注記いたします。

MultiRow

 MultiRowは、同じくグレープシティ社の提供する、グリッドコンポーネントです。1つのレコードが複雑な構成のレコードデータの表示、編集を可能にします。

 複雑なグリッドの表を作成可能というだけでなく、Visual Studioの高い操作性をうまく活かした編集の容易さも開発者としては嬉しいポイントです。

 本記事では、簡単なサンプルを作成する流れを紹介しますので、Webアプリケーションの開発経験や、自前でグリッドコンポーネントを作成した経験のある方は、その経験と比較しながら読み進めてもらえれば、よりMultiRowの特徴をつかめるはずです。

対象読者

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

必要な環境

 InputMan for Windows FormsおよびMultiRow for Windows Formsを利用するには以下の環境が必要となります。

  • 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/4.6.1

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

コンポーネントの導入

InputMan for Windows Formsのインストール

 InputMan for Windows Formsの導入について、トライアル版を例に紹介します。

 作業途中のライセンス入力で正式版のライセンスを入れるか、トライアル版用として提供されたライセンスキーを入力するかの違いを除けば同じ方法で導入できます。

 また、MultiRow for Windows Formsもほぼ同じ流れで導入できるため、インストール方法の紹介は割愛します。

トライアル版の申し込み

 InputMan for Windows Formsのページを開きます。

InputMan for Windows Forms
InputMan for Windows Forms

 「トライアル版」のボタンをクリックすると「トライアル版申込フォーム」が表示されるので、フォームに必要な情報を記入し、申し込みを完了します。

トライアル版情報の受信

 申し込みが完了するとまもなく、申込時に申請したメールアドレスにトライアル版のダウンロードURLと、トライアル用のプロダクトキーが記されたメールが届きます。

 メールに記されたURLからトライアル版のファイルをダウンロードしてください。

トライアル版のインストール

 ダウンロードしたトライアル版を解凍し、インストーラーを起動します(本記事執筆時点のインストーラーのファイル名は「InputManWin8_20150918.exe」です)。

InputMan for Windows Formsインストーラーの起動
InputMan for Windows Formsインストーラーの起動

 「使用許諾契約書に同意する」にチェックを入れると、「インストール」ボタンが有効になるので、クリックします。

InputMan for Windows Formsの許諾契約に同意する
InputMan for Windows Formsの許諾契約に同意する

 インストールが完了すると、下記画像の画面になりますので、初めてのインストール時は「ライセンス認証マネージャーを起動する」にチェックを入れて「閉じる」ボタンをクリックします。

InputMan for Windows Formsのライセンス認証マネージャーを起動する
InputMan for Windows Formsのライセンス認証マネージャーを起動する

ライセンス認証を行う

 PowerToolsライセンス認証マネージャーが起動するので、InputMan for Windows Forms 8.0Jの欄の「認証手続き」をクリックします。

InputMan for Windows Formsのライセンス認証を行う
InputMan for Windows Formsのライセンス認証を行う

 メールで送られてきたプロダクトキーを入力して「認証」ボタンをクリックします。

InputMan for Windows Formsのプロダクトキーを入力する
InputMan for Windows Formsのプロダクトキーを入力する

 「証処理が完了しました。」と表示されれば認証作業は終了です。

InputMan for Windows Formsの認証の完了
InputMan for Windows Formsの認証の完了

コントロールの追加

 利用したいコントロールがツールボックスに表示されていない場合の追加方法を紹介します。

 今回のように別途インストールした製品のコントロールについては、以下で紹介するような作業が必要な場合があります。

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

ツールボックスアイテムの選択
ツールボックスアイテムの選択

 「.NET Framework コンポーネント」タブを選択し、必要なコントロールにチェックを入れ、右下の「OK」ボタンをクリックすることでツールボックスにコントロールが追加されます。

 今回はGcMultiRowコントロールにチェックを入れて追加します。

追加するコントロールを選択する
追加するコントロールを選択する
GcMultiRowが追加された
GcMultiRowが追加された

MultiRowで複雑なフォームを作成する

 MultiRow for Windows Formsをサンプルに導入して、利用するための作業の流れと、機能の概要を解説していきます。

プロジェクトの作成

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

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

MultiRowテンプレートの追加

 まずはコントロールの雛形になるテンプレートを作成します。

 ソリューションエクスプローラーのプロジェクト名の位置で右クリックから「追加」→「新しい項目」をクリックします。

項目の追加

 「新しい項目の追加」ウィンドウから「MultiRow 8.0 テンプレートウィザード」を選択し、ウィンドウ右下の「追加」をクリックします。

MutiRowテンプレートウィザード
MutiRowテンプレートウィザード

テンプレートウィザードの起動

 MultiRow 8.0テンプレートウィザードがポップアップします。ウィザード形式でテンプレート作成を進めることができます。

MutiRowテンプレートウィザード画面
MutiRowテンプレートウィザード画面

 テンプレートの種類は「セル数を指定してテンプレートを作成する」を選択します。

セル数を指定してテンプレートを作成する
セル数を指定してテンプレートを作成する

 テンプレートのモードでは、複数のレコードをどのように展開するかを選択します。ここでは「垂直方向に展開」を選択します。

展開方法の選択
展開方法の選択

 続いて、列・行のヘッダーの有無と垂直・水平方向の列数を選択します。

 今回は「行ヘッダーを生成する」のチェックを外し、水平方向のセル数を4、垂直方向のセル数を3に変更します。

テンプレートの行列数の指定
テンプレートの行列数の指定

 スタイルを選択します。左の各スタイルをクリックすると、右側でプレビューが確認できます。

 「Professional 2」を選択します。

スタイルの選択
スタイルの選択

 最後にテンプレート名を「SampleTemplate」と変更して「完了」をクリックします。

テンプレート名の変更
テンプレート名の変更

 これでテンプレートが作成されました。ウィザードに従い、ある程度の形ができているので、次は更に修正を加えていきます。

ウィザードにより作成されたテンプレート
ウィザードにより作成されたテンプレート

テンプレートの編集

 ウィザードで作成したテンプレートに手を加えていきます。今回は、1行目は1列しか必要ないというケースを想定します。

セルの削除

 上部「columnHeaderSection1」と書かれた部分(ヘッダーのテンプレート)の1行目、2列のセルをクリックして選択します。

 選択したセルを右クリックし「削除」をクリックします。

セルの削除
セルの削除

 同様に1行目の3列、4列のセルも削除します。

セルの拡大

 1行1列目のセルをクリックし、セル右端のマウスが「左右の矢印」になる位置でクリックしたまま右側にドラックすることでセルを横に拡大できます。

セルの拡大
セルの拡大

 同様に、テンプレート中央のRowと記された行以下の3行(こちらが、各レコードを表示する部分の雛形)の1番上の行を1列に修正します。

セルの拡大 完成
セルの拡大 完成

 このように柔軟にセルの配置を変更できるため、MultiRow for Windows Formsでは複雑な形式の表示にも対応することができます。

セルへの文字入力

 続いてヘッダー部分のセルに文字を入力します。1行目の先ほど1列に修正したセルを選択し、「ID」とタイプすると文字が入力されます。

セルの文字入力
セルの文字入力

データベースへの接続

 MultiRow for Windows FormsにはAccessのデータがサンプルとして含まれていますので、今回表示するデータとして、このサンプルデータを利用することにします。

データソースの追加

 Visual Studioのデータソースウィンドウから「新しいデータソースの追加」をクリックします。

 データソースウィンドウが表示されていない場合は、Visual Studioの上部メニューの「表示」から「その他ウィンドウ」→「データソース」をクリックしてください。

データソースの追加
データソースの追加

 データソースの種類の選択では「データベース」を選択します。

データソースの種類の選択
データソースの種類の選択

 データベースモデルの種類は「データセット」を選択します。

データベースモデルの種類の選択
データベースモデルの種類の選択

 データへの接続では「新しい接続」をクリックします。「接続の追加」ポップアップウィンドウが表示されますので、以下のファイルを指定します。

C:\Program Files (x86)\MultiRowWin8\Data\Sample.mdb
mdbの選択
mdbの選択

 「OK」をクリックして「接続の追加」ポップアップウィンドウを閉じます。データベース構成ウィザートに戻りますので「次へ」をクリックして進みます。

 mdbファイルをコピーして利用するかどうかを確認されますので「はい」をクリックします。

 データセットとして利用するデータを選択します。下画像のようにユーザーに関する情報にチェックを入れます。

データセットの選択
データセットの選択

 完了をクリックすることでデータの導入が終了します。

データの導入完了
データの導入完了

テンプレートにデータを適用する

 Accessのデータをテンプレートの各セルと対応づけます。SampleTemplateのRow部分の1行目をクリックすると、セルの右上に三角の印(スマートタグ)が確認できます。

スマートタグ
スマートタグ

 スマートタグをクリックすると、データフィールドを選択することができます。

スマートタグをクリックして展開する
スマートタグをクリックして展開する

 データフィールドの入力欄右側のアイコンをクリックし、展開したリストから「ユーザーコード」を選択します。

データフィールドに値を指定する
データフィールドに値を指定する

 これでAccessのユーザーデータのユーザーコードとMultiRow側のIDとを紐付けることができました。

 同様に他のセルも以下のように紐付けます。

データとセルの紐付け
データとセルの紐付け

プロジェクトのビルド

 作成したテンプレートを有効にするために、プロジェクトをビルドしておきます。

 ビルドはVisual Studioの上部メニュー「ビルド」から「ソリューションのビルド」をクリックして実行します。

画面への表示

 先程までで作成したものはMultiRowのテンプレートです。画面に表示するためには、コントロールを配置して、テンプレートを適用するという作業が必要になります。

コントロールの配置

 ソリューションエクスプローラーからForm1.csをダブルクリックしてデザイン画面を表示します。

 プロジェクト作成状態から、Form1.csを閉じていないなら、すでに開かれているので、タブを切り替えて表示するだけでも構いません。

 ツールボックスから「GcMultiRow」をForm1.csの画面にドロップします。

GcMultiRowの配置
GcMultiRowの配置

テンプレートの選択

 先ほどの画像のように配置直後にはスマートタグのウィンドウが表示されているので、そのまま「テンプレートの選択」をクリックしてください。

 何らかの操作を行い、画像のように「テンプレートの選択」が表示されない場合は、GcMultiRowコントロールをクリックし、コントロール右上に表示される三角の印をクリックしてください。

スマートタグを表示する
スマートタグを表示する

 「テンプレートの選択」から「他のテンプレートを選択」を展開し「SampleTemplate」をクリックしてください。

 「他のテンプレートを選択」が表示されない場合は、プロジェクトをビルドすることで表示されます。

他のテンプレートを選択
他のテンプレートを選択

 テンプレートが適用されますが、コントロールの幅が狭いため、途中で切れてしまっています。コントロールの幅を広げてテンプレートの情報がすべて見えるようにします。

コントロールの幅を調整する
コントロールの幅を調整する

コントロールにデータセットを配置する

 「データソース」ウィンドウから「ユーザー」テーブルをデザイン画面のコントロールにドロップします。

データソースの配置
データソースの配置

プロジェクトの実行

 最後にF5キーを押して、プロジェクトを実行して結果を確かめます。

MultiRowサンプルの実行結果
MultiRowサンプルの実行結果

柔軟なレイアウトが可能なMultiRow

 サンプルの作成から、MultiRowを利用すれば複雑な構成のレイアウトが容易に実現でき、データを容易に適用できることが伝わったのではないでしょうか。

 極端な例で実用性はありませんが、以下のような不規則な形でデータを表示することも可能です。

不規則なグリッド
不規則なグリッド

 HTMLのテーブルで同様の表現を行おうとすると、制作コストも、編集コストも多くかかってしまうことでしょう。

 Accessのようなデータベースの情報を素早く表示できるのも、素晴らしいポイントだと感じました。素早くデータベースと連携させたアプリケーションのモックを提供することで、顧客に早い段階でより完成製品に近いイメージを持ってもらい、適切なフィードバックをもらうことができます。

 MultiRowの魅力はそれだけではなく、これから紹介するInputManと同等の入力機能を持つセル型をグリッド上で使用することができるのです。

InputManを利用した使いやすい入力フォーム

 InputMan for Windows Formsはテキストボックス以外にも、日付や時刻といった入力フォームから伝票の金額入力欄のようなカスタマイズ項目までさまざまなコントロールを含んでいます。

 それぞれの機能に細かい便利機能が備わっており、Webでは簡単に実装できないような、特定入力作業に特化してカスタマイズされた入力フォームが作成可能になります。今回は、その中からいくつかのコントロール、コンポーネントをピックアップして紹介していきます。

高機能な入力制御を行えるコントロール

 まずは文字入力系のコントロールから紹介します。文字入力だけでも、一般的なテキストボックスを拡張したGcTextBoxコントロールから、住所の入力に特化したGcAddressBoxコントロール、マスク処理やフィルタリングが可能なGcMaskコントロールと多岐に渡ります。

GcTextBox

 GcTextBoxコントロールは多機能なテキストボックスコントロールです。

 入力文字の制限はWebサイトでもよく行う処理ですが、GcTextBoxには以下の画像のように細かい文字制限の設定が可能です。

GcTextBoxの入力制御
GcTextBoxの入力制御

 画像のように設定ウィンドウから許可する書式にチェックを入れることで設定することもできます。

 項目を見るとわかるのですが、Shift_JIS文字で構成された文字や、IVS文字、サロゲート文字など、日本語に関してかなり細かいチェックが可能です。

 パスワードの入力にも対応し、以下のように設定一つで、パスワードを一時的に確認するためのアイコンを表示することも可能です。

GcTextBoxのパスワード入力
GcTextBoxのパスワード入力

GcMask

 GcMaskコントロールは文字を区切り単位で制御、フィルタリング可能です。

 例えば、以下コードのように、特定の区切り部分だけパスワードとしてマスク処理することや、文字の書式を変えることができます。

GcMaskコントロールの文字設定
// 特定の文字数区切りのプロダクトキー(数字で3,4,4文字区切り)を入力することを想定
MaskPatternField field1 = new MaskPatternField("\\D", 3, 3);
MaskPatternField field2 = new MaskPatternField("\\D", 4, 4);
MaskPatternField field3 = new MaskPatternField("\\D", 4, 4);

// 3つめのフィールドはパスワードとしてマスクする
field3.PasswordChar = '*';

// 1つめのフィールドは青文字
field1.ForeColor = Color.Blue;

// ハイフン区切り。区切り毎に別のオブジェクトを作成する
MaskLiteralField line = new MaskLiteralField("-");
MaskLiteralField line2 = new MaskLiteralField("-");

// GcMaskコントロールに設定する
gcMask1.Fields.Add(field1);
gcMask1.Fields.Add(line);
gcMask1.Fields.Add(field2);
gcMask1.Fields.Add(line2);
gcMask1.Fields.Add(field3);
GcMaskコントロールは区切り単位でパスワード表示可能
GcMaskコントロールは区切り単位でパスワード表示可能

 また文字入力ごとに、文字の判定や、候補文字のドロップダウン表示ができるため、業務にあわせた誤入力の防止や、入力の高速化が可能です。

GcCharMask

 郵便番号や、伝票の入力項目のように1マスずつの入力に特化したコントロールです。

 下の画像は郵便番号入力のフォームを作成したところですが、コードだけでなく、設定フォームからも編集することができます。

GcCharMaskの編集
GcCharMaskの編集

 今回紹介したコントロール以外にも、時間や日付を入力するコントロールなども揃っているので、興味を持っていただけた方は公式のページの機能一覧を参照ください。

作業を高速化するショートカットキー

 GcShortCutコンポーネントは、InputMan for Windows Formsで提供されるコントロールに限らず、既存のコントロールにも、ショートカットによるアクションを簡単に追加できます。

 業務アプリケーションにおいて、日々の入力業務を想定した際に、これまで紹介してきた入力補助機能に加えて、GcShortCutコンポーネントを組み合わせることで、ショートカットによる作業効率の改善が望めるでしょう。

 以下のコードはショートカットキー入力で特定のコントロールに定型文を入れることができます。

 1つだけだと大きな効果はないですが、入力作業で定型文を入力する項目が複数存在する場合などは作業を短縮できるかもしれません。

GcShortCutコンポーネントによるショートカット登録
// ショートカットのコレクションを作成
ShortcutCollection sc = new ShortcutCollection();

// Ctr+Shift+Aでよく使う文字を入力
sc.Add(Keys.A | Keys.Shift | Keys.Control, new MethodInvoker(() => { this.textBox1.Text = "いつもの定型文"; }));

// ショートカット登録
// この場合textBox1がアクティブな場合に有効
// Windows Forms標準のTextBoxにも適用可能
gcShortcut1.SetShortcuts(this.textBox1, sc);
ショートカットキーで定型文を入力する
ショートカットキーで定型文を入力する

 ショートカットキーもコードではなく、編集ウィンドウを起動して、追加・編集・削除を行うことができます。

編集画面からショートカットキーの登録
編集画面からショートカットキーの登録

 ショートカット機能はASP.NET版のInputMan for ASP.NETでも利用可能です。

 InputMan for ASP.NETの機能についても検討したい場合は、公式ページの以下の機能一覧を参照ください。

まとめ

 MultiRowの複雑なデータを柔軟にリスト表現する機能と、InputManの誤入力を防ぎ、素早く入力可能なコンポーネントを活用することで、業務に最適化した入力フォームを作成することができます。

 単体で便利なのはもちろん、2つを組み合わせることで、より顧客の業務にマッチしたアプリケーション開発を可能とする相乗効果が期待できます。

 例えば日々の業務で、新規入会した会員の情報を多数入力するような場合でも、項目の多い顧客情報に対して、MultiRowの柔軟なリスト表現力を活かした見やすいフォームを作成し、InputManの入力チェック機能で誤入力を防ぎ、柔軟なショートカット機能で効率のいい入力を実現すれば、業務の効率アップに貢献するアプリケーションを提供することができます。

 今回は「Webサイトで同様の機能を開発することを頭に想定して読んでみてください」と最初に書きましたが、複雑なレイアウトや、細かい制御を行う入力フォームをWebのHTMLで作成するのは時間とコストが必要になるでしょう。

 InputMan for ASP.NETのような同等の機能をWeb版で提供しているものもあります。それも含めて、自社の開発でより顧客の要求に応えるアプリケーション作成の武器の一つとして活用してみてください。

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

著者プロフィール

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

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

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