Googleスプレッドシートを外部から書き込んで外部から検索できるデータベースにする方法【wordpress】

こんにちは!今回はタイトルにもあるように、Googleスプレッドシートをデータベースのように使う方法をご紹介します!

といってもちょっと特殊で、プロフィールにもある通り大学新聞社に在籍しているのですが、ホームページを任され、「記事のデータベースを作ろう!」ということになり、自力でどうにか構築もメンテも簡単かつ、ホームページから書き込みも検索もできてしまうようなデータベースを構築できないか、と試行錯誤した結果編み出した方法です。

ちなみに今回の方法は、ホームページ制作ツールwordpressを利用したものと、利用しなくてもできる(検索の実装は不可…)の2つをご紹介します!

自分のサイトにデータをキレイに掲載する「COLROW」

overview_figure01COLROW コルロー は、Googleスプレッドシートに登録された「店舗一覧」、「イベント一覧」、「商品価格表」、「料理メニュー」など、パソコンではExcelで管理するようなリストデータを簡単にウェブ表現するツールです。

COLROW管理画面で発行した1〜2行のコードをご自身のウェブサイトやブログに追加するだけで、「写真付きリスト」や「複数スポットが掲載されたGoogleマップ」、「投稿内容がスプレッドシートとGoogleドライブに保存されるウェブフォーム」を掲載できます。

プロのウェブ制作者向けのCOLROW APIを利用すれば、GoogleスプレッドシートおよびGoogleドライブをデータベースとして扱うウェブサイトを制作することができます。スプレッドシートのデータを修正すると即時にウェブサイトも更新されます。表計算ソフトを扱える方であれば、ウェブサイトのメンテナンスができるようになります。

そう、つまりExcelさえ扱えるなら簡単!ってことです。

例を見てみましょう。

店舗や会員の紹介ページ

Googleスプレッドシートに登録された店舗一覧から、Googleマップ上に店舗位置を表示したり、店舗詳細ページを表示します。
スプレッドシートの情報を修正すると、即時にウェブサイトの情報も更新されます。
インターネット上に公開された写真URLをシート内に設置することで、写真もウェブページ内に掲載されます。

価格表のウェブページ

figure-pricelist

価格表はEXCELで作成・管理するシーンが多いです。Googleスプレッドシートに作成された価格表をウェブページに表現します。
例えば、スプレッドシートの関数を利用することで、消費税が変わる際もいつのセルのデータ(消費税率)を更新するのみで、価格表のウェブページのメンテナンスが終了します。

使ってみよう!

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3
使い方の流れはこんな感じ。
今回はサンプルでCOLROWサイトにあるサンプルを例にお話しします。
まずはGoogleアカウントとCOLROWアカウントを登録します。
続いて、Googleスプレッドシートを開き、ウェブサイトに掲載したいデータを用意します。
4
そしてデータが用意できたら、COLROWのサイトでGoogleスプレッドシートのデータを読み込み、サイトに掲載したい形をリスト・マップ・フォームのパーツから選びます。
5
ここでは「リスト」を選びます。
次のように指定していきます。
0 10 n n2
こんな感じでHTMLコードを取得して、自分の作っているホームページの表示したい場所にHTMLで書き込みます。JimdoでもWordpressでもこれならできますね!
すると…
2
こんな感じに表示できます!
簡単にキレイに表示できる点では素晴らしいと思います!HTMLの知識も不要ですし難しいことは特にありません。COLROWのページには詳しい使い方も書いてありますので、使ってみたい方はご覧ください!

Googleスプレッドシートにデータを外部から書き込む方法

さてさて、ここからが本題です(笑)。

まずはGoogleアカウントログイン状態で、Googleドライブから「新規作成」でGoogleフォームをクリックします。(直接Googleフォームにアクセスしても構いません)

そしてガイドに従って、データベースとして入力したい項目を「質問」として書き込んでいきます。

a

完成したら「送信」をクリック!

b

すると「フォームを送信」ウィンドウが開くので、画像のようにHTMLコードの画面を開いてコピーをクリック。

c

そしてCOLROWのときと同じように、自分のサイトにHTMLコードとして書き込みます。

wp

ここでは実際にこの投稿内に張り付けてみました!

…と、上記のようにサイトには表示されます。(もちろん色やサイズのカスタマイズも可能です)

続いて書き込んだデータを見る方法です。

d

先ほどのGoogleフォームの質問ページから、「回答」タブを選択。

緑のアイコン「スプレッドシートの作成」をクリックし、出てきたウィンドウで「新しいスプレッドシートを作成」をクリック(もちろん既存のものにもリンク可)

すると下のようなGoogleスプレッドシートが表示されます。

w

適当に3つほどデータを書き込んでみましたがこんな感じで表示され、きちんと書き込まれてますね。「フィルタ」表示を使えば1行目は動かさないことや並び替えも可能ですし、使い方次第では見やすくなります。

wordpressプラグインを利用してスプレッドシート上のデータを検索する方法

さてさてさて本命です。

こちらではwordpressを使って作っているサイト限定ですが、「データベースの情報を検索する」方法をご紹介します!

今回使うのはwordpressプラグインの「Inline Google Spreadsheet Viewer」です。

wp2

まずはこれをインストール。

続いて、Googleスプレッドシートのデータベースを開きます(今回は先ほど作ったsampleを利用します)。

そして右上の「共有」アイコンをクリック。

op1

このようなウィンドウが表示されるので、「リンクを知っている全員が編集可」としたら、リンクをコピー。

op2

そのリンクを取得すればあとは簡単です。

op3

先ほどのプラグインによって上のようなコードでリストが表示できるようになっています。

コードはこれ。

[gdoc key=” 先ほど取得したgoogleスプレッドシートの公開URL ” ]

これだけで、ホームページには

op5

こんな風なリストが表示されます!

ここには「検索ボックス」が!!!

これでデータベースを検索できるようになりました!

 

一応このページにも貼っておきます。

 

このリストですが表示するリストの列を選べたり、「PDF」などのボタンをクリックすると、指定したファイルでデータベースがダウンロードされます。

wp1

もちろん、wordpressですから、公開状態を「保護」にして、パスワードを設定すれば、パスワードを知っている人だけが「フォーム」に書き込んでデータを編集したり、データベースを閲覧できるようにすることもできますよね。

おわりに

というわけで今回はGoogleスプレッドシートを外部から書き込んで外部から検索できるデータベースにする方法をご紹介しました。

私は新聞社のデータベースに1週間考え抜いてついにこの方法を見つけました…(検索しても全然情報がなかった…)

ですがこの方法を使えば、Googleスプレッドシートを開いたりする必要なしに、データベースに情報を書き込めますし、検索・表示ができます。

ぜひ使ってみてください!

 

mamesuke

福岡出身、関西で学ぶ大学生。学生メディアとして、大学新聞で活動中。ガジェット好き、旅行好き、カメラ好き。鉄道もちょっとかじってます。

あわせて読みたい