Shopifyのセクション開発を楽にするWebアプリを開発しました【UnLiquidSchema】
はじめに
この度、Shopify のセクション開発サポートツール「UnLiquidSchema」を作成しました。
「UnLiquidSchema」は、Shopify のセクション開発の際に Liquid の schema をノーコードで生成できるツールです。
この記事では、「UnLiquidSchema」の機能やリリースした背景、実装について紹介していきたいと思います。
Shopify のセクション開発で感じていた課題
弊社では、普段から Shopify のセクションやアプリを Liquid で開発する機会が多くあります。
その際、以下のようなの課題を感じていました。
schema の settings はうろ覚え
Shopify のセクション開発で肝になるのが、Liquid の schema の settings 定義です。実際にセクションを開発する際に、実現したいセクションの設定項目は頭にあるのですが、正確な settings の記述方法はうろ覚えであることが多いです。
例えば、schema の settings の type やその type で必要な設定項目(プロパティ)はなんとなくは覚えているけど、正確に書こうと思うと調べたりコピペしたりというようなイメージです。(まあ覚えればいいんですけど。)
JSON エラーが起きた時に見つけにくい
Shopify 管理画面のテーマのコード編集のエディタで作業する際の課題で、schema 内の JSON でエラーが起きた際にエラーの箇所が特定しづらいです。VSCode などを使って作業している場合は、そこまで問題ではないです。しかし、ちょっとした修正であれば、直接テーマのコード編集でやっちゃうので、そういう際に schema の JSON でエラーが起きると、コンマの位置などの間違い探しをする羽目になります。
UnLiquidSchema とは
今回、上記の課題を解決できるツールとして「UnLiquidSchema」を開発してリリースしました。
「UnLiquidSchema」を使うことで、Shopify のセクション開発で必要となる schema の settings をノーコードで生成することができます。
「UnLiquidSchema」の主な特徴は以下の通りです。
- GUI 操作で直感的に settings を作成できる
- type を選択すると、type に応じた入力項目が自動で表示される
- ログインすることで過去のコードを履歴として残せる
スクリーンショットと一緒に、UnLiquidSchema の使い方について紹介していきます。
UnLiquidSchema の使い方
使い方を詳しく説明していきます。UnLiquidSchema を開くと、以下の画面が表示されます。
コードを生成する
メインの機能であるコード生成の流れは以下の通りです。
- type を選択する
- type に応じた設定項目を入力する
- コードを生成する
コード生成についてさらに詳しく手順を紹介します。
「settings 定義」で、schema の settings を作成してコードを生成します。
まず、「type」を選択します。「type」はオートコンプリート形式になっているので、文字を入力して type を絞り込むこともできます。
type を選択すると、type に応じた設定項目の入力欄が表示されます。任意の値を入力します。
「settings を追加」で、settings を増やすことができます。
設定したい settings の入力が完了したら、「コードを生成」ボタンをクリックします。
必須項目の入力が問題なければ、settings のコードが生成されます。
「コードをコピー」ボタンで生成された settings のコードをクリップボードにコピーすることができます。あとは、コピーしたコードを手元の Liquid ファイルに貼り付けるだけです。
基本的な使い方は以上です。
コード生成の際に便利な機能として、「元に戻す・やり直す」や「定義をリセット」も用意しています。
また、settings の順番は矢印ボタンで入れ替えることができます。
コード生成履歴
もう一つのメイン機能として、「settings コード履歴」があります。ログインすることで、settigns のコード生成を履歴として保存することができます。コード履歴から、過去に生成したコードをコピーしたり、過去のコードを元に新規コードを作成したりすることができます。
ハンバーガーメニュー内の「ログイン」からログインできます。
今のところ、Google ログインのみ対応しています。
UnLiquidSchema の実装
今回のアプリの開発には「T3 Stack」を採用しました。弊社の別のプロダクト(UnTyping や UnSchedule)で T3 Stack を使ってみていい感じだったので、引き続き採用しています。
T3 Stack の簡単な説明については、以前の記事をご覧ください。
まとめ
今回は、Shopify のセクション開発をサポートするツール「UnLiquidSchema」を紹介させていただきました。
Liquid でセクション開発をされる方に、使っていただけれると嬉しいです!(リリースしたばかりなんので不具合があった場合はご連絡ください。)
最後までご覧いただきありがとうございました。
Discussion