Help us understand the problem. What is going on with this article?

PWA爆速作成:GlideでPWAの作成②(DMM-Ranking)

はじめに

Glide Appsで爆速でPWA(Progressive Web Apps)を作成することができます。簡単でとてもすごいです。
【前の投稿参考】PWA爆速作成:GlideでPWAの作成①(日本の世界遺産、法則のまとめ)

やりたいこと

  • 前回は、Googleスプレッドシートにデータをいれて、そのデータをPWAとしてスマホなどでみる、ということだけでした。
  • なので、スプレッドシートを更新しないとデータに変化はありません。ということで、「Google Script」「定期処理」を使用して、スプレッドシートのデータが変わるようにしたい、と思いました。
  • 以前の投稿(【Line Bot 】ムフフなランキング 教えてDMM総合Rannking)で、LineBot返信用のDMM改めFANZAの「自分で勝手に総合ランキング」を作成したので、それを活用しようと思いました。

作成したアプリ

https://dmmranking.glideapp.io
(下図のQRコードでアクセス可能)
0001.png

用意したもの

  • GoogleスプレッドシートとScript
  • GSから呼び出す用のPHP APIプログラム(自分で独自でつくったDMM総合ランキングをJSONで返す) 0002.png

手順

  • PHPプログラムをたたいて、Json形式でデータを取得する
  • GSで取得できたデータをスプレッドシートに書き出す(定期処理にて1日1回更新)
  • glideでスプレッドシートと連携してアプリの作成
googlescript.js
//スプレッドシートとシートの設定
var spUrl = "https://docs.google.com/spreadsheets/d/スプレッドシートのID/";
var spreadsheet = SpreadsheetApp.openByUrl(spUrl);
var sheet = spreadsheet.getSheetByName("シート1");

//URLの設定
var url = '下記のPHPプログラムを指定する';

//出力する値を入れるための配列
var dmmData = [];

//処理
function myFunction() {

  //jsonデータの取得
  var json = UrlFetchApp.fetch(url).getContentText();
  //jsonデータのparse
  var jsonData = JSON.parse(json);
  //件数を取得する
  var jsonLength = Object.keys(jsonData).length;
  //データ取れなければ終了  
  if(jsonLength < 1){
    return;
  }
  //出力したい情報を配列に入れていく
  for (var i=0; i < jsonLength; i++){
    dmmData.push([jsonData[i].rank,
                  jsonData[i].point,
                  jsonData[i].name,
                  jsonData[i].imgUrl,
                  jsonData[i].listUrl,
                  jsonData[i].newUrl,
                  jsonData[i].bdpoint,
                  jsonData[i].createdate
                 ]);
  } 

  //書き出し位置の設定
  var rows = dmmData.length;
  var cols = dmmData[0].length;
  //スプレッドシートの値をclearしてから書き込む
  sheet.getRange(2,1,300,300).clearContent();
  sheet.getRange(2,1,rows,cols).setValues(dmmData);
}
api.php
<?php
  //ヘッダー情報の設定
  header("Content-Type: application/json; charset=utf-8");
  //配列宣言
  $data = array();

  $host = "ホスト情報";
  $dbname = "DB名称";
  $user = "ユーザID";
  $pass = "パスワード";

  // DB接続情報設定
  $dbh = new PDO('mysql:host=' . $host . 'dbname=' . $dbname . 'charset=utf8', $user, $pass);
  //SQLの準備
  $sql = "select rank, point, name, imgUrl, listUrl, newUrl, bdpoint, createdate from dmm_makeranks";
  //データベースの接続
  $sth = $dbh -> prepare($sql);
  $sth -> execute();
  //データを取得する
  $data = $sth -> fetchAll(PDO::FETCH_ASSOC);
  //jsonオブジェクト化
  echo json_encode($data);
?>

0003.png

まとめ

  • Google Script(GS)定期実行を組み合わせ、簡単なプログラムで、一定間隔でデータに変化をいれることができました。
  • Glideは、Pulic with email、Password、Email Whitelistといった認証も持っているので、アイデア次第で、ツールなど業務でも使用することが可能と思います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away