> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bouquet-inc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# カスタムストアフロント作成

> アプリデザインではデザイン要望を満たせず、独自でUIを実装したい場合に参照するページとなります。

## カスタムストアフロントとは？

アプリのウィジェットを使用せず、アプリのデータを活用することで、アプリウィジェットでは実現できない、サイトデザイントンマナに合わせた実装を行うことが可能です。

### 活用例

* クーポンをポップアップで表示させるのではなく、「クーポン一覧画面」として別ページで用意したい場合
* ポップアップ表示デザインを大幅に変更したい場合
* Shopifyと外部サービスをつなぎこみを行っており、外部サービス側でクーポン一覧画面を表示したい場合

### 注意点

* コードに関する質問に関しては、テーマによって、詳細が異なるため回答が難しいです
* 有償での対応となります

<Note>
  お付き合いのある制作会社にお問い合わせ下さい。

  ※弊社より制作会社をご紹介する事も可能のため、お問い合わせくださいませ。
</Note>

<Info>
  以下の内容はShopify制作会社・エンジニア向けの情報となります
</Info>

## エンジニア向け実装ガイド

## 概要

Discount Deckでは、顧客のクーポン情報をShopifyの顧客メタフィールドに圧縮保存しています。

**圧縮形式**: gzip圧縮 + Base64エンコード（フィールド名短縮化済み）

## メタフィールド情報

* **namespace**: `discount-deck`
* **key**: `discount-code-list` (全Extension共通)
* **type**: `json`

## 圧縮データ例(メタフィールドに入っている実際の値)

```
{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
```

## 技術要件

## 必須ライブラリ

**pako.js** - gzip圧縮/展開ライブラリ

## 事前準備: npm導入（React/TypeScript環境）

```
npm install pako
npm install --save-dev @types/pako
```

```
import * as pako from 'pako';
```

こちらの2つのコマンドを叩き、npmの導入を行ってください

## データ変換フロー

## フロントエンド実装の流れ

1. メタフィールドから圧縮データを取得
2. Base64デコード + gzip展開
3. 短縮形データ（JSON）を取得

という形での実装となります。

## 各段階のデータ形式

## 1. 圧縮データ（メタフィールドに保存されている形式）

メタフィールドから取得するデータです。gzip圧縮 + Base64エンコードされています。

```
{
  "c": "H4sIAAAAAAAAA6WSzW6DMBCEXyXyGaq1FwL4lqTKoZemooeqVQ8WsailxKAAVaMo..."
}
```

## 2. 短縮形データ（gzip展開後）

Base64デコード + gzip展開すると、フィールド名が短縮されたJSON形式のデータが返ってきます。

**重要**: 短縮キーの意味は「参考情報」セクションの短縮キーマッピング表を参照してください。

## 参考情報

## 短縮キーマッピング

メタフィールドデータで使用される短縮キーの一覧です

| 短縮キー | 元フィールド名                | 説明                   |
| ---- | ---------------------- | -------------------- |
| p    | imagePrefix            | 画像URLプレフィックス         |
| d    | discounts              | 割引データ配列              |
| i    | id                     | ディスカウントID            |
| t    | title                  | クーポンタイトル             |
| ty   | typeName               | ディスカウントタイプ（短縮形）      |
| ao   | appliesOncePerCustomer | 顧客あたり1回のみ適用（0/1）     |
| ac   | allCustomers           | 全顧客対象（0/1）           |
| sa   | startsAt               | 開始日時（ISO 8601）       |
| ea   | endsAt                 | 終了日時（ISO 8601、null可） |
| ip   | imageUrlPc             | PC用画像URL（ファイル名のみ）    |
| is   | imageUrlSp             | スマホ用画像URL（ファイル名のみ）   |
| desc | description            | 説明文                  |
| n    | note                   | 備考・注意事項              |
| vt   | valueType              | 割引値のタイプ（短縮形）         |
| p    | percentage             | 割引率（小数値）             |
| a    | amount                 | 割引金額                 |
| cc   | currencyCode           | 通貨コード（短縮形）           |

## タイプマッピング

**ディスカウントタイプ（ty）**

| 短縮形  | 元タイプ名                    | 説明                  |
| ---- | ------------------------ | ------------------- |
| DCB  | DiscountCodeBasic        | 基本的なクーポンコード         |
| DCBX | DiscountCodeBxgy         | Buy X Get Y 形式のクーポン |
| DCFS | DiscountCodeFreeShipping | 送料無料クーポン            |
| DCA  | DiscountCodeApp          | アプリ連携クーポン           |

**割引値タイプ（vt）**

| 短縮形 | 元タイプ名              | 説明        |
| --- | ------------------ | --------- |
| DP  | DiscountPercentage | パーセンテージ割引 |
| DA  | DiscountAmount     | 金額割引      |

**通貨コード（cc）**

| 短縮形 | 元通貨コード | 通貨名   |
| --- | ------ | ----- |
| J   | JPY    | 日本円   |
| U   | USD    | 米ドル   |
| E   | EUR    | ユーロ   |
| G   | GBP    | 英ポンド  |
| C   | CAD    | カナダドル |
| A   | AUD    | 豪ドル   |


## Related topics

- [アプリのデザインを変更できますか？](/apps/discount-deck/faq/customize-design.md)
- [Bouquet サポートセンター](/index.md)
- [インストール〜使用開始まで](/apps/user-tag-plus/setup/install.md)