デイトラShopifyアドバンスコースコード編集編でShopifyカスタマイズを極めよう！

こんにちは、フリーランスエンジニアとして数年働いているしょーごです。

今回は「Shopifyアドバンスコースコード編集編」をレビューしていきます。

ありさちゃん

Shopidyカスタマイズを仕事にしたいのですが、学べる教材を探しています

まさひろくん

デイトラのShopifyコード編集編ってぶっちゃけ仕事できるレベルになれるのかな？

こういった疑問に答えていきます。

しょーご

ちなみにコード編集ではなく、Shopifyサイトの立ち上げやマーケティングなどの基礎部分はShopifyEC構築コースで学ぶことができます。

「Shopifyアドバンスコースコード編集編」は現在のカリキュラムから、約30日まで増えるようですw
より初心者向けに

コマンドラインの解説
テーマフォルダ解説
オブジェクト / フィルター / タグの解説
運用を見据えたカスタマイズのポイント

などを追加していくので、よりわかりやすくなるみたいです。
最終的にはShopifyの基本＋HTML/CSSを理解しているレベルの人であれば受講可能になる予定のようです。

アドバンスコースはアップデートに伴い、最終的に79,800円まで値上げする予定らしいです。
4〜5月頃までに段階的にアップデートしていくみたいなので、受けるか悩んでる方はぜひお早めにですね！

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

デイトラのアドバンスコースについて
SHopifyアドバンスコース最新の更新情報
Shopifyコード編集編とは？
デイトラの無料体験について
環境構築編
コード編集編
- Liquidの基礎とセクション作成
- liquidオブジェクト、タグ、フィルターについて学ぼう
実践カスタマイズ編
- よくあるカスタマイズを学ぼう
デイトラShopifyアドバンスコースコード編集編ぶっちゃけどう？
- Web制作やプログラムの基礎知識のある層向け
- OS2.0対応は価値あり
デイトラの他コース紹介
- Web制作コース
- ShopifyEC構築コース

デイトラのアドバンスコースについて

この「Shopifyコード編集編」はデイトラのアドバンスコースで、ShopifyEC構築コースの発展版となっています。

ShopifyEC構築コースに関しては以前記事を書いているので、そちらを御覧ください。

デイトラ公式サイトへ

SHopifyアドバンスコース最新の更新情報

こちらに沿ってこの記事も追記していきます。

今回のアプデで
🏵フォルダ構成
🏵Liquidの仕組み
🏵オブジェクト/タグ/フィルター
🏵JSON/Schema
🏵セクション/ブロック
🏵実務で使うカスタマイズ
と、コード編集を一通り網羅❗️

それに伴いコース価格も値上げします🙇‍♂️
3/7の0時から1万円上がるので、Shopify開発者を目指す方はお早めに👍 #デイトラ
— ショーヘー@デイトラ運営 (@showheyohtaki) March 6, 2022

Shopifyコード編集編とは？

「Shopifyコード編集編」で学べることはざっくり以下の内容です。

Shopify CLIを用いたローカル環境構築
Liquidの基本
よくあるカスタマイズ

この講座を受講することで「Shopifyテーマのカスタマイズ案件」を受注したり、

Shopifyエキスパートの会社に応募する際に「スキルと学習意欲」の面で有利になる可能性があります。

しょーご

今回のOS2.0の内容を学べる教材が他にほぼ存在しない上に、業界でもリリースされたばかりの最新機能を扱っているためです。

＼無料動画が複数あり／

Shopifyアドバンスコースへ

どんな人に向いているか

HTML,CSS.の基礎が分かる人
ShopifyでNoCodeでもサイトを立ち上げたことがある人

これらの知識が必要になります。

しょーご

最初の環境構築の段階でターミナルなど黒い画面を触ることになるので、Gulpなどで多少触った経験があるとスムーズかもです。

しょーご

以下両方取り組まれた人なら心配ないかなと思います。

事前の取り組んでおくと良いコース

Web制作コースもしくはRailsコース

ShopifyEC構築コース

ShopifyEC構築コースとの違いは？

ShopifyEC構築コースは基本的には「NoCodeでのサイトの立ち上げやマーケティング面」を学びます。

こちらも以前記事にしています。

この「Shopifyコード編集編」はコーディングでのカスタマイズを中心に学びます。

Shopifyのカスタマイズはニーズがかなりある

コロナ禍以後ネットショップの開設関連の案件がかなり増えています。

そういった案件がWeb制作会社にも流れてきたりするんですが、社内にノウハウがないので受けられていない所が一定数あります。

今このタイミングで「Shopifyカスタマイズ」のスキルを付けることは大きな意義があります。

しょーご

本当に人がいない…!!

また、ニーズがある証拠として、運営側からも案件募集がかけられることがあります。

受講方法

管理画面の右下に「コース一覧」があるので、そこから受講してください。

まだデイトラに登録していない人は、登録すればアドバンスコースも無料動画を見ることができます。

デイトラの無料体験について

まずはデイトラから「無料で講座を体験する」のボタンを押してください。

その後、デイトラに登録してください（お金はコースを購入しない限り、かかりません）

その後、管理画面に入ったら、下の方の「コース一覧」から気になるコースを選べば、複数の無料講義動画を閲覧することが可能です！

