2011

JUN

08

2011.06.08

nishimotonishimoto

お手軽にCMSをGoogleスプレットシートで構築する方法(サンプルDL有)

こんにちわ、自炊を初めて部屋が片付くはずが、自炊がなかなか終わらないので部屋が荒れ放題の @nihimoto です。
最近、GoogleスプレットシートというGoogle版エクセル的なwebサービスで、CSVが吐き出せる上にweb上に公開できる機能の存在を小耳にはさみました。これは「CMSに使える!」と思ったので早速試してみました。

これまでの仕事でたくさんの「お知らせ」管理システムや「イベント告知」システムなどを構築してきましたが、これらのシステムは表示するシステムを作る工数は大きくないものの、更新するシステムを作る工数は非常に大きなる傾向があります。
しかし、Googleスプレットシートでデータの更新・管理ができるのであれば、丸ごとGoogleスプレッドシートに依存することで、更新システムにかかる工数を0にできます。


↑ 管理用のGoogleスプレットシートの画面、エクセルと似たような感じです


↑ 表示している画面。管理用のシートを読み込んでいます(サンプル)

もちろん、個々の事情に合わせて最適の管理画面を用意した場合に比べ、Googleスプレッドシートの画一的な画面は、使い勝手は落ちます。しかし、エクセルと似たような操作法なので一般の方からも馴染みやすい形でデータを管理できるのではないでしょうか。コストを考えればこの機能で十分CMSとしての役割を果たせるケースも多いはずです。選択肢の一つとしてこの手法を持っておくことは、とても有意義なことだと思います。

このページでは、流れや考え方の説明と共に、すぐに使えるソースコードのサンプルも置いておきますので、個人商用限らずご自由にご利用ください。(たいしたサンプルではありませんが・・)

はじめに. システム概要

システムの大雑把な仕組みは簡単に言えば下記の2つになります。

更新用システム=Googleスプレットシートを公開設定で1つ作成して、この中にウェブサイト上で表示したいデータを全て書き込む(Sample
表示用システム=上記のCSVファイルを読み込んで整形してHTMLとして表示するPHPプログラムをサイト内に埋め込む

簡単に言えばこれだけのことなります。非常にシンプルです。

以下、手順の説明になります。

 

手順1. 更新システム=Googleスプレットシートの準備

まず、サンプルのGoogleスプレッドシートを下記に作成しておいたので御覧ください。

Sheet for CMS
※編集権限は解放しておりませんが、本来はエクセルのような形で編集が可能です

1行目に項目名、2行目以降にデータという形でデータをシートに格納して更新していくことになります。もちろん項目名はカスタマイズ可能ですし、行も必要なだけ追加して問題ありません。更新作業の際には新しい行を上か下に挿入して更新を行うことになります。

さて、シートを作ったら実際にこのデータを外部から読み込むための準備をします。
使用する機能は、Googleスプレットシートの「ウェブに公開」という機能です。スプレットシートの右上に「共有」ボタンがありますので、ここをクリックして「ウェブページとして一般公開」を選択しましょう。

そうすると下記のような画面が出てくるので、「変更が加えられると自動的に再公開する」のチェックを外してから、「公開開始」ボタンをクリックしてください。

すると、「公開データへのリンクを取得」が有効になるはずです。

有効になったら一つ目のプルダウンで「CSV」を選択、2つ目のプルダウンで公開したいシートの名前(デフォルトなら「シート1」を選択してください。これで下のボックスの中のURLが公開用のCSVファイルのURLになるはずです。
このURLを表示側のプログラムで読み込むことになりますので、コピーして取っておいてください。

後はこのシートの中に必要なデータを記入していき、CMSの公開に備えましょう。

※なお、運用を開始した後にデータを更新した際には、「今すぐ再公開」ボタンを押すことでCSVデータが更新されます。

手順2. 表示システム=CSV読み込み用PHPプログラムの設置

CSVデータの準備ができたら、今度はそれを表示するためのプログラムをあなたのウェブサイトの中に埋め込む必要があります。やることはCSVを読み込んで整形してHTMLを出力するだけなので、プログラム言語はなんでも構いません。PHPやperlはもちろん、Javascriptでもできると思います。

今回はPHPでサンプルを作成してみました。
下記にサンプルを設置してありますので、一度御覧ください。
設置サンプル
ダウンロードはこちらから
Smaple Csv loader for CMS

サンプルは下記4つのファイルで構成されます。

  • トップページなどで使う「最新◯件のリストを出力する」サンプルのindex.php
  • 「お知らせ一覧」などで使う「現在のページの◯件を出力する」サンプルのlist.php
  • 「お知らせ詳細」などで使う「指定した行のお知らせの内容を全て表示する」サンプルのdetail.php
  • 上記3つのファイルから読み込まれるライブラリファイルの csvloader.inc.php

上記のファイルから必要な箇所をコピペして、ご自分のサイトに張ってください。各ファイルの先頭にCSVファイルのURLが書いてありますので、これを前の手順で作成したCSVのURLがに書き換えてください。またcsvloader.inc.phpは必ずコードを張ったファイルと同じフォルダにコピーしておいてください。

うまくいけば、手順1で作成したCSVの中身がご自分のウェブサイト内に取り込まれて表示されているはずです。

※サーバー上でphpの allow_url_fopen がONになっていないと、http経由でのファイルの読み込みができないため、エラーが発生してしまいますので注意してください。

まとめ

ということで、非常にお手軽に簡易CMSを設置できたと思います。
提供しているサンプルの制作にかかった時間も、数時間と非常に短時間ですみました。(デザインやデータがシンプルだったという理由もありますが)

最後に、簡単にこの手法のメリット・デメリットをまとめてみます。

メリット

  • 短時間・低コストでCMSを設置できる
  • エクセルに近い感覚でコンテンツの更新ができる
  • Googleアカウントで編集権限を管理できる

デメリット

  • 認証が必要なデータでは使用できない(CSVのデータが一般公開されてしまうため)
  • Googleスプレットシートではテキストデータ以外の管理はできない
    (ただし、FlickrやYouTubeなどの画像・動画ファイルをアップロードできる外部サービスを利用して、HTMLの貼りつけコードを取得してしまえば、この問題は回避することができます)
  • 一度Googleのサーバーにデータを取りに行ってから画面を表示するので若干遅い
  • Googleのサーバーがダウンすると一緒にダウンすることになる(めったに無いとは思いますが・・)

と、こんな感じです。

いかがでしたでしょうか。
これで全てのCMSを代用できるとは思いませんが、コストを抑える必要があるときに有用な選択肢の一つにはなるはずです。ぜひ覚えておいてください。

ご意見ご感想などございましたら @nihimoto までお願いします。
ではでは。

BLOG recent posts

  • AUG

    05

    2019

    sawazakisawazaki

    五明(ごみょう)茶業組合オフィシャルサイ..

  • FEB

    07

    2019

    sawazakisawazaki

    脱毛サロン Chill(チル)フライヤー..

  • FEB

    07

    2019

    sawazakisawazaki

    脱毛サロン Chill(チル)サイト構築

  • JAN

    21

    2018

    nishimotonishimoto

    我が家にアレクサがやってきた!使ってみた..