COLROWウェブパーツ

COLROWウェブパーツの概要

COLROWアカウントの作成とサンプルのCOLROWウェブパーツの確認

トピックス アカウント作成時に行っていること

COLROWウェブパーツ - リスト

この章のねらい

ウェブパーツの仕組みと設定の解説

クイックスタート

COLROWウェブパーツ - リスト

うさぎ品種リストの作成

COLROWウェブパーツの設定

Page

Embed

iFrame

COLROWウェブパーツ - マップ

スプレッドシートの準備

COLROWウェブパーツ - マップ の設定

COLROW PHP SDK

COLROW PHP SDK の概要

チュートリアル

COLROW API利用対象サイトの登録

インストール

記録先とアップロード先の準備

応募ページの作成

フォームデータを処理するページの作成

閲覧ページの作成

ほんの少しブラッシュアップ

第1章 COLROWウェブパーツ

COLROWウェブパーツの概要

COLROWウェブパーツは、Googleスプレッドシートをデータベースとして活用する

簡易CMSツールです。主な表現は以下のとおりです。

#

種類

説明

1

リスト

スプレッドシートに登録された店舗一覧やイベント一覧を、多彩で表現力豊かなリストとして表示します。

2

マップ

スプレッドシートに登録された住所付きの店舗一覧や観光スポット一覧を、Googleマップ上に複数スポットとして表示します。

スプレッドシート内の住所を、マップ表示に必要な緯度経度に変換するツール、住所が同じスポットをマップ上で位置を微調整するツールも利用して作成します。

3

フォーム

フォームからのテキスト投稿はスプレッドシートに、写真や画像などはGoogleドライブのフォルダに保存されます。

COLROW ウェブパーツは、以下の3種類のコードが生成されます。

最も適したコードを、ご自身のウェブサイトやブログのHTML内に貼り付けてください。

#

種類

説明

1

Embed

ご自身のページ内に、シームレスにCOLROWウェブパーツを設置できます。

また、ご自身の希望する色やフォントを、CSSで記述することも可能です。

2

iFrame

ご自身のページ内に、インラインフレームとして、別のCOLROWをウェブパーツのページを表示させます。

3

HTML

ウェブサイト不要で、ウェブパーツを参照できます。このコードをシェアすることで、簡単に情報を共有できます。

COLROWアカウントの作成とサンプルのCOLROWウェブパーツの確認

まずは、COLROWアカウントの作成です。

※アカウント登録申請がまだの方は、こちらのページから登録申請をお願いいたします。

http://colrow.net/

アカウント登録申請時に送信されたメール内の認証コードをクリックし、

アカウント登録を完了させましょう。

利用するGoogleアカウントの選択を求められます。[この承認は30日間有効です]にチェックいただくことをおすすめします。

初回のみ、許可を求められます。

COLROW管理画面が開き、アカウント登録処理が始まります。

補足:アカウント作成時に行っていること

クレデンシャル(資格証明書)の取得

ご自身のGoogleスプレッドシートやGoogleドライブのデータを、COLROWウェブパーツおよびCOLROW APIが閲覧・編集してよいという、クレデンシャル(資格証明書)を取得・保存を行っています。

GoogleスプレッドシートやGoogleドライブ内のデータは、アクセス許可のある人のみが閲覧や編集ができます。

COLROWウェブパーツおよびCOLROW APIは、このクレデンシャルを利用することで、GoogleスプレッドシートおよびGoogleドライブの共有設定やGoogleアカウントのログイン情報を利用せずに、データにアクセスする方法を採用しています。

サンプルのCOLROW ウェブパーツの設置

リストとマップのサンプルを設置します。

また、対応するGoogleスプレッドシートを設置します。場所はGoogleドライブのマイドライブ内に[COLROW Bootstrap Folder]内です。

COLROW管理画面で、アカウント作成の処理が終わったら、ボタンを

クリックし、COLROW管理画面メニューページ(トップページ)に移動しましょう。

以下がCOLROW管理画面のトップページです。

上部の[ウェブパーツ]メニュー、もしくは、ウェブパーツ領域の[ウェブパーツのページヘ]

