【カラーミー】特定のカテゴリ一覧をトップページに表示する方法【Ajax】

こんにちは、石井です。

最近カラーミーショップのデザインをさせて頂くことが多いのですが、「トップページにカテゴリ一覧を表示したい」という声をよく聞きます。

しかし残念なことに、カラーミーに備わっている独自タグではカテゴリ一覧を表示することは出来ません!

そればかりか一番安いプランだと新着記事一覧すら表示できない始末…。どうにかしてほしいですよね。

そこで今日は、そんなカラーミーショップ特有の悩みを、魔法の技術「Ajax」で解決していこうと思います。

今回紹介するコードをコピペしてちょっと書き換えれば、特定のカテゴリの商品一覧や新着商品一覧を誰でも実装出来るようになるはずです。

Ajaxとは?

まず「Ajax」を知らない人もいると思うのでちょっとだけ説明。

簡単に言えば「JavaScriptを使って非同期通信する技術」のこと。非同期通信は、データの送受信を普通は直列回路的に行うのに対して並列回路的に行っちゃおうぜという技術(※イメージ)で、ブラウザの更新ボタンを押さずにページの表示内容を変えたりできます。Googleマップで使われているぐらいには有名なものです。

で、今回はそれを使って「別のページから情報を取ってくる」ということをしていきます。

Ajaxの詳細は今回のテーマから逸れるので、詳しく知りたい方は調べてみてくださーい。

ちなみに僕は最初Ajaxを「アジャックス」と呼んでました。本当は「エイジャックス」です。お恥ずかしい…///

SEOから見たAjax

あそうそう、余談なんですが、AjaxはSEO的に良くないとネット上で言われたりしています。

しかし、それはもう昔の話というのが僕の見解です。

最近はGooglebot君がかなり賢くなったようで、今回のAjaxのやり方であれば何も問題はないとGoogleの偉い人が言ってました。

気になった方は以下の記事を、どうぞ。

特定のカテゴリ一覧を任意の場所に表示するコード

まずはコードの全体を載せます。

最初に商品一覧を載せたいページです。class名などは自由に書き換えてください。

<!-- トップページ -->
<body>
<div>
<h2>カテゴリ一覧</h2>
<ul class="top-List">
<!-- ここにAjaxで抜き出した情報を埋め込む -->
</ul>
</div>
</body>

次は抜き出したい情報が表示された商品一覧ページ。こちらもclass名などはご自由に。

<!-- 商品一覧ページ -->
<body>
<div class="productlist">
<ul>
<!-- 今回は以下3つのliを抜き出します -->
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
<li class="productlist-Item">商品名とか写真とか値段とか</li>
</ul>
</div>
</body>

最後に今回の主役であるAjaxの記述。

これをカラーミーの共通テンプレートの一番下なり「集客->検索エンジン対策->
PCショップ用の設定」の欄なりにコピペしてください。トップページと商品一覧ページで指定したclass名を使いますのでコメントが付いている行の情報は書き換えをお忘れなく。

<script type="text/javascript">
$(function(){
$.ajax({
url: 'http://<{$home_url}>/?mode=cate&csid=0&cbid=●●●●●●●●&csid=0', //お求めの順番で商品が並んでいる状態の商品一覧ページのURL
cache: false,
dataType:'html',
success: function(html){
var product_num = 3; //抜き出したい商品の数
var list = $(html).find('.productlist-Item'); // 抜き出す情報を商品一覧ページから指定
for (var i = 0; i < product_num; i++) {
if ( !list[i] ) break;
$('.top-List').append(list[i]); // 抜き出した情報を埋め込みたい場所を指定
}
}
});
});
</script>

コードの解説

今回は「商品一覧ページに表示された情報を抜き出してトップページに埋め込む」ということをしています。もう少し細かく言えば、Ajaxで商品一覧ページを読み込み、読み込んだ情報の中からproduct_numで設定した数まで指定した要素を抜き出し、指定した場所に埋め込む、という感じです。

カラーミーの機能ではトップページにカテゴリ一覧等が表示できないのは冒頭で述べた通りですが、商品一覧ページなら任意のカテゴリやグループの一覧を表示したりできますよね。

