QRCode for ASP.NET Web Forms

Transcription

1 更 新 グレープシティ 株 式 会 社

2 目 次 製 品 の 概 要 2 ComponentOne Studio for ASP.NET Web Forms のヘルプ 2 構 造 3 クイックスタート:QRCodeの 追 加 と 生 成 4-5 デザイン 時 のサポート 6 主 な 機 能 7 リサイズ 7-8 色 づけ 8-9 エラー 修 正 レベル 9 コードバージョン 9-10 エンコード ユーザーシナリオ 12 フォームに 入 力 したデータの 格 納 名 刺 情 報 の 格 納 ロゴの 追 加 Copyright GrapeCity inc. All rights reserved.

3 製 品 の 概 要 QRCode for ASP.NET Web Forms を 使 用 して 関 連 付 けられている 項 目 に 関 する 情 報 を 格 納 できます QRCode(Quick Response Code)は 白 色 背 景 の 四 角 いグリッド 内 に 並 べられた 黒 色 の 四 角 い 点 で 構 成 される2 次 元 のバーコードです これは カメラやス マートフォンなどのイメージングデバイスで 読 み 取 ることができる 機 械 読 み 取 り 式 のコー ドです バーコードとは 異 なり QRCodeは 縦 横 の 両 方 向 にデータを 格 納 するため 同 じ スペースに 従 来 のバーコードの 最 大 100 倍 の 情 報 を 格 納 できます QRCodeコードは 出 荷 状 態 の 詳 細 などを 追 跡 するために 製 品 パッケージやラベルに 使 用 したり ブランディングの 目 的 やユーザーを 他 のWebサイトにリダイレクトするために 広 告 新 聞 雑 誌 Webサイトなどでも 広 く 使 用 されています 主 要 な 機 能 サイズ: 必 要 に 応 じてQRCodeのサイズおよび 解 像 度 を 変 更 します 詳 細 につい ては リサイズ を 参 照 してください 色 : 色 を 変 更 して ブランドに 合 わせてカスタマイズされたQRCodeを 作 成 します 詳 細 については 色 づけ を 参 照 してください エラー 修 正 :コードが 損 傷 した 場 合 でもデータを 復 元 できるように 最 大 30%のエ ラー 修 正 レベルを 設 定 します 詳 細 については エラー 修 正 レベル を 参 照 してく ださい エンコード:4つのエンコードオプション(Automatic Numeric Alphanumeric Byte)から 選 択 します 詳 細 については エンコード を 参 照 してください ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の 各 コントロールで 共 通 したトピック アセンブリの 追 加 テーマの 適 用 クライアント 側 情 報 などについては ComponentOne Studio for ASP.NET Web Formsユーザーガイド を 参 照 してくださ い 2 Copyright GrapeCity inc. All rights reserved.

4 構 造 次 の 図 に QRCodeのさまざまな 要 素 を 示 します ポジションマーカー:QRCodeの 境 界 を 識 別 するために 使 用 されます 書 式 情 報 :エラー 修 正 レベルやマスク 情 報 など 失 われたデータの 復 元 に 使 用 される 情 報 を 保 持 します アラインメントマーカー:さまざまな 角 度 からコードをスキャンできるようにします タイミングコード:コードのサイズの 決 定 に 使 用 されます バージョン 情 報 :コードリーダーが 読 み 取 っているコードのタイプを 判 定 するために 使 用 されます デッドスペース:データを 周 囲 から 分 離 します データ:QRCodeに 関 連 付 けられている 項 目 に 関 する 情 報 を 保 持 します 3 Copyright GrapeCity inc. All rights reserved.