ボタンから、ウェブパーツを作成・管理する画面に移動します。

以下がウェブパーツ一覧画面です。

(1)ウェブパーツの新規作成画面に移動します。

(2)作成されたウェブパーツをウェブページとして別ウィンドウで開きます。

(3)ウェブパーツを複製します。
この際、ウェブパーツ内で利用しているスプレッドシートは複製されず、複製元に設定されているスプレッドシートが引き継がれます。必要な際は、スプレッドシートを変更します。

(4)ウェブパーツをウェブサイトやブログに設置するためのコードを取得する画面に移動します。

COLROWウェブパーツを簡単に解説

あらかじめ設置されているサンプル「COLROWサンプルリスト - 猫写真リスト」をコ

ピーして、設定内容と作成されるウェブパーツを確認してみます。

をクリックすると、ウェブパーツがコピーされます。

以下の画像に示した(1)〜(4)の順番で解説していきます。

(1)ウェブパーツをウェブページとして表示

をクリックすると、別ウィンドウでウェブパーツが全画面表示されます。

(2)基本設定

をクリックし、基本設定画面に移動します。

この画面では、ウェブパーツの名称の設定や、ウェブパーツで利用するスプレッドシート

およびワークシートを設定します。

(3)リスト設定

をクリックし、リスト設定画面に移動します。

この画面では、対応するスプレッドシートを参照しながらウェブパーツに表示するシート内

の列を設定します。リアルタイムにウェブパーツのプレビューにも反映されるので、直感的

にわかりやすくウェブパーツの作成が行えます。

(1)リストのテンプレートを選択します。以下の6つがあります。

(2)COLROWウェブーパーツの1ページ内表示する行数(データ数)を設定します。初期値は10です。

(3)ウェブパーツ内のデータ項目の前に表示する見出し名を設定します。入力しない場合、見出し名は現れません。

(4)スプレッドシートの1行目の列名を選択リスト内から選んで設定します。

※スプレッドシートの1行目は、必ず列名が入力されている必要があります。日本語でも問題ありません。

(5)表示するデータ項目の型を設定します。例えば、TEL型の場合、スマートフォンで閲覧する場合はタッチ可能と表示されタッチすると電話アプリが起動し自動的に発信します。

  • 見出し … 強調して表示されます。
  • テキスト … 文章を改行なしで表示します。
  • 改行ありテキスト … 文章を改行を有効にして表示します。
  • URL … クリック(タッチ)可能を表す表現で表示し、クリックされると別タブで対象のページを表示します。
  • メールアドレス … クリック(タッチ)可能を表す表現で表示し、クリックされるとメールアプリが起動します。
  • 電話番号 … クリック(タッチ)可能を表す表現で表示し、クリックされると電話アプリが起動し自動的に発信します。
  • 写真 … 写真を表示します。写真はネット上で公開されている必要があります。

(6)表示するデータ項目を追加します。

(7)作成されるウェブパーツのプレビューです。この画面での設定がリアルタイムに反映されます。

(8)別ウィンドウでスプレッドシートを表示します。

(9)対応するスプレッドシートです。この画面内からでもスプレッドシートのデータを編集可能です。

(4)コード取得

をクリックすると、以下の画面に移動します。

COLROWウェブパーツで作成されるコードは、以下の3つの種類となります。

#

種類

説明

1

Embed

ご自身のページ内に、シームレスにCOLROWウェブパーツを設置できます。

また、ご自身の希望する色やフォントを、CSSで記述することも可能です。

2

iFrame

ご自身のページ内に、インラインフレームとして、別のCOLROWをウェブパーツのページを表示させます。

3

HTML

ウェブサイト不要で、ウェブパーツを参照できます。このコードをシェアすることで、簡単に情報を共有できます。

をクリックすると、クリップボードにコードがコピーされますので、[ctrl]+c

([command+c])で、設置場所に貼り付けます。

クイックスタート

COLROW管理画面にサンプルとしてあらかじめ設定されているCOLROWウェブパーツと

Googleスプレッドシートをそれぞれ複製して、ご自身のデータを利用するCOLROW

ウェブパーツを作成してみましょう。

COLROWウェブパーツ - リスト

スプレッドシート「うさぎ品種リスト」の作成

それでは、実際にウェブパーツを作ってみましょう。題材として「うさぎリスト - うさぎ

の品種を解説するリスト」を作ってみます。

(1)スプレッドシートの用意

COLROWアカウントを作成した際に、[COLROW Bootstrap Folder]が作成され、その中

にサンプルのCOLROWウェブパーツで利用しているスプレッドシートが作成されていま

す。

https://drive.google.com/drive/my-drive

いちからスプレッドシートを用意することでももちろんよいですが、簡単に作るため

[COLROWサンプルシート - リスト]をコピーして、作業を行います。

以下のように[COLROWサンプルシート - リスト]の上にカーソルを合わせ、マウスの

右クリックなどで、メニューを表示し、[コピーを作成]をクリックします。

コピーされたシートを開きます。

スプレッドシートのタイトルを変更しましょう。画面左上のタイトルをクリックして、

変更します。

補足:関数の解説

このサンプルのスプレッドシートで利用していた「関数」を解説します。

セル A2 に設定されている関数

セル A2を選択すると、以下の関数がセットされていることが確認できます。

スプレッドシートの行番号から、自動的に猫写真の番号をセットしています。

スプレッドシートの行番号 - 1 として、1から猫写真の番号が始まるようにしています。

row(): スプレッドシートの行番号を取得します。

セル E2 に設定されている関数

セル E2を選択すると、以下の関数がセットされていることが確認できます。

自動でねこの写真のファイル名を生成しています。

2つの関数が使われています。

&: 文字列を結合します。文字列は ” で囲んで設定します。

text(): 指定したセルの文字を、指定したフォーマットで整型します。ここでは、A2セルの数字を必ず2桁で表示(1 の場合 01 に)するようにしています。

 

セル E2 にセットされているインターネット上に公開されている写真ファイルのURLを元に写真を表示指定ます。

image():インターネット上に公開されている写真ファイルを画像として表示します。

Googleスプレッドシートの関数は、EXCELと同じ記述ルールで使えるもの、Google独自のものなど豊富です。スプレッドシートメニューの[ヘルプ]>[関数リスト]から関数を確認し、用途に応じてたものを使ってみましょう。

スプレッドシートの修正を続けます。

データ項目(列)は、以下の8つとし、それぞれの列の見出し名を修正しましょう。

※この見出しを、後ほどの設定で利用します。

A1

B1

C1

D1

E1

F1

G1

H1

番号

うさぎの品種

説明

原産国

体重

写真URL

写真

備考

セルを上書き

セルを上書き

セルを上書き

セルを上書き

列を追加

セルを上書き

セルを上書き

そのまま

列の追加は、追加したいセル(もしくは列)を選択し、スプレッドシートの

メニュー[挿入]>[右に1列]を選択します。

以下のようなシートに修正しました。

うさぎは3種類(3行)を登録してみます。

まず、インターネット上に公開されている写真を用意しましょう。

ブログやウェブサイトをお持ちであれば、そちらに写真をアップロードして、写真のURLを

設定します。

ここでは、COLROWウェブサイトにサンプル画像を用意しました。以下の3つを使って

みましょう。

http://colrow.net/images/sample/rabbit01.jpg

http://colrow.net/images/sample/rabbit02.jpg

http://colrow.net/images/sample/rabbit03.jpg

次に、作業をシンプルにするために、スプレッドシートの行番号3〜12まで

(3行目〜12行目)をいったん削除し、2行だけにしてみましょう。

セル A3 を選択した状態で、Shiftキーを押しながら↓ボタンで最後(12行目)までの

セルが選択されるようにします。

この状態で、スプレッドシートのメニュー[編集]>[行3-12を削除]を選択します。

まず、うさぎのひとつの品種のデータを作成します。

写真URLの関数内の cat を rabbit に変更します。

以下のようにひとつめのデータが完成しました。

つづいて、この行をコピーして、2つめ、3つめの品種のデータを作成します。

