【Shopify】ノーコードで Liquid の schema を作成できるアプリを作った話 

## はじめに
今回は、ノーコードで Shopify で使用されている Liquid の schema を作成できるアプリ「UnLiquidSchema」をリリースしたので、機能について紹介します。

https://unliquidschema.unreact.jp/

このアプリを使用すると、以下のような Liquid コードをノーコードで生成・コピーすることができます。

```liquid
"settings":[
  {
    "type": "checkbox",
    "id": "chechbox_id",
    "label": "ラベル",
    "default": true
  },
  {
    "type": "number",
    "id": "number_id",
    "label": "ラベル",
    "default": 3
  }
]
```

## ノーコードで Shopify で使用されている Liquid の schema を作成できるアプリを開発した理由

私たちは日々、Shopify の開発業務に携わっており、Liquid schema をコーディングする機会が頻繁にあります。しかし、その都度手動でコードを書く作業は、煩雑で時間がかかるだけでなく、エラーのリスクも伴います。特に、スキーマの複雑さが増すほど、作業の効率は低下し、同じようなコードを繰り返し記述する手間が発生します。

この問題を解決するため、「UnLiquidSchema」を開発しました。このアプリでは、コーディングの知識がなくても Liquid schema を簡単に作成できる環境を提供し、業務における非効率なプロセスを大幅に削減します。また、開発者が本来注力すべきコアな機能開発に時間を割けるよう、工数の削減を目指しました。

## ノーコードで Shopify で使用されている Liquid の schema を作成できるアプリの機能について

### settigs の定義作成

Liquid shcema で使用可能な type から必要な type を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/0a00809f-791a-0100-929b-c7fafbb45b2b.png)

type に応じてフォームが表示されるので、必要な項目を入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/15268253-952d-7e71-fa10-14eaae74a501.png)

setting の追加、削除、並び替えは、各ボタンをクリックすることで行えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/0e4405a6-bdf9-ec11-62a1-b4aa18cf903b.png)

- 追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/9373f721-ef94-827e-1ef4-cb58991b0d1d.png)

- 削除
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/a452ae74-8a45-a604-a3e2-7d00da7af2d5.png)

- 並び替え
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/5a178361-e3c5-6e61-ebe2-e0945262bcdd.png)


### settings コードの生成

画面下部の「コードを生成」ボタンを押すと、コードが生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/6055a32b-7ec9-e289-ed9c-38407682f572.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/660e276e-e964-6aaf-73e8-37d3bb763fd6.png)

### settings コードのコピー

画面下部の「コードをコピー」ボタンを押すと、生成したコードがクリップボードにコピーされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/cbade1b2-e40c-7a5b-db79-06a1f87aa656.png)

```liquid
"settings":[
  {
    "type": "checkbox",
    "id": "chechbox_id",
    "label": "ラベル",
    "default": true
  },
  {
    "type": "number",
    "id": "number_id",
    "label": "ラベル",
    "default": 3
  }
]
```

### settings コードの保存

Google ログインをしている場合、生成した settings のコードが保存されます。

保存したコードは、「settings コード履歴」ページで確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c0bf829b-9fab-117c-3310-9a2e3dd7b424.png)

「コードをコピー」ボタンを押すと、コードがクリップボードにコピーされます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/ca0cca3b-990c-b452-889e-ef263da83f0e.png)

```liquid
"settings":[
  {
    "type": "checkbox",
    "id": "chechbox_id",
    "label": "ラベル",
    "default": true
  },
  {
    "type": "number",
    "id": "number_id",
    "label": "ラベル",
    "default": 3
  }
]
```

「コードを元に新規作成」ボタンを押すと、以前作成した settings定義の状態から、settigs 定義の編集が行えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/5a7bc8d7-90f9-dccc-c476-5dd68e6e3870.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/c2b00778-3791-906b-ca55-07e1870d79e1.png)


## ノーコードで Shopify で使用されている Liquid の schema を作成できるアプリの実装について

アプリの技術スタックや機能について紹介します。

### 技術スタック

アプリは T3 Stack の構成で作成しました。

- Next.js
- TypeScript
- tRPC
- Prisma
- TailwindCSS
- Auth.js
- Supabase
- Vercel

今回のプロジェクトでは、Next.js の App Router を採用しました。

### Google ログイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665523/68a97eea-dac5-bd5e-5d1d-b63f6efbd461.png)

Google のログイン機能を作成しました。

フロントの認証情報の管理は、NextAuth.js に任せています。

adapter に PrismaAdapter を設定することで、認証情報のデータを Prisma を介してデータベースに格納しています。

```ts
adapter: PrismaAdapter(db) as Adapter
```

## まとめ
UnLiquidSchema は、ノーコードで Shopify の Liquid schema を自由に作成できるアプリです。シンプルな UI とストレスのない作業で、Shopify サイトのカスタマイズに貢献したい方にとって便利なツールです。

ご興味のある方は、ぜひご利用ください！

https://unliquidschema.unreact.jp/