そこでAjaxを使って好きな順番に商品が並んでいる商品一覧ページから情報を抜き出し、それをトップページに埋め込んでしまえば、あたかも最初からカテゴリ一覧があったかのように表示される、というわけです。

カラーミーの商品一覧ページはgetメソッドでURLに情報を渡して表示内容を切り替えているのでAjaxでも表示されている情報を切り替えられるんですね~。

もし特定のカテゴリやグループの一覧ではなく新着商品一覧やおすすめ商品一覧を表示したい場合は、商品一覧ページのソート機能を使って新着順なら新着順、おすすめ順ならおすすめ順に商品が表示されている状態のURLを指定してください。もちろん価格順もできますよ!

参照した記事

今回は以下の記事を参考にさせて頂きました。『花のや』のwadaさん、ありがとうございます!

カラーミーショップで任意のカテゴリをTOPに表示する方法

あとがき

Ajaxを使って強引にやらないと需要があるものを表示できないカラーミーは、やっぱり使いづらく感じますね。

あと、カートの中身はAjaxでも参照できないっぽいので、カートに入っている商品のオプション情報をトップページに表示したりは出来ないようです。

やはりECサイトを作るならWooCommerceが最強なのか…

P.S.
今回の機能の導入が上手くできない人はコメント等で連絡ください。サポートしますので^^

WEBデザイナーこそデザイン以前の領域に踏み込むべき

こんにちは、石井です。

昨日はWordCamp Tokyo 2017に参加してきました!

WordPressコミュニティのイベントに参加するのは初めてでしたが、座り続けてお尻が痛くなったことを除けば良かったです。

中でも関口 裕さんの『みんなでデザイン、あなたもデザイン』というセッションが印象に残りました。

そこで今日はそのセッションの内容の一部を拝借しまして、今のWEBデザイナーに足りないものについてお話していきます。

みんなでデザイン、あなたもデザイン

一応セッションの内容にも触れておきましょう。

簡単に言えば、デザインが点の制作から面の設計に変わってきたという視点からデザイナーの働き方について問題定義する、といった内容でした。

おそらく関口さんは「デザイン思考のようなデザインを”開く”潮流は、デザイン以前の領域におけるデザイナーとその他の職種(エンジニアなど)との協働を可能にし、高い持続性を生む。今の時代はそういう働き方が理想だよね」的なことを言いたかったのかと思います。

社会学的な視点から議論が展開されていて、社会学をかじったことのある身としては面白かったです。

が、詳しくご紹介すると今回のテーマからそれるので、気になった方は後日WordCamp Tokyo 2017のサイトで公開されるビデオとスライドをご覧ください。

デザイン以前の領域

今回テーマにしたいのは「WEBデザイナーの仕事領域」です。

鍵となるのはセッション内で引用されていた松倉早星さんというプランナーの方のインタビュー記事。

そもそも新しい会社にしなきゃなって思った経緯のひとつに、何かひとつクリエイティブで課題を解決しても、プランナーなのでそこの奥にある課題が見えちゃったりします。本当はそこも手をつけたい!でも、依頼としてはすでに終わっているので「お疲れ様でした!」で終わってたんです……。でも、どうしても言わずにはいれなくなって、伝え出したのが去年あたりからです。「言われるまで気づきませんでした」としっかり聞いてくれて、いままで点だったできごとが線になり、面をつくれる手応えを感じました。

一過性のもので人の行動とか価値観、さらには人生観を変えることはできないけれど、丁寧に積み重ねて、語りかけていくことで実現できる、数年前からそう感じています。そこに対して、もうちょっと腰据えて向き合っていきたいなという思いで会社を作りました。

JDN『リサーチとプランニングにしっかり向き合える会社をつくりたい-松倉早星インタビュー(2)』

関口さんはこれを踏まえて、”デザインがはじまる前の領域”に関わる人もデザインをしていこう、と仰っていました。

非デザイナーがデザイナーに、デザイナーが非デザイナーに歩み寄ることで良い働き方ができるかもね、ということでしょう。

