Pleasanter Tips : PleasanterのデータをGoogle AppSheetで表示する

Pleasanterのデータをスマートフォンで見やすく表示したいと思いますね？
今回は、Pleasanterで在庫情報を作成してそのデータをGoogle AppSheetで表示する事をやってみます。

事前準備

Pleasanterの環境を準備します。
今回はPleasanterのデモ環境を使います。デモ環境を使用する場合は下記から申し込んでください。
https://pleasanter.org/demo

テーブルとデータを作成する

在庫情報を作成します。いちから作ると大変なので今回はテンプレートを使用します。

店舗・販売タブから在庫情報を選択し、テーブルを作成します。
テーブルが作成できたら適当にデータを入力してください。

APIKeyを作成する。

ユーザー名をクリックしAPI設定を行います。

APYキーは後で使用するのでテキストエディタなどにペーストしておいてください。

Google Sheet を準備する

Google Sheet を作成します。

表名を入力します。今回は在庫情報としました。
1行目にタイトルを入力します。今回はAからHまで使用します。

Apps Scriptを作成する

拡張機能からApps Scriptを選択して新しいプロジェクトを作成します。

新しいプロジェクトが作成されると初めの関数が作成されるので削除してください。
その後に下記のスクリプトを埋め込みます。

function JSONDataToSpreadsheet() {

  // APIからデータを取得するためのURL
  var url = "https://demo.pleasanter.org/api/items/(Pleasanterで作成した在庫情報のIDをセットしてください)/get";
  var apikey = "(APIKeyをセットしてください)";
  var body = {
      "ApiVersion": 1.0,
      "ApiKey": apikey,
      "View":{
        "ColumnSorterHash": {
          "ResultId": "asc"
        },
        "GridColumns": ["ResultId","Title","Body","ClassA","NumA","DateA","Owner","Updator","UpdatedTime"],
        "ApiDataType": "KeyValues",
        "ApiColumnValueDisplayType": "DisplayValue",
      }
  }
  var options = {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(body)
  }

  // URLからJSONデータを取得する
  var response = UrlFetchApp.fetch(url,options);
  var result = JSON.parse(response.getContentText());
  var data = result.Response.Data;

  //　データ範囲をクリア
  var sheet = SpreadsheetApp.getActiveSheet()
  var lastRow,lastCol
  lastRow = sheet.getLastRow()
  lastCol = sheet.getLastColumn()
  if( lastRow > 1) {
    sheet.getRange(2, 1, lastRow-1, lastCol).clearContent()
  }

  // スプレッドシートに書き込む
  var row = 2;
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    sheet.getRange(row, 1).setValue(item.ID);
    sheet.getRange(row, 2).setValue(item.品名);
    sheet.getRange(row, 3).setValue(item.商品種別);
    sheet.getRange(row, 4).setValue(item.在庫数);
    sheet.getRange(row, 5).setValue(item.確認日);
    sheet.getRange(row, 6).setValue(item.確認者);
    sheet.getRange(row, 7).setValue(item.備考);
    sheet.getRange(row, 8).setValue(item.更新日時);
    row++;
  }
}

スクリプトを実行しデータを取得する

スクリプトを保存し実行するとSheetにデータが作成されます。

AppSheetアプリを作成する

拡張機能からAppSheetを選択し、アプリを作成を選択します。

自動的にアプリが作成されました。

最後に

今回はWebAPIを使用してデータを取り込みAppSheetで表示しました。この段階では修正などできますが、Pleasanterには反映されません。また、Pleasanterのデータを更新後に再度Apps Scriptを実行する仕組みが必要になります。
とりあえず簡単にスマホで見やすいアプリが作れたので、今回はこれで終了にします。