まず、セル A2を選択した状態で、一番下に 2 行 追加 します。

2行目の行番号のエリア(赤枠で示した箇所)をクリックし行が選択された状態で、

スプレッドシートのメニュー[編集]>[コピー]をクリックします。

Shiftキーを押しながら、3、4行目の行番号のエリア(赤枠で示した箇所)をそれぞれ

クリックし、2つの行が選択された状態で、スプレッドシートのメニュー

[編集]>[貼り付け]をクリックします。

関数がセットされている写真URLのセルでは、自動的に適切な写真のURLがセットされて

います。

2,3行目の文章も修正して、完成です。

こちらから、うさぎリストを閲覧できます。

https://docs.google.com/spreadsheets/d/1Jn0pohTGfYW-2o_ellM1F7rIXotPr9xpFMIxCzODjuM/edit?usp=sharing

COLROWウェブパーツの設定

すでにコピーしているウェブパーツの設定修正し、ウェブサイトやブログに設置する

コードを取得しましょう。

ウェブパーツ一覧の画面に戻ります。

https://app.colrow.net/widgets

(1)基本設定

まず、以下の赤枠で示したウェブパーツの「名称」、「説明」を変更しましょう。

続いて、このウェブパーツで利用する先ほど作成したスプレッドシートのKeyを設定

します。

ボタンをクリックします。

※初回のみ許可を求める画面が現れますので、許可してください。

ご自身のGoogleドライブのフォルダの一覧が表示されます。

[COLROW Bootstrap Folder]>[うさぎリスト]を選択してください。

スプレッドシートのKeyがセットされると、ワークシートを選択できます。

先ほど作成したワークシートを選んでください。

をクリックします。

(1)テンプレートを[サムネイルのグリッド表示 (3列)]にしてみます。

(2)〜(4)スプレッドシートの列名とそのデータ型をセットしていきます。

(5)名前(見出し名)に体重と入れてみます。

(6)まず、(7)をクリックし、データ項目を追加します。そして、「名前」、「列」、「型」をセットします。

(8)このプレビューで、設置した内容がどのように表示されるかを確認しながら設定作業を

行えます。尚、このプレビューに表示されるのはシートの1番目のデータ(行)となります。

続いて、右上のをクリックし、作成されたコードを取得する画面に移動します。

Page

まずは、もっとも確認が簡単な[Page]を選択します。そしてをクリックして、コードをクリップボードにコピーします。

別のブラウザを開いて、URL入力エリアにコードをペーストして再読み込みしてみましょう。

3つの説明が表示されます。

Embed

次はブログに、Embedのコードを設置してみます。

ブログ投稿画面をHTMLモードにして、コードを貼り付けます。

保存して公開すると、以下のように表示されます。

※CSSを設定することで、自由な色表現や箇条書きの表現ができます。

iFrame

iFrameの場合、背景色の指定や高さの指定などが、簡単にできます。

ブログに設置してみます。

COLROWウェブパーツ - マップ

横浜市西区で公開されている「地域施設・文化施設・スポーツ施設」のデータを利用して、

Googleマップ上に施設を表現してみましょう。

その際、施設のカテゴリごとにマーカーの色を変えてみましょう。

スプレッドシートの準備

以下のページにアクセスし、該当するCSVファイルをダウンロードします。

http://www.city.yokohama.lg.jp/nishi/opendata/

Googleドライブの[COLROW Bootstrap Folder]に、ダウンロードしたCSVファイルをアップロードします。

アップロードしたCSVファイルをクリックします。

画面上部の[開く]をクリックします。

新規Googleスプレッドシートに表示されます。

セル L1, M1, N1 に、以下の列見出し名を入力してみましょう。

まず、Goolgeマップに施設を表示するために必要な緯度経度を、住所をもとに自動的に設定します。

COLROW管理画面を開き、[ユーティリティ]>[住所を緯度経度に変換]をクリックします。

[シートを直接指定]を選び、Googleドライブの[COLROW Bootstrap Folder]から

対象のスプレッドシートを選択します。

住所、緯度、経度に対応する列の見出し名を選択リストから選んでセットし、

