つくり方の全容。

サイトの裏側にあるのは、ただの Google スプレッドシート一枚です。商品マスタも、お知らせ管理画面も、営業カレンダーも、ありません。普通の商品(=きゅうり/ナス/レタス…)の行と、「本日の店頭」「営業/月」「営業/火」のような特別な名前の行が同じシートに並んでいて、サイト側は名前を見て役割を振り分けます。「本日の店頭」の行に書かれている文は店主のひと言の吹き出しとして、「営業/水」の行に「定休」と書かれていれば水曜は休みとして、サイトに反映される。
店主は毎朝、この一枚を開いて、その日の状況を書き込むだけ。それでサイト全体の表情が変わります。

出した指示サイトの表示を変える情報は、できるだけ一枚のスプレッドシートにまとめてほしい。商品リストとは別に、店主コメントや営業日のための別シートを作るのではなく、同じシート内に「特別な行」を持たせる形に。店主が一番よく書き換える列(=コメント・営業時間)は、商品名のすぐ隣に置いてほしい。横スクロールせずに編集できるように。

「店主が毎日更新する」は、操作が面倒だと続きません。在庫の管理は3つから選ぶだけのプルダウンにしました。緑の「あります」、橙の「のこりわずか」、赤の「完売」。Google スプレッドシートには標準で「データの入力規則」という機能があって、選択肢を決めると ドロップダウン + 色つきラベルで表示されます。タイプミスもない。
サイト側はこの値を読んで、表の在庫列に同じ色のラベルで表示します。完売は取り消し線つき+半透明に。1秒で1品目の在庫を切り替えられる仕組み。朝の開店前と昼の売り切れ時に、店主が手元のスマホでスプレッドシートを開いて、選び直していくだけです。

サイトに出てくる店主のひと言の吹き出しは、シート2行目の「本日の店頭」という名前の行の note 列に書いた文がそのまま表示される仕組みです。朝6時に大田市場から戻ってきて、今日の市況や仕入れの感想を 2〜3行 打って保存するだけ。
同じ「特別な行」のパターンで、「営業/月」「営業/火」…の行の note 列に「9:00-19:00」や「定休」と書いておけば、サイトは現在の曜日・時刻と照らし合わせて「営業中」「営業終了」「定休日」を上部に表示します。臨時休業のときは その日の行を「定休」に書き換えるだけ。1枚のシートで複数の役割を担わせる設計です。

出した指示店主のひと言だけでなく、営業時間も曜日ごとにスプレッドシートで設定できるようにしたい。週間カレンダーのような形で同じシートに組み込んで、その日の店の状態(=営業中・営業終了・定休日)がサイトの上部に自動で表示される構造に。

仕組みの話とは別に、デザインのトーンも一度大きく作り直しました。初稿は明朝書体に生成り紙のような背景の上品な編集デザインで組みましたが、「これじゃない」と却下。八百屋に似合うのは上品さよりも、街でがやがやと買い物が起きる空気のはず。
参考にした素材(=雑誌「マーケットツアー イン ロンドン」のスプレッド)に倣って、背景を白に、見出しを太い欧文の巨大文字に、所々に「今朝の市場帰り!」のような手描き風のひと言を赤の矢印と一緒に散らし、章番号を丸で囲んで雑誌の特集のような段組のリズムに。同じ素材でも入れ物が変わるだけで、全体の空気が一変しました。「店主が朝スプレッドシートを叩く」という設計の話を一番伝えたかったのは事実ですが、それを伝える入れ物の選び方もまた、サイトの仕事のうちです。

サイトはスプレッドシートを読みに行って、その内容で表示を作り直します。サーバーもデータベースもない、ただの HTML と JavaScript のファイルです。FTPでアップするだけで動く。
ただし、ローカルのパソコンで HTML ファイルを直接ダブルクリックで開いた場合に、最初に組んだ仕組みでは「通信がブラウザに止められて動かない」現象が起きました(=技術用語で「同一オリジン制約」と呼ばれるブラウザの安全機能)。サイトを本番のサーバーにアップしてしまえば動くのですが、開発中の確認が面倒です。
解決策として、Google スプレッドシートが用意している別の読み込み方に切り替えました。技術的には JSONP という古いやり方ですが、ブラウザの安全機能と相性が良くて、ローカル/本番どちらでも動きます。「FTPで上げるだけで動く」というULウェブの根本にも合っていました。

出した指示ローカルのブラウザでサイトを開いて、スプレッドシート側で「きゅうり」の在庫を『完売』に書き換えてみたが、サイトの表示が変わらない。スプレッドシート側は確かに『完売』になっているのに、サイトに反映されない。原因を調べて直してほしい。