[Portfolio]Spreadsheet Product Sync

前回のGoogleスプレッドシートの読込・出力のアップグレード版として、Googleスプレッドシートで管理している商品情報を、Webサイトへ反映できる仕組みを構築しました。

商品名や説明、画像などの情報をスプレッドシート側で管理できるため、Webサイトのコードやデータベースを直接編集せずに情報を更新できます。

主な機能・特徴

• Googleスプレッドシートで商品情報を管理
• Apps ScriptからJSON形式でデータを送信
• PHPでデータを受信してMySQLへ保存
• WebサイトではDBに保存したデータを表示
• 画像URLを登録して商品画像を表示可能
• スプレッドシートを非公開設定にした運用にも対応

活用例

• 商品一覧・製品カタログの更新
• 店舗や施設などの情報管理
• 料金表・プラン一覧の更新
• セミナー・イベント情報の管理
• スタッフ・メンバー情報の管理
• WordPressなどを使わずに行う簡易的なデータ更新　等

Excelやスプレッドシートに慣れている担当者が、Webサイトの仕組みを意識せず更新できる用途を想定しています。

実装の仕組み

スプレッドシートへ直接アクセスして表示する方式ではなく、一度DBへ保存してからWebサイトに表示する構成にしています。

工夫・改善した点

以前作成したスプレッドシート連携版を発展させ、Webサイト表示時にスプレッドシートを読み込まない構成へ変更しました。

これにより、

• ページ表示時のデータ取得による待ち時間を削減
• Apps Scriptの不要な実行を抑制
• スプレッドシートを商品管理画面のように利用

できるようにしています。

使用技術

デモ

実際の動作を確認できるサンプルを公開しています。

サンプルサイト

［デモを見る］
ID: sample　PASS: sample

Googleスプレッドシート

［管理用スプレッドシートを見る］

こちらのスプシは、アクセス制限を「リンクを知っている全員」にしてありますが、「制限付き」でも表示可能です。
スプシに画像のURLを記載することで、画像表示させることも可能です。