5 クイックスタート:QRCodeの 追 加 と 生 成 このトピックでは ASP.NETアプリケーションでC1QRCodeコントロールを 使 用 および 構 成 する 方 法 について 説 明 します 手 順 1/2:アプリケーションの 作 成 QRCode for ASP.NET Web Forms ASP.Netアプリケーションを 作 成 し WebフォームにQRCodeコントロールを 追 加 するには 次 の 手 順 を 実 行 します 1. Visual Studioで 新 しいASP.Net Webアプリケーションを 作 成 し 新 しいWebフォームを 追 加 します 2. ツールボックスで C1QRCode コントロールを 見 つけ それをWebフォームに 配 置 します ツールボックスにこのコントロールが 見 つからない 場 合 は 右 クリックし [アイテムの 選 択 ]を 選 択 します [ツー ルボックスアイテムの 選 択 ]ダイアログボックスが 表 示 されます コントロールを 見 つけたら [OK]をクリックしま す 手 順 2/2: 2:QRCodeの 生 成 QRCodeを 生 成 するには 次 の 手 順 を 実 行 します デザイナの 場 合 1. スマートタグをクリックします [C1QRCodeのタスクメニュー] のタスクメニュー]が 表 示 されます 2. QRCodeにエンコードするテキストをTextプロパティに 追 加 します 3. アプリケーションを 実 行 します QRCodeが 生 成 されます ソースビューの 場 合 QRCodeを 生 成 するには <cc1:c1qrcode>タグ 内 のTextプロパティを 設 定 します <cc1:c1qrcode ID="C1QRCode1" runat="server" Text="QRCode for ASP.NET Web Forms" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 して QRCodeを 生 成 するテキストを 追 加 します C# C1QRCode1.Text = "QRCode for ASP.Net Wijmo"; VB C1QRCode1.Text = "QRCode for ASP.Net Wijmo" ここまでの 成 果 アプリケーションを 実 行 すると Textプロパティに 追 加 したテキストがQRCodeにエンコードされます 4 Copyright GrapeCity inc. All rights reserved.

6 スマートフォンなどのデバイスでQRCodeリーダーを 使 用 してこのQRCodeをスキャンすると "QRCode for ASP.NET Web Forms"というテキストがデコードされます 5 Copyright GrapeCity inc. All rights reserved.

7 デザイン 時 のサポート C1QRCodeは カスタマイズされたコンテキストメニュー スマートタグ および 充 実 したデザイン 時 サポートを 提 供 するデザイ ナを 備 えており オブジェクトモデルの 操 作 が 簡 素 化 されています 以 下 のセクションでは C1QRCodeのデザイン 時 環 境 を 使 用 してC1QRCodeコントロールを 設 定 する 方 法 について 説 明 しま す C1QRCode タスクメニュー テキスト: QRCodeにエンコードするテキストを 指 定 します エンコード: 次 のエンコードオプションがあります Automatic Numeric(3 数 字 ごとに10ビット) Alphanumeric(2 文 字 ごとに11 ビット)およびByte( 文 字 ごとに8ビット) セルサイズ: 解 像 度 を 改 善 するには シンボルのサイズをQRCodeのサイズに 応 じて 増 減 できます バージョン: C1QRCodeコントロールは 1から10までのQRコードバージョンを 生 成 できます 最 もコンパクトなバージョンを 自 動 的 に 使 用 するには CodeVersionプロパティを0(デフォルト 値 )に 設 定 します エラー 訂 正 レベル: 以 下 の4つのオプションがあります Low L: 最 大 7%の 損 傷 を 修 正 できます Medium M: 最 大 15%の 損 傷 を 修 正 できます Quartile Q: 最 大 25%の 損 傷 を 修 正 できます High H: 最 大 30%の 損 傷 を 修 正 できます バージョン 情 報 :[バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます 6 Copyright GrapeCity inc. All rights reserved.

8 主 な 機 能 リサイズ QRCodeは 容 易 にスキャンできるくらいに 大 きくすると 同 時 に あまりスペースを 取 らずに1ページに 収 まるように 小 さくする 必 要 があります コントロールおよびコントロール 内 のシンボルのサイズを 変 更 して コントロールの 解 像 度 を 向 上 することが できます コントロールおよびシンボルのサイズを 変 更 するには 次 の 手 順 を 実 行 します 正 しくスキャンするには QRCodeを 四 角 形 にする 必 要 があります デザイナの 場 合 1. QRCodeのサイズを 変 更 するには QRCodeの 端 をクリックし 目 的 の 高 さまたは 幅 になるようにドラッグします 2. シンボルのサイズを 変 更 するには スマートタグをクリックします [C1QRCodeのタスクメニュー] のタスクメニュー]で SymbolSizeプロ パティを 要 件 に 合 わせて 設 定 します 3. または QRCodeを 右 クリックし [プロパティ] [プロパティ]を 選 択 して プロパティウィンドウを 開 きます プロパティウィンドウ で Height Width SymbolSizeの 各 プロパティを 設 定 します ソースビューの 場 合 <cc1:c1qrcode>タグ 内 でHeight Width SymbolSizeの 各 プロパティを 設 定 して QRCodeのサイズを 変 更 します <cc1:c1qrcode ID="C1QRCode1" runat="server" Height="150px" Text="QRCode for ASP.NET Web Forms" Width="150px" SymbolSize="5" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 し コードビューでHeight Width SymbolSizeの 各 プロパティを 設 定 します C# C1QRCode1.Height = 150; C1QRCode1.Width = 150; C1QRCode1.SymbolSize = 5; VB C1QRCode1.Height = 150 C1QRCode1.Width = 150 C1QRCode1.SymbolSize = 5 ここまでの 成 果 アプリケーションを 実 行 し QRCodeとシンボルのサイズが 大 きくなっていることを 確 認 します 7 Copyright GrapeCity inc. All rights reserved.