ボタンをクリックします。

スプレッドシートの緯度、経度の列に値がセットされます。

次に、セル N2には、マーカーの色を自動的に設定するための関数を入力します。

以下の数式を入力しましょう。

=IF(D2>10000,"#ff4500",if(D2<1000,"#ffa07a","#ff6347"))

セルN2をコピーして、N列の他の行のセルにすべてコピーします。

マーカーの色は、以下の条件で自動的にセットされます。

公園の広さ

マーカーの色

10,000より大きい

10,000以下、1,000以上

1,000より小さい

COLROWウェブパーツ - マップ の設定

詳細なオペレーションは、COLROWウェブパーツ - リストで説明しているので、

ここでは簡略化して説明します。

(1)基本設定

以下のように入力します。

(2)マップ設定 ---

(3)コード取得

Embed と iFrameのコードをブログに設置してみます。

Embed

ブログに、2つのコードを設置し、保存して公開します。

ブログの投稿にマップが表示されます。

ブログにコードを貼り付け、公開すると、マップが表示されます。

COLROW PHP SDK

COLROW PHP SDK の概要

COLROW PHP SDK は、PHP で作成されたウェブサイトやサービスなどで、

COLROW API(後述)を利用できるようにするツールです。

チュートリアル

COLROW PHP SDK を使った簡単なウェブサイトを作成する手順を、チュートリアル形式

で解説します。作成するのはうさぎの飼い主を対象とした「うさぎ自慢」の応募ページと

閲覧ページになります。応募内容をスプレッドシートに記録し、写真を Google ドライブの

フォルダにアップロードします。

COLROW API利用対象サイトの登録

インストール

まずは COLROW PHP SDK をインストールしてください。具体的なインストール方法に

ついては、Github の colrow-php-sdk リポジトリ のページをご参照ください。

記録先とアップロード先の準備

応募ページから送信された内容を記録するための、Google スプレッドシートを作成

します。1行目に見出しをセットしただけのシンプルなシートです。見出しは左から

「うさぎの名前」「連絡先」「googleドライブに保存された画像のurl」「公開フラグ」

としてください。この名前は後述するコードの中で使用しますので、正確に入力して

ください。

また、写真のアップロード先として、Google ドライブのフォルダも作成してください。

応募ページの作成

応募ページを作成します。このページに関しては PHP を使用しませんので、HTML

 ファイルで構いません。form.html という名前で以下のファイルを作成してください。

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <title>うさぎ自慢 応募フォーム</title>

  </head>

  <body>

    <h1>うさぎ自慢 応募フォーム</h1>

    <form method="post" action="entry.php" enctype="multipart/form-data">

      <p>うさぎの名前:<input type="text" name="name"></p>

      <p>連絡先メールアドレス:<input type="text" name="email"></p>

      <p>うさぎの写真:<input type="file" name="photo"></p>

      <p><input type="submit" value="応募する"></p>

    </form>

  </body>

</html>

form タグの action 属性に指定されている entry.php は、この後に作成するフォーム

データを受け取るためのページです。今回はフォームデータにファイルが含まれますので、

enctype 属性に multipart/form-data を指定しなくてはなりません。

実際のページは以下となります。

フォームデータを処理するページの作成

form.html から送信されたフォームデータを受け取り、メインの処理を行なうページを

作成します。こちらは以下の内容の PHP ファイルになります。ファイル名は先ほど

指定したとおり、entry.php としてください。

<?php

  require 'vendor/autoload.php';

  use Colrow\ColrowDrive;

  use Colrow\ColrowClient;

  use Colrow\ColrowObject;

  $file = $_FILES['photo'];

  $fp = fopen($file['tmp_name'], 'r');

  $file_body = base64_encode(fread($fp, filesize($file['tmp_name'])));

  fclose($fp);

  $drive_response = ColrowDrive::upload(

    'your_account',

    $file['name'],

    $file['type'],

    $file_body,

    'parent_id'

  );

  $image_url = $drive_response['result']['image_url'];

  ColrowClient::initialize(

    'your_account',

    'spreadsheet_key',

    'worksheet_title'

  );

  $row = new ColrowObject();

  $row->set('うさぎの名前', $_POST['name']);

  $row->set('連絡先', $_POST['email']);

  $row->set('googleドライブに保存された画像のurl', $image_url);

  $row->save();

