Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

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

基本的には、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>ボタン2</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

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

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

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

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

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

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

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

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

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

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

実際のところ

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>

結果はこんな感じ
f:id:shuzo_kino:20180809235226p:plain

GAS製WEBアプリが「「Index」という HTML ファイルは見つかりませんでした。」といって動かない場合、権限を更新してバージョンもあげる

GASのWEBアプリをアップしたのに、

「Index」という HTML ファイルは見つかりませんでした。(行 2、ファイル「コード」、プロジェクト「sample」)

というエラーが出た場合……
権限を変更してバージョンを新しくして保存しなおすのです

実際のところ

f:id:shuzo_kino:20180803002843p:plain

f:id:shuzo_kino:20180803002844p:plain

f:id:shuzo_kino:20180803002847p:plain

f:id:shuzo_kino:20180803002835p:plain