＼無料動画が複数あり／

デイトラの無料体験はこちら！

環境構築編

ローカル開発環境を構築しよう

ここではOnline Store 2.0から導入されたShopify CLIを用いてローカル環境を構築していきます。
インストール方法からコマンドの使い方まで学習していきます。

このセクションの流れ

Rubyをパソコンにインストール
Shopify CLIのインストール
ローカル環境とストアの接続とShopify CLIコマンドの使い方
VSCodeと拡張機能をインストール
【参考】OS1.0のテーマの開発はどうすればいいの…？

テーマと商品データを揃える

今回のレッスンで使用するのはShopifyEC構築コースDay8, Day9の追加コンテンツで制作した「スニーカーショップ」のサイトをベースに講座を行っていきます。

テーマファイルと商品csvデータが共有されているので、開発ストアにダウンロードすれば同じ環境を揃えることができます。

Ruby2.7以上にする

しょーご

初めてターミナルやコマンドプロンプトを触る人は、いきなりで少しびっくりするかもです。

とはいえエラーが出なければ全然難しくはないです。

Shopify CLI

Shopifyテーマの開発は直接オンラインサイトを触るのではなく、ローカル環境に落としてからVSCodeなどで開発していくことになります。

OS1.0の頃はTheme kitを触っていましたが、OS2,0からのShopify CLIはかなりローカル開発が行いやすくなったようです。

オンラインストアからCLIでテーマをダウンロード
VSCodeで開発(場合によってはGitでチーム開発)
その後CLIでオンラインストアにアップロード

Shopify CLIのshopify theme pullでダウンロードできない場合（エラー）

私はshopify theme pullする際に以下のエラーに直面しましたので、解決策を置いておきます。

✗ An unexpected error occured.
	To submit an issue include the stack trace.
	To print the stack trace, add the environment variable SHOPIFY_CLI_STACKTRACE=1.

開発ストアからログアウト
shopify logoutでCLIでもログアウト
再度開発ストアにログインする
shopify login –storeでCLIでもログインする
shopify theme pullを実行

これでいけました。

VSCode上で開発しつつ、ローカルにテスト環境を立ち上げられるため、ホットリロードで変更をリアルタイムで確認することができます。

お客さんに確認してもらう用のURLも発行されるので、とても便利ですね！

＼無料動画が複数あり／

Shopifyアドバンスコースへ

テーマフォルダ構造を学ぼう

Shopifyテーマの各フォルダの意味と役割について学習していきます。

このセクションの流れ

テーマファイルの全体概要
assets、config、localesフォルダ編
layout、templatesフォルダ編
sections、snippetsフォルダ編
おさらいとコードの関係

凄まじいファイル数だが…

Shopifyテーマは大きく7つのフォルダで構成されています。

layout
assets
locales
config
templates
sections
snippets

例えば以下はsectionsフォルダに格納されているliquidファイル群です。

まさひろくん

いや…多すぎでは…

しょーご

ここでは一つ一つのフォルダの役割を学んでいくのと、どのテーマも構成は変わらないので、そんなに絶望的ではないよ

OS1.0からOS2.0へ移行する方法を学ぼう

テーマファイルのTemplatesフォルダにあるLiquidテンプレートをJSONテンプレートへ変換して既存テーマをオンラインストア2.0に移行する方法を学びます。

移行を学ぶ理由

Shopifyデベロッパーとして案件を受注する際に、まだまだOS1.0仕様で構築されたストアをカスタマイズすることは多くあります。

またOS2.0で構築されるストアでも部分的にOS1.0のLiquidテンプレートを使用することもデザインの特性や機能実装の理由であるようですので、両方使えるようになっておきます。

これができるようになると、テーマのフォルダ構造、各テンプレートの理解が深まります。

しょーご

アップデートしなければならないページはたくさんあります

404ページ
固定ページ
問い合わせページ
商品詳細ページ
コレクションページ
コレクションリストページ
カートページ
ブログページ
ブログ投稿ページ
検索ページ
ホームページ（TOPページ）

しょーご

実務でパニックにならないように、ここで手順を確かめておきましょう。

コード編集編

Liquidの基礎とセクション作成

Liquidの基本文法とセクションの作成に必要なschemaについて学習していきます。

オブジェクトの概念やschemaの作成は最初難しいと感じるかもしれませんが、
慣れれば自由なレイアウトのセクションを作成できるようになります。

このセクションの流れ

1からセクションを作ってみよう
Liquidの基礎を学ぼう

セクションとは？

管理画面から自由にコンテンツを編集できる機能のことで、例えばこのパートでは以下のようなセクションを作成します。

タイトルや写真、写真下のテキストを管理画面から変更することが可能です。

こういった機能をShopifyでは「schema」というのを記述することで実装可能です。

{% schema %}
{
  "name": "Slideshow",
  "tag": "section",
  "class": "slideshow",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Slideshow"
    }
  ],
  "blocks": [
     {
       "name": "Slide",
       "type": "slide",
       "settings": [
         {
           "type": "image_picker",
           "id": "image",
           "label": "Image"
         }
       ]
     }
   ]
}
{% endschema %}

しょーご

いやこんなの書くんかい！と思うかもですが、型は決まっているし、動画で一緒に書いていけるのでそこまで難しくはないです。