?>

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <title>うさぎ自慢 応募フォーム</title>

  </head>

  <body>

    <h1>うさぎ自慢 応募フォーム</h1>

    <p>ご応募を受け付けました。</p>

    <p><img src="<?php echo $image_url; ?>"></a></p>

  </body>

</html>

コード中で赤い斜体になっている部分は、環境によって異なります。以下、パートごとに

順を追って解説します。

まずは冒頭。COLROW PHP SDK の使用を宣言する部分です。

require 'vendor/autoload.php';

use Colrow\ColrowDrive;

use Colrow\ColrowClient;

use Colrow\ColrowObject;

Composer を使用していますので、オートローダ(vendor/autoload.php)を require

するだけで外部ファイルの読み込みが完了します。続いて use 文で使用するクラスを

宣言しますが、今回は ColrowDrive、ColrowClient、ColrowObject の3つを使います。

$file = $_FILES['photo'];

$fp = fopen($file['tmp_name'], 'r');

$file_body = base64_encode(fread($fp, filesize($file['tmp_name'])));

fclose($fp);

ファイルの情報は $_FILES[] という配列に格納されています。form.html のフォーム部分

にある <input type="file" name="photo"> の name 属性 で指定した「photo」という

キーでアップロードされた写真の情報を参照します。写真のファイルの実体は専用の場所に

一時保存されていますので、tmp_name というキーでそのパスを参照。fopen 関数で読み

込みます。詳しくは割愛しますが、読み込んだファイルの生のデータを BASE64

エンコードしたものが、Google ドライブにアップロードするためのデータになります。

$drive_response = ColrowDrive::upload(

  'your_account',

  $file['name'],

  $file['type'],

  $file_body,

  'parent_id'

);

$image_url = $drive_response['result']['image_url'];

ColrowDrive クラスの upload メソッドを使って、写真のデータを Google ドライブに

アップロードしています。your_account の部分は COLROW に登録した Google

アカウントに、parent_id の部分はアップロード先として事前に準備した Google

ドライブのフォルダの ID に置き換えてください。ID は、Google ドライブの該当する

フォルダのページの URL の 末尾にあります。

upload メソッドの引数は Google アカウント、ファイル名、ファイルの MIME タイプ、

BASE64 エンコードされたバイトデータ、Google ドライブのフォルダ ID の順になります。

いずれも省略はできません。

upload メソッドの戻り値は、アップロード済みのファイルの情報を含むレスポンスに

なります。ファイルの URL を後ほど使用しますので、変数に代入しています。

続いては、Google スプレッドシートへ記録する処理になります。

ColrowClient::initialize(

  'your_account',

  'spreadsheet_key',

  'worksheet_title'

);

スプレッドシートを操作するため、ColrowClient クラスの initialize メソッドを呼んで

初期化します。先ほど同様、your_account の部分は COLROW に登録した Google

アカウントに置き換えてください。また、spreadsheet_key は Google スプレッドシート

に固有に割り当てられたキーで、そのシートのページの URL に含まれています。

worksheet_title はワークシートの名前です。シートのページ下のタブに表示されています。

新規作成して変更していない場合、「シート1」という名前になっているはずです。

$row = new ColrowObject();

$row->set('うさぎの名前', $_POST['name']);

$row->set('連絡先', $_POST['email']);

$row->set('googleドライブに保存された画像のurl', $image_url);

$row->save();

シートに新しく行を作成(挿入)するには、行のオブジェクトを作成し、set メソッドに

よって適宜値をセットした後に save メソッドを呼び出します。set メソッドの第1引数は

列のラベル名、第2引数が値になります。

送信が正常に完了すると、以下のようなページが表示されます。アップロード済みの

ファイルの URL をページ内の img タグで指定しているため、写真も表示されています。

スプレッドシートにも新しい行が追加されているはずです。