今のWEBデザイナーに足りないもの

この話を聞いた時「そうだそうだ!」と思いました。

世間一般ではWEBデザインの業務は「制作するサイトの見た目を装飾すること」とされています。もちろん例外はあるとは思いますが、業務の範囲がWEBサイトの目に見える部分に限定されている傾向はあるでしょう。

でも、それってどうかと思うんです。

そもそも僕は、デザインとは「クライアントの問題を解決するための表現全般」のことだと考えています。ただ目に見えるグラフィックを制作するだけがデザインではありません。当然ですが、そこには問題解決のための仕組みづくりや設計といった目に見えない部分の作業も含まれています。

しかし、WEBデザイン業界になると、目に見えない部分がないがしろにされる節がある。

確かに分業体制を引いてWEBデザイナーに装飾だけをさせるのは効率的かもしれません。ですが、設計や仕組みが特に大切とされるWEBサイト制作において、デザイナーが目に見えない部分に関与しないのは致命的です。設計や仕組みを理解して初めて(言い方は悪いですが)お客様をそこに誘導する=ビジネス上の問題を解決するデザインができるはずですから。

見た目は綺麗だけどお客様からのお問い合わせが少ないWEBサイトが出来てしまう原因がこれでしょう。WEBサイト制作で最も大切な仕組みや設計を理解していない人が見た目のデザインをするから、お客様からの思ったような反応がとれないのです。ひどい時はデザインとアートを混同し、WEBデザイナーさんの自己表現で終わっていることすらあるでしょう。

WEBデザインの仕事領域を広げよう

そんな残念な現状がWEB制作・WEBデザイン業界にはあると思います。WEBデザイナーがデザイン以前の領域に触れていたら、本来ならもっとお客様に喜んでいただけたかもしれません。

だから、非デザイナーとデザイナーが歩み寄るべきだという意見に僕は賛成します。今回はそれをWEBデザイナーが非デザイン領域に踏み込むという視点でお話させて頂いたわけです。

本当に、WEBサイトの主たる目的であるビジネスにおける仕組みづくりや設計を知らないWEBデザイナーさんはもったいない。社会全体の損につながっていると思いますし、個人としても損しています。

何せこれからの時代は個人で活動していようがいまいが、企業やグループという枠を超えて仕事をすることになったりしますからね。目に見えない部分を扱えるかどうかで、そういったチャンスをものにできるどうか変わってきます。そして、もし仮に独立することになったら、その違いは雲泥の差となって現れるはずです。

だから、この記事を読んだWEBデザイナーさんはぜひ、ビジネス周りの仕組みづくりや設計、マーケティングなどを勉強してみてください。見た目のデザインの枠を超えて目に見えない部分に精通しているWEBデザイナーって貴重ですから。重宝されるはずです。ちなみに個人活動しているのなら、それができないと話になりません。

もし「目に見えない部分、勉強するぞ!」と思ったのなら、ぜひ僕のブログを読んでみてください。きっとお役に立てると思います。

それでは、ありがとうございました!

config.rbに書いておくと役立つもの【SASS・Compass・Windows】

こんにちは、石井です。

この前Sublime TextでSASS・Compass環境のコンパイルが出来ない場合の対処法を書いたのですが、その中でconfig.rbをいじりました。

今回はそのついでにconfig.rbに書いておくと良いかもしれない記述をいくつか紹介します。

cache_dirの指定

上記記事で書き加えたものです。

SASS・Compass環境でコンパイルしようとするとエラーが発生することがあります。

エラーには種類があるようですが、僕の直面したエラーは.sass-cacheフォルダがおかしな場所に作られていたことが原因でした。

そこで以下の記述によって.sass-cacheフォルダが作られる場所を指定しています。(今回はconfig.rbと同じディレクトリに.sass-cacheフォルダが作られるようになっています。)

cache_dir = ".sass-cache"

日本語使用時のコンパイルエラーを防ぐ

Windows環境でCompassを使っている時、scssファイル内に日本語があると、コンパイル時に「Invalid Windows-31J character」と書かれたエラーが発生することがあります。(コメント内にしか日本語が存在しない場合も発生します)

