リアルタイム（現在の）注文状況で繁盛感の演出

※中級以上の話題なので初心者の方は読む必要ありません。
ネットショップのデメリットのひとつが、客として訪問したお店が「どれくらい賑わっているのか」、見た目にはわからないという点です。実店舗のお店なら、入ろうと思うと、満席だったり行列ができていたりすると、視覚的に繁盛しているのがダイレクトに伝わってきます。

でも、ネットショップは、例えば「1分間に100万件の注文が入っていても」「1億人がお店のページ見ていても」、まったくわかりません。あるのは「自分はお店を見ている」という感覚だけです。そこで、その繁盛している様子を、視覚的に見せようという試みのひとつが「現在の注文状況」です。

リアルタイムに注文情報を公開したり、最新の注文状況などを公開します。もちろん、一般に公開するのは、個人情報を省いた、商品名や都道府県、金額などです。 店主が望むのなら、商品のサムネイル（小さい画像）を表示させることもあります。

この「リアルタイム注文状況」、お店側としては喉から手が出るほど欲しいパーツ（ウィジット）なのですが、残念ながら、2016年9月現在、標準機能として実装しているASP（開業サービス）はありません。これをやるには、自前でやるか、それ専用の有料サービスを使うほかありません。

唯一、ショップサーブだけが、自前でできる環境があるので、その方法などを紹介したいと思います。

※楽天退店組、法人の通販参入や切り替え向けシステム 　まじめに生き残りを考えている企業向けの通販システム（※個人事業主、副業は不向き）

jQueryを使う

リアルタイム感を出すには、やはり「動き」がないと弱くなります。自動的にスクロールするようなパターンです。このような動きのあるパーツをサイト内に導入しようと思えばjQueryは欠かせません。

と言っても、難しく考える必要はありませんし、プログラミングの必要もありません。仕組みを理解できたならコピペレベルで実装が可能です。ただし、最低限HTMLはわかっていないとお話になりません。

jQueryは、リンクで呼び出す方法もありますが、できれば自社サーバー内に入れておくほうが、なにかと便利です。jQueryは無料でダウンロードできるので、入手してサーバーの特定の場所に収納しておいてください。最新バージョンは「3.1.0」です。

シンプルなサンプル

いろいろな見せ方があるのですが、一番シンプルなバージョンがこれです。一件ずつスクロールでテンポ良く表示するスタイルはスピード感があって、流行ってる印象を与えるにはピッタリです。一件ずつなので、場所を取らず、ページのあらゆる場所にも挿入できてしまいます。

このようなスタイルをニュースティッカーと言います。
こちらのサイトを参考にさせていただきました。
https://www.dataplan.jp/blog/jquery/950

なお、（）内の現在の年月日時刻はSSIを利用して自動取得しています。時間までの表示にしていますが、秒単位で取得できます。ショップサーブは、SSIも使えてしまいます。玄人（自作派）も好む開業サーバーは同社だけではないでしょうかね。

4件ずつ注文内容を表示

もう少しスペースを取って複数の注文が入っているのを見せることができるのが次のサンプルです。

注文状況にもお客様の声にも使えそうです。

今回のプラグインはこちらです。
https://risq.github.io/jquery-advanced-news-ticker/