公開日 : 2018/11/22

ストアサイトを中古書店に-01- 表示をなんとかしたい

今年の4月に古物商の資格を取り、フィールドアーカイヴのストアサイト(https://store.field-archive.com/)にも古物商番号を載せていたのですが、思ったような形にできずにいました。

復刊がメインの事業なのですが、絶版した名著を発掘してご紹介していくというのもとてもとてもやりたいことなのです。

起業ミニメッセまでもうすぐで、そちらもまだ形になっていない段階💦なのですが、ストアサイトのほうも是非何とかしたいので、同時にやれるだけのことをやることにしました。

ここにその活動記録を残していきます。

やってやれないことはない。
やらずにできるはずがないっ!

このサイトは、BASEの無料テンプレートを使っているのですが、デフォルトのままだと見せたい形にできないのでこれをまずなんとかします。

見た目はこんな感じでシンプルで構わないのですが、例えば

・弊社の既刊本と中古本とを分けて表示したい
・タイトルを全部見せたい
・タイトルに含まれる仕様、書名、著者名の大きさを変えたい
・本のおすすめコメントを載せたい

これらの機能は是非入れたいと思っていました。

BASEは、ありがたいことに、無料でデザインを編集できます。
いくつかの販売サイトを見比べましたが、この機能がある点が一番の決め手でした。

ありがたいことに、私、いちおうプログラマー歴20年なので、裏でちゃちゃっと作り変えるのはお手のものなわけです 笑。

そんな感じでできたのがこちら。

・弊社の既刊本と中古本とを分けて表示したい ← クリア
・タイトルを全部見せたい ← クリア
・タイトルに含まれる仕様、書名、著者名の大きさを変えたい ← クリア
・本のおすすめコメントを載せたい ← クリアならず

ちょっと良くなってきた。

ただ、コメントの部分は当然、本一点づつ違えたいわけなのですが、デザインベースの変更だけでは同一内容にすることしかできませんでした。
これでは意味がない!

普通なら商品説明部分にコメントも入れこんじゃって分割して表示する等で簡単に対応できるのですが、これはBASEを基盤にしているため、制約が大変多い。

さらに、どうやらトップページに商品説明は表示できない仕様になっているようなのです。
さらにさらに、アプリ版や小画面版の表示は一切いじれないので、下手にタイトルや説明文をいじるとそのまま表示されてしまい、とても格好が悪い。

なので既存のBASEのデータを引っ張ってくる案は却下しました。

そうなると、外部からデータをとってくるしかない。
できてしまえばあっさりなのですが、これが結構、難関でした。

1つ目の難関は、クロスドメインアクセス問題。
CORSという仕様の問題です。

外部からデータをとるjavascriptを記述すると「そのデータ、外部からなんだけれども」というエラーが出て先に進めなくなる現象。

まあ、勝手に他サーバーのデータをとってくるのは確かに問題ありそうですよね。

そこで、取りに行くサーバーのデータに以下の記述を埋め込んであげたら解決しました。

<?php
header(‘Access-Control-Allow-Origin: *’);
header(‘Access-Control-Allow-Methods: GET, POST, PUT’);
header(‘Access-Control-Max-Age: 3600’);
header(‘Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept’);
?>

この記述の後に、渡したいテキストを書きました。

2つ目の難関も、クロスドメイン問題でした。
読む側と読まれる側がhttpとhttpsだと、異なると判断されてエラーになってしまうのです。

これを解決するには本サイトをストアサイトと同じくhttpsにしなくてはならない。

以前やって挫折したので嫌だったのですが、あらためて調べたところ、ものすごく簡単に解決しました。やってみるものです。

それについては、次コラム(ストアサイトを中古書店に-02-)にて。