9 色 づけ 通 常 QRCodeは 白 黒 ですが QRCodeのスキャン 性 能 を 損 なうことなくコントロールに 色 を 付 けることができます これは QRCodeをカスタマイズし ブランディングを 追 加 する 最 も 簡 単 な 方 法 です QRCodeには 色 のほかにも ロゴなどの 画 像 を 乗 せてカスタマイズすることもできます 詳 細 については ロゴの 追 加 を 参 照 してください QRCodeの 背 景 を 暗 い 色 にし シンボルを 明 るい 色 にすると 正 しくスキャンされない 可 能 性 があるため これはお 勧 め しません デザイナの 場 合 1. QRCodeを 右 クリックし [プロパティ] [プロパティ]を 選 択 します プロパティウィンドウが 開 きます 2. プロパティウィンドウで BackColorおよびForeColorプロパティを 設 定 します ソースビューの 場 合 <cc1:c1qrcode>タグ 内 でBackColorおよびForeColorプロパティを 設 定 して QRCodeに 色 を 追 加 します <cc1:c1qrcode ID="C1QRCode1" runat="server" BackColor="#FFFFCC" ForeColor="#6600CC" Text="QRCode for ASP.NET Web Forms" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 し コードビューでBackColorおよびForeColorプロパティを 設 定 します C# C1QRCode1.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFFFCC"); C1QRCode1.ForeColor = System.Drawing.ColorTranslator.FromHtml("#6600CC"); VB C1QRCode1.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFFFCC") C1QRCode1.ForeColor = System.Drawing.ColorTranslator.FromHtml("#6600CC") ここまでの 成 果 アプリケーションを 実 行 し QRCodeが 色 付 きで 表 示 されることを 確 認 します 8 Copyright GrapeCity inc. All rights reserved.

10 エラー 修 正 レベル これは データの 一 部 が 欠 けている またはQRCodeが 損 傷 している 場 合 などに QRCodeから 情 報 を 復 元 するために 役 立 ちま す この 機 能 は 画 像 やロゴを 乗 せてカスタマイズしたQRCodeを 作 成 する 場 合 に 便 利 です QRCodeに 画 像 やロゴを 乗 せると 一 部 のコードが 損 なわれますが それでも 容 易 にスキャンすることができます QRCodeコントロールには4つのエラー 修 正 レベルがあります Low L:7%のエラーを 許 容 します Medium M:15%のエラーを 許 容 します Quartile Q:25%のエラーを 許 容 します High H:30%のエラーを 許 容 します QRCodeコントロールのエラー 修 正 レベルを 変 更 するには 次 の 手 順 を 実 行 します デザイナの 場 合 1. スマートタグをクリックします [C1QRCodeのタスクメニュー] のタスクメニュー]が 表 示 されます 2. 要 件 に 合 わせてErrorCorrectionLevelコンボボックスからエラー 修 正 レベルを 選 択 します 3. または QRCodeを 右 クリックし [プロパティ] [プロパティ]を 選 択 して プロパティウィンドウを 開 きます プロパティウィンドウ で ErrorCorrectionLevelプロパティを 設 定 します ソースビューの 場 合 <cc1:c1qrcode>タグ 内 のErrorCorrectionLevelプロパティを 設 定 して QRCodeのエラー 修 正 レベルを 変 更 します <cc1:c1qrcode ID="C1QRCode1" runat="server" ErrorCorrectionLevel="H" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 し コードビューでErrorCorrectionLevelプロパティを 設 定 します C# C1QRCode1.ErrorCorrectionLevel = C1.Web.Wijmo.Controls.C1QRCode.ErrorCorrectionLevel.H; VB C1QRCode1.ErrorCorrectionLevel = C1.Web.Wijmo.Controls.C1QRCode.ErrorCorrectionLevel.H ここまでの 成 果 エラー 修 正 レベルが 30%のエラーを 許 容 するH(High)に 設 定 されました コードバージョン QRCodeコントロールには 0から10までの11 個 のコードバージョンがあります コードバージョンごとに QRCodeを 形 成 する 9 Copyright GrapeCity inc. All rights reserved.

