販売開始しました!『Hello Shopify Themes Shopifyテーマ開発ガイド』各章の目次&内容を詳しく紹介

ブログではご無沙汰しています、エンジニアの川島です。
Twitterなどで追ってくださっている方には既知のニュースとなりますが、本日は良いお知らせをお伝えしに来ました。

昨年初夏、「Shopifyテーマ開発本を作りたい」と挑戦したクラウドファンディング
ありがたいことに目標額を達成し、それからの半年以上、クライアントワークと並行しながら執筆を進めてきました。長い道のりでした……笑。

そんな本書、『Hello Shopify Themes』が、ようやく形になろうとしています。
入稿後の色校正も終わり、今週、とうとう印刷工程が始まりました。皆さまのお手元へお届けできるまで、あとすこし。私もとても待ち遠しいです!

そこで本日は、目前に迫った『Hello Shopify Themes』の販売を前に、本書の内容をざっくりとご紹介したいと思います:)

22年4月追記:無事に一般発売開始となりました!!
本書のご購入はこちらの特集ページから承っております:)
完売後の増刷予定は現時点ではございません。印刷書籍をご希望の方は、ぜひお早めにお迎えください。

  • 著者:川島さやか
  • 出版:non-standard world, Inc.
  • 判型・ページ数:B5判・248ページ
  • 価格:3,850円(税込)※PDF版同梱、送料無料

特集ページへ

本書の目的

こちらの紹介ページでもお伝えしているとおり、本書『Hello Shopify Themes Shopifyテーマ開発ガイド』は、Shopifyテーマ開発に興味があるすべての方へ宛てた、開発の道のりをサポートする一冊です。
ShopifyのOnline Store 2.0仕様および、Shopify CLIによる開発フローをカバーしました(従来のTheme Kit開発についても補足的に言及しています)。

Dawnのカスタマイズ事例に加え、テーマそのものの構造やLiquidの文法、オリジナルテーマ実装時に留意したい点についても解説し、テーマに初めて触れるという初心者の方から、オリジナルテーマの開発に取り組みたい中級者の方まで、広く役立てていただける一冊となることを目指しています。
主な読者としてはテーマ開発に関心のあるエンジニアを想定していますが、テーマについて知見を深めたいディレクターやWebデザイナー、ストアオーナーの皆さまにも、ぜひ手に取っていただけたら嬉しいです。テーマに関する基礎知識は、エンジニアとのコミュニケーションをより円滑にしてくれるかと思います。

ただ、既にテーマ開発に取り組んでいる方はおそらくご存知のとおり、Shopifyはアップデートの速度がとてつもなく速いです。
印刷媒体として世に出る本書は、いずれ、Shopifyの最新仕様とは食い違う点が出てきてしまうでしょう。※特にDawn開発事例において、その傾向が顕著となるはずです

そうなったとしても、自身でShopifyの最新情報をキャッチアップできるように、本書では公式ドキュメントなどへの参考リンクを随所に記載し、情報の探し方についても解説しました。
テーマの理解を深め、自身で新たな情報を調べてゆく足掛かりとして、本書をお役立ていただければ幸いです。

各章の概要紹介

本書は全6章の構成です。各章について、目次と共に概要を紹介します。

第1章:Shopifyテーマを形作るもの

第1章では、テーマの概要と構造といった、テーマ開発で最初に理解しておきたい点を解説しています。 開発を始めるにあたって、その最初の道筋がなるべく 歩きやすくなるような情報はすべて、本章にまとめました。
テーマには何が出来て、何が出来ないのか。テーマファイルは互いにどのような関連性があるのか。テーマに初めて触れる方には、やや取っつきにくいトピックかもしれませんが、一度にすべて把握する必要はありません。テーマ開発に慣れてきたら再度読み返していただきたい章です。

1-1. Shopifyテーマの概要

・テーマで制御できる範囲
・テーマエディタとの関係
・テンプレート言語 「Liquid」 について
・ライブテーマとテーマライブラリー

