【Shopify】仕様や用語、開発の流れの解説 - #03
前回の記事では、Shopifyの無料テーマのディレクトリ構造の解説をしました。
今回は、Shopify独自の仕様や用語について解説してきます。
また、私はこれまでWordPressをよく触っていたので、解説の際にWordPressで例えることがしばしばあるのでご了承ください...。
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)
Shopify独自の用語
Shopifyの管理画面やサイト、解説記事などを見ていると、あまり聞き慣れない用語が出てきます。
ややこしい用語もあるので、最低限これだけ理解していれば大丈夫!というのをまとめました。
用語名 | 解説 |
カタログ | 商品の一覧のこと。 カタログページ=商品一覧ページ |
コレクション | 商品のカテゴリーのこと。 コレクションページ=カテゴリーページ |
所属 | 商品のタグのこと。 カテゴリーより更に細かい情報を設定したい時に使用する。 |
プロダクト | 商品自体を指す。 カタカナでプロダクトと表記されることは少ないですが、アルファベットで「product」と表記される場合が多いです。 プロダクトページ=商品詳細ページ |
アプリ | Shopifyのサイトに機能を追加できる拡張機能。 WordPressでいうプラグイン。 |
ストア | Shopifyのサイトのこと。 |
チェックアウト | 商品の「購入」という意味。 |
開発の流れ
これまでの記事(前回の#1, #2を含む)を読んでいれば、ローカルに開発環境を構築する方法やShopifyについての基本的な知識は得られたと思います。
この項では、Shopifyで開発する主な流れを解説していきます。
とはいえ、開発の流れは至ってシンプルです。
- ローカルのテーマファイルのディレクトリにターミナルで移動
- theme watchコマンドを実行
- テーマ内のファイルを編集(場合に応じて管理画面からも設定など編集する)
- watchしているので、編集して保存したファイルがサイトに反映される
- サイトで表示確認
- 以後、3〜5の繰り返し
これだけです。
theme watchをしなければ、サイト上には反映されません。
theme watchだと編集した全てのファイルが反映されてしまうので、任意のファイルのみ反映させたい場合は、theme build ファイル名というコマンドを使用しましょう。
また、以前の記事でも軽く解説しましたが、Shopifyにはローカル環境という概念がなく、ファイルを編集したら本番の環境に反映されます。
本番環境、開発環境の切り分けをどうするかはこちらの記事で解説されています。
https://www.non-standardworld.co.jp/23325/
まとめ
私の場合ですが、Shopify独自の用語、特にコレクションやカタログなどがゴチャゴチャになってしまいました。
このように分かりにくい用語は自身でメモったりすると、意外と簡単に覚えられるかもしれません。
次回は、Shopify独自のプログラミング言語「liquid」の基本的な部分を解説します。
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)