※2021年のアップデートに伴いこの記事の内容は最新ではなくなりました。
テーマの開発方法については以下をご参照ください。
この記事の中のTheme Kitは最新のテーマはサポートしておりませんので、今後は以下のツールをお使いください。
開発作業中、コードの修正をおこなうたびにブラウザをリロードしていたのでは、貴重な時間が無駄に失われることになります。そんなことはだれも望んでいませんよね。
今回のチュートリアルでは、Preprosをテーマキット開発のワークフローに組み込む方法をステップバイステップで解説しますので、今後は手作業でブラウザのリロードをする必要がなくなります。チュートリアルで使用するツールは、Theme Kit、お好みのテキストエディタ、そしてPreprosです。
Theme Kitをインストール
Preprosによるライブリロードを実現する前に、作業するテーマとTheme Kitのセットアップが必要になります。Theme Kitのチュートリアルにある手順に従って設定すればOKです。今回、Shopifyテーマのライブリロードを実行する手段として、通常のCSSファイルとSass（SCSS）コンパイルという2種類の方法を扱っていきます。
1. theme watchを実行
Theme Kitの設定の最終ステップとして、theme watchコマンドを実行します。これにより、CSSファイルに加えた変更（PreprosのSCSSコンパイルまたは直接編集のどちらでも）が確実に監視・追跡され、Shopifyサーバーとあなたのストアに同期されます。
2. スタイルをtheme.liquidにリンク
既存テーマのCSSを使用
既存テーマをカスタマイズするには、新しいスタイルシートを追加するか、既存のものを修正していく必要があります。既存テーマへの軽微な修正なのであれば、変更のためのスタイルシートを追加するか、元のCSSファイルの最下部に変更を追加することをお勧めします。
カスタムCSSファイルを追加するには、layaoutディレクトリに移動し、theme.liquidファイルを見つけます。そして<head>の中に下記のコードを追加しますが、オリジナルのスタイルシートの後に追記するようにしてください。
{{ 'custom.css' | asset_url | stylesheet_tag }}
上記の例では、custom.cssが既存テーマにリンクしたいCSSファイルの名前になります。
テーマ内の新しいSCSSとディレクトリのセットアップ
SCSSに精通している人にとって、この方法は理にかなっています。過去にSCSSプロジェクトの設定をしたことがない場合は、まずSCSSについて確認しておきましょう。
ライブリロードするテーマに独自のSCSS構造を設定したいときは、Shopifyでテーマを開発するときと同様のアプローチをとることをお勧めします。ここではSMACSSのガイドラインとBEMのCSS命名規則を組み合わせます。これらのコンセプトになじみがない方は、このスケーラブルなシステムを構築するベストプラクティスについてぜひ調べてみてください。
セットアップするSCSSのフォルダ構造は、だいたい以下のようになります（下記例ではスタイルのみ表示しています）。
|-assets
|-theme.css // テーマテンプレートで使用されるコンパイル済みのCSS
|-styles
|-global
|-modules
|-settings
|-tools
| -vendor
|-theme.scss // assets/theme.cssにコンパイルされるファイル
styles/theme.scssがコンパイルされる場所がassets/theme.cssです。
SCSSコンパイルのためのフォルダー構造
SCSSパーシャルをstyle/のサブディレクトリに入れ、すべてのパーシャルをtheme.scssに@importすることが可能です。@importの指示は、基本的なSCSSプロジェクト設定に従うので、プロジェクト内のモジュラースタイルの順序について簡単に確認したりコントロールしたりできます。
今回のチュートリアルでは、モジュールディレクトリ内に_header.scssパーシャルを作成し、@importのステートメントを使用してすべてをリンクしています。
<head>内でtheme.liquidファイルのtheme.cssをリンクしてスタイルを付けることができます。
{{ 'theme.css' | asset_url | stylesheet_tag }}
既存のスタイルシートをSCSSにインポート
既存のスタイルシートを新しいSCSSフォルダ構造にインポートすることもできます。その場合、既存ファイルにLiquidオブジェクトが含まれていないことが条件となります。PreprosはLiquidをコンパイルできません。そのため、.liquidの拡張子をもつLiquidオブジェクトが含まれたファイルを使おうとすると、コンパイラがエラーを返します。
Liquidオブジェクトが含まれていないなら、シンプルにスタイルシートのファイルをvendor/にコピーし、パーシャルのファイル名を_name-of-file.scssのように_を付けてリネームします。それからスタイルシートをtheme.scssのトップに@importします。
Note：パーシャルのインポート時に、@importのステートメントに_を含める必要はありません。
スタイルフォルダは自動的に無視されます
Shopifyテーマでは、追加のトップレベルのディレクトリはテーマキットとShopifyサーバーの両方から無視されます。仮にzipファイルでアップロードしたとしても、styles/ディレクトリは含まれません。
とくに問題にならないと思いますが、テーマ全体を作業中のファイル（たとえばstyles/ディレクトリなど）と一緒に、Githubなどのバージョンコントロールシステムに保存しておく必要があります。
3. 開発ストアにPreprosをリンク
編集すべきファイル（CSSまたはSCSS）を理解し、準備も整いました。Preprosに取り掛かりましょう！
テーマをプロジェクトとして追加
まずテーマをプロジェクトとしてPreprosに追加します。ディレクトリ全体をPreprosアプリにドラッグしてください。またはPreprosの左下にある+アイコンをクリックしてプロジェクトを追加することもできます。
Preprosは、プロジェクトディレクトリにprepros.configファイルを作成します。このファイルには、アセットのコンパイル場所や設定の有効化・無効化などの構成情報が含まれます。Gitを使用している場合には、.gitignoreにルールを追加し、Preprosの構成に関わる変更を追跡したりコミットしたりしないようにしておきましょう（あえて望まない限りは）。
ウォッチするファイルとコンパイルする場所を決定
デフォルトでは、Preprosはプロジェクト内のどのファイルに加えられた変更もウォッチします。CSSファイルのライブリロードを実行したいだけなら、とくに多くの設定は必要になりません。
しかし、上述したようなSCSSフォルダ構造をセットアップした場合には、コンパイルされたstyles/theme.scssファイルをどこに出力するかPreprosに知らせておく必要があります。
theme.scssファイルの出力先を変更するには、出力のパスを変更したファイルをクリックし、出力したいディレクトリを選択します。デフォルトでは同じディレクトリになっていますが、Shopifyテーマを作成する場合にはassets/ディレクトリを出力先に指定します。
Liquidファイルをウォッチ
さらに、.liquidファイルもPreprosのウォッチ対象としてファイルリストに追加しておいてもいいでしょう。PreprosがLiquidをコンパイルしないので初期設定ではウォッチ対象にはなっていません。しかしShopifyは.liquidファイルを適切にレンダリングするため、Liquidファイルに変更が生じたときにもライブリロードするようにしておきたいところです。
.liquidファイルをウォッチリストに追加するには、.liquidファイルを右クリックして「Watch All .liquid Files」を選択します。
こちらも参考にしてください： Shopifyのテンプレート言語 Liquidの概要
ストアURLとライブプレビューをリンク
次のステップは、ストアプレビューのURLを設定することです。これは、Preprosが現在のShopifyストアとリンクし、ライブリロードを機能させるものです。CSSかSCSSをライブリロードする際にこの設定が必要です。
Settings > Live Previewに移動して、Custom Serverをチェックし、Server UrlにあなたのmyshopifyストアURLを入力します。
ライブリロードのディレイ設定
最後に、ライブリロードのディレイをPreprosに設定します。このディレイを設定する理由は、テーマキットに変更を検知する時間を与え、Shopifyサーバーに変更を同期させるためです。
Settings > Live Reloadに移動して、ディレイ時間を設定できます。わたしの経験では、SCSSファイルを用いるときはCSSファイルから変更を直にリロードするときよりも長めに設定する必要がありました。SCSSファイルの場合、コンパイルの過程がワンステップ長くなるためです。
CSSファイルを直に扱う場合にはディレイはだいたい1000ms付近になるでしょう。PreprosでSCSSコンパイルを使用する際には、少なくとも1500ms必要になります。ライブリロードがうまく機能していないようなときは、ディレイ時間を増やしてみてください。CSSの変更がShopifyサーバーに到達する前にリロードがおこなわれている可能性があります。
5. ライブプレビューで変更を確認 🙌
これでライブプレビューの設定が完了しました。立ち上げるには、
アイコンをクリックしましょう。これが、テーマの変更が発生したときに自動でリロードするタブまたはウィンドウになります。
内部の仕組み
これらが連動してどう機能しているのか？をご説明します。
たとえば_header.scssのようなSCSSパーシャルにおいて、テキストエディタで変更をおこなうと、そのパーシャルを @import経由で使用しているtheme.scssファイルが、Preprosによってtheme.cssへとコンパイルされます。コンパイルされたtheme.cssは、Preprosによってassets/フォルダーにアップデートされます。
Preprosによるコンパイルが済むと、コントロールしているポートのブラウザがライブリロードされます。ポートは、Preprosが提供するライブプレビューのURLバーで確認できます。ただし、ディレイを設定してあるので、1500msの休止時間を経てからライブリロードが実行されることになります。
一方、テーマキットはアップデートされたCSSファイルを検知し、Shopifyサーバーと同期します。
設定した1500msが過ぎると、アップデートされたCSSがShopifyストアに反映されます。Preprosがライブプレビューでリロードを実行し、Preprosとテーマキットによるライブリロードが可能になりました！
より高速な開発環境へ
おつかれさまでした！これでライブリロードの設定が完了です。スタイルの変更やテンプレートのアップデートをおこなうと、Preprosがブラウザを自動的にリロードしてくれます。
ShopifyでPreprosを使う際の制限事項
Preprosでは、SCSSファイルのLiquidオブジェクトがレンダリングされません
すでに述べたように、PreprosはLiquidをコンパイルしないため、テーマのsettingsオブジェクトにアクセスできません。つまり下記のようなことができないのです。
h2 {
color: {{ settings.color_primary }}
}
ソースマップ
わたしの調査の結果、Preprosのソースマップは一貫して機能するわけではないようです。そのため、とくにファイルが大量にある場合など、デバグが少し厄介になります。しかしPreprosは、作業中にコンパイルエラーが生じたときにはファイルやラインナンバーを示してログで知らせてくれます。ですから、これはさほど大きな問題ではないでしょう。
Preprosログで見られるSCSSエラーの例
Preprosのプラスアルファのメリット
Preprosにはたくさんの便利なツールが用意されています。全体のリストはこちらにあります。とくにテーマ開発者にとって役立つと思われるものを以下に挙げておきます。
ファイルの縮小
コンパイルされたCSSを自動で縮小するように環境設定するか、縮小バージョンをセットすることが可能です。ボックスをチェックするだけでサイトのパフォーマンスを向上できるので、素晴らしいですね。
プリフィクス不要
プリフィクスを書くのが面倒なら、コンパイルされたファイルのプリフィクスを不要にするオプションを選択します。どのCSSプロパティにプリフィクスが必要か、もう迷わなくてすみます。
Sass／Less／Stylusをコンパイル
ShopifyはネイティブにはLessやStylusをサポートしていませんが、Preprosを使えばお気に入りのCSSプリプロセッサを利用できます。たんにSCSSファイルをLessまたはStylusの拡張機能と構文に置き換えるだけで、Preprosがコンパイルを実行し、コンパイルされたアップデート済みのCSSファイルをテーマキットがShopifyサーバーに向けて変更します。
続きを読む
- 初めてのShopifyテーマセクション作成
- Shopifyの開発ストアについて知っておくべきこと
- オンラインスクール「デイトラ」が「Shopifyコース」を開講。Shopifyの具体的な利用方法だけでなく、営業や広告運用についても学習できるコース
- Liquidを使用してカスタムランディングページのテンプレートを作成する方法
- コンテンツのマネタイズ方法：成功するやり方と避けるべき間違い
- Shopifyアプリストアの広告：アプリユーザー数を伸ばすための新しいチャネル
- Shopifyアプリのレビューを獲得する方法
- Shopify API 2020-10バージョンの廃止情報
- アプリに適した料金モデルを選ぶには？
- チェックサムによって改良されたテーマ開発ツールが利用可能に
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