11 白 黒 の 四 角 い 点 の 構 成 が 異 なります 構 成 とは 1つのシンボルに 含 まれる 白 黒 の 点 の 数 を 意 味 します この 白 黒 の 点 の 配 列 を モジュール と 呼 びます バージョン0は 高 さと 幅 がともに21のモジュールで 構 成 されます バージョンが1つ 上 がるごと に モジュールが1 辺 4つずつ 増 えます QRCodeにエンコードされる 情 報 量 が 多 くなるほど より 多 くのモジュールが 必 要 となり QRCodeシンボルも 大 きくなります QRCodeコントロールのコードバージョンを 変 更 するには 次 の 手 順 を 実 行 します デザイナの 場 合 1. スマートタグをクリックします [C1QRCodeのタスクメニュー] のタスクメニュー]が 表 示 されます 2. 要 件 に 合 わせてCodeVersionプロパティを 設 定 します 3. または QRCodeを 右 クリックし [プロパティ] [プロパティ]を 選 択 して プロパティウィンドウを 開 きます プロパティウィンドウ で CodeVersionプロパティを 設 定 します ソースビューの 場 合 <cc1:c1qrcode>タグ 内 のCodeVersionプロパティを 設 定 して QRCodeのコードバージョンを 変 更 します <cc1:c1qrcode ID="C1QRCode1" runat="server" CodeVersion="8" Text="QRCode for ASP.NET Web Forms" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 し コードビューでCodeVersionプロパティを 設 定 します C# C1QRCode1.CodeVersion = 8; VB C1QRCode1.CodeVersion = 8 ここまでの 成 果 QRCodeのコードバージョンが8に 変 更 され モジュールが 増 えました エンコード QRCodeは データを 効 率 よく 保 存 するため 4つのエンコードモードで 構 成 されます Numeric: 数 字 の0~9をエンコードできます 10 Copyright GrapeCity inc. All rights reserved.

12 AlphaNumeric: 数 字 の0~9 大 文 字 のA~Z およびその 他 の 文 字 (スペース $ % * + -. / : ),)をエンコードできま す Byte:デフォルトでは ISO/IEC をエンコードできます また 定 義 されているその 他 の 一 部 の 文 字 セットをエン コードすることもできます Automatic:コントロールに 追 加 されたテキストに 基 づいてエンコードモードを 設 定 します 英 数 字 モードでは バイトモードよりメッセージが 圧 縮 されますが 小 文 字 のアルファベットを 格 納 することができず いく つかの 句 読 点 のみを 保 存 することができます QRCodeコントロールのエンコードモードを 変 更 するには 次 の 手 順 を 実 行 します デザイナの 場 合 1. スマートタグをクリックします [C1QRCodeのタスクメニュー] のタスクメニュー]が 表 示 されます 2. 要 件 に 合 わせてEncodingコンボボックスからエンコードモードを 選 択 します 3. または QRCodeを 右 クリックし [プロパティ] [プロパティ]を 選 択 して プロパティウィンドウを 開 きます プロパティウィンドウ で Encodingプロパティを 設 定 します ソースビューの 場 合 <cc1:c1qrcode>タグ 内 のEncodingプロパティを 設 定 して QRCodeのエンコードモードを 変 更 します <cc1:c1qrcode ID="C1QRCode1" runat="server" Encoding="Byte" Text="QRCode for ASP.NET Web Forms"/> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 し コードビューでEncodingプロパティを 設 定 します C# C1QRCode1.Encoding = C1.Web.Wijmo.Controls.C1QRCode.Encoding.Byte; VB C1QRCode1.Encoding = C1.Web.Wijmo.Controls.C1QRCode.Encoding.Byte ここまでの 成 果 エンコードモードがByteに 変 更 され 小 文 字 数 字 および 句 読 点 を 含 む 文 字 をQRCodeにエンコードすることができます 11 Copyright GrapeCity inc. All rights reserved.