以下の記述をconfig.rbに加えればこのエラーを回避できるのでWindowsユーザーにはお勧めです。

Encoding.default_external = 'utf-8'

ソースマップの作成

Chromeのデベロッパーツールを使っていると、選択中のスタイルの場所がSASSファイルではなくコンパイル後のCSSファイルの場所で表示されます。

SASS勢としては、一々CSSファイルとSASSファイルを照らし合わせて探すのは面倒くさいので、デベロッパーツールにSASSファイルの場所を表示させたいところです。

そこで登場するのが「ソースマップ(.css.map)」。コンパイル前のSASSファイルの場所とコンパイル後のCSSファイルの場所を紐づけた地図のようなものです。

このソースマップを対応するCSSファイルと同じディレクトリに置いておけば、ChromeのデベロッパーツールでSASSファイルの場所が表示されるようになります。

で、Compassを使えばソースマップを簡単に作ることができるんです。

config.rbに以下を記述しましょう。

sourcemap = true

こうするだけで、CSSファイルのコンパイル時に、コンパイル後のCSSファイルのソースマップを自動で作成してくれます。

ソースマップはコンパイル後のCSSファイルと同じディレクトリに作成されますが、ソースマップをそのディレクトリから移動させてしまうと参照先がずれたりしてしまうので注意しましょう。

コンパイル後のCSSファイルを後から移動させる可能性がある場合は、あらかじめconfig.rbのcss_dirを指定して、ソースマップと共に移動先のフォルダに直接出力されるように設定しておいた方がよいと思います。(WordPressを使うときなど)

また、Compassではconfig.rbにenvironmentを指定することで開発版(:developement)と納品版(:production)でコンパイルの内容を振り分けることが出来ますが、例えば納品版でソースマップを出力したくない時は、以下のように記述すれば大丈夫です。

sourcemap = (environment == :production) ? false : true

もしsourcemapをtrueにしてもChromeのデベロッパーツールでSASSファイルの場所が表示されない場合は、F12を押してデベロッパーツールを開き、デベロッパーツール右上の×ボタンの隣にある3つの点(Customize and control DevTools)を開き、Setting->Preferences->Sources内の「Enable CSS source maps」にチェックを入れて下さい。

とりあえずコレは入れとけ!Sublime Text 3のパッケージ

こんにちは、石井です。

今回はSublime Text 3を使い始めるときに「とりあえずこれは入れとけ」と言えるパッケージをご紹介します。

「最初から大量に入れすぎると各パッケージの役割がわからなくなる」という考えから、様々なサイトを巡って僕が吟味したものたちです。

これらだけ入れておけば、通称「恋するエディタ」Sublime Textに恋できます。たぶん。

おすすめパッケージ一覧

Package Control

パッケージの管理とかがすごく楽になる必需品。とりあえず入れとけコンテストがあったら間違いなく1位。

SASS, SASS Build, SCSS, Compass

これらを導入することでSublime TextからショートカットキーでSASSをコンパイルすることができるようになります。大変便利!

IMESupport

Sublime Textでは日本語入力時に入力欄が別ウィンドウで表示されてしまいますが、それを通常のインライン表示に変えてくれます。背景が白いのは気になるけど笑

ConvertToUTF8, Codecs33

この2つのパッケージをインストールすることでShift_JIS(シフトジス、コンピューター上で日本語を含む文字列を表現するときに使われる文字コード)で書かれたファイルの文字化けを防いでくれます。(正確にはShift_JISからUTF-8に変換している)

しかし、Codecs33はPackage Controlからインストールできません。

なので、こちらのページのClone or Downloadボタンを押してZIPファイルをダウンロードし、解凍したファイル「Codecs33-osx」の名前を「Codecs33」に変換して上で、Sublime TextのPreferences->Browse packagesを押して開かれるフォルダに入れてあげてください。

SideBarEnhancements

サイドバーの右クリックメニューで出来ることが増えます。パスをコピーしたり複製なんかもできるのでフォルダを開く手間も省けますね!

All Autocomplete

自作の定数や関数を補完して入力予測してくれるようになります。

