GASの勉強ログ(サイドバーであれこれしたい)

公開日:2018-12-06
最終更新:2018-12-07

この記事は Akatsuki Advent Calendar 2018 - Adventar の6日目の記事です。
5日目は @begaborn さんの RailsアプリケーションにおけるMemcachedへのModelオブジェクトキャッシュ でした。

はじめに

18新卒サーバーエンジニアの はる です。
チャレンジだと思って手を上げたはいいものの、技術記事を書いたことがなく、何を書けばいいのか……
先輩方が書いているようなレベルはまだ難しいため、
今自分がスキマ時間にチャレンジしているGASの勉強ログを書こうと思います。
JavaScriptはほぼ触ったことがなかったです。

やること

前提: スプレッドシートを使う

  • メニュータブから開ける
  • サイドバーを使用
  • GAS <=> サイドバーでセルの値やり取り
    • ついでにweb apiを使ってみる

メニュー作成

// onOpenでスプレ起動時に実行される  
function onOpen() {  
  // UIクラスを取得  
  var ui = SpreadsheetApp.getUi();  

  // メニュー(タブ)作成  
  var menu = ui.createMenu('CustomTools');  

  // アイテム追加  
  menu.addItem('ポップアップ', 'showPopup');  

  // 区切り線  
  menu.addSeparator();  

  // サブメニュー  
  var subMenu = ui.createMenu("サブメニュー");  
  subMenu.addItem('ポップアップ(サブ)', 'showPopup')  

  // サブメニュー追加  
  menu.addSubMenu(subMenu)  

  // UIクラスに追加  
  menu.addToUi();  


  // 繋げて書くこともできる  
  // ui.createMenu('CustomTools')  
  //   .addItem('ポップアップ', 'showPopup')  
  //   .addSeparator()  
  //   .addSubMenu(  
  //     ui.createMenu('サブメニュー')  
  //       .addItem('ポップアップ(サブ)', 'showPopup')  
  //   )  
  //   .addToUi();  
};  

function showPopup(){  
  Browser.msgBox("動いてるよ");   
}  
  • メニュー
  • 動いた

サイドバー表示

function showTestSidebar(){  
  var sidebar = HtmlService  
               .createTemplateFromFile('test_sidebar.html')  
               .evaluate()  
               .setSandboxMode(HtmlService.SandboxMode.IFRAME)  
               .setTitle('サイドバー表示')  
  SpreadsheetApp.getUi().showSidebar(sidebar);  
};  

test_sidebar.html

<!DOCTYPE html>  
<html>  
  <head>  
    <base target="_top">  
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">  
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
  </head>  
  <body>  
    <h1>サイドバー表示</h1>  
  </body>  
</html>  

できた

WebApiから取得して、セルに反映させる

gas

function setTitle(id){  
  var activeSheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();   
  var cell = activeSheet.getActiveCell();  

  cell.setValue(getTitle(id));  
}  

function getTitle(id){  
  var url = "https://qiita.com/api/v2/items/" + id;  
  var response = UrlFetchApp.fetch(url);  
  var json = JSON.parse(response.getContentText());  
  return json["title"];  
}  

html

<!DOCTYPE html>  
<html>  
<head>  
  <base target="_top">  
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
</head>  

<body>  
  <form name="form1" class="form-group">  
    <div class="block">  
      <label>記事ID</label>  
      <input type="text" name="pageId" />  
    </div>  

    <div class="block">  
      <input class="action" type="button" onclick="setTitleToCell()" value="タイトルを入力">  
    </div>  
  </form>  
</body>  
</html>  

<script>  
  function setTitleToCell() {  
    google.script.run.setTitle(document.form1.pageId.value);  
  }  
</script>  

できました!!!!!

感想

レベルが低くて申し訳ないです……。
ただ、記事のネタどうしようとあれこれ考えた1週間、必死に調べながら記事を書いた4時間は今までにないほど頭を回転させました……。
アウトプット大事ですね。

記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
@harunの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする