はじめに
最近いろいろなところでQRコードをよく見かけます。スマートフォンなどから簡単にWebにアクセスできたりするため、いろいろな製品に印刷されていますね。このQRコードは、バーコードに比べてとても多くの情報を格納でき、数字だけではなく英字や仮名漢字も使用できるので、利用範囲がどんどん広がっています。
例えば、飲食店などでは店のWebページへ簡単にアクセスできるようにURLをQRコードにしたり、製造業では製品の製造工場、製造日時、ロット番号などをQRコードにして製品に印刷したりするなど、あらゆる用途に対応できます。
ComponentOne Studioに含まれる「QRCode for ASP.NET Wijmo」のC1QRCodeコントロールは、簡単なコードを書くだけでこのQRコードを作成できるコントロールです。今回は、このC1QRCodeコントロールを使用して製品の製造情報を格納したQRコードを生成するアプリケーションを作ってみました。
対象読者
Visual Basic 2010／2012／2013、またはVisual C# 2010／2012／2013を使ってプログラムを作ったことがある人。
必要な環境
Visual Basic 2010／2012／2013、Visual C# 2010／2012／2013、Visual Studio 2010／2012／2013でプログラムが作れる環境。
なお、本プログラムは次の環境で開発・動作確認を行っています。
- OS：Windows 7
- 開発Tool：Visual Studio 2010、.NET Framework 4
プログラム実行時の注意事項
本稿の実行ファイル（バイナリファイル）を動かすには、zipファイルに同梱してある以下のファイルが必要になります。.NET Framework 4でのみご使用いただけます。
| ファイル名 | 説明 |
|---|---|
| C1.C1Report.4.dll | 本体アセンブリ |
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
これらのファイルを、実行プログラムと同じフォルダに格納します。
コントロールのインストール
トライアル版は、グレープシティのWebページから申し込みできます。
トライアル申込フォームが表示されるので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。
制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールと参照の追加
ComponentOne Studioをインストールしたら、プロジェクトにコントロールを追加します。
ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコントロールは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1QRCode」と「C1Splitter」コントロールです。
このコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。
| ファイル | 内容 |
|---|---|
| C1.C1Report.4.dll | 本体アセンブリ |
| C1.Web.Wijmo.Controls.4.dll | 本体アセンブリ |
C1QRCodeコントロールの概要
QRコード（Quick Response Code）は、白色背景の四角いグリッド内に並べられた黒色の四角い点で構成される2次元バーコードの一種で、専用のリーダーを必要とせず、カメラやスマートフォンなどのイメージングデバイスで読み取ることができる機械読み取り式のコードです。
バーコードとは異なり、QRコードは縦横の両方向にデータを格納するため、同じスペースに従来のバーコードの最大100倍の情報を格納することができます。
また、数字だけでなく英字や漢字などの多言語のデータも格納できるので、出荷状態の詳細などを追跡するための情報をQRコード化して製品パッケージやラベルに使用したり、広告・新聞・雑誌などからWebサイトに誘導したりする目的で広く使用されています。
最大情報格納量は、バージョンを最大（40）、誤り訂正レベルを最低（L）にした場合、以下の文字数を格納できます。
- 数字のみ：最大7,089文字
- 英数（US-ASCII）：最大4,296文字
- バイナリ（8ビット）：最大2,953バイト
- 漢字・かな（Shift_JIS）：最大1,817文字
C1QRCodeコントロールは、このQRコードを作成するコントロールです。使い方はとても簡単で、Textプロパティに文字を格納するだけで、その情報をQRコード化します。
C1QRCodeコントロールの主な機能
C1QRCodeコントロールは、以下の主な機能を持っています。
サイズ
必要に応じてQRコードのサイズおよび解像度を変更できます。
QRコードは、容易にスキャンできるくらいのサイズにすると同時に、あまりスペースを取らないように小さくする必要があります。その際、コントロールおよびコントロール内のシンボルのサイズを変更することで、コントロールの解像度を向上できます。
シンボルのサイズを変更するには、ページデザイナではSymbolSizeプロパティを、ソースビューの場合は<wijmo:C1QRCode>タグ内でSymbolSizeプロパティを設定して、QRコードのサイズを変更します。
SymbolSizeプロパティはデフォルトでは「3」です。
色
QRコードの色を変更して、ブランドに合わせてカスタマイズしたQRコードを作成できます。通常、QRコードは白黒ですがQRコードのスキャン性能を損なうことなくコントロールに色を付けることができます。
色の変更は、 デザイナの場合はプロパティウィンドウで、BackColorおよびForeColorプロパティを設定します。ソースビューの場合は、<wijmo:C1QRCode>タグ内でBackColorおよびForeColorプロパティを設定して、QRCodeに色を追加します。
エラー修正
QRコードが損傷した場合でもデータを復元できるように、最大30%のエラー修正レベルを設定することができます。
これは、データの一部が欠けているまたはQRコードが損傷している場合などに、QRコードから情報を復元するために役立ちます。
この機能は、画像やロゴを乗せてカスタマイズしたQRコードを作成する場合に便利です。QRコードに画像やロゴを乗せると、一部のコードが損なわれますが、それでも容易にスキャンすることができます。
QRCodeコントロールには4つのエラー修正レベルがあります。
- Low L：7%のエラーを許容します。
- Medium M：15%のエラーを許容します。
- Quartile Q：25%のエラーを許容します。
- High H：30%のエラーを許容します。
QRCodeコントロールのエラー修正レベルを変更するには、デザイナの場合はスマートタグをクリックし［C1QRCodeのタスクメニュー］からErrorCorrectionLevelコンボボックスでエラー修正レベルを選択します。またはプロパティウィンドウでErrorCorrectionLevelプロパティを設定します。
ソースビューの場合は、<wijmo:C1QRCode>タグ内のErrorCorrectionLevelプロパティを設定して、QRCodeのエラー修正レベルを変更します。
エンコード
QRCodeは、データを効率よく保存するため、4つのエンコードモードで構成されています。
Numeric
数字の0～9をエンコードできます。
AlphaNumeric
数字の0～9、大文字のA～Z、およびその他の文字（スペース $ % * + - . / : ) ,）をエンコードできます。
Byte
デフォルトでは、ISO/IEC 8859-1をエンコードできます。また、定義されているその他の一部の文字セットをエンコードすることもできます。
Automatic
コントロールに追加されたテキストに基づいてエンコードモードを設定します。
QRCodeコントロールのエンコードモードを変更するには、デザイナの場合はスマートタグをクリックし［C1QRCodeのタスクメニュー］からEncodingコンボボックスのエンコードモードを選択します。または、プロパティウィンドウで、Encodingプロパティを設定します。
ソースビューの場合は、<wijmo:C1QRCode>タグ内のEncodingプロパティを設定して、QRCodeのエンコードモードを変更します。
ロゴの追加
QRコードでは、エラー修正レベルをH（High）に設定すると、30%のエラーを許容できます。これにより、QRコードのスキャン性能を損なうことなく、QRコードの上に画像を乗せてQRCodeをカスタマイズできます。
ただし、QRコードのサイズの1/3を超える大きさの画像を乗せると、QRコードが正しく認識されない可能性があります。ロゴの設定方法はオンラインヘルプを参照してください。
QRコードの構造
QRコードは以下の要素から構成されています。色ごとに図形とその機能を表示しています。
ポジションマーカー
QRCodeの境界を識別するために使用されます。
書式情報
エラー修正レベルやマスク情報など、失われたデータの復元に使用される情報を保持します。
アラインメントマーカー
さまざまな角度からコードをスキャンできるようにします。
タイミングコード
コードのサイズの決定に使用されます。
バージョン情報
コードリーダーが読み取っているコードのタイプを判定するために使用されます。
デッドスペース
データを周囲から分離します。
データ
QRCodeに関連付けられている項目に関する情報を保持します。
C1Splitterコントロールの概要
このアプリケーションでは、QRコード化する情報を入力する画面と完成後の画面を2つのペインに分けています。このページ分割を実装しているのが、C1Splitterコントロールです。
このコントロールはコンテナコントロールで、コンテナ表示領域を2つのサイズ変更可能なパネルに分割します。移動可能で縮小可能なバーを持ち、ユーザーがアプリケーション実行時に自由に左右のサイズを変えることができます。
このコントロールを使うことで、アプリケーションの操作領域を2つに分けることができます。
C1Splitterコントロールの特徴
C1Splitterコントロールは、次のような特徴を持っています。
パネルの拡張と縮小
1つのプロパティを設定するだけで、パネルを拡張または縮小できます。画像やマウスポインタが置かれたときのスタイルといった視覚効果をスプリッタバーに追加し、パネルの縮小や拡張を表します。
これは、Collapsedプロパティを使用します。このプロパティをTrueまたはFalseに設定することによって簡単に縮小／拡張できます。実効時には、エキスパンダーボタンをクリックしてパネルを拡張できます。
無限ネスト
ネスト機能を使用すれば、大量のデータを1つのページに整理できます。
C1Splitterコントロールでは、選択した方向の複数のスプリッタをネストでき、またパネルをリサイズすると、ネストされたスプリッタのサイズ変更も処理されます。
フルスプリット
FullSplitプロパティをTrueに設定することで、フルサイズスプリッタを作成できます。Webブラウザをリサイズすると、C1Splitterコントロールがスムーズに縮小・拡張されます。
テーマ
スマートタグをクリックするだけで、6種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling）のいずれかを選択してプログレスバーの外観を変更します。
オプションとして、jQuery UI から ThemeRoller を使用してカスタマイズしたテーマを作成します。
アニメーション効果
C1Splitterコントロールには、移動時のスプリッタバーの反応を変更するアニメーション効果が組み込まれています。デフォルトの遷移はEaseLinearすが、AnimateEasingプロパティを設定することによって別の効果に設定できます。
設定できる効果と設定値は以下のとおりです。
| 名前 | 説明 |
|---|---|
| FadeIn | コントロールの本体が拡張することにより、フェードインするように見えます。 |
| FadeOut | コントロールの本体が縮小することにより、フェードアウトするように見えます。 |
| ScrollInFromTop | コントロールの本体が拡張しながら上からスクロールインします。 |
| ScrollInFromRight | コントロールの本体が拡張しながら右からスクロールインします。 |
| ScrollInFromBottom | コントロールの本体が拡張しながら下からスクロールインします。 |
| ScrollInFromLeft | コントロールの本体が拡張しながら左からスクロールインします。 |
| ScrollOutToTop | コントロールの本体が縮小しながら上へスクロールアウトします。 |
| ScrollOutToRight | コントロールの本体が縮小しながら右へスクロールアウトします。 |
| ScrollOutToBottom | コントロールの本体が縮小しながら下へスクロールアウトします。 |
| ScrollOutToLeft | コントロールの本体が縮小しながら左へスクロールアウトします。 |
| Fold | コントロールの本体がまず垂直に縮小し、そのあと水平に縮小するため、折りたたまれるように見えます。 |
| UnFold | コントロールの本体がまず水平に拡張し、そのあと垂直に拡張するため、展開されるように見えます。 |
| OpenVertically | コントロールの本体がその領域の中心から垂直に拡張します。 |
| CloseVertically | コントロールの本体がその領域の中心から垂直に縮小します。 |
| OpenHorizontally | コントロールの本体がその領域の中心から水平に拡張します。 |
| CloseHorizontally | コントロールの本体がその領域の中心から水平に縮小します。 |
| Shake | コントロールの本体が水平に振動しながら拡張または縮小します。 |
| Bounce | コントロールの本体が垂直に振動しながら拡張または縮小します。 |
| DropInFromTop | コントロールの本体がコントロールの下から上へ拡張します。 |
| DropInFromRight | コントロールの本体がコントロールの左から右へ拡張します。 |
| DropInFromBottom | コントロールの本体がコントロールの上から下へ拡張します。 |
| DropInFromLeft | コントロールの本体がコントロールの右から左へ拡張します。 |
| DropOutToTop | コントロールの本体がコントロールの上へ縮小していきます。 |
| DropOutToBottom | コントロールの本体がコントロールの下へ縮小していきます。 |
| DropOutToLeft | コントロールの本体がコントロールの左へ縮小していきます。 |
C1Splitterコントロールの構成要素
C1Splitterコンテナコントロールは、SplitterPanel（スプリッタパネル）、エキスパンダーボタンという2つの基本的なオブジェクトで構成されています。スプリッタパネルは、Panel1およびPanel2の外観と動作を定義します。
C1Splitterコントロールは、スプリッタバーで区切られた2つのパネルで構成されます。パネルは、垂直に分割されている場合はスプリッタバーの左右、水平に分割されている場合はスプリッタバーの上下に表示されます。
デザイナでは、C1Splitterコントロールの左または上のパネルはPanel1、右または下のパネルはPanel2と名付けられます。
デザイナでは、Panel1プロパティと Panel2 プロパティによって各パネルの外観と動作を制御できます。どちらのパネルにもSplitterPanelオブジェクトの同じプロパティが含まれています。各パネルは個別に設定できるため、それぞれ異なる動作とスタイルを適用できます。
これらのカスタマイズを実現するには、次に挙げる SplitterPanel オブジェクトのプロパティを使用します。
| プロパティ | 説明 |
|---|---|
| Collapsed | パネルが縮小または拡張されているかどうかを示す値を取得または設定します。 |
| MinSize | スプリッタパネルの最小サイズを取得または設定します。 |
| ScrollBars | スプリッタパネルに表示するスクロールバーのタイプを取得または設定します。None、Horizontal、Vertical、Both、Auto の5つのオプションがあります。 |
分割タイプ
デフォルトのC1Splitterコントロールは、単純な垂直レイアウトです。垂直レイアウトでは、パネルは区切りによって左右に分けられています。区切りはバーと呼ばれます。
C1Splitterコントロールでは、基本的な分割タイプとして次の4つがあります。
水平分割
水平分割はパネルが複数の行に分けられ、1つ以上の C1Splitterバーによって Web ページに表現されます。
垂直分割
垂直分割は、C1Splitterコントロールのデフォルトの分割タイプです。垂直分割はパネルが複数の列に分けられ、1つ以上のC1Splitterバーによってパネルが区切られます。
複合分割
複合分割は、最初のC1Splitterコントロールに1つ以上の C1Splitterコントロールが含まれる分割です。複合分割は、複数の垂直スプリッタ、複数の水平スプリッタ、または垂直スプリッタと水平スプリッタの組み合わせを含む場合があります。
複合分割は、子C1Splitterコントロールを親C1Splitterコントロールのパネルに直接ドロップすることによって作成できます。
フルサイズ分割
フルサイズ分割は、Webブラウザのコンテンツ領域一杯に引き伸ばされた水平／垂直分割です。以下の画面は、Internet Explorer ブラウザでのフルサイズ分割を示しています。
フルサイズ分割を作成するには、FullSplitプロパティをTrueに設定します。
アプリケーションの作成
では、さっそくアプリケーションを作成していきます。このアプリケーションでは、テキストとWebサイトのURLを入力してQRコードを持った簡単なチラシを作成します。フォームにはC1QRCode、C1Splitter、TextBox、Labelコントロールを配置します。
Webページの作成
最初に、C1SplitterコントロールとTextBox、Labelコントロールを作成します。
（1）ASP.NET Webアプリケーション用のプロジェクトを用意します。
（2）Site.Masterページでページ全体の設定を行います。
（3）Default.aspxページに戻り、ツールボックスからC1Splitterコントロールをページにドラッグ＆ドロップします。自動的に2つのペインを持ったC1Splitterコントロールが作成されます。
（4）C1Splitterコントロールの次のプロパティを設定します。
| プロパティ | 設定値 |
|---|---|
| Height | 300px |
| SplitterDistance | 500 |
| Width | 900px |
Height、WidthはC1Splitterコントロールのサイズを、SplitterDistanceはスライダーの位置を設定するプロパティです。
（5）C1Splitterコントロールのテーマを設定し配色を施します。
C1Splitterコントロールのスマートタグから「新しいテーマの作成」をクリックします。
（6）新しいテーマの一覧が表示されるので、ここから「Start」を選び「次へ」ボタンをクリックします。
（7）ThemeRollerが表示されるので、「プロジェクトに追加」ボタンをクリックします。
（8）テーマがC1Splitterコントロールに適用されます。しかし、ペインの背景色が少し薄いですね。これをカスタマイズします。もう一度C1Splitterコントロールのスマートタグを表示し、今度は「テーマのカスタマイズ」をクリックします。
（9）再びThemeRollerが表示されるので、「コンテンツ」をクリックして展開し、背景色のボタンをクリックして薄い黄緑色（#9dfb9b）を選びます。このThemeRollerでは、かなり細かい配色の設定が行えます。
（10）もう一度「プロジェクトに追加」ボタンをクリックします。上書き保存もメッセージが表示されるので、「はい」をクリックします。ThemeRollerを閉じてデザイン画面に戻ると、ペインの背景色が変更されています。
（11）あとはLabelコントロールとTextBoxコントロール、Buttonコントロールをそれぞれのペインに配置していきます。
（12）あとはC1QRCodeコントロールを左ペインに配置します。C1QRCodeコントロールは特に設定せず、すべてデフォルトのまま使用します。
ビハインドコードの作成
入力したURLをQRコード化する処理を作成します。これは、ButtonコントロールのClickイベントハンドラで行います。
これらは、TextBoxコントロールに入力された内容をLabelコントロールとC1QRCodeコントロールのTextプロパティに代入するだけです。C1QRCodeコントロールは、VisibleプロパティをTrueに設定すると、コントロールにQRコードを表示します。
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
C1QRCode1.Text = TextBox3.Text
Label1.Text = TextBox1.Text
Label2.Text = TextBox2.Text
Label3.Text = TextBox3.Text
End Sub
protected void Button1_Click(object sender, EventArgs e)
{
C1QRCode1.Text = TextBox3.Text;
Label1.Text = TextBox1.Text;
Label2.Text = TextBox2.Text;
Label3.Text = TextBox3.Text;
}
コードを入力したら実際に実行し、QRコードが作成できることを確認します。
まとめ
今回はとても簡単なアプリケーションで使いましたが、QRコードは、さまざまな用途に使えるとても便利なバーコードです。また、C1SplitterコントロールはWebページを有効に使える便利なコントロールです。1ページに多くの情報を整理して格納したい時などに威力を発揮するコントロールだと思います。