13 ユーザーシナリオ QRCodeは 次 のような 多 くの 目 的 で 使 用 できます ユーザーをWebサイトにリダイレクトする 問 い 合 わせ 電 話 番 号 や 電 子 メールアドレス 全 体 を 入 力 することなく 電 話 したり 電 子 メールを 送 信 する クーポンなどの 特 典 を 取 得 する 方 向 を 確 認 する 曲 を 聴 いたり ビデオを 視 聴 する WIFIネットワークに 接 続 する フィードバックフォームなどのフォームを 格 納 する ブランドなどをプロモートする 以 下 のトピックでは QRCodeの 使 用 例 をいくつか 示 します 以 下 のトピックは 読 者 がVisual Studio.NETのプログラミングに 精 通 していることを 前 提 としています フォームに 入 力 したデータの 格 納 QRCodeを 使 用 して ユーザーがフォームに 入 力 したデータを 格 納 できます これにより 毎 回 同 じ 情 報 を 入 力 しなくても QRCodeを スキャンするだけで 情 報 を 取 得 できます このトピックでは フォームに 追 加 された 情 報 をQRCodeに 格 納 するアプリケーションを 作 成 する 方 法 を 示 します Visual Studioで 新 しいASP.Net Webアプリケーションを 作 成 し 新 しいWebフォームを 追 加 します さらに 次 の 手 順 を 実 行 します デザイナの 場 合 1. Webフォームに3つのラベル 2つのテキストボックス 1つのコンボボックス 1つのボタンを 配 置 し 次 のようにプロパティを 設 定 します コントロール 名 プロパティ 値 Label1 Text 名 前 : Label2 Text 電 話 番 号 : Label3 Text 性 : ComboboxItem1 Text Value 男 性 ComboboxItem1 Text Value 女 性 Button1 ID Text 提 出 フォームは 次 の 図 のように 表 示 されます 2. ツールボックスでC1QRCode コントロールを 見 つけ それをWebフォームに 配 置 します ツールボックスにこのコントロールが 見 つからない 場 合 は 右 クリックし [アイテムの 選 択 ]を 選 択 します [ツールボック スアイテムの 選 択 ]ダイアログボックスが 表 示 されます コントロールを 見 つけたら [OK]をクリックします 12 Copyright GrapeCity inc. All rights reserved.

