> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-bar-code.md). # AX - バーコード ## 概要 **AX - バーコード** Experience Sites ページ上で、Salesforce のフィールド値に基づいて、QRコード、標準バーコード、その他の形式を含むスキャン可能なコードを生成する Experience Cloud コンポーネントです。 製品番号、注文 ID、追跡情報、イベント チケット、またはポータル利用者がモバイルデバイスでスキャンする必要のある任意のデータのコードを表示するために使用します。Experience Builder でバーコードの種類、サイズ、スタイルを設定し、ポータルのブランドに合わせます。 注文バーコードを表示する顧客ポータル、チケットの QR コード付きのイベント登録ページ、製品追跡を行うパートナーポータル、または利用者がスキャン可能なアクセスコードを必要とするセルフサービスサイトに最適です。 ## 設定 ### バーコードの種類の選択 AX - Bar Code は 103 種類の異なるバーコードをレンダリングします。必要なものを **種類** プロパティで選択します。ピックリストには各種類が qrcode や `qrcode` または `code128`なので、以下の一覧では各一般的な種類の横にその名前を示しています。

103種類のうち6種類。Type ピックリストでの名前付きで表示しています。値を印字しないコード（QR Code、Data Matrix、PDF417）では「値を非表示」をオンにしています。

対応する主なバーコードの種類 * **2次元コード:** QR Code (`qrcode`), Data Matrix (`datamatrix`), PDF417 (`pdf417`), Aztec Code (`azteccode`), MaxiCode (`maxicode`), DotCode (`dotcode`) * **小売 / 製品（1D）:** EAN-13 (`ean13`), EAN-8 (`ean8`), UPC-A (`upca`), UPC-E (`upce`), GS1-128 (`gs1-128`) * **物流 / 配送:** ITF-14 (`itf14`), Code 128 (`code128`), Interleaved 2 of 5 (`interleaved2of5`), GS1 DataBar (`databaromni` およびその他の `databar` 種類) * **汎用（1D）:** Code 39 (`code39`), Code 93 (`code93`), Codabar (`rationalizedCodabar`), MSI (`msi`), Plessey (`plessey`), Telepen (`telepen`) * **郵便:** USPS Intelligent Mail (`onecode`), POSTNET (`postnet`), PLANET (`planet`), Royal Mail (`royalmail`), Australia Post (`auspost`), Japan Post (`japanpost`) * **医薬品:** Pharmacode (`pharmacode`), PZN (`pzn`), HIBC（ `hibc` などの種類、たとえば `hibccode128`) サポートされている103種類のシンボロジーの全一覧は、このコンポーネントの **種類** プロパティで利用できます。
### プロパティ **種類** 生成するバーコードシンボロジーを選択します。ユースケースや業界標準に応じて適切な種類を選んでください。 **値** バーコードにエンコードするデータです。静的テキスト、またはページ上の別の AX コンポーネントで選択されたレコードを読み取るトークンを入力します。たとえば `{{accountTable.selectedRecord.AccountNumber}}`。その後、ユーザーが別のレコードを選択するとコードが更新されます。参照: [リアクティブ コンポーネント](/experience-cloud/experience-cloud-ja/hajimeni/reactive-components.md). {% hint style="info" %} 両方が設定されるまで、コンポーネントは空のままです。 **種類** と **値** が設定されます。値が選択した種類のルールに合わない場合（たとえば EAN-13 に文字を入れるなど）、コンポーネントはコードの代わりにエラーメッセージを表示します。 {% endhint %} **チェックサム** チェックサム桁の計算を有効または無効にします。バーコードの種類が対応している場合、データ整合性の層が追加されます。オンにすると、チェック文字も可読値に印字されます。既定ではオフです。 **幅** と **高さ** バーコードの最大サイズを任意の CSS 単位で設定します（単独の数値はピクセルを意味します）。幅の既定値はコンテナの 100% で、高さは指定しない限り幅に追従します。 **値を非表示** （既定ではオフ）コードと一緒に印字される可読値を削除し、よりすっきりした見た目にします。 **代替テキスト** バーコードを説明するアクセシブルなテキストを提供します。 ## スタイル設定 | 名前 | 説明 | 用途 | | ---------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | | **背景色** | バーコードコンポーネントの背景色を設定します。 | バーコードの線や数字とのコントラストが十分で、読みやすくスキャンしやすい色を選択してください。 | | **色** | バーの色（2次元コードではモジュールの色）を設定します。可読値では **テキスト色**. | 背景に対して目立つ色を選択し、視認性を高めます。 | | **テキスト配置** | 可読値をバーコードの周囲に配置します。12 個のオプションは、縦方向（上、中央、下）と横方向（左、中央、右、両端揃え）を組み合わせたもので、 **左上** から **下両端揃え**。既定は **下中央**. | テキスト配置を調整して、Web ページや印刷物全体のデザインとレイアウトに調和させます。 | | **テキスト色** | 可読値の色を設定します。場所に関係なく、 **テキスト配置** それが配置されます。 | 背景色に対して読みやすく、エンコードされた値が視覚的にアクセスしやすい色を選択してください。 |

同じ Code 128 の値に対する 3 つの Text Alignment オプションです。Justify は文字をコード全体の幅にわたって均等に配置します。

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-bar-code.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.