1-2. テーマの構造

・テーマファイルが持つ役割
・テーマファイルの入れ子関係
・テーマのディレクトリ構造

1-3. テーマファイルの水先案内

・レイアウトファイルの構成
・テーマファイルの読み込み
・テンプレートファイル(JSON)のデータ構造
・セクションファイルのLiquidとスキーマ

第1章の内容は、本ブログ上でも無料公開しています。
1-1. Shopifyテーマの概要
・1-2. テーマの構造(22年5月公開予定)
・1-3. テーマファイルの水先案内(22年5月公開予定)

第2章:開発環境構築

第2章では、テーマ開発に必要な環境のセットアップ方法を紹介します。
開発ストアを作成し、コマンドラインツールによるShopify CLIインストール、開発テーマの立ち上げまでを1ステップずつ解説しました。Theme Kitの導入についても補足的に言及しています。

2-1. テーマ開発を始めるために

・Shopifyパートナー登録
・ストア管理画面:開発ストアとコラボレーターアカウント
・開発ツール:Shopify CLIとTheme Kit
・あなた自身のコードエディタについて

2-2. 開発ストアの作成

・開発ストア作成の流れ

2-3. 開発ツールの導入

・Shopify CLI
・Theme Kit

2-4. Shopify CLIでHello World

・開発テーマを立ち上げる
・テーマファイルを編集する
・テーマの編集内容をストアに反映する
・その他のShopify CLIコマンド

第3章:Dawnテーマのカスタマイズ

第3章からは実践編です。前章で構築した開発環境に基づき、ShopifyのデフォルトテーマであるDawnをShopify CLIで実際にカスタマイズしてゆきます。
Dawnの特徴に加え、他のテーマでも広く役立つ「動的セクション・ブロック」や「メタフィールド」、「フォーム拡張」についても解説しました。Dawn以外のテーマカスタマイズであっても、ヒントとして役立てていただけるかと思います。
※書籍の内容は2022年2月時点の情報(Dawnバージョン3.0.0)に基づいています。3月にリリースされたDawnバージョン4.0.0については、本書のサポートページで補足予定です

3-1.Dawnテーマの特徴

・表示速度の速さ:軽量化とパフォーマンス向上の取り組み
・メンテナンス性の向上:コードのモジュール化
・拡張性の高さ:テーマエディタで操作可能な多くのコンポーネント
・アクセシビリティへの配慮
・Dawnカスタマイズ事例の概要紹介

3-2.動的セクションとブロックの作成

・動的セクション(Sections Everywhere)とは
・FAQセクションファイルの作成
・動的セクションとして使えるようにする
・FAQタイトルをテーマエディタから変更可能にする
・FAQ項目をブロックに落とし込む
・より高度にするなら

3-3.商品ページのメタフィールド活用

・商品メタフィールドの作成
・テーマエディタから動的リソースとして利用する
・応用:メタフィールドと条件分岐
・より高度にするなら

3-4.商品とカートのフォーム拡張

・Line Item Propertyで商品ページに入力欄を追加する
・Cart attributesでカートページに入力欄を追加する
・テスト注文で管理画面上の表示を確認する
・より高度にするなら

3-5.日本語フォントの導入

・フォント設定箇所の確認
・setting_schema.jsonに日本語フォント用の入力設定を加える
・theme.liquidのCSS変数部分を書き換える
・フォントサイズを縮小できるようにする
・より高度にするなら

第4章:オリジナルテーマの実装

第4章ではさらに一歩踏み込み、オリジナルテーマの実装に役立つ知識として、各テーマファイルの詳細および実装時の留意点、Liquidの文法について詳しく解説しました。テーマエディタとの連携に欠かせない、スキーマの詳細についても本章で紹介しています。
オリジナルテーマの作成には、より広範なShopifyへの知識と、ディレクター・デザイナーとの協力が欠かせません。オリジナルテーマの開発を手掛ける際に、ぜひ一読いただきたい章です。

