デイトラ

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

デイトラアドバンスコース Shopifyコード編集編

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

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

ありさちゃん
ありさちゃん
Shopidyカスタマイズを仕事にしたいのですが、学べる教材を探しています
まさひろくん
まさひろくん
デイトラのShopifyコード編集編ってぶっちゃけ仕事できるレベルになれるのかな?

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

しょーご

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

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

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

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

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

しょーご

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

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

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

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

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

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

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

Shopifyコード編集編とは?

デイトラアドバンスコースShopifyコード編集編

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

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

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

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

しょーご

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

無料動画が複数あり/

どんな人に向いているか

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

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

しょーご

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

しょーご

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

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

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

ShopifyEC構築コース

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

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

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

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

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

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

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

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

しょーご

本当に人がいない…!!

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

デイトラ Shopifyアドバンスコース

受講方法

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

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

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

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

デイトラ申し込み ログイン

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

デイトラ申し込み ログイン

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

デイトラ アドバンスコース

無料動画が複数あり/

環境構築編

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

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

このセクションの流れ
  1. Rubyをパソコンにインストール
  2. Shopify CLIのインストール
  3. ローカル環境とストアの接続とShopify CLIコマンドの使い方
  4. VSCodeと拡張機能をインストール
  5. 【参考】OS1.0のテーマの開発はどうすればいいの…?

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

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

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

Ruby2.7以上にする

しょーご

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

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

ruby -vでバージョンを確認しておく

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.
  1. 開発ストアからログアウト
  2. shopify logoutでCLIでもログアウト
  3. 再度開発ストアにログインする
  4. shopify login –storeでCLIでもログインする
  5. shopify theme pullを実行

これでいけました。

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

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

無料動画が複数あり/

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

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

このセクションの流れ
  1. テーマファイルの全体概要
  2. assets、config、localesフォルダ編
  3. layout、templatesフォルダ編
  4. sections、snippetsフォルダ編
  5. おさらいとコードの関係

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

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

  1. layout
  2. assets
  3. locales
  4. config
  5. templates
  6. sections
  7. 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. 1からセクションを作ってみよう
  2. 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 %}
しょーご

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

liquidの基礎を学ぶ

ところで、liquidは実際どういったコードなんでしょうか?

例えばですが、以下は「ログインや会員登録関連の処理」で条件により表示情報を出し分けています

また、for文などプログラムでは基本の構文もliquidでは出てきます。

WordPressをされていたりプログラムを書く方ならなんとなく意味は分かると思います。

しょーご

全然分からん!と思った方も、講座内ではかなり丁寧に解説してくれるので、この記述も理解できるぐらいになれます。

講座内では頻繁に公式ドキュメントを見に行くので、良い癖がついて良いと思います。Shopifyの公式ドキュメントは大半が英語ですが、慣れておくことが大切です。

Liquid reference

https://shopify.dev/api/liquid

liquidオブジェクト、タグ、フィルターについて学ぼう

ここではそれぞれどういったものかの解説は割愛しますが、全部Shopify開発の基本になるのに、解説している教材がほとんどないので、かなり貴重なパートだと思います。

繰り返しタグ
オブジェクト
Moneyフィルター
しょーご

これ、デイトラが出てくる前は自分で英語の公式ドキュメント見て一個一個勉強しなきゃいけなかったんですが、Shopifyアドバンスコースのおかげでその必要もなくなりました、神!!

実践カスタマイズ編

よくあるカスタマイズを学ぼう

Shopifyストア構築時、お客様からの要望によってはコード編集が必要な時があります。

今回はコード編集が必要なよくあるカスタマイズ例について学習していきます。

このセクションの流れ
  1. ベストセラーに順位を表示しよう
  2. 変数を使って住所情報を変更しよう
  3. 会員登録の項目を増やそう【メモ編】&【タグ編】
  4. 特定の商品が入っていたら、カート画面で確認メッセージを表示する
  5. サンクスページを編集して、LINE登録用のQRコードを設置しよう
  6. 決済方法によってサンクスページ、サンクスメールの文面を変えよう
しょーご

このあたりは実務最前線情報が多いので購入後のお楽しみにしたいのですが、これをご覧の皆さんにはごく一部だけを紹介したいと思います🙈

ベストセラーに順位を表示しよう

販売個数順に商品を並べる実装」は実務でもかなり頻繁に行うそうです。

ここで実装するものだと、チェックボックスのオンオフで、商品右上のNo.1などのタグが付いたり外れたりします。

変数を使って住所情報を変更しよう

こちらもShopifyでのカスタマイズとしてはよくある実装になるようです。

Shopifyの標準機能だとマイページに表示される住所変更項目が欧米仕様

例)マンション名101 1-1-1 〇〇 〇〇市 〇〇県 

と表示されてしまうため、日本の利用者は違和感を抱いてしまうので、こちらを直す必要があります。

特定の商品が入っていたら、カート画面で確認メッセージを表示する

このレッスンをこなすことで、もしお酒などを取り扱うショップだった場合、「20歳以上ですか?」というチェックを設けることが可能になります。

ここではコレクションが「キッズ」の商品に対して、「子供靴ですがお間違えはありませんでしょうか?」という確認チェックを出します。

チェックボックスを押下しないと、チェックアウトボタンが活性化しないので、購入画面に進むことができません。

この実装ができると…
  • アパレル業界;予約商品がカートに入っていた場合、「配送日時指定ができません」と注記を出す
  • 飲食業界;発送温度帯が違う商品が入っている場合、同時注文ができませんとアラートを流す
  • ギフト業界;ギフト商品と設定しているものがカートに入っている場合、ギフトオプションを出す

デイトラShopifyアドバンスコースコード編集編ぶっちゃけどう?

Web制作やプログラムの基礎知識のある層向け

どういった層にぴったりか箇条書きにしてみます。

  • HTML,CSSは理解している
  • WordPressなど動的サイトへの多少の理解がある
  • ShopifyストアをNoCodeでもいいから開設したことがある

これぐらいの事前知識が欲しいかなと思います。

特に「動的サイト」への理解がないと、「schema」「liquid」のあたりで多少躓く可能性はあります。

デイトラの「Web制作コース」もしくは「Railsコース」と、「ShopifyEC構築コース」を受講していれば特に問題ないかなと思います。

OS2.0対応は価値あり

OS2,0でShopify CLIを使用した開発を学べる場所はほとんど存在しません。

そんな中「よくある実装」も含めて学べる「Shopifyコード編集編」は確実に買う価値があるでしょう。

また、デイトラは買い切りなのにコンテンツはどんどん追加されていき、

このShopifyコード編集編」も今後コンテンツ拡充に伴って値上げされるので、これをお読みのあなたもお早めに!!

しょーご

個人的にはここまで読んでくれるような、熱心な「次なる道を模索するWeb製作者」にぜひ活用していただきたいですね!

無料動画が複数あり/

デイトラの他コース紹介

Web制作コース

実際にWeb制作コース受講生にインタビューしてきました

ShopifyEC構築コース

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!