東中野とかで働くCTOブログ(意味深

ヘルニアン・ラプソディ

排尿・排便サマリー(日次)ガジェットを作った話

前回書いたエントリーが結構評判でございまして、調子に乗っております。

排尿・排便カウンターを作った話 - ときさんブログ

せっかくですので続編コンテンツとしてこれらのデータを日次集計してグラフにしましょうよ。というお話がございました。

f:id:akulog:20140515233156p:plain

イメージとしてはこんな感じでしょうか?

糞尿垂れ流しポータル

よーし、いっちょやったるかー!!

ということでまた書いてみます。

Googleサイトを作ろう

せっかくなんでサイトを作ろう。

Google サイト

Googleサイトとは(かなり制限の多い/自由度の少ない)ASP型のCMS(Contents Management System)です。個人的にはLAMPWordpress建てた方が幾分か運用も楽なのですが、Googleのアレなんでこれでやります。

Googleサイトを作成してください。

f:id:akulog:20140515233943p:plain

うほっ、いい名前っ

f:id:akulog:20140515234212p:plain

これでサイトの完成です。

f:id:akulog:20140515234413p:plain

ガジェット作成しよう

それではこの「糞尿垂れ流しポータル」にガジェットを作っていきます。またしてもGoogle Apps Scriptの出番です。

設定→サイトを管理

f:id:akulog:20140515234706p:plain

「Appsスクリプト」をクリックしますん。

f:id:akulog:20140516000333p:plain

「新しいスクリプトを追加」しましょう。

f:id:akulog:20140516000341p:plain

あっ…

f:id:akulog:20140516000356p:plain

「空のプロジェクト」をクリックで開いちゃうね…

そしてお約束ですがおもむろに、そしてがむしゃらに以下のコードをコピペしてください。

※ 各自作成済みのスプレッドシートのURLは個別に設定してください→url

function doGet(e){
  
  var thisData = getSummaryData();

  // 図形描画処理
  var data = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, '日')
      .addColumn(Charts.ColumnType.NUMBER, '排尿')
      .addColumn(Charts.ColumnType.NUMBER, '排便')
      .addColumn(Charts.ColumnType.NUMBER, '導尿')
      .addRow(thisData[6])
      .addRow(thisData[5])
      .addRow(thisData[4])
      .addRow(thisData[3])
      .addRow(thisData[2])
      .addRow(thisData[1])
      .addRow(thisData[0])
      .build();

  var chart = Charts.newAreaChart()
      .setDataTable(data)
      .setStacked()
      .setRange(0, 20)
      .setTitle('排尿・排便・導尿集計(日次)')
      .build();

  // UiApp
  var app = UiApp.createApplication().setStyleAttribute("height", "auto").setStyleAttribute("width", "auto").setStyleAttribute("text-align", "right");
  app.add(chart);
    
  return app;
}

function getSummaryData(){
  // 排尿カウンター(回答)のURL【要設定】
  var url = "https://docs.google.com/a/[youdomain.com]/spreadsheets/d/***********";

  var sheet = SpreadsheetApp.openByUrl(url);
  var rows = sheet.getActiveSheet().getDataRange();
  var numRows = rows.getNumRows();
  var values = rows.getValues();

  var arrayOut = new Array();
  var innerFrom = new Date();
  var innerTo = new Date();
  
  // 過去7日分を取得
  for (i = 0; i <= 7; i++){    
    innerFrom.setDate(innerFrom.getDate()-1);
    innerFrom.setHours(00,00,00,00);
    innerTo.setDate(innerTo.getDate()-1);
    innerTo.setHours(23,59,59,59);

    var urination = 0;       // 排尿回数
    var defecation = 0;      // 排便回数
    var catheterization = 0; // 導尿回数

    var innerArray = new Array();
    
    // 排泄区分でカウントアップ(集計)
    for (j = 1; j <= values.length; j++){
      if((typeof values[j] !== "undefined") && (values[j][0] >= innerFrom) && (values[j][0] <= innerTo)){
        switch(values[j][1]){
          case "排尿": urination++;break;
          case "排便": defecation++;break;
          case "導尿": catheterization++;break;
          default:break;
        }
      }
    }
    var MM = innerFrom.getMonth()+1;
    var DD = innerFrom.getDate();
    var day = "";
    switch(innerFrom.getDay()){
      case 0: day="(日)";break;
      case 1: day="(月)";break;
      case 2: day="(火)";break;
      case 3: day="(水)";break;
      case 4: day="(木)";break;
      case 5: day="(金)";break;
      case 6: day="(土)";break;
      default:break;
    }
    var MMDD = MM.toString() + "/" + DD.toString() + day;
    innerArray = [MMDD, urination, defecation, catheterization];
    arrayOut.push(innerArray);
  }
  return arrayOut;
  
}

そしておもむろにCmd + S(Windowsの皆さんは割合)して適当に名前を付けて保存してください。

f:id:akulog:20140516001518p:plain

このガジェットも初回だけ承認が必要ですので承認しちゃいましょう

f:id:akulog:20140516001926p:plain

「続行」をクリックしちゃう。

f:id:akulog:20140516002204p:plain

「承認する」をクリックしちゃいます。はい。

f:id:akulog:20140516002352p:plain

今回はウェブアプリ(ガジェット)なので…

ウェブアプリケーションとして導入します。

f:id:akulog:20140516003021p:plain

「新しいバージョンを保存」をして、適当に設定(とりあえずキャプチャ通りな感じで)

f:id:akulog:20140516003931p:plain

「OK」をクリックしちゃえよ。恥ずかしがらずに。

f:id:akulog:20140516003958p:plain

…と、ここまで来ればガジェットの作成とか準備は終わりです。

ガジェットをページに埋め込もう

先ほど作った「糞尿垂れ流しポータル」に戻りましょう。

※ 今回はトップページに埋め込む例です。 ページを編集します。

f:id:akulog:20140516004631p:plain

挿入→Appsスクリプト

f:id:akulog:20140516005055p:plain

作成した「糞尿垂れ流しサマリー(日次)」を選択→選択

f:id:akulog:20140516005336p:plain

ガジェットのプロパティを適当に設定する。

f:id:akulog:20140516005715p:plain

挿入したガジェットのオブジェクトがこれ。

f:id:akulog:20140516005934p:plain

最後にページを保存しましょう。そうしましょう。

f:id:akulog:20140516010043p:plain

出来上がり!

f:id:akulog:20140516010252p:plain

それでは皆さんも快適な糞尿垂れ流しライフをお楽しみください!!

Google Appsでつくる仕事便利ツール ?Google Apps Scriptで実践構築?

Google Appsでつくる仕事便利ツール ?Google Apps Scriptで実践構築?

© 2013 ときさんブログ all rights reserved.