閲覧ページの作成

最後に、スプレッドシートに記録された内容をリスト表示するページを作成します。

こちらは以下の内容の PHP ファイルになります。ファイル名は list.php としましょう。

<?php

  require 'vendor/autoload.php';

  use Colrow\ColrowClient;

  use Colrow\ColrowQuery;

  ColrowClient::initialize(

    'your_account',

    'spreadsheet_key',

    'worksheet_title'

  );

  $query = new ColrowQuery();

  $items = $query->find();

?>

<!DOCTYPE html>

<html lang="ja">

  <head>

    <meta charset="utf-8">

    <title>うさぎ自慢 応募作品一覧</title>

  </head>

  <body>

    <h1>うさぎ自慢 応募作品一覧</h1>

    <table>

      <tbody>

      <?php foreach ($items as $item): ?>

        <tr>

          <td><img src="<?php echo $item->get('googleドライブに保存された画像のurl'); ?>" style="width: 200px; height: auto;"></td>

          <td><strong><?php echo $item->get('うさぎの名前'); ?></strong> by <?php echo $item->get('連絡先'); ?></td>

        </tr>

      <?php endforeach; ?>

      </tbody>

    </table>

  </body>

</html>

コードをなるべくシンプルにするため、エラー処理が一切含まれていません。そのため、

まだ応募がない(スプレッドシートが最初のままの)状態でこのページを開くと、エラーに

なってしまいますのでご注意を。こちらもパートごとに順を追って解説します。

require 'vendor/autoload.php';

use Colrow\ColrowClient;

use Colrow\ColrowQuery;

require 文は entry.php と同じですが、use 文が異なっています。

今回は、ColrowClient と ColrowQuery クラスを使用します。

ColrowClient::initialize(

  'your_account',

  'spreadsheet_key',

  'worksheet_title'

);

$query = new ColrowQuery();

$items = $query->find();

ColrowClient の初期化部分は entry.php と同じですので、解説は割愛します。

赤い斜体になっている部分も適宜書き換えてください。

スプレッドシートに記録されたデータを取得するには、ColrowQuery クラスを使用します。

このクラスの本来の役割は、取得の際に条件(クエリ)を指定して絞り込むことですが、

逆に条件をまったく指定しないことで全件取得できます。

ColrowQuery クラスのインスタンスを作成し、find メソッドを実行すると、シートの

各行の内容が格納されたオブジェクトの配列を戻り値として返します。このオブジェクトを

便宜上、COLROW オブジェクトと呼ぶことにします。COLROW オブジェクトの中身は

get メソッドによって参照できます。HTML パートの以下の部分で、get メソッドを

使って各行の値を参照し、表示しています。

<?php foreach ($items as $item): ?>

  <tr>

    <td><img src="<?php echo $item->get('googleドライブに保存された画像のurl'); ?>" style="width: 200px; height: auto;"></td>

    <td><strong><?php echo $item->get('うさぎの名前'); ?></strong> by <?php echo $item->get('連絡先'); ?></td>

  </tr>

<?php endforeach; ?>

以下の表示になります。

ほんの少しブラッシュアップ

今回作成した list.php は、シートの内容を全件取得するためのコードになっていますが、

たとえば応募された内容を事前に精査して許可したものだけを公開したい、

といったニーズもあると思います。

スプレッドシートの準備の際に指定しておいた「公開フラグ」の列を直接編集することで、

そのようなニーズにも容易に応えることができます。

仮に、公開フラグの列に何か値(たとえば「1」でも何でも)が入っていれば公開する、

という設定にしてみましょう。以下は、list.php のコードにあった、ColrowQuery を

使った取得部分に条件指定を書き加えてみたものです。

$query = new ColrowQuery();

$query->exists('公開フラグ');

$items = $query->find();

exists というメソッドにより「公開フラグ」の列に「何か値が入っている」という条件が指定され、閲覧ページに限定公開の機能が追加できました。

ColrowQuery クラスには他にも様々なメソッドが用意されています。興味がある方はぜひ Github の colrow-php-sdk リポジトリ のページをご参照ください。