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

Posted at 2025-01-16

はじめに

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

このアプリを使用すると、以下のような 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 を選択します。

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

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

追加
削除
並び替え

settings コードの生成

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

settings コードのコピー

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

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

settings コードの保存

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

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

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

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

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