2
0

More than 1 year has passed since last update.

Google SpreadSheetを簡易CMSとして使ってみた

Last updated at Posted at 2022-02-04

背景

WEB制作に関して、CMS化するほどでもないけど、サイトの外部で簡易データベース的な管理をしたいという要望があったため、Google SpreadSheetを簡易データベースとして使用するコードを書きました。

注意点

  • SEOを考えると、CMS化するなりして頑張ってサイト更新した方がいいかもしれないです。
  • Google Apiを使用しますが、これに更新が走ると動かなくなることがあります。定期的にチェックしましょう。

手順

Google SpreadSheetをJSONで取得する

こちらの記事を参考に。APIキーなどを発行します。
https://macoblog.com/google-spreadsheet-json/

スプレッドシートのデータの形は、1行目にデータの項目名、2行目以降に実データが入っていると仮定します。
ここではこんなデータということにしましょう。
これをHTMLに出力します。
スクリーンショット 2022-02-04 22.22.09.png

PHPでJSONを呼び出してHTMLに出力する

先ほどの手順で取得したURLを使います。

index.php
<table>
<?php
    //スプレッドシートIDの指定と必要なJSONデータの取得
    $data = "https://sheets.googleapis.com/v4/spreadsheets/{スプレッドシートID}/values/{シート名}?key={APIキー}";

    // 取得したjsonデータをデコード
    $json = file_get_contents($data);
    $json_decode = json_decode($json);

    $posts = $json_decode->values;

    //JSONデータを配列に格納
    $name = [];
    $hobby = [];
    $url = [];

    foreach ($posts as $post) {
     $name[] = $post[0];
     $hobby[] = $post[1];
     $url[] = $post[2];
   }

   //格納したデータをHTMLに出力する
   for ($i=0; $i<count($name); $i++) { //配列の数だけ繰り返す
    if($i == 0){ //1個目のデータはテーブルのヘッドにしたいので処理を変える
   echo '<thead><tr><th>'.$name[i].'</th><th>'.$hobby[i].'</th><th>'.$url[i].'</th></tr></thead>';
     echo '<tbody>';
   }else{ //2個目以降のデータを出力
   echo '<tr>';
     echo '<td>'.$name[i].</td>;
     echo '<td>'.$hobby[i].</td>;
     echo '<td><a href="'.$url[i].'" target="_blank">'.$url[i].'</a></td>';
     echo '</tr>';
  }
  }   
 ?>
 </tbody>
</table>

これで下記のようなHTMLが出力されるはずです。

出力されるHTML
<table>
 <thead>
  <tr>
  <td>名前</td>
   <td>趣味</td>
   <td>ブログ</td>
  </tr>
 </thead>
 <tbody>
 <tr>
  <td>田中ホゲ郎</td>
    <td>猫吸い</td>
    <td><a href="https://google.com" target="_blank">https://google.com</a></td>
  </tr>
 <tr>
  <td>鈴木FIZZ子</td>
    <td>読書</td>
    <td><a href="https://qiita.com" target="_blank">https://qiita.com</a></td>
  </tr>
  <tr>
  <td>山田フガ太郎</td>
    <td>映画鑑賞</td>
    <td><a href="https://yahoo.jp" target="_blank">https://yahoo.jp</a></td>
  </tr>
 </tbody>
</table>

おわりに

データの項目が膨大になる場合は、2次元配列を使ったりもうちょっとスマートな書き方がありそうですね。
とりあえず忘備録として最低限の方法を記載しました。
初めてのQiita postでした。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0