SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

QRコードを作成するASP.NETアプリケーションの作成

ComponentOne Studioを活用したASP.NETアプリケーションの作成

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

アプリケーションの作成

 では、さっそくアプリケーションを作成していきます。このアプリケーションでは、テキストとWebサイトのURLを入力してQRコードを持った簡単なチラシを作成します。フォームにはC1QRCode、C1Splitter、TextBox、Labelコントロールを配置します。

Webページのレイアウト
Webページのレイアウト

Webページの作成

 最初に、C1SplitterコントロールとTextBox、Labelコントロールを作成します。

 (1)ASP.NET Webアプリケーション用のプロジェクトを用意します。

 (2)Site.Masterページでページ全体の設定を行います。

 (3)Default.aspxページに戻り、ツールボックスからC1Splitterコントロールをページにドラッグ&ドロップします。自動的に2つのペインを持ったC1Splitterコントロールが作成されます。

2つのペインを持ったC1Splitterコントロールが作成される
2つのペインを持ったC1Splitterコントロールが作成される

 (4)C1Splitterコントロールの次のプロパティを設定します。

プロパティ 設定値
Height 300px
SplitterDistance 500
Width 900px

 Height、WidthはC1Splitterコントロールのサイズを、SplitterDistanceはスライダーの位置を設定するプロパティです。

 (5)C1Splitterコントロールのテーマを設定し配色を施します。

 C1Splitterコントロールのスマートタグから「新しいテーマの作成」をクリックします。

スマートタグから「新しいテーマの作成」をクリック
スマートタグから「新しいテーマの作成」をクリック

 (6)新しいテーマの一覧が表示されるので、ここから「Start」を選び「次へ」ボタンをクリックします。

「Start」を選ぶ
「Start」を選ぶ

 (7)ThemeRollerが表示されるので、「プロジェクトに追加」ボタンをクリックします。

「プロジェクトに追加」ボタンをクリック
 「プロジェクトに追加」ボタンをクリック

 (8)テーマがC1Splitterコントロールに適用されます。しかし、ペインの背景色が少し薄いですね。これをカスタマイズします。もう一度C1Splitterコントロールのスマートタグを表示し、今度は「テーマのカスタマイズ」をクリックします。

「テーマのカスタマイズ」をクリック
「テーマのカスタマイズ」をクリック

 (9)再びThemeRollerが表示されるので、「コンテンツ」をクリックして展開し、背景色のボタンをクリックして薄い黄緑色(#9dfb9b)を選びます。このThemeRollerでは、かなり細かい配色の設定が行えます。

薄い黄緑色(#9dfb9b)を選ぶ
薄い黄緑色(#9dfb9b)を選ぶ

 (10)もう一度「プロジェクトに追加」ボタンをクリックします。上書き保存もメッセージが表示されるので、「はい」をクリックします。ThemeRollerを閉じてデザイン画面に戻ると、ペインの背景色が変更されています。

ペインの背景色が変更されている
ペインの背景色が変更されている

 (11)あとはLabelコントロールとTextBoxコントロール、Buttonコントロールをそれぞれのペインに配置していきます。

 (12)あとはC1QRCodeコントロールを左ペインに配置します。C1QRCodeコントロールは特に設定せず、すべてデフォルトのまま使用します。

完成したWebページ
完成したWebページ

ビハインドコードの作成

 入力したURLをQRコード化する処理を作成します。これは、ButtonコントロールのClickイベントハンドラで行います。

 これらは、TextBoxコントロールに入力された内容をLabelコントロールとC1QRCodeコントロールのTextプロパティに代入するだけです。C1QRCodeコントロールは、VisibleプロパティをTrueに設定すると、コントロールにQRコードを表示します。

Visual Basic
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
C#
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コードが作成できることを確認する
QRコードが作成できることを確認する

まとめ

 今回はとても簡単なアプリケーションで使いましたが、QRコードは、さまざまな用途に使えるとても便利なバーコードです。また、C1SplitterコントロールはWebページを有効に使える便利なコントロールです。1ページに多くの情報を整理して格納したい時などに威力を発揮するコントロールだと思います。

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

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8592 2015/03/26 18:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング