Google SheetとIFTTTを連動させる

google

執筆中

参考もと

https://ifttt-japan.club/knowledge/that/google-sheets

2018-08-13

GASの拡張をGoogle公式のCSSセットに合わせる

google

基本的には、Gsuiteさんで出してるCSSセットを読み込むだけ

    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

実際のところ

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  
  <div class="sidebar branding-below">
    <div class="block form-group">
      <label for="text">
        <b>テキストエリア</b></label>
      <textarea id="text" rows="2">
      </textarea>
    </div>
  
    <div class="block">
      <input type="checkbox" id="save-prefs">
      <label for="save-prefs">
        チェックボックス</label>
    </div>
    
      <p>List of things:</p>
    <ul id="data">
      <li>Loading...</li>
  </ul> 

  
   <div class="block">
      <button class="blue">ボタン</button>
      <button>ボタン２</button>
    </div>
  </div>
  
  <div class="sidebar bottom">
    <span class="gray">
      フッター</span>
  </div>
  </body>
</html>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getData();
});

function showThings(things) {
  var list = $('#data');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i][i] + '</li>');
  }
}
</script>

<style>
p {
  color: green;
}
      
.branding-below {
  bottom: 56px;
  top: 0;
}

</style>

f:id:shuzo_kino:20180813235450p:plain

CSS Package for Add-ons | Apps Script | Google Developers

2018-08-12

【イベントログ】コミックマーケット９４三日目にサークル参加してきました。

イベントログ

東5 フ－10a「第一起業速度」、設営完了です。新刊と称する事実上の総集編を頒布しています。また今回は特別に日本Android会秋葉原支部ロボット会様の委託本も扱ってます #C94 pic.twitter.com/ILbhFo09Oh
— 木野修造＠三日目フ－10a (@shuzo_kino) August 12, 2018

フ10a「第一起業速度」、委託本も含めて完売しました。今回の本を店番としておいてきます。当人は最後まで会場にいます。 pic.twitter.com/gWApyibjGJ
— 木野修造＠三日目フ－10a (@shuzo_kino) August 12, 2018

【悲報】大江戸温泉物語人多すぎで入場出来ない
— 木野修造＠三日目フ－10a (@shuzo_kino) August 12, 2018

2018-08-11

【読書メモ】新版日本永代蔵現代語訳付き

読書メモ

新版日本永代蔵現代語訳付き (角川ソフィア文庫)

作者: 井原西鶴,堀切実
出版社/メーカー: 角川学芸出版
発売日: 2009/03/25
メディア: 文庫
購入: 1人クリック: 7回
この商品を含むブログ (3件) を見る

江戸時代の商人の活躍をかいた、井原西鶴の著作について
現代語約と当時の時代背景なんかが色々と載っている比較的長めな読み物です。

節約にライフハックめいた話、それ本当かというような事柄まで
お話仕立てで網羅されており、当時は今でいうビジネス小説のような読まれ方をしていたようです。

現代の視点でみると、起承転結がとっ散らかっている部分がある、
妙に神仏のご利益ウンタラと時代の差を感じるところがありますが
根底にある商売の考え方というのは今でも十分通じそうな話でした。

2018-08-10

GAS WEBアプリでスタイルシートやJavaScriptのファイルを分離する

google

GAS WEBアプリシリーズの続き
今回はスタイルシートやJavaScriptの内容を分離してみます。

実際のところ

code.gs

メイン処理。
最後の方にindludeという関数が追加されています。
こいつがメインのHTMLファイル内に他のHTMLファイルを展開する役割を担います。

function doGet() {
  var template = HtmlService.createTemplateFromFile('hello.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function getData() {
  var fileid = 'YOURFILEID';
  return SpreadsheetApp
      .openById(fileid)
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

hello.html

メインのファイルです。
includeの関数で部分埋め込みのHTMLを展開する仕組み。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  
  <p>List of things:</p>
    <ul id="data">
      <li>Loading...</li>
  </ul> 
  </body>
</html>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getData();
});

function showThings(things) {
  var list = $('#data');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i][i] + '</li>');
  }
}
</script>

Stylesheet.html

今回の新造ファイルです
用途はスタイルシートですが、HTMLの部分テンプレートめいて使うため
保存形式はHTMLです気をつけてください

<style>
p {
  color: green;
}
</style>

動作の様子

ちゃんと動くと、こんな感じで一部文字の色が変わります
f:id:shuzo_kino:20180811001039p:plain

参考もと

HTML Service: Best Practices | Apps Script | Google Developers
Use project Javascript and CSS files in a Google Apps Script web app? - Stack Overflow

2018-08-09

GAS WEBアプリにて既存のGoogle Spread Sheetからデータを読み出す

google

実際のところ

Spread Sheetに

1,A,あ
2,B,い
3,C,う

上記ファイルのidが'1234567890abcdefghijklmnopqrstuvwxyz'であるとき、
code.gsは

function doGet() {
  var template = HtmlService.createTemplateFromFile('hello.html');
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function getData() {
  var fileid = '1234567890abcdefghijklmnopqrstuvwxyz';
  return SpreadsheetApp
      .openById(fileid)
      .getActiveSheet()
      .getDataRange()
      .getValues();
}

hello.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  
  <p>List of things:</p>
    <ul id="data">
      <li>Loading...</li>
  </ul> 
  </body>
</html>

<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(showThings)
      .getData();
});

function showThings(things) {
  var list = $('#data');
  list.empty();
  for (var i = 0; i < things.length; i++) {
    list.append('<li>' + things[i][i] + '</li>');
  }
}
</script>