[Portfolio]Googleスプレッドシートの読込・出力

Google Apps ScriptとPHPを組み合わせ、Googleスプレッドシートで管理している商品情報をWebサイトへ読み込み・表示する仕組みを構築しました。

サンプルでは、商品コード・商品名・容量・金額などの情報をスプレッドシート側で管理し、その内容をWebサイトの商品一覧へ反映しています。

Webサイトのコードを直接編集せずに情報を変更できるため、ExcelやGoogleスプレッドシートに慣れた担当者でも、Webの仕組みを意識せずに更新できる用途を想定しています。

主な機能・特徴

• Googleスプレッドシートで商品情報を管理
• Google Apps Scriptを利用してデータを取得
• PHP側でスプレッドシートの情報を読み込み・表示
• 商品コード・商品名・容量・金額などをWebサイトへ反映
• Webサイトのコードを直接変更せずに掲載データを更新
• 画像URLを利用した画像表示にも対応可能

活用例

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

専用の管理画面を用意するほどではないものの、「担当者側で掲載内容を変更できるようにしたい」といった用途にも活用できます。

実装の仕組み

Googleスプレッドシートをデータ管理用として利用し、Google Apps ScriptとPHPを組み合わせてWebサイトへ情報を表示しています。

商品情報をWebサイトのHTMLへ直接記述するのではなく、更新するデータと表示側のコードを分けて管理できる構成にしています。

工夫・改善した点

• 普段使い慣れているGoogleスプレッドシートを簡易的な管理画面として利用できるように
• 商品名や価格など、変更する可能性のある情報をWebサイトのコードから分離
• Web制作の知識がない担当者でも、スプレッドシートを編集する感覚で掲載情報を管理できる構成
• 画像URLを利用することで、商品画像などの表示にも拡張できるように

この仕組みをさらに発展させ、Googleスプレッドシートの商品データをPHP・MySQLと連携し、一度データベースへ保存してからWebサイトへ表示する「Spreadsheet Product Sync」も制作しています。

使用技術

デモ

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

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