知り合いの会社に頼まれてシステム開発をしていんですが、担当者がド素人すぎて、佳境に巻き込まれてしまった、下駄です。
とあるアパレル会社のwebサイトを激安価格で作って欲しいという、無茶振りに加えて、開発期間が1ヶ月弱という中、公開前日まで仕様変更が行われるなどの、あまり関わりたく無い開発に携わってしまった時に、実際は1週間程度でシステムを作り上げることができたんですが、かなりそれぞれの担当者に振り回されることになった事が、非常に勉強になりました。
でも、システム会社って、変更された仕様に対応し続けるしかないんですかね？
そんな中、アパレル会社特有の問題点がありそれに対応したお話をしたいと思います。
本日のIT謎掛け
「アパレル会社のショッピングサイト」と、かけまして、
「ヤドカリの引っ越し」と、ときます。
そのココロは・・・
カラー（color、殻）に、気を使います。
アパレル企業特有のサイズsort
構築するシステムは、洋服などをサイトで展示販売するショッピングサイトだったのですが、商品は色別、サイズ別に1000点以上あって、商品リストをエクセルデータでもらってそれをデータベースにコンバートして登録して、使用するような構成にしていたんですが、キレイに商品別に並べられているデータの並びだったので、もらったデータをそのまま表示していたところ、並びの中で違和感を覚えました。
サイズが全て「L , M , S」という並びで登録されているではありませんか・・・
確かに、Lサイズ、Mサイズ、Sサイズという並びであることはわかりますが、ここに特大サイズのXサイズが加わった商品は、
「L , M , S , XL , XXL , XXL」となっている・・・orz
サイズ順に登録されてないやん・・・
全てのサイズがこの順番で登録されているので、もしかしたら、その企業の内部でのデータ管理にルールがあるのかもしれないが、
無茶振り対応
問題は、これをショップサイトで表示した時に、登録されてある並びで表示されているのを見た担当者が、
「S , M , L , XL , XXL , XXXL、という順で表示してくれね？」
と気軽に言ったことで、凍りつきました。
お前からもらった通りの順に表示しとるんじゃ！
でも、「お前がデータを修正せい！」というわけにもいかなかった・・・
何故なら一度キレイに変換して、システムに登録したデータを、システム側でいくつか更新していることも考えると、また全てチャラにしてデータ登録をして、変更箇所を見つけ直すという方が効率も悪すぎるので、もらったデータの順番はそのままにする方向で考えることにした。
技術者の思考
単純にSMLの並びを変えるだけでいいかと思ったら、サイズ指定の項目は、インチの数値が書いてあったり、"21-22"などの、サイズレンジで書かれているものがあったり、中にはシューズなどもあり、"23.5"など小数点記述もあった。
少なくても、デフォルト機能のsort関数でやると、とんでもない結果になることは目に見えていた。
そもそも、SMLをソートすると、LMSとなるので、おそらく担当者が作ってきたデータは、このようにソートがかかった状態がデフォルトだったに違いない。
それをシステム側で、「未知の領域をソートしろ」、「仕様は自分で考えろ」的なノリで依頼してきて、爆弾仕込んでやろうかと考えたが、まずは、どうやって対応するかを考えてみた。
プログラミング解決法
基本的に、サーバーサイドでサイズを表示する箇所で順番変更を行っても良いのだが、今回は後付仕様なので、ピンポイントの部分のみの影響範囲で、不具合発生をなくしたかったので、javascript側のフロントで対応することにした。
まずは、解決したプログラミングを見てほしい。
MAIN.prototype.sort_size = function(lists){
var size_select = document.querySelector("サイズ一覧を選択するselectタグ");
if(!size_select){return}
var vals = [];
for(var i=0; i<lists.length; i++){
var val = this.encode_val_size(lists[i].size);
vals.push(val);
}
vals.sort(function(a,b){
a = a.replace("A","");
b = b.replace("A","");
if(a.match(/^[0-9]+$/)
|| b.match(/^[0-9]+$/)
|| a.match(/^[0-9]+\.[0-9]+$/)
|| b.match(/^[0-9]+\.[0-9]+$/)
){
if(Number(a) < Number(b)){return -1}
if(Number(a) > Number(b)){return 1}
}
else{
if(String(a).toLowerCase() < String(b).toLowerCase()){return -1}
if(String(a).toLowerCase() > String(b).toLowerCase()){return 1}
}
return 0
});
size_select.innerHTML = "";
for(var i=0; i<vals.length; i++){
var option = document.createElement("option");
var val = this.decode_val_size(vals[i]);
option.value = val;
option.textContent = val;
size_select.appendChild(option);
}
};
MAIN.prototype.encode_val_size = function(val){
val = val.replace(/S/g , "{{1}}");
val = val.replace(/M/g , "{{2}}");
val = val.replace(/L/g , "{{3}}");
val = val.replace(/X/g , "{{4}}");
return val;
};
MAIN.prototype.decode_val_size = function(val){
val = val.replace(/\{\{1\}\}/g , "S");
val = val.replace(/\{\{2\}\}/g , "M");
val = val.replace(/\{\{3\}\}/g , "L");
val = val.replace(/\{\{4\}\}/g , "X");
return val;
};
サイズ表示は、selectタグで行っているので、optionタグの順番を変更できれば、良いだけのアウトプットになっている。
ここで重要なのが、まず、encode_val_size関数で、SMLXという文字列を順位ソートできるように、記号+数値変換(encode)しておいて、ソートした後、表示する直前にもとに戻すという処理を行っている。
次にこのままでは、普通のsortをした時に、小数点や、数値の並びがぐちゃぐちゃになる。
そこで、javascriptのsort関数は、内部に独自比較処理が書けるので、そこでab比較を行っているワケだが、
a,bそれぞれが、数値（少数含む）の時は、numericソート、文字列の時は、文字コードでソートする分岐を作って対応してみた。
結果、見事にサイズ表示の並びを指定のとおりにすることに成功した。
ここまでかかった時間は、30分ぐらいだが、今回の開発で一番悩み抜いた箇所でもある。
ちなみに、アパレル系のサイズ表記ではどこでも使えるシロモノになったはずなので、同じように困った人がいたら是非使ってくだされ。
あ、そうそう、index.htmlのソースコード冒頭に、開発会社であるうちの会社の紹介文章をコメントで入れさせてもらったよ。
これに気がつく人は結構有望な人と思うので、是非うちの会社まで連絡くれたまえ。