AutoFileName

htmlでimgのsrcを設定するときにフォルダ内のファイルを入力予測してくれるようになります。他にもwidthやheightを自動挿入してくれたり。おかげで画像まわりのコーディングがかなり楽になりました。

BracketHighlighter

タグや括弧の始まりと終わりをわかりやすく表示してくれます。初歩的なミスが減るかと。

Color Highlighter

cssで色を指定している部分に、実際に表示される色を表示してくれます。覚えることを減らすのは大事ですね。

Goto-CSS-Declaration

htmlのclassやIDにカーソルを合わせてショートカットキーを押すと、それらを定義しているcssファイルの場所までジャンプしてくれます!素敵!ただ、定義しているCSSファイルが開かれていないといけません。

wpseek.com WordPress Developer Assistant

WordPressを使用している人専用。WordPressの独自関数などが補完されて入力予測してくれるようになります。

終わりに

こんな感じでしょうか?

まぁ、究極的には、万人に当てはまるマストなパッケージなんてないので参考程度に。

使ってていらないなと思ったら消していきまーす。

それでは、ありがとうございました!

Sublime Text 3でSASS・Compass環境のコンパイルに失敗する問題

こんにちは、石井です。

今回はSASS・Compass環境でSublime Textを使ったコンパイル時にエラーが発生した時の対処法についてご紹介します。

ことの経緯

以前SASS・Compass環境を初めて導入したとき「一々コマンドでwatchしたりするの面倒やな…」と思い、簡単にコンパイルできる方法を探していました。

koalaみたいなコンパイラも検討しましたが、コンパイラ開くのもコマンド打つのも大して変わらないという結論に至り、却下。

結局行きついた先は、みんな大好きSublime Textと連携したコンパイル方法。

ショートカットキーだけでコンパイルできるのは効率厨の僕にとって大変ありがたいです。

丁度エディタを変えようと思っていたのもグッドタイミングでした。

No such file or directory @ rb_sysopen

しかし、途中で問題が起こりました。

それは諸々の設定を終え、試しにコンパイルしようとした時のこと。

Sublime Text君がこんなメッセージを突き付けてきました。

No such file or directory @ rb_sysopen - C:/Users/[USER名]/AppData/Roaming/Sublime Text 3/Packages/Compass/.sass-cache/[ここからファイルパスが続く]

なんじゃそりゃと思って検索をかけてみるも、他のエラーに関することばかりで解決策が見つからず。

仕方なく自分で調査したところ、原因を突き止めました。

原因は「.sass-cache」フォルダ

原因は「.sass-cache」フォルダにありました。

エラー内容を解読すると、どうやら

「Sublime Textフォルダの中のCompassフォルダの中の.sass-cacheフォルダの中のとあるファイルが見つからないよ!」

ということらしい。

「ん?.sass-cacheってそんなとこに作られんの?」

ここが怪しいと睨み、さっそくconfig.rbをいじって.sass-cacheフォルダが作られる場所をプロジェクトフォルダのルートディレクトリに指定。

そしてコンパイルを試したら…

やったぜ

cache_dirを設定しよう

今回のエラーは.sass-cacheというキャッシュを溜めておくフォルダが変なところに作られ、それをコンパイル時に参照しようとした際に不都合が起こったのが原因のようです。

だから、config.rbから.sass-cacheが保存される場所を指定してあげればおk。

場所はとりあえずプロジェクトフォルダのルートディレクトリにしときました。

config.rbの好きなところに以下を記述します。

cache_dir = '.sass-cache'

同じようなエラーに困っている方、お試しあれ。

.sass-cacheはどこに置くのが適切なのか?

今回問題となった.sass-cacheフォルダですが、フォルダ構成によってはサーバーにアップロードする容量の増加と転送スピードの遅延を招きます。

気になる人は以下のサイトを参考に、.sass-cacheフォルダが作られる場所を変更してみてもいいかもしれません。

Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法

多分「Sublime Textフォルダの中のCompassフォルダの中の…」みたいな変な場所に作らなければエラーも出ないでしょう。

それでは、ありがとうございました!