「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ３ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。引用元: RuffRuff 予約販売
株式会社TsunでCTOをしている小笠原です！
最近Shopifyのアプリやテーマ開発をメインに行っています。
このブログではShopify開発に役立つ情報を共有しています。
Shopifyエンジニアの方の参考になれば嬉しいです！
下記の記事ではShopifyのメリットやデメリット、始め方について詳しく解説していますのでご参考にしてください。
Shopifyとは？ショッピファイのメリットやデメリット｜Shopifyについて徹底解説
なぜやるのか
Shopifyでストア構築するときによく使われるアプリにOrder Printerという公式アプリがあります。
テンプレートがあらかじめ用意されているんですが、独自のテンプレートを1から作るとなると結構骨が折れる作業だったので、こうすれば効率よく作れるよ！という方法をご紹介したいと思います。
作成したもの
下記を実現したVS Codeの開発環境
- テンプレートのLive Preview (コードを変更した結果がすぐに確認できる)
- Liquidのフォーマットとオートコンプリート
前提条件
対象読者
- Order Printerを使ったことがある
- Liquidの基礎的な知識がある
- VS Codeのユーザー
準備するもの
- VS Codeの最新バージョン (執筆時点では Version: 1.67.2)
作成方法
テンプレートのLive Preview
まずは今回の一番の目玉であるテンプレートのLive Previewをできるようにします。
やることは拡張機能の2つインストールするだけです。
まず、VS Codeの拡張機能 Shopify Liquid Preview をインストールします。
この拡張機能によって、Liquidで書いたコードが即座にHTMLに変換されたプレビューが見れるようになります。
Order Printerのテンプレートを作成する場合、Liquid variableを使っていると思いますが、Liquid variableの値もプレビューに反映することが可能です。
やり方はLiquidファイルに対応したJSONを作成して、プレビュー時に指定してあげるとLiquid variableを反映してくれます。
このままでは実際に印刷時の文字の大きさや位置がわからないので、拡張機能 HTML Preview をインストールします。
HTML Preview によってHTMLがどのように表示されるかがプレビューできるので、下記のようにLiquidを変更した結果がどのように表示されるかが即座にわかるようになります！
Liquidのフォーマットとオートコンプリート
Live Previewだけでも十分開発効率は上がりますが、フォーマットとオートコンプリートもできるようにしましょう！
Liquid という拡張機能があるので、インストールします。
これだけでLiquidファイルのハイライト、フォーマット、オートコンプリートなどができるようになります。
複数行のとき(liquid tag)にフォーマットの不具合がありましたが、その他は概ね問題なく使えました。
Order Printerのテンプレート作成時にはこの拡張機能を使って、フォーマットを整えたりするのがいいかなと思います。
まとめ
今回はOrder Printerアプリのテンプレートを開発する環境について紹介しました。
もっとこうしたほうが作業しやすいよ！などありましたら是非コメントで教えて下さい！
Tsun Inc.ではOrder Printerを使った注文書等の独自テンプレートにも対応しています。
独自の注文書や伝票を作成したい方は、ぜひTsun Inc.へお問い合わせください。