14 3. プロパティウィンドウを 開 き DisplayVisibleプロパティをfalseに 設 定 します これにより [ 提 出 ]ボタンがクリックされるまで コ ントロールは 非 表 示 になります ソースビューの 場 合 すべてのコントロールを 追 加 し すべてのプロパティを 設 定 すると ソースビューのフォームのコードは 次 のようになります <p> <asp:label ID="Label1" runat="server" Text=" 名 前 :"></asp:label> <asp:textbox ID="TextBox1" runat="server"></asp:textbox> </p> <p> <asp:label ID="Label2" runat="server" Text=" 電 話 番 号 :"></asp:label> <asp:textbox ID="TextBox2" runat="server"></asp:textbox> </p> <p> asp:label ID="Label3" runat="server" Text=" 性 :"></asp:label> <cc1:c1combobox ID="C1ComboBox1" runat="server" Width="160px"> <Items> <cc1:c1comboboxitem ID="C1ComboBoxItem1" runat="server" Text=" 男 性 " Value=" 男 性 " /> <cc1:c1comboboxitem ID="C1ComboBoxItem2" runat="server" Text=" 女 性 " Value=" 女 性 " /> </Items> </cc1:c1combobox> </p> <p> <asp:button ID="Submit" runat="server" Text=" 提 出 " /><br/> <cc1:c1qrcode ID="C1QRCode1" runat="server" DisplayVisible="false" /> </p> コードの 場 合 ユーザーが 情 報 を 入 力 して[ 提 出 ]ボタンをクリックしたらQRCodeが 生 成 されるように [ 提 出 ]ボタンのクリックイベントに 次 のコードを 追 加 します C# protected void Submit_Click(object sender, EventArgs e) { C1QRCode1.Text = Label1.Text + " " + TextBox1.Text + '\n' + Label2.Text + " " + TextBox2.Text + '\n' + Label3.Text + " " + C1ComboBox1.SelectedValue; C1QRCode1.DisplayVisible = true; } VB Protected Sub Submit_Click(sender As Object, e As EventArgs) Handles Submit.Click C1QRCode1.Text = Label1.Text + " " + TextBox1.Text + ControlChars.Lf + Label2.Text + " " + TextBox2.Text + ControlChars.Lf + Label3.Text + " " + C1ComboBox1.SelectedValue C1QRCode1.DisplayVisible = True End Sub ここまでの 成 果 プロジェクトを 実 行 したら フォームに 詳 細 を 入 力 し [ 提 出 ]ボタンをクリックします 次 のように 入 力 した 詳 細 を 格 納 するQRCodeが 生 成 されます 13 Copyright GrapeCity inc. All rights reserved.

15 上 のQRCodeをリーダーでスキャンすると 次 のデータがデコードされます 名 前 : 小 林 直 子 電 話 番 号 : 048-2**-**** 性 : 男 性 名 刺 情 報 の 格 納 QRCodeの 使 用 方 法 として 名 刺 の 情 報 を 格 納 することができます これを 利 用 すると アプリケーションユーザーが 名 刺 の 連 絡 先 詳 細 を 手 動 で 入 力 したり 保 存 する 必 要 がなくなります スマートフォンを 使 用 してコードをスキャンするだけで 連 絡 先 詳 細 を 取 得 できるようになります Visual Studioで 新 しいASP.Net Webアプリケーションを 作 成 し 新 しいWebフォームを 追 加 します さらに 次 の 手 順 を 実 行 します デザイナの 場 合 1. Webフォームに6つのラベルを 配 置 し 次 のようにプロパティを 設 定 します コントロール 名 プロパティ 値 Label1 Text 小 林 直 子 Label2 Text GrapeCity Japan Label3 Text 住 所 : 埼 玉 県 川 口 市 本 町 川 口 センタービル3F Label4 Text 電 話 番 号 :048-2**-**** Label5 Text FAX 番 号 :048-2**-**** Label6 Text メールアドレス: naoko@grapecity.com 次 のようなフォームが 表 示 されます 14 Copyright GrapeCity inc. All rights reserved.

16 2. ツールボックスでC1QRCode コントロールを 見 つけ それをWebフォームに 配 置 します ソースビューの 場 合 ツールボックスにこのコントロールが 見 つからない 場 合 は 右 クリックし [アイテムの 選 択 ]を 選 択 します [ツー ルボックスアイテムの 選 択 ]ダイアログボックスが 表 示 されます コントロールを 見 つけたら [OK]をクリックしま す すべてのコントロールを 追 加 し プロパティを 設 定 すると ソースビューのフォームのコードは 次 のようになります <b> <asp:label ID="Label1" runat="server" Text=" 小 林 直 子 "></asp:label></b> <p> <asp:label ID="Label2" runat="server" Text="GrapeCity Japan"></asp:Label> <asp:label ID="Label3" runat="server" Text=" 住 所 : 埼 玉 県 川 口 市 本 町 川 口 センタービル 3F"> </asp:label> <asp:label ID="Label4" runat="server" Text=" 電 話 番 号 : 048-2**-****"> </asp:label> <asp:label ID="Label5" runat="server" Text=" FAX 番 号 : 048-2**-****"> </asp:label> <asp:label ID="Label6" runat="server" Text="メールアドレス: naoko@grapecity.com"> </asp:label> </p> <cc1:c1qrcode ID="C1QRCode1" runat="server" /> コードの 場 合 次 のコードをPage_Loadイベントに 追 加 して フォームに 追 加 されたラベルからQRCodeを 生 成 します C# C1QRCode1.Text = Label1.Text + '\n' + Label2.Text + '\n' + Label3.Text + '\n' + Label4.Text + '\n' + Label5.Text + '\n' + Label6.Text; VB C1QRCode1.Text = Label1.Text + ControlChars.Lf + Label2.Text + ControlChars.Lf + Label3.Text + ControlChars.Lf + Label4.Text + ControlChars.Lf + Label5.Text + ControlChars.Lf + Label6.Text ここまでの 成 果 プロジェクトを 実 行 すると 次 のように 名 刺 の 詳 細 を 格 納 するQRCodeが 生 成 されます 15 Copyright GrapeCity inc. All rights reserved.

