チェックサムによって改良されたテーマ開発ツールが利用可能に

Shopifyテーマの作業中、ツール関連のトラブルで中断が起きると、予想外の大きな障害や遅延になることがあります。

※2021年のアップデートに伴いこの記事の内容は最新ではなくなりました。

テーマの開発方法については以下をご参照ください。

Shopifyアプリとテーマの開発方法

この記事の中のTheme Kitは最新のテーマはサポートしておりませんので、今後は以下のツールをお使いください。

Shopify CLI for themes

Shopifyテーマの作業中、ツール関連のトラブルで中断が起きると、予想外の大きな障害や遅延になることがあります。こうした体験を改善するために、テーマの変更にともなうローカルとリモートの同期プロセスを高速化する新しいバージョンのTheme Kitがリリースされました。

すでに利用可能となっている最新版のTheme Kitではチェックサムを使用し、変更のないファイルのアップロードとダウンロードをスキップすることで、開発者エクスペリエンスを向上します。この新しいアプローチは、デプロイとダウンロードのコマンド実行時間を大幅に短縮し、Theme Kitのパフォーマンスを強化します。

Theme Kitをまだ使ったことがない人のために説明すると、Theme Kitはテーマ作業のためのCLIツールです。Shopifyストアからテーマファイルをダウンロードし、ローカル環境で作業して、その変更をライブストアにプッシュできます。Theme Kitは開発者コミュニティで広く使われていて、クライアントのテーマに新機能を追加したり、ゼロからテーマを作成したりできます。

今回の記事では、Theme Kitを最新バージョンにアップデートする方法と新機能の内容をご紹介し、ツール改良のためにチェックサムを活用した背景なども見ていきたいと思います。 

テーマキットをアップデートする方法

アップデートの内容やチェックサムの詳細に入る前に、Theme Kitを最新バージョンにする方法を見ておきましょう。

あなたのマシンにTheme Kitがすでにインストールされている場合、theme updateを実行して新バージョンとアップデートがあるか確認します。執筆時点では、ver1.1.1が最新版です。アップデートはMac、Windows、Linuxで利用できます。

まだTheme Kitがインストールされていない場合は、こちらのGitHubベージにあるセットアップ方法に従ってください。新規インストールにより、最新のTheme Kitが実行されていることも確認できます。

こちらも参考にしてください：ローカル環境でテーマ開発をおこなうワークフローをセットアップする方法

最新のTheme Kitがインストールできたら、今まで同様のコマンドが使えますが、download、deploy、getの実行時には、より高速になった処理が体感できるはずです。

以前は、変更のないファイルも個別に転送されていましたが、現行バージョンでは編集されたファイルのみ転送します。このアップデートにより、テーマ開発における待ち時間を大幅に縮小できます。

たとえば、カスタムテーマの作業をローカルでおこない、product.liquidテンプレートファイルとtheme.scss.liquidスタイルシートの変更をデプロイする準備ができたら、theme deployのコマンドを実行してその変更をリンクしているShopifyストアにプッシュします。

今までは、このコマンド実行によってShopifyストアにあるすべてのテーマファイルが更新されていました。新しいバージョンのTheme Kitでは、2つの関連するファイル、product.liquidテンプレートファイルとtheme.scss.liquidスタイルシートだけが更新されます。

このような変更は、ダウンロードとデプロイにおける処理時間を大きく削減して、クライアントのために優れたストアフロント体験を構築するなど、開発業務にもっと時間を取れるようにします。

どのテーマファイルを同期時に無視すればよいのか判断するためにチェックサム機能をTheme Kitに実装し、これによりファイルスキップが実現しています。この新しい機能をもっと深く理解するために、チェックサムについて詳しく見ていきましょう。

チェックサムの仕組み

チェックサムはデジタルデータの内容を示す固有の値で、一般的にはデータの転送や保存時に起こり得るエラーを検出するために使用されています。ハッシュ関数がチェックサムの値を生成するためにファイルに対して実行され、この固有の値はファイル自体に変更や編集が発生すると変化します。

この仕組みを使うと、わずかな変更であっても、異なるチェックサムの値が生成されるため、そのファイルの変更にすぐ気づくことができます。チェックサムの値が作られると、固有の数字の比較によってオリジナルファイルから変更があるかないかが判別できます。

このプロセスは、暗号化、データ認証、ネットワーク検証、その他のデータ変更検出などにおいて幅広く利用されています。チェックサムの値の変化は明白なため、比較システムはすぐにチェックサムの値が補正されているかどうかを認識できるのです。

わたしたちのチームはチェックサムが安全でパフォーマンスの良いファイル変更認識方法であると判断し、ファイルの同期時にスキップするファイルを検出するため、テーマキットにチェックサムを実装しました。

最新のTheme Kitを使用すると、チェックサムの値が作業中のテーマに含まれる各ファイルに対して生成されます。コマンドのdeployを実行すると、Theme Kitは各ファイルのチェックサムの値をオリジナルのものと比較して、変更のあったファイルを認識し、チェックサムの値が異なっているファイルのみデプロイします。

たいていのテーマは100以上のファイルを内包しているため、各ファイルを個別に同期していると処理時間が膨大になります。数百のファイルで構成されたテーマを使用するエンタープライズのクライアントとなれば、この処理時間はさらに非効率になると言わざるを得ません。チェックサムを利用した今回の新しいアプローチにより、ファイル同期はもっと動的になり、コマンド実行を待つ時間を削減してクライアントのための構築に時間を使えるようになります。 

Theme Kitのそのほかのアップデート

転送不要ファイルをスキップする機能のほかにも、新しいTheme Kitにはツールの安定性とユーザビリティの向上を図るアップデートが含まれています。いくつかの改良はバックグラウンドで実行され認知しにくいものですが、より良い開発者の体験を実現しています。

特筆すべき新機能の1つが、ライブテーマでコマンドを実行するときにフラグをパスする要求確認です。このチェックは、クライアントのストアフロントへの不本意なテーマ変更を阻止するために実装され、開発者コミュニティから繰り返し要望があったものです。

theme watchのようなコマンドを実行すると、構成されたテーマに変更が自動でプッシュされ、テーマが公開のステータスになっている場合は以下の内容のメッセージ（実際は英語）が表示されます。「これはストアの公開中のテーマです。変更するには、--allow-live flagを渡してください」。このケースでは、クライアントのライブ中のストアフロントに対する変更適用を避けるため、公開されていない別バージョンのテーマで作業したほうが良いはずです。このような要求確認のメッセージにより、クライアントストアで作業する際のワークフローの安全性が高まります。

もし公開中のテーマに変更をプッシュしたければ、--allow-liveをコマンドに加えて実行することで変更を通常どおりにプッシュできます。今回の例では、theme watch --allow-liveを実行すれば、Theme Kitが編集済のファイルを特定してライブ中のストアにプッシュします。

通知システムの改良を含めたTheme Kitの新機能の詳細は、GitHubチェンジログでご確認いただけます。

Theme Kitでより高速な開発体験を

パフォーマンスが向上したテーマキットを使用して、自動タスクの時間を節約し、クライアントにとって優先順位が高い問題により多くの時間を費やしましょう。

原文：Liam Griffin 翻訳：深津望