4-1.オリジナルテーマという選択肢

・誰のためのテーマか
・要件定義で考慮すると良いこと
・ワイヤーフレーム・デザイン作成

4-2.各ページの実装留意点

・テーマ全体:スタイリング(CSS・Sass)
・テーマ全体:JavaScript
・テーマ全体:メニュー機能・メガメニュー
・トップページ
・コレクション(商品一覧)ページ
・コレクション一覧ページ
・商品ページ
・カートページ
・ブログ:記事一覧と記事詳細ページ
・固定ページ
・アカウント関連ページ
・パスワード保護ページ

4-3.Liquid文法解説

・公式ドキュメントの読み方、探し方
・Liquid記法の基礎(型・演算子・真偽値・変数・空白制御)
・Liquidオブジェクト
・Liquidタグ
・Liquidフィルター

4-4.テーマファイル解説

・公式ドキュメントの読み方、探し方
・レイアウトファイル
・テンプレートファイル
・セクションファイル
・スニペットファイル
・アセットファイル
・コンフィグファイル
・ロケールファイル

4-5.テーマエディタとスキーマ記法

・スキーマ:テーマエディタとの関連づけを定義するJSON記述
・settings属性:テーマ設定・セクション設定・ブロック設定の定義
・blocks属性:テーマエディタから操作可能な配列の定義
・presets属性:動的セクションに対応させる定義

第5章:テーマとアプリの連携

第5章からは応用と補足が中心となります。本章のトピックはShopifyの「アプリ」についてです。
おそらく、テーマ開発に関わる中で1つもアプリを利用していないという方は、極めて少ないでしょう。アプリを利用することで、テーマ開発の可能性はさらに広がります。
Online Store 2.0から利用可能になったアプリブロックや埋め込みアプリの仕様、従来のアプリ利用時の留意点の他、おすすめのアプリ一覧についても紹介しています。
おすすめアプリ一覧は後ほど本ブログ上でも公開予定です。

5-1.テーマ開発とアプリの関係

・Shopify App Store
・テーマとアプリの統合の仕組み
・テーマコードに影響するアプリ追加時の留意点
・アプリはテーマの可能性を拡張する

5-2.おすすめのアプリ一覧

・テーマ開発を拡張するアプリ
・ストア機能を拡張するアプリ

第6章:テーマ開発Tips

締めくくりとなる第6章では、実際のテーマ開発案件で役立つ補足情報や、テーマ開発以外の選択肢(ヘッドレスコマース)について言及しました。
応用的な内容となるため、テーマ開発に慣れてきた方、より知見を深めたい中級者の方にお読みいただければと思います。

6-1.実案件で役立つ知識

・壁にぶつかったときは
・テーマのgit管理、GitHub連携
・案件における実装フロー事例
・Theme Kitの開発コマンド
・従来のテーマをOS2.0に対応させる

6-2.テーマのSEO対策

・タイトル要素
・メタディスクリプション要素
・カノニカルURL
・構造化データ
・robots.txt

6-3.カスタムストアフロントという選択肢

・カスタムストアフロントとヘッドレスコマース
・Shopify Storefront API
・カスタムストアフロントの開発者ツール
・カスタムストアフロントが役立つとき
・Hydrogenへの期待

6-4.Shopifyの最新情報をキャッチアップする

・Shopify Changelog
・Shopify公式ドキュメント
・Shopifyヘルプセンター
・Shopify公式ブログ
・Twitterの活用

発売に向けて

発売日が近づいてくるにつれ、すこしずつ緊張してきました……笑。
本書『Hello Shopify Themes』については、今後もブログで何回か詳細をお伝えする予定です。どうぞお楽しみに。
本記事を読んで、もし書籍にご興味を持ってくださった方は、こちらの特集ページからご購入が可能です
よろしくお願いします!

記事カテゴリー