■目次
1.案件概要
2.事前学習
3.案件に着手
4.苦労したところ
5. まとめ
1. 案件概要
期間：2020年9月24日（木）〜 10月13日（火）
顧客：某ファッションブランド
案件内容：shopifyのdebutテーマ（デフォルトテーマ）をカスタマイズし、ファッション通販サイトを構築。制作会社さんのデザイナー兼コーダーさんと2人でページを分担しつつ作業を行った。
担当ページ：
・マイページ_ログイン(header/footer含)
・マイページ_有効化
・マイページ_新規作成
・パスワード再発行
・コレクション(商品一覧)ページ
・トップページ
・商品詳細ページ
2. 事前学習
Shopifyに一度も触れたことがなかったため、Shopify案件のお仕事を正式に頂く前に、事前学習を行ないました。
利用したのは、Udemy講座「Build a Shopify Theme From Scratch」です。
この講座では、Bootstrapで作成された静的なサイトを「Liquid」というプログラミング言語を使用してShopifyに組み込んでいきます。
具体的に学んだのは、ローカル環境で開発するのに必要なツール「Themekit」をインストールする方法、各テンプレートの役割、Liquidの基本文法などです。動画を見つつ、自分で真似してshopifyサイト作成する学習を2周行い、大まかなshopify構築の流れが理解できました。
3. 案件に着手
さて、事前学習からしばらくして正式に発注を頂きました。上の案件概要でも記載しましたが、自分に割り当てられたページは7つあり、各ページごとに納期が設定されていました。そのため、最も納期の近いログインページから進めていきました。
なお、進め方としては、デザイナーさんが作成したデザイン通りになるように、既存のdebutテーマのコードをカスタマイズしつつ作成していきました。
4. 苦労したところ
実際に案件を進めていく中で、苦労した（解決に時間のかかった）点がいくつかありましたので4つに分けて以下にまとめてみたいと思います。
4-1. debutテーマのカスタマイズ
本案件では、shopify導入時にデフォルトで設定してある「debut」テーマをカスタマイズする形で進めていきました。というのも、デフォルトのテーマならECサイトに必要な機能が予め設定されている上、本案件のデザインもそれほど特殊ではなかったので「カスタマイズしたほうが作成しやすい」と判断された為でしょう（僕の推測です）。
しかし実際には、事前学習で作成したサイトに比べ、既存のテーマはLiquid言語の変数やshopifyのオブジェクトをフル活用しておりコードの量も膨大で、解読するのに想像以上に骨が折れました。
既存コードをいじる際には、「このコードは書き換えて良いのだろうか？」「書き換えて後々エラーなど出ないだろうか？」と半信半疑になりながらも、shopify公式ドキュメントを参照しながら、1つ1つ慎重にカスタマイズしていきました。
スタイルの変更に関しては、「theme.scss」というファイルを修正していきました。
当初は、以下の手順でCSSの修正を行なっていました。
・デフォルトのスタイルをデベロッパーツールで確認し、
・該当のクラス名を「theme.scss」内で検索して修正する
しかし、「既存コードがscssの変数を多用して非常に複雑であったこと」や「後で自分がどこをいじったのかが分かりづらい」と思ったため、「既存コードの一番下から自分で新たにスタイルを追加して上書きする」という方針に変更し、こうした問題を解決することができました。
既存のテーマのコードをカスタマイズするというのはWordPressも含め今回が初めてでした。その際に重要なのは、
・既存コードのブロックごとの意味をまずは把握してから着手する（当たり前だが）
CSSの修正については
・自分が修正した部分がわかるように、既存コードとは分けて管理する
ということなのではないかなと、本案件を通して学びました。
4-2. 実機でスクロールするとfooterメニューがちらつく！
本案件ではスマホ画面時に、画面の上下に固定メニューを表示させるというUIを実装し、僕が担当しました。
動的メニューが完成したので、先方に確認してもらったところ、実機でスクロールした際に「画面下方に設置したメニューがちらつく」という現象が発覚しました。自分でも確認してみたところ、iPhoneで画面を上にスクロールし、ブラウザ自体のメニューバーがせり上がる際、本サイトのメニューが少し遅延して追随しているようでした。
safariのメニューバー（※上記サイトは本案件とは関係なし）
しばらくして先方から、transformやtransitionを指定していると要素がちらつく事があるらしいので一度確認してみては？とのご助言を頂きました。
しかし残念ながら解決しませんでした。
次に、「動的なメニューに問題があるとしたら？」と思い、一度静的なメニューに作り変えてみました。しかしそれでもちらつきは消えません。
じっくり観察していると、下部メニューのすぐ上に固定していた価格表示の要素にはちらつきがないことが判明しました。実際、下部メニューを削除して価格表示バナーのみ画面下部に固定してみてもちらつきがありませんでした。
「下部メニュー」と「価格表示バナー」の違いは何なのか‥？違うところがあるとすれば、それは「コードを記述しているファイル」でした。具体的には、下部メニューは「header.liquid」、価格表示バナーは「product-template.liquid」に記述していました。
そこで、試しに「product-template.liquid」内に下部メニューを設置してみることにしました。するとなんと、ちらつきが消えたのです！
はっきりとした原因はわかりませんが、おそらく、header.liquid内に上部メニューと下部メニューの2つの動的メニューを設置していたためではないかと考えられました。
最終的に、下部メニューはfooter.liquidファイル内にコードを移設することで、本件は解決に至りました。
解決まで3~4時間かかってしまったものの、問題を1つ1つ切り分けて、うまく動作しているものと見比べながら検証していくことが大事だとわかりました。
4-3. 商品詳細ページの商品選択（ラジオボタン）部分の実装
本案件サイトの商品詳細ページでは、商品のサイズを選ぶ際にラジオボタンで選択するUIとなっていました。
しかしデフォルトのdebutテーマでは、商品選択部分がセレクトメニューで実装されていたため、ラジオボタンで実装する方法を調べなければなりませんでした。
なお、この問題に限らず、shopifyが日本に参入してまだ日が浅いこともあり、日本語でググってもなかなか答えにたどりけません。
そこでなるべく英語で検索するように努めました。その結果、YouTube上でラジオボタンで商品選択を実装する方法を解説している動画を見つけ、この動画を参考にしながら今回のサイトでも実装することができました。
5. まとめ
今回が初めてのShopify構築案件でしたが、とても多くのことを学べたと思います。
これまでWordPress構築などでは自分で1から組み立てることが多かったのですが、カスタマイズとなると、他人が書いたコードなのでまず「どんな内容が書かれているのか」を理解することがとても重要だと実感しました。
またShopify自体のテンプレートの概念や独自オブジェクトの使い方、Liquid言語の扱い方などにも案件を通して理解を深めることができたのは良かったと思います。
そして、プログラミング全般に言えるかもしれませんが、英語で検索したほうがより多くの情報が見つかるので、日本語で検索するよりもより早く答えにたどり付けることを実感しました。僕自身は英語が好きなので、それほど英語での検索に抵抗がない、というのは幸いだったかもしれません。
最後までお読み頂きありがとうございました。