17 上 のQRCodeをリーダーでスキャンすると 次 の 情 報 がデコードされます 小 林 直 子 GrapeCity Japan 住 所 : 埼 玉 県 川 口 市 本 町 川 口 センタービル3F 電 話 番 号 : 048-2**-**** FAX 番 号 :048-2**-**** メールアドレス: naoko@grapecity.com ロゴの 追 加 QRCodeでは エラー 修 正 レベルをH(High)に 設 定 すると 30%のエラーを 許 容 できます これにより QRCodeのスキャン 性 能 を 損 なうことなく QRCodeの 上 に 画 像 を 乗 せてQRCodeをカスタマイズできます ただし QRCodeのサイズの1/3を 超 える 大 き さの 画 像 を 乗 せることはお 勧 めしません Visual Studioで 新 しいASP.Net Webアプリケーションを 作 成 し 新 しいWebフォームを 追 加 します 次 に QRCodeにロゴを 乗 せるために 次 の 手 順 を 実 行 します デザイナの 場 合 1. ツールボックスで C1QRCode および C1BinaryImage コントロールを 見 つけ それをWebフォームに 配 置 します ツールボックスにこれらのコントロールが 見 つからない 場 合 は 右 クリックし [アイテムの 選 択 ]を 選 択 します [ツールボックスアイテムの 選 択 ]ダイアログボックスが 表 示 されます コントロールを 見 つけたら [OK]をクリックします 2. BinaryImageコントロールにImageURLを 追 加 して コントロールに 画 像 を 追 加 します 3. 次 の 表 に 示 すように コントロールのプロパティを 設 定 します コントロール 名 プロパティ 値 C1QRCode1 Text QRCode for ASP.NET Web Forms C1QRCode1 ErrorCorrectionLevel H C1QRCode1 ForeColor #CC0000 C1QRCode1 Height Width 150px 16 Copyright GrapeCity inc. All rights reserved.

18 C1BinaryImage1 Height 85px C1BinaryImage1 Width 100px ソースビューの 場 合 1. 両 方 のコントロールを 追 加 し すべてのプロパティを 設 定 すると ソースビューのフォームのコードは 次 のようになります <cc1:c1qrcode id="c1qrcode1" runat="server" Text="QRCode for ASP.NET Web Forms" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <c1:c1binaryimage id="c1binaryimage1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" /> 2. <head></head> タグ 内 に 次 のコードを 追 加 して QRCodeとBinaryImageに 適 用 するCSSクラスを 作 成 し 画 像 と QRCodeを 重 ねます <style type="text/css">.qrcodea1 { position:absolute; top: -1px; left: 4px; z-index: 1; }.imgb1 { position:absolute; top: 35px; left: 25px; z-index: 3; right: 759px; } </style> 3. CssClass それぞれのコントロールのタグ 内 で 次 のようにプロパティを 設 定 します <cc1:c1qrcode id="c1qrcode1" CssClass="qrcodeA1" runat="server" Text="QRCode for ASP.NET Web Forms" Height="150px" Width="150px" ErrorCorrectionLevel="H" ForeColor="#CC0000" /> <cc1:c1binaryimage id="c1binaryimage1" CssClass="imgB1" runat="server" Height="85px" ImageUrl="~/C1.png" Width="100px" /> ここまでの 成 果 プロジェクトを 実 行 すると 次 の 図 に 示 すように ロゴを 乗 せてカスタマイズされたQRCodeが 生 成 されます 17 Copyright GrapeCity inc. All rights reserved.