ウェブデザイナーがMakeshopに1年ふれて分かった点まとめ

2019年6月23日 21:31

ぐーてんもるげん！
TV版エヴァがNetflixに追加されました。うれしい。

ポジティブな内容から6話ほど使って、じっくりじっくり、シリアスでダークな世界観に移ろぐ演出に脱帽です。
宗教や心理学をバックボーンに置いて作ってるアニメでもあるので人を選ぶかもしれませんけど、兎に角、マジンガーZ、ガンダム、マクロスに続いて、平成のエヴァと呼ばれるロボット代表作をNeflixで。うれしい。

Makeshopを始める前にどういうセットアップが必要？

Makeshopは、2004年11月にスタートしたネットショップ開業向けサービスです。ASPカートとも言います。
04年にしてこのレベルのサービスというのは、当時は画期的だったはず。しかし、現在のこういうサイトやこういうサイトを再現するには、ちょーっち準備が必要です。

Makeshopのサービス開始の数年後、ハムスター島で初の個人サイトを持った自分からしてみれば、Makeshopのクオリティの高さに結構騒がれたんではないでしょーか。

ただ、今は2019年、サービス開始から15年が経っています。現代風サイトを組み立てる際にMakeshopを使用する場合は、僕みたいにセットアップ作業を迫られます。

コーディング画面はこんな感じのテーブルレイアウト型

エリアごとに編集エリアが用意されてあります。シングルカラム型レイアウトは、左側メニュー管理を封印することで構築可能です。

注意点がひとつあって、テーブルレイアウトが採用されていること。
各所にテーブルレイアウトの面影が残っており、取り除きましょう。

テーブルレイアウトをハックする

前述のように自由なコーディング環境を整えます。テーブルレイアウトってこういう技術です。

https://ics.media/entry/17960/

今なら例えテーブルレイアウトでも代替案が流石に色々と存在しますが、現代の常識的な方法でコーディングするためには、幾つかハックが必要です。

Body内の<center>タグを無効化

全ページのインライン要素が全て中央揃えになっちゃう。グワーッ！
という訳で、無効化しちゃいます。ユーザーが編集できない場所に<center>タグが記述されているので、<body>に一番近い「上段メニュー管理」閉じタグを入れちゃいます。

</center></center>

<center>タグが二つ出力されてあるので、閉じタグを二回記述しています。これで中央揃えの無効化が出来ました。

商品詳細ページでお馴染みのアレの実装方法

お馴染みの写真切り替え機能です。左下の「■ 商品画像」部分みたいなのがそれです。

Makeshopのものは勿論テーブルレイアウト。HTML構造が通常より2階層ほど多いので、bx-slider、slickといった代表的なjQueryが動きません。

次のHTMLとスクリプトを用意して、無理やり実装しました。

HTML

<div class="slides">
    [MAIN_IMAGE]
</div>

<div class="thumbnail">
    [MAIN_IMAGE]
</div>

スクリプトコード


//thumbAdd ".is--click"
$(document).ready(function(){
   $('.thumbnail div#image_main_0').addClass("is--click");
});

//clickTrigger ".is--click"
$('.thumbnail .M_imageMainList').on('click', 'div', function () {
   $('div.is--click').removeClass("is--click");
   $(this).addClass("is--click");
});


//"#image_main_0" autoHide
 var is--click = $('.thumbnail .M_imageMainList-item').attr("id");
 var num = is--click.slice(11,12);
     $('.main02 .M_imageMainList-item').hide();
     $('#image_main_' + num).fadeIn();
});

//"#image_main_num" manualHide
$('.thumbnail .M_imageMainList-item').click(function(){
 var is--click = $(this).attr("id");
 var num = is--click.slice(11,12);
 $('.main02 .M_imageMainList div').hide();
 $('#image_main_' + num).fadeIn();
});

カプセル化をサボタージュ＋稚拙なスクリプトですが、こんな感じです。代表的なjQueryでは写真切り替え機能が動かないんです。

でもこれで、写真切り替え機能も無事に動きました。

商品一覧上でロールオーバーを実装する方法

伝えきれない商品の魅力をちら見せする時に採用されるUXの一種ですね。アパレルだと、色違いをちら見せする為にアニエスベーが採用しています。

他に、こういうサイトやこういうサイトが採用していますね。

静的なページ上でやる分にはとてもシンプルに実装できます。しかし、ECサイトのような動的ページを相手にするときは、システム仕様に合わせます。

因みにMakeshopはカタログページのロールオーバーは非推奨みたいです。使う場合は自己責任！！
ただステークホルダーに笑顔を届けたいので、頑張っちゃいましょう。

やり方としては、独自タグ[ITEMIMAGE_VIEW_1]の仕様をハックします。
こいつはアップしたimgのアドレスを出力するので、そのURLをスクリプトの力で切り取って、別の箇所に張り付けます。

アドレスはランダム出力ですが、桁数は変わらないとMakeshopの人が教えてくれました（19年6月現在の裏仕様のため、アップデートされて仕様がひっくり変わることがあり得る）

スクリプトコード

$(function(){
   $('div.catalog').each(function(i){
       $(this).attr('id','cut' + (i+1));
   });
   $('img.cut-output').each(function(i){
       $(this).attr('id','output' + (i+1));
   });
});

$(function(){
	 for (var i = 0; i < 1ページに表示できる商品点数をここに入れる; i++) {
	 　　eval("var getThumbImageUrl" + i + "=" + "$('#cut" + i + "').find('#cut-href').attr('href')" + ";");
	 }

	 var getThumbImageUrl1_url = "https://shop11-makeshop.akamaized.net/shopimages/caremeal001/" + getThumbImageUrl1.slice(22, 48)
	 $('img#output1').attr('src',getThumbImageUrl1_url);


});

var getThumbImageUrl1_url =の部分は、商品がある分だけコピペする。これってエンジニアから見れば絶対御法度だと思う。COOLな方法はエンジニアに任せちゃいましょう。COOLになれ、前原圭一！！（言いたかった）

老舗サービスはアフターフォローとサポートが手厚いけど、開発仕様が古いというデメリット

Makeshopは今年の春からクリエイターモードがスタートしました。
しかし、ECサイトでの必要機能がまだ揃っていません。2020年中に揃いそう。

クリエイターモードが完成するまでは、テーブルレイアウトとお付き合いすることになっちゃいます。ひぃ～。
僕みたいに、デザインとウェブコーダーを両方やられている方は、Makeshop案件を初めて持ったら苦労するかも、という記事でした。

よしなに。

Webコーダー / Webデザイナーを生業にしております。最近はOctatrack mk2を手に入れて奮闘中です。あとアニメとマンガが大好きな関西人。