こんにちは、フリーランスエンジニアとして数年働いているしょーごです。
今回は「Shopifyアドバンスコースコード編集編」をレビューしていきます。
こういった疑問に答えていきます。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
| コース名 |  Web制作コース |  Webアプリ開発コース |  Webデザインコース |  ShopifyEC構築コース |  動画編集コース |  Pythonコース |  Webマーケティングコース |  ドローンコース |  ECクリエイティブコース |
| 学習内容 | Webサイトの構築 | Railsアプリの開発 | Webやアプリデザイン | Shopifyサイトの構築と運用 | YouTubeや ショート動画編集 | Pythonや分析スキル | 広告やSEO LINEやレポーティング | ドローン空撮 点検業務 | ECの総合サポート |
| 目安期間 | 3~4ヶ月 | 3~4ヶ月 | 3~4ヶ月 | 1ヶ月 | 1ヶ月 | 3ヶ月 | 3ヶ月 | 1ヶ月 | 2ヶ月 |
| 料金 | ￥99,800 | ￥99,800 | ￥99,800 | ￥69,800 | ￥79,800 | ￥89,800 | ￥99,800 | ￥79,800 | ￥99,800 |
| 卒業後の進路例 | Web制作会社に就職 フリーランスコーダー | Railsエンジニアとして 企業に就職 | フリーランスデザイナー デザイン会社に就職 | EC構築フリーランス Shopifyエキスパートの会社に就職 | YouTuber,TikTokerの編集者 企業の動画広報担当 映像編集会社へ就職 | AI系企業への就職 自社商品の分析に利活用 | フリーランスで広告運用 マーケティング職として就職 | フリーランスドローンパイロット | ECコンサル案件参画 EC企業インターン(紹介あり) |
| 詳細記事リンク | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら |
お正月キャンペーン！デイトラ全コース1万円引き！！
デイトラが現在「全コース1万円引きキャンペーン」を実施中！
今回はアドバンスコースも対象です！！
元々7~9万のスクールなので、一万円割引はかなり大きいです！
デイトラは最近人気なので、枠が埋まり次第突然キャンペーンは終了します。買うなら今ですよ！
＼現在全コース1万円引きキャンペーン中！／
デイトラのアドバンスコースについて
この「Shopifyコード編集編」はデイトラのアドバンスコースで、ShopifyEC構築コースの発展版となっています。
ShopifyEC構築コースに関しては以前記事を書いているので、そちらを御覧ください。
SHopifyアドバンスコース最新の更新情報
こちらに沿ってこの記事も追記していきます。
Shopifyコード編集編とは？
「Shopifyコード編集編」で学べることはざっくり以下の内容です。
- Shopify CLIを用いたローカル環境構築
- Liquidの基本
- よくあるカスタマイズ
この講座を受講することで「Shopifyテーマのカスタマイズ案件」を受注したり、
Shopifyエキスパートの会社に応募する際に「スキルと学習意欲」の面で有利になる可能性があります。
今回のOS2.0の内容を学べる教材が他にほぼ存在しない上に、業界でもリリースされたばかりの最新機能を扱っているためです。
＼無料動画が複数あり／
どんな人に向いているか
- HTML,CSS.の基礎が分かる人
- ShopifyでNoCodeでもサイトを立ち上げたことがある人
これらの知識が必要になります。
最初の環境構築の段階でターミナルなど黒い画面を触ることになるので、Gulpなどで多少触った経験があるとスムーズかもです。
以下両方取り組まれた人なら心配ないかなと思います。
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テーマの各フォルダの意味と役割について学習していきます。
- テーマファイルの全体概要
- 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 %}いやこんなの書くんかい！と思うかもですが、型は決まっているし、動画で一緒に書いていけるのでそこまで難しくはないです。
liquidの基礎を学ぶ
ところで、liquidは実際どういったコードなんでしょうか？
例えばですが、以下は「ログインや会員登録関連の処理」で条件により表示情報を出し分けています
また、for文などプログラムでは基本の構文もliquidでは出てきます。
WordPressをされていたりプログラムを書く方ならなんとなく意味は分かると思います。
全然分からん！と思った方も、講座内ではかなり丁寧に解説してくれるので、この記述も理解できるぐらいになれます。
講座内では頻繁に公式ドキュメントを見に行くので、良い癖がついて良いと思います。Shopifyの公式ドキュメントは大半が英語ですが、慣れておくことが大切です。
Liquid reference
https://shopify.dev/api/liquid
liquidオブジェクト、タグ、フィルターについて学ぼう
ここではそれぞれどういったものかの解説は割愛しますが、全部Shopify開発の基本になるのに、解説している教材がほとんどないので、かなり貴重なパートだと思います。
実践カスタマイズ編
よくあるカスタマイズを学ぼう
Shopifyストア構築時、お客様からの要望によってはコード編集が必要な時があります。
今回はコード編集が必要なよくあるカスタマイズ例について学習していきます。
- ベストセラーに順位を表示しよう
- 変数を使って住所情報を変更しよう
- 会員登録の項目を増やそう【メモ編】＆【タグ編】
- 特定の商品が入っていたら、カート画面で確認メッセージを表示する
- サンクスページを編集して、LINE登録用のQRコードを設置しよう
- 決済方法によってサンクスページ、サンクスメールの文面を変えよう
このあたりは実務最前線情報が多いので購入後のお楽しみにしたいのですが、これをご覧の皆さんにはごく一部だけを紹介したいと思います🙈
ベストセラーに順位を表示しよう
「販売個数順に商品を並べる実装」は実務でもかなり頻繁に行うそうです。
ここで実装するものだと、チェックボックスのオンオフで、商品右上のNo.1などのタグが付いたり外れたりします。
変数を使って住所情報を変更しよう
こちらもShopifyでのカスタマイズとしてはよくある実装になるようです。
Shopifyの標準機能だとマイページに表示される住所変更項目が欧米仕様で
例）マンション名101 1-1-1 〇〇 〇〇市 〇〇県
と表示されてしまうため、日本の利用者は違和感を抱いてしまうので、こちらを直す必要があります。
特定の商品が入っていたら、カート画面で確認メッセージを表示する
このレッスンをこなすことで、もしお酒などを取り扱うショップだった場合、「２０歳以上ですか？」というチェックを設けることが可能になります。
ここではコレクションが「キッズ」の商品に対して、「子供靴ですがお間違えはありませんでしょうか？」という確認チェックを出します。
チェックボックスを押下しないと、チェックアウトボタンが活性化しないので、購入画面に進むことができません。
- アパレル業界；予約商品がカートに入っていた場合、「配送日時指定ができません」と注記を出す
- 飲食業界；発送温度帯が違う商品が入っている場合、同時注文ができませんとアラートを流す
- ギフト業界；ギフト商品と設定しているものがカートに入っている場合、ギフトオプションを出す
デイトラShopifyアドバンスコースコード編集編ぶっちゃけどう？
Web制作やプログラムの基礎知識のある層向け
どういった層にぴったりか箇条書きにしてみます。
- HTML,CSSは理解している
- WordPressなど動的サイトへの多少の理解がある
- ShopifyストアをNoCodeでもいいから開設したことがある
これぐらいの事前知識が欲しいかなと思います。
特に「動的サイト」への理解がないと、「schema」「liquid」のあたりで多少躓く可能性はあります。
デイトラの「Web制作コース」もしくは「Railsコース
」と、「ShopifyEC構築コース
」を受講していれば特に問題ないかなと思います。
OS2.0対応は価値あり
OS2,0でShopify CLIを使用した開発を学べる場所はほとんど存在しません。
そんな中「よくある実装」も含めて学べる「Shopifyコード編集編」は確実に買う価値があるでしょう。
また、デイトラは買い切りなのにコンテンツはどんどん追加されていき、
この「Shopifyコード編集編」も今後コンテンツ拡充に伴って値上げされるので、これをお読みのあなたもお早めに！！
個人的にはここまで読んでくれるような、熱心な「次なる道を模索するWeb製作者」にぜひ活用していただきたいですね！
＼無料動画が複数あり／
| コース名 | Web制作コース | Webアプリ開発コース | Webデザインコース | ShopifyEC構築コース | 動画編集コース | Pythonコース | Webマーケティングコース | ドローンコース | ECクリエイティブコース |
| 学習内容 | Webサイトの構築 | Railsアプリの開発 | Webやアプリデザイン | Shopifyサイトの構築と運用 | YouTubeや ショート動画編集 | Pythonや分析スキル | 広告やSEO LINEやレポーティング | ドローン空撮 点検業務 | ECの総合サポート |
| 目安期間 | 3~4ヶ月 | 3~4ヶ月 | 3~4ヶ月 | 1ヶ月 | 1ヶ月 | 3ヶ月 | 3ヶ月 | 1ヶ月 | 2ヶ月 |
| 料金 | ￥99,800 | ￥99,800 | ￥99,800 | ￥69,800 | ￥79,800 | ￥89,800 | ￥99,800 | ￥79,800 | ￥99,800 |
| 卒業後の進路例 | Web制作会社に就職 フリーランスコーダー | Railsエンジニアとして 企業に就職 | フリーランスデザイナー デザイン会社に就職 | EC構築フリーランス Shopifyエキスパートの会社に就職 | YouTuber,TikTokerの編集者 企業の動画広報担当 映像編集会社へ就職 | AI系企業への就職 自社商品の分析に利活用 | フリーランスで広告運用 マーケティング職として就職 | フリーランスドローンパイロット | ECコンサル案件参画 EC企業インターン(紹介あり) |
| 詳細記事リンク | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら | コースの詳細はこちら |
デイトラの他コース紹介
Web制作コース
実際にWeb制作コース受講生にインタビューしてきました
ShopifyEC構築コース
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
