カラーミーのカスタマイズを勉強したいけど、どこから手を付けたらいいのか
カラーミーカスタマイズの勉強で、どこから手を付けたらいいのかわからないという相談がときどきあります。
カラーミーショップ
を始めたばかりの時は全体像がまだ見渡せないので、取っ掛かりが見つけにくいのだろうと思います。
難易度順に勉強するのが良いでしょうから、カラーミーショップ
初心者の方は参考にどうぞ。
勉強する順番（難易度順）
- HTML・CSSを学ぶ
- デベロッパーツールを学ぶ
- 独自タグ・Smartyを学ぶ
- JavaScript・jQueryを学ぶ
- PHPを学ぶ
ウェブサイト制作には「HTMLを使う」と、ご存知の方も多いことでしょう。
通常、入門書でインプットして、実際に使いながら調べて、知識を深めていきます。
カラーミーショップはCMS（Contents Management System）であり、テンプレート（雛型）を使って商品ページを作成します。
テンプレート用のコーディングが必要になります（3. 独自タグ・Smarty）。ここの部分は入門書がありませんので、苦手にされる方が多いと思います。
また、プログラミング的思考が必要なため、自分で思い通りのサイトを作りたいときは、経験が必要になります。根気強く学ぶ必要があります。
HTML・CSSを学ぶ
HTML・CSSはプログラミングではありませんので、特別な資質は必要ありません。ルールを覚えれば習得できますし、頻繁に使っているうちに身につきます。
HTML・CSSは、カラーミーショップをカスタマイズする際の必須条件です（細かい知識は別ですが）。
入門書でインプットするのが基本でしょうが、最近はオンライン学習もありますのでお好みで。下記記事には、学習法について記事にまとめています。
カスタマイズで一番多いのはレイアウトだと思います。
さまざまなよく使うレイアウトテクニックを紹介しています。
デベロッパーツールを学ぶ
デベロッパーツール（Chromeに搭載されている無料ツール）の使い方を学ぶことは、HTML・CSSの知識と同様に重要です。
HTML・CSSを独学で習得すると、デベロッパーツールの存在を知らないままカスタマイズしていることが多いです（入門書で扱っていない）。
かんたんに修正箇所や表示崩れの原因を調査します。これが使えるようにならないと、カスタマイズするのも困難です。早い段階でインプットしましょう。
実際に使っているうちに、使いこなせるようになります。
デベロッパーツールは古い書籍が少しありますが、インプットは基本的にネット検索でします。多機能なので最初はよく使う部分から勉強し、すこしずつ使う範囲を増やしていってください。
独自タグ・Smartyを学ぶ
カラーミーショップのサイトは、HTML入門書のサンプルコードのように、HTML・CSSのみでできているわけではありません。
カラーミーサイトを作る＝テンプレートを作ることになります。HTML・CSS以外にテンプレート用の変数（独自タグ）と構文（Smarty）を学ぶ必要があります。
独自タグ・Smartyは、ちょっとしたプログラミングになります。このあたりから、グッと難しくなってきます。
最初の頃は、テンプレートの編集画面で知らないコードがあっても、気にしないことです。HTML・CSSの修正でできるところからカスタマイズします。おいおい見慣れてきます。
テンプレート編集の取っ掛かりとしては、独自タグがどういうものかイメージできるようになる必要があります。 種類もたくさんありますので、時間を掛けてマスターします。
ある程度理解できてきたら、テクニック的な部分をインプットして、知識をより深めていきます。
下記スライドの資料も参考になります。
カラーミーショップのテンプレート作成の全体像がつかみやすいと思います。
参考）https://www.slideshare.net/ec-campus/1023-27533229
独自タグを学ぶ過程でSmartyを学ぶ必要が出てきます。Smartyはプログラム（ロジック）になります。これまでのプログラミング経験の有無で難易度が変わってきます。
コードをコピペして使えるようになるところから始めるとよいです。
ここまで理解できると、思った通りにサイトを作り変えることができます。
JavaScript・jQueryを学ぶ
スライドショー、メニュー関連、タブ、画像拡大など、カラーミーサイトで機能を実装したいことがよくあります。
こういう機能はjQueryですでに用意されていることが多いです。
サンプルコードのコピペで実装できることが多いので、（ウェブサイト制作が仕事でなければ）深く理解する必要はそれほどありません。
コピペで動作しないときは原因を調べる必要がでてきて、JavaScriptとjQueryの幅広い知識が必要になります。学習量も多いので結構大変です。
PHPを学ぶ
カラーミーショップAPIを使ったカスタマイズに利用します。
プログラミングスキルが必要になりますので、一般的なカスタマイズでは不要かと思います。
おわりに
これまでに、カラーミーショップ関連の記事をたくさん書いてきましたので、参考にどうぞ。
どの段階でも、自分でカスタマイズしたサイトの不具合修正はつきものです。
原因はさまざまで、慣れていないと特定が難しいです。
どうやって問題を解決するのかは、半分は経験で、残り半分は調査する技術になります。
文法を知っているだけでは、実際には思い通り使いこなせません。
うまくいかないときに、原因をどうやって調べるのかが、カスタマイズにおいて重要な残り半分です。
技術は独学では教わりませんので、下記の記事を参考にどうぞ。
執筆者
えいじ@naeco.jp この記事を書いた人
自作するのが好きですぐに試したくなる、凝り性なWebエンジニア。
カラーミーショップ、モールなどのECについて記事にしています。
ご相談・お問い合わせはこちら