このトピックは、igQRCodeBarcode
コントロールで文字エンコードを任意に構成する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igQRCodeBarcode の概要: このトピックでは、主要機能、最小要件など、igQRCodeBarcode
コントロールの概念的情報を提供します。
igQRCodeBarcode の追加: このトピック グループでは、igQRCodeBarcode
コントロールを HTML ページと ASP.NET MVC アプリケーションに追加する方法を説明します。
このトピックは、以下のセクションで構成されます。
igQRCodeBarcode
のエンコードの構成は、このコントロールの data プロパティに渡された文字をエンコードするコントロールの機能と関連します。
既定では Shift_JIS エンコードが読み込まれ、igQRCodeBarcode
コントロールは最も効率的な方法でデータをバイナリ文字列に変換したり、逆にデータを8 ビットの文字に変換します。
igQRCodeBarcode
コントロールの既定の文字セットは、UTF-8 に事前設定されています。ただし、ISO 8859-1 文字セットが読み込まれている場合には、それが既定の文字セットとして使用されます。
以下の表で、igQRCodeBarcode
コントロールの文字エンコードとして構成できる要素について簡単に説明し、構成に使用されるプロパティにマップします。
構成可能な項目 | 詳細 | プロパティ |
---|---|---|
文字エンコード モード | エンコードが必要なデータの型に応じて、使用するエンコード モードを指定できます。 | |
文字セット | igQRCodeBarcode コントロールにより、さまざまな文字セットのデータをエンコードすることができます。 |
igQRCodeBarcode
は、data 文字のタイプに応じて、圧縮することで大量の文字をエンコードできます。encodingMode
を Kanji に設定すると、JIS Kanji 文字もエンコートできます (漢字のみがエンコードされます)。
encodingMode
の既定値は、Shift_JIS エンコードの場合 undefined、その他のエンコートの場合 byte に指定され、エンコードのロジックを渡すためのファイル サイズを最小に抑えることができます。
igQRCodeBarcode
コントロールが正しく動作するために、使用中の文字セットのそれぞれの文字エンコーディング ファイルをアプリケーションに読み込む必要があります。使用する各エンコードのファイルを読み込む必要があります。このファイルは infragistics.encoding.core.js
および infragistics.encoding_<encoding-name>.js
です。2 つめのファイルで、<encoding-name>
は ISO-8859 などのエンコード タイプを示しています。複数の infragistics.encoding_<encoding-name>.js
ファイルを追加することにより、複数の言語をサポートできます。
Ignite UI for jQuery™ パッケージ フォルダー構成の以下の場所で、任意のエンコード ファイルを見つけることができます。
次の表は、入力されたデータの型に応じて文字エンコード モードを設定する方法を説明しています。
構成の目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
各種データ シーケンスの最適なエンコード モードの自動認識 (該当する場合) | encodingMode | undefined |
10 進数セット (0-9) のデータ エンコード | encodingMode | numeric |
45 文字セットのデータ エンコード - 桁 (0-9)、大文字 (A-Z)、その他の文字 (space $ % * + _ ./ : )。 | encodingMode | alphanumeric |
8 ビット データ (各文字ごとに 8 ビット) の encodingMode バイトのエンコード。Shift JIS システムに基づく漢字のエンコード | encodingMode | kanji |
漢字モードを使う場合は、Shift_JIS エンコードを読み込む必要があります。
以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode
コントロールの外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
width | “200px” |
height | “200px” |
data | “花" |
encodingMode | “kanji” |
以下のコードはこの例を実装します。
HTML の場合:
<html>
<head>
<link rel="stylesheet" href="../../themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui.js"></script>
<!-- Ignite UI for jQuery Required Common JavaScript Files -->
<script src="../../igniteui/js/modules/infragistics.util.js"></script>
<script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
<script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
<script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
<!-- QR Code Barcode Specific JavaScript Files -->
<script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
<script src="../../igniteui/js/modules/encoding/infragistics.encoding_shift_jis.js"></script>
<script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
<script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
<script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
width: "200px",
height: "200px",
data: "花",
encodingMode:"kanji"
});
});
</script>
</head>
<body>
<div id="barcode"></div>
</body>
</html>
igQRCodeBarcode
コントロールには、既定の文字セット以外のデータをエンコーするサポートが組み込まれています。このサポートは、eciNumber プロパティで Extended Channel Interpretation (ECI) を適切に設定すると機能します。
エンコードのロジックを渡すためのファイル サイズを最小に抑えるために、eciNumber の既定値は、ISO-8859-1 文字セットが読み込まれている場合にはこの文字セットを表す 3 に、読み込まれていない場合には UTF-8 文字セットを表す 26 になります。
igQRCodeBarcode コントロールでサポートされる ECI 番号および対応する ISO 文字セットの一覧を、以下の表に示します。
ECI 番号 | ISO 文字セット |
---|---|
0 | CP 437 |
1 | ISO-8859-1 |
2 | CP 437 |
3 | ISO-8859-1 |
4 | ISO-8859-2 |
5 | ISO-8859-3 |
6 | ISO-8859-4 |
7 | ISO-8859-5 |
8 | ISO-8859-6 |
9 | ISO-8859-7 |
10 | ISO-8859-8 |
11 | ISO-8859-9 |
13 | ISO-8859-11 |
15 | ISO-8859-13 |
17 | ISO-8859-15 |
20 | Shift JIS |
21 | Windows-1250 |
22 | Windows-1251 |
23 | Windows-1252 |
24 | Windows-1256 |
25 | UTF-16 |
26 | UTF-8 |
27 | ISO-646-US |
28 | Big5 |
29 | GB 2312 |
30 | KSC-5601 |
以下の表は、要求ビヘイビアーをプロパティ設定にマップしています。
目的: | 使用するプロパティ: | 設定の選択肢: |
---|---|---|
文字セットの指定 | eciNumber | 使用する ISO 文字セットの ECI 番号 |
バーコードに含まれる ISO 文字セットの番号のエンコード | eciHeaderDisplayMode | show |
バーコードの ISO 文字セットの番号の省略 | eciHeaderDisplayMode | hide (デフォルト) |
エンコードされるデータはギリシア語で、eciNumber は ISO/IEC 8859-7 文字セットに対応する 9 を使用します。
以下のスクリーンショットは、以下の設定の結果、igQRCodeBarcode
コントロールの外観がどのようになるか示しています。
プロパティ | 値 |
---|---|
width | “200px” |
height | “200px” |
data | “ΑΒΓΔΕ” |
eciNumber | 9 |
eciHeaderDisplayMode | “show” |
以下のコードはこの例を実装します。
HTML の場合:
<html>
<head>
<link rel="stylesheet" href="../../themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui.js"></script>
<!-- Ignite UI for jQuery Required Common JavaScript Files -->
<script src="../../igniteui/js/modules/infragistics.util.js"></script>
<script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
<script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
<script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
<script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>
<!-- QR Code Barcode Specific JavaScript Files -->
<script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
<script src="../../igniteui/js/modules/encoding/infragistics.encoding_iso-8859-7.js"></script>
<script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
<script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
<script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
width: "200px",
height: "200px",
data: "ΑΒΓΔΕ",
eciNumber: 9,
eciHeaderDisplayMode: "show"
});
});
</script>
</head>
<body>
<div id="barcode"></div>
</body>
</html>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
QR コード固有の設定の構成 (igQRCodeBarcode): このトピックではコード例を使用して、エラー修正レベルやサイズ バージョン、FNC1 モード、アプリケーション インジケーターなど、QR (Quick Response) バーコードに特有の igQRCodeBarcode コントロール設定を構成する方法を説明します。
QR バーコードのサイズの構成 (igQRCodeBarcode): このトピックは、ストレッチや塗りつぶし、最小サイズ要素のサイズなど、igQRCodeBarcode
コントロールのサイズや寸法に関わる要素の設定方法について示します。
jQuery および MVC API リファレンス リンク (igQRCodeBarcode): このトピックでは、igQRCodeBarcode
コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub