Google Apps Script試行錯誤 Blog: 2017

2017年12月31日日曜日

ボタンをクリックしたら新規ページを開く

HTML Serviceでこういうボタンを作る

クリックした時に指定したページを開くボタンの例です
下のindex.htmlの
window.open("https://www.google.co.jp/");
で開くページのURLを指定しています

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <button id="bt">新規ウィンドを開く</button>
  <script>
    document.getElementById("bt").onclick = bt_clicked;

    function bt_clicked() {
      window.open("https://www.google.co.jp/");
    }
  </script>
</body>
</html>

意訳

これはHTML5文書です


ボタンを置く（idはbt）

idがbtの要素がクリックされたら

この機能がやること
指定したページを新規タブで開く

セレクトボックスの値が変わったら反応する

HTML Serviceでこういうセレクトボックスを作る

セレクトボックスの値が変わったらそのvalueをアラートに出します

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <select id="select1">
      <option value="選択肢1">選択肢1</option>
      <option value="選択肢2">選択肢2</option>
      <option value="選択肢3">選択肢3</option>
    </select>
  <script>
    document.getElementById("select1").onchange = select_changed;

    function select_changed() {
      var select = document.getElementById("select1");
      var index = select.selectedIndex;
      var value = select[index].value;
      alert(value);
    }
  </script>
</body>
</html>

意訳

これはHTML5文書です


セレクトボックスを置く（idはselect1）
選択肢1
選択肢2
選択肢3


セレクトボックスの値が変わったらselect_changedを実行する

この機能がやること
idがselect1の要素を取得して
選択されているindexを取得して
選択されているindexのvalueを取得して
アラートに出す

HTML要素を動的に作りたい（セレクトボックス）

JavaScriptでセレクトボックスを動的に作る

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  var values = ["選択肢1", "選択肢2", "選択肢3"];
  create_select(values);

  function create_select(values) {
    var main = document.getElementById('main_div');
    var select = document.createElement('select');
    var group1 = document.createElement('optgroup');
    group1.label = "グループ1";
    for (var i = 0; i < values.length; i++) {
      var value = values[i];
      var option = document.createElement('option');
      option.setAttribute("value", value);
      option.innerHTML = value;
      group1.appendChild(option);
    }
    select.appendChild(group1);
    main.appendChild(select);
  }
</script>
</html>

意訳

これはHTML5文書です


divを置く （idはmain_div）



選択肢の値を用意して
create_selectに渡す

この機能がやること
idがmainの要素を取得して
セレクトボックスを作って
オプションのグループを作って
グループラベルを付ける
選択肢の値の数だけ以下を繰り返す
値を一つずつ取得して
オプションを作って
値をvalueに入れて
値をinnerHTMLに入れて
グループ1に追加する

セレクトボックスにグループ1を追加して
mainのdivにセレクトボックスを追加する

セレクトボックスを作る（グループラベル）

HTML Serviceでこういうセレクトボックスを作る

選択肢をいくつかのグループに分けたい時は
optgroup labelでこのような（グループ1, グループ2）ラベルを付けられます

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
  <body>
    <select id="select1">
      <optgroup label="グループ1">
        <option value="選択肢1">選択肢1</option>
        <option value="選択肢2">選択肢2</option>
        <option value="選択肢3">選択肢3</option>
      </optgroup>
      <optgroup label="グループ2">
        <option value="選択肢4">選択肢4</option>
        <option value="選択肢5">選択肢5</option>
        <option value="選択肢6">選択肢6</option>
      </optgroup>
    </select>
  </body>
</html>

意訳

これはHTML5文書です


セレクトボックスを置く
1つ目のグループ
1つ目の選択肢
2つ目の選択肢
3つ目の選択肢

2つ目のグループ
4つ目の選択肢
5つ目の選択肢
6つ目の選択肢

JavaScriptでセレクトボックスのオプションを選択状態にする

セレクトボックスを作るでは
<option value="選択肢2" selected>選択肢2</option>
のようにオプションに直接selectedを入れました

今回はJavaScriptで指定したindexをselectedにしています
document.getElementById("select1").selectedIndex = 1;

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <select id="select1">
      <option value="選択肢1">選択肢1</option>
      <option value="選択肢2">選択肢2</option>
      <option value="選択肢3">選択肢3</option>
    </select>
  <script>
    document.getElementById("select1").selectedIndex = 1;
  </script>
</body>
</html>

意訳

これはHTML5文書です


セレクトボックスを置く
1つ目の選択肢
2つ目の選択肢
3つ目の選択肢


1番目の選択肢を選択する（選択肢1は0番目）

チェックボックスを選択状態にする

JavaScriptでチェックボックスを選択状態にする

選択肢1
選択肢2
選択肢3

チェックボックスを作るでは
<input type="checkbox" name="check1" id="check1_1" value="選択肢1" checked="checked">
のようにチェックボックスに直接checkedを入れました

今回はJavaScriptでcheckedにしています
document.getElementById("check1_1").checked = "checked";

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <input id="check1_1" name="check1" type="checkbox" value="選択肢1" />
  <label for="check1_1">選択肢1</label>
  <br />
  <input id="check1_2" name="check1" type="checkbox" value="選択肢2" />
  <label for="check1_2">選択肢2</label>
  <br />
  <input id="check1_3" name="check1" type="checkbox" value="選択肢3" />
  <label for="check1_3">選択肢3</label>
  <script>
    document.getElementById("check1_1").checked = "checked";
  </script>
</body>
</html>

意訳

これはHTML5文書です


１つ目のチェックボックスを作る
それにラベルを付ける

２つ目のチェックボックスを作る
それにラベルを付ける

3つ目のチェックボックスを作る
それにラベルを付ける

１つ目のチェックボックスを選択する

ラジオボタンを選択状態にする

JavaScriptでラジオボタンを選択状態にする

はい
いいえ

ラジオボタンを作るでは
<input type="radio" name="radio1" id="radio1_1" value="yes" checked="checked">
のようにラジオボタンに直接checkedを入れました

今回はJavaScriptでcheckedにしています
document.getElementById("radio1_1").checked = "checked";

コード.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}

意訳

この機能がやること
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <input type="radio" name="radio1" id="radio1_1" value="yes">
  <label for="radio1_1">はい</label>
  <br>
  <input type="radio" name="radio1" id="radio1_2" value="no">
  <label for="radio1_2">いいえ</label>
  <script>
    document.getElementById("radio1_1").checked = "checked";
  </script>
</body>
</html>

意訳

これはHTML5文書です


１つ目のラジオボタンを作る
それにラベルを付ける

２つ目のラジオボタンを作る
それにラベルを付ける

１つ目のラジオボタンを選択する

2017年12月24日日曜日

Googleカレンダーでイベントのlinkを取得する（EVENT_ID）

Google Apps ScriptのCalendar ServiceではカレンダーのイベントIDを取得できないようなのでCalendar APIを利用して取得しました

ここでいうイベントIDはこれです

htmlLinkからイベントIDを抜き出す方法を書きます

要点だけ先にいうと、Calendar APIを有効にしてから以下のコードでhtmlLinkからイベントIDを取得できます

コード.gs

function get_event_id() {
  var events = Calendar.Events.list("primary", {
    timeMin: new Date().toISOString(),
    singleEvents: true,
    orderBy: "startTime",
    maxResults: 1
  });
  var link = events.items[0].htmlLink;
  var event_id = link.split("eid=")[1];
  Logger.log([link, event_id]);
}

Google Apps ScriptのCalendar Serviceでは以下のようなコードでイベントIDを取得できそうな気がしましたがこのコードで取得するIDとは違っていたので、今回Calender APIを使ってみました

コード.gs

function get_event_id(){
  var calendar = CalendarApp.getCalendarById("primary");
  var events = calendar.getEventsForDay(new Date());
  var events0_id = events[0].getId();
  Logger.log(events0_id);
}

hoge@google.comがログに出てきますが、欲しいのはこれじゃない！

Googleカレンダーでイベントのlinkを取得する（htmlLink）では、以下の画面を開くリンクを取得できました

今回は↑の編集アイコンをクリックした先の以下の画面を開くリンクを作ってみます

今回はシートに書き出す処理も追加します

Google Calendar API を有効にする
htmlLinkからEVENT_IDを取得して編集画面へのリンクを作る
実行する
シートに書き出す

1. Google Calendar API を有効にする

有効にする方法がわからない場合はこちらへ

2. htmlLinkからEVENT_IDを取得して編集画面へのリンクを作る

Googleカレンダーでイベントのlinkを取得する（htmlLink）を以下のように改造します

コード.gs

function listNext10Events_with_event_link() {
  var calendarId = 'primary';
  var now = new Date();
  var events = Calendar.Events.list(calendarId, {
    timeMin: now.toISOString(),
    singleEvents: true,
    orderBy: 'startTime',
    maxResults: 10
  });
  var array = [];
  if (events.items && events.items.length > 0) {
    for (var i = 0; i < events.items.length; i++) {
      var event = events.items[i];
      var link = event.htmlLink;
      if (event.start.date) {
        var start = event.start.date;
        array.push([event.summary, start, link]);
      } else {
        var start = Utilities.formatDate(new Date(event.start.dateTime), 'Asia/Tokyo', 'yyyy/MM/dd/HH:mm');
        array.push([event.summary, start, link]);
      }
    }
  } else {
    array.push('No events found.');
  }
  set_values(array);
}

function set_values(array){
  var sh = SpreadsheetApp.getActiveSheet();
  var last_row = sh.getLastRow();
  var start_row = last_row + 1;
  var start_col = 1;
  var num_rows = array.length;
  var num_cols = array[0].length;
  var range = sh.getRange(start_row, start_col, num_rows, num_cols);
  range.setValues(array); 
}

3. 実行する

listNext10Events_with_event_link()を実行します

4. シートに書き出す

これからの予定10件を取得して
A列にタイトル、B列に開始時間、C列に編集画面へのリンクが入力されます

おまけ

終了時間や場所も取得して書き出す場合は
event.end や event.location でそれぞれ取得できます

取得できる項目一覧はこちら
Events/Resource representations

以下のコードは開始日時と終了日時を指定して100件の予定をシートに書き出すコードの例です

コード.gs

function get_data() {
  var calendarId = "primary";
  var start = new Date("2017/12/24");
  var end = new Date("2017/12/25");
  var events_data = Calendar.Events.list(calendarId, {
    timeMin: start.toISOString(),
    timeMax: end.toISOString(),
    singleEvents: true,
    orderBy: "startTime",
    maxResults: 100
  });
  var events = get_events(events_data);
  Logger.log(events);
  set_values(events);
}

function get_events(events){
  var array = [];
  if (events.items && events.items.length > 0) {
    for (var i = 0; i < events.items.length; i++) {
      var event = events.items[i];
      var start_date = get_date(event.start);
      var end_date = get_date(event.end);
      var summary = event.summary;
      var location = event.location;
      if(location == null){
       location = ""; 
      }
      var link = event.htmlLink;
      var key = link.split("eid=")[1];
      var url = "https://calendar.google.com/calendar/r/eventedit/" + key;
      var duration = (new Date(end_date) - new Date(start_date));
      var hour = Math.floor(duration / (1000 * 60) / 60);
      var min = duration / (1000 * 60) % 60;
      var time = (hour + ":" + min);
      array.push([start_date, end_date, time, summary, location, url]);
    }
  } else {
    array.push("No events found.");
  }
  return array;
}

function get_date(date) {
  if (date.dateTime != null) {
    date = format_date(date.dateTime);
  } else {
    date = date.date;
  }
  return date;
}

function format_date(date){
 return Utilities.formatDate(new Date(date), 'Asia/Tokyo', 'yyyy/MM/dd/HH:mm');
}

function set_values(array){
  var sh = SpreadsheetApp.getActiveSheet();
  var last_row = sh.getLastRow();
  var start_row = last_row + 1;
  var start_col = 1;
  var num_rows = array.length;
  var num_cols = array[0].length;
  var range = sh.getRange(start_row, start_col, num_rows, num_cols);
  range.setValues(array); 
}

maxResults
Maximum number of entries returned on one result page. By default the value is 100 entries. The page size can never be larger than 250 entries. Optional.
https://developers.google.com/google-apps/calendar/v3/reference/calendarList/list

Google Calendar API Usage Limits
The Google Calendar API has a courtesy limit of 1,000,000 queries per day.
https://developers.google.com/google-apps/calendar/pricing?hl=ja

Listing events
https://developers.google.com/apps-script/advanced/calendar

Events/Resource representations
https://developers.google.com/google-apps/calendar/v3/reference/events#resource

Googleカレンダーでイベントのlinkを取得する（htmlLink）

カレンダーのイベントのLINKを取得したくて調べていて、Google Apps ScriptのCalendar Serviceで取得できるかと思いきや取得するmethodが見つからず、Google Calendar API を利用すると取得できたため、今回はその方法を書いていきます

Google Calendar API を有効にする
htmlLinkを取得するコードを書く
実行する

1. Google Calendar API を有効にする

有効にする方法がわからない場合は以下の手順でAPIを有効にできます

1. スプレッドシートのツール→スクリプトエディタ...を選択します

2. リソース→Google の拡張サービス.. を選択します

3. プロジェクト名を任意で設定して「OK」をクリックします

4. Calender API の右のボタンが無効になっているので
クリックして「ON」にします

5. ↑の画面の Google API コンソールをクリックして「calendar」で検索して出て来る
Google Calendar APIを選択します

6.「有効にする」をクリックします

7. スクリプトエディタに戻って「OK」をクリックします

2. htmlLinkを取得するコードを書く

Advanced Calendar Service のlistNext10Events()を改造してhtmlLinkを取得するコードを書きました

コード.gs

function listNext10Events_with_link() {
  var calendarId = 'primary';
  var now = new Date();
  var events = Calendar.Events.list(calendarId, {
    timeMin: now.toISOString(),
    singleEvents: true,
    orderBy: 'startTime',
    maxResults: 10
  });
  if (events.items && events.items.length > 0) {
    for (var i = 0; i < events.items.length; i++) {
      var event = events.items[i];
      var link = event.htmlLink;
      if (event.start.date) {
        var start = event.start.date;
        Logger.log([event.summary, start, link]);
      } else {
        var start = Utilities.formatDate(new Date(event.start.dateTime), 'Asia/Tokyo', 'yyyy/MM/dd/HH:mm');
        Logger.log([event.summary, start, link]);
      }
    }
  } else {
    Logger.log('No events found.');
  }
}

意訳.gs

この処理は以下の処理を実行する
カレンダーのIDを設定する
現在日時を取得する
カレンダーIDを指定してイベントたちを取得する
現在日時以降で
繰り返しのイベントを個別に展開して
開始時刻で並べて
10件取得する

eventsのitemsが存在して長さが０より大きければ
events.itemsの数だけ以下を繰り返す
events.itemsを順番に取得する
htmlLinkでlinkを取得する
もしeventにstart.dateが存在すれば
start.dateを取得して
summaryとlinkと一緒にログに出す
start.dateが存在しなければ
event.start.dateTimeをフォーマットして
summaryとlinkと一緒にログに出す


eventsのitemsが存在しないか長さが０より大きくなければ
'No events found.'をログに出す

listNext10Events_with_link()を実行するとこれらからの予定が10件ログに出ます

var link = event.htmlLinkでは以下のようなリンクを取得できます
https://www.google.com/calendar/event?eid=EVENT_ID

ここで取得したリンクから開けるのはこの画面

編集画面を開きたい場合は
https://calendar.google.com/calendar/r/eventedit/EVENT_ID
とすれば良さそうなのでそれも次の記事で書きます

参考

Google Calendar API (calendar/quickstart/apps-script)
https://developers.google.com/google-apps/calendar/quickstart/apps-script

Calendar Service
https://developers.google.com/apps-script/reference/calendar/

maxResults
Maximum number of entries returned on one result page. By default the value is 100 entries. The page size can never be larger than 250 entries. Optional.
https://developers.google.com/google-apps/calendar/v3/reference/calendarList/list

Google Calendar API Usage Limits
The Google Calendar API has a courtesy limit of 1,000,000 queries per day.
https://developers.google.com/google-apps/calendar/pricing?hl=ja

Listing events
https://developers.google.com/apps-script/advanced/calendar

Events/Resource representations
https://developers.google.com/google-apps/calendar/v3/reference/events#resource

２つの日時の時間差を出したい（時間、分）

時間と分にわけるため割り算の余りを%で取得しています

以下は2017/12/24 09:25 と 2017/12/25 13:40 の時間差を出すコードの例です

コード.gs

function get_diff() {
  var start = new Date("2017/12/24 09:25");
  var end = new Date("2017/12/25 13:40");
  var duration = end - start;
  var diff_min = duration / (1000 * 60)
  var hour = Math.floor(diff_min / 60);
  var min = diff_min % 60;
  Logger.log(hour + ":" + min);
}

意訳

この処理は以下の処理を実行する
１つ目の日時を指定して
２つ目の日時を指定して
２つの日時の差分を取得して
差分はミリ秒で出るので1000で割って秒にしてさらに60で割って分にして
分を60で割って時間を取得して
分を60で割った余りを取得して（%は割り算の余り）
ログに出す

get_diff()を実行すると以下のように28:15というログが出ます
（2017/12/24 09:25 と 2017/12/25 13:40 の時間差は28時間15分）

2017年12月23日土曜日

数値の表示形式をスクリプトで変える

セルの数値の表示形式で「自動」「書式なしテキスト」などの書式をスクリプトで設定したくて書いたコードです

setNumberFormat()を使います

メニューから設定する場合は「表示形式」→「数字」から設定できるこの設定です

「書式なしテキスト」に設定したい場合

対象のセルを指定してsetNumberFormat("@")とすることで設定できます

function set_format() {
 SpreadsheetApp.getActiveSheet().getActiveCell().setNumberFormat("@");
}

試してみる

A1に 1234567890 と入力します

コード.gsのset_format()を実行して表示形式を見ると書式なしテキストに設定されています

それ以外の書式の設定

Date and Number Formats　フォーマットの種類
https://developers.google.com/sheets/api/guides/formats

または

表示形式→数字→表示形式の詳細設定→カスタム数値形式...の中から指定したい形式を見つけて上のコードと同じく

function set_format() {
 SpreadsheetApp.getActiveSheet().getActiveCell().setNumberFormat("0.0");
}

のようにsetNumberFormat()の中に""で囲んで入れます

表示形式→数字→表示形式の詳細設定→カスタム数値形式...

おまけ

選択したセルの書式を知りたい場合はgetNumberFormat()を使います

function get_format() {
 var format = SpreadsheetApp.getActiveSheet().getActiveCell().getNumberFormat();
 Logger.log(format);
}

参考

Date and Number Formats　フォーマットの種類
https://developers.google.com/sheets/api/guides/formats

getNumberFormat()
https://developers.google.com/apps-script/reference/spreadsheet/range#getNumberFormat()

setNumberFormat(String)
https://developers.google.com/apps-script/reference/spreadsheet/range#setNumberFormat(String)

スプレッドシートで数値の表示形式を設定する
https://support.google.com/docs/answer/56470?co=GENIE.Platform%3DDesktop&hl=ja

2017年12月22日金曜日

HTML要素を動的に作りたい（テキストボックス）

JavaScriptでテキストボックスを動的に作る

このようにテキストボックスを3つ作成するコードの例です

コード.gs

function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

意訳

この処理は以下を実行する
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  create_textbox();
  function create_textbox() {
    var main = document.getElementById('main_div');
    for (var i = 0; i < 3; i++) {
      var elem = document.createElement('input');
      var id = "tb" + i;
      elem.setAttribute("type", "text");
      elem.setAttribute("placeholder", "tb" + i);
      elem.setAttribute("id", id);
      main_div.appendChild(elem);
    }
  }
</script>
</html>

意訳

これはHTML5文書です


divを置く（idはmain_div)



create_tb()を実行する
この機能がやること
idがmain_divの要素を取得して
以下を３回繰り返す
input要素を作成して
idを決めて
typeをtextにして
placeholderを設定して→入力欄に表示しておく文字
idを設定して
main_divにボタンを追加する

index.htmlにある

for (var i = 0; i < 3; i++) {

の 3 を別の数値変えると作成されるテキストボックスの数が変わります

関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形

参考

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/

HTML要素を動的に作りたい（ボタン）

JavaScriptでボタンを動的に作る

このようボタンを3つ並べるコードの例です
それぞれのボタンをクリックするとvalueがアラートに出る

コード.gs

function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

意訳

この処理は以下を実行する
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  var values = ["aaa", "bbb", "ccc"];
  create_button(values);

  function create_button(values) {
    var main_div = document.getElementById('main_div');
    for (var i = 0; i < values.length; i++) {
      var elem = document.createElement('button');
      var id = "bt" + i;
      var value = values[i];
      elem.innerHTML = value;
      elem.setAttribute("value", value);
      elem.setAttribute("type", "button");
      elem.setAttribute("id", id);
      elem.onclick = function() {
        alert(this.value);
      }
      main_div.appendChild(elem);
    }
  }
</script>
</html>

意訳

これはHTML5文書です


divを置く（idはmain_div）



ボタンに表示するテキストを用意しておく
create_button(values)を実行する

この処理は以下を実行する
idがmain_divの要素を取得して
valuesの数だけ以下を繰り返す
button要素を作成して
idを決めて
valuesからvalueを取得して
innerHTMLに表示して
valueにも設定して
typeをbuttonにして
idを設定して
ボタンがクリックされたら以下を実行する
クリックされたボタンのvalueをアラートに出す

main_divにボタンを追加する

index.htmlにある

var values = ["aaa", "bbb", "ccc"];

の配列の要素数を変えると作成されるボタンの数が変わります
↓
var values = ["aaa", "bbb", "ccc", "ddd"];

にすると4つ目にdddのボタンが作成される

関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形

参考

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/

2017年12月18日月曜日

displayとvisibilityの設定

displayとvisibilityの設定を書き残しておきたくて

display

JavaScriptで設定する場合

要素が表示されていない状態
element.style.display = "none";

前後に改行のある表示
element.style.display = "block";

前後に改行のない表示
element.style.display = "inline";

HTMLで設定する場合

style="display: none;"
style="display: block;"
style="display: inline;"

CSSで設定する場合

{display: none;}
{display: block;}
{display: inline;}

visibility

JavaScriptで設定する場合

要素がそこに表示されているが見えない状態
element.style.visibility = "hidden";

見える状態
element.style.visibility = "visible";

HTMLで設定する場合

style="visibility: hidden;"
style="visibility: visible;"

CSSで設定する場合

{visibility: hidden;}
{visibility: visible;}

2017年12月15日金曜日

シートのデータをクリアする

選択範囲に入っているデータをクリアするコードの例です

このデータのA2からB3の範囲のデータをクリアする

　　　　　　　　　　↓

このようにA2からB3の範囲をクリアしたい場合は

コード.gs

function clear_range() {
  SpreadsheetApp.getActiveSheet().getRange("A2:B3").clear();
}

と書いて実行するとクリアできます

おまけ

上の例では範囲を "A2:B3" のように決め打ちしていますが

「2行目以降のデータを全部消したい」

という場合は以下のようなコードでも実現できます

コード.gs

function clear_range() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var start_row = 2;
  var start_col = 1;
  var last_row = sheet.getLastRow();
  var last_col = sheet.getLastColumn();
  var num_rows = (last_row - start_row) + 1;
  var num_cols = (last_col - start_col) + 1;
  var range = sheet.getRange(start_row, start_col, num_rows, num_cols);
  range.clear();
}

意訳

この処理は以下を実行する
現在開いているシートを取得して
範囲の先頭の行を指定して（例では2行目）
範囲の先頭の列を指定して（例では1列目）
データが入っている最終行を取得して
データが入っている最終列を取得して
対象の行数を取得して(開始行も行数に入れたいので+1)
対象の列数を取得して(開始列も列数に入れたいので+1)
範囲を決めて
データをクリアする

var start_row = 2;
で範囲の先頭行の番号を指定して

var start_col = 1;
で範囲の先頭列の番号を指定して

あとは範囲を自動計算してデータをクリアします

補足

データの入っている範囲をクリアしたい場合は

sheet.getDataRange().clear();

参考

https://developers.google.com/apps-script/reference/spreadsheet/sheet#clear()

2017年12月14日木曜日

HTML要素を動的に作りたい（ラジオボタン）

JavaScriptでラジオボタンを動的に作る

このようなラジオボタンを作る例です

ラベルをクリックしても選択できる
ラジオボタンがクリックされたらvalueをアラートに出す

コード.gs

function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

意訳

この処理は以下を実行する
指定したファイルのHTMLを表示する

index.html

<!DOCTYPE html>
<html>
<body>
  <div id="main_div">
  </div>
</body>
<script>
  var values = ["aaa", "bbb"];
  create_radio(values);

  function create_radio(values) {
    var main_div = document.getElementById('main_div');
    for (var i = 0; i < values.length; i++) {
      var radio = document.createElement('input');
      var label = document.createElement('label');
      var br = document.createElement('br');
      var id = "main_div_radio" + i;
      var name = "group1";
      var value = values[i];
      radio.setAttribute("type", "radio");
      radio.setAttribute("value", value);
      radio.setAttribute("id", id);
      radio.setAttribute("name", name);
      label.setAttribute("for", id);
      label.innerHTML = value;
      
      if(value == "aaa"){
      radio.checked = true;
      }

      radio.onclick = function() {
        alert(this.value);
      }

      main_div.appendChild(br);
      main_div.appendChild(radio);
      main_div.appendChild(label);
    }
  }
</script>
</html>

意訳

これはHTML5文書です


divを置く（idはmain_div）



ラベルの値を用意する
create_radio(values)を実行する

この機能がやること
idがmain_divの要素を取得して
valuesの数だけ以下を繰り返す
input要素を作成して
label要素を作成して
改行の要素を作成して
idを決めて
nameを決めて（ラジオボタンをひとつだけ選択できるようにする）
valueをvaluesから取得して
input要素のtypeをradioにして
valueを設定して
idを設定して
nameを設定して
labelを付ける要素を指定して
innerHTMLにvalueを入れる

もしvalueがaaaなら
ラジオボタンを選択しておく


ラジオボタンがクリックされたら以下を実行する
クリックされたラジオボタンのvalueをアラートに出す


main_divに改行を追加する
main_divにラジオボタンを追加する
main_divにラベルを追加する

関連記事

ウェブアプリケーションとして導入する方法がわからない場合
↓この記事にまとめました
Google Apps ScriptのWebアプリ雛形

テキストエリアを作りたい場合
HTML要素を動的に作りたい（テキストエリア）

2017年12月13日水曜日

placeholderの色を変更する

placeholderの文字色を変更したくて調べた時に書いたコードです

::-webkit-input-placeholder {
color: pink;
}

<style></style>内に上記の設定を書くと指定した色に変更できるようです（Chrome）

HTML Serviceで実際に試してみた例が以下のコードです

コード.gs

function doGet(){
 return HtmlService.createHtmlOutputFromFile('index'); 
}

意訳

この処理は以下を実行する
指定したHTMLファイルを表示する

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    ::-webkit-input-placeholder {
      color: pink;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="テキスト入力">
</body>
</html>

意訳

HTMLの宣言
ここからhtml
ここからhead
ここからstyle
placeholderの
文字色をpinkにする

ここまでstyle
ここまでhead
ここまでbosy
テキストボックスを配置する
ここまでbody
ここまでhtml

関連記事

HTMLServiceで試す手順
Google Apps ScriptのWebアプリ雛形

2017年12月12日火曜日

Custom Search APIで欲しい情報を抽出する

Custom Search APIをたたいて取得した検索結果を
スプレッドシートに書き出す例です

検索結果の最初の10件の title link snippet を抽出してシートに書き出します

書き出した結果

やってみる

Google Custom Search APIで検索結果を取得するで取得したように

https://www.googleapis.com/customsearch/v1?key=API_KEY&cx=CSE_ID&q=検索ワード

↑にAPI_KEY, CSE_IDを入れて
検索ワードを「栄養素」とすると以下のような結果が返って来ます

{
 "kind": "customsearch#search",
 "url": {
  "type": "application/json",
  "template": "https://www.googleapis.com/customsearch/v1?q={searchTerms}&num={count?}&start={startIndex?}&lr={language?}&safe={safe?}&cx={cx?}&sort={sort?}&filter={filter?}&gl={gl?}&cr={cr?}&googlehost={googleHost?}&c2coff={disableCnTwTranslation?}&hq={hq?}&hl={hl?}&siteSearch={siteSearch?}&siteSearchFilter={siteSearchFilter?}&exactTerms={exactTerms?}&excludeTerms={excludeTerms?}&linkSite={linkSite?}&orTerms={orTerms?}&relatedSite={relatedSite?}&dateRestrict={dateRestrict?}&lowRange={lowRange?}&highRange={highRange?}&searchType={searchType}&fileType={fileType?}&rights={rights?}&imgSize={imgSize?}&imgType={imgType?}&imgColorType={imgColorType?}&imgDominantColor={imgDominantColor?}&alt=json"
 },
 "queries": {
  "request": [
   {
    "title": "Google Custom Search - 栄養素",
    "totalResults": "1540000",
    "searchTerms": "栄養素",
    "count": 10,
    "startIndex": 1,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "CSE_ID"
   }
  ],
  "nextPage": [
   {
    "title": "Google Custom Search - 栄養素",
    "totalResults": "1540000",
    "searchTerms": "栄養素",
    "count": 10,
    "startIndex": 11,
    "inputEncoding": "utf8",
    "outputEncoding": "utf8",
    "safe": "off",
    "cx": "CSE_ID"
   }
  ]
 },
 "context": {
  "title": "Google"
 },
 "searchInformation": {
  "searchTime": 0.273824,
  "formattedSearchTime": "0.27",
  "totalResults": "1540000",
  "formattedTotalResults": "1,540,000"
 },
 "items": [
  {
   "kind": "customsearch#result",
   "title": "栄養素 - Wikipedia",
   "htmlTitle": "\u003cb\u003e栄養素\u003c/b\u003e - Wikipedia",
   "link": "https://ja.wikipedia.org/wiki/%E6%A0%84%E9%A4%8A%E7%B4%A0",
   "displayLink": "ja.wikipedia.org",
   "snippet": "栄養素（えいようそ、nutrient）とは、. （栄養学等）栄養のために摂取する物質を要素\nとして指す言葉。蛋白質、脂肪、炭水化物の三大栄養素のほかに、無機質、ビタミンなど\nを指す。 （生物学等）栄養のために摂取される物質。 生物学等では、「栄養素」と言うと、\n生物が代謝する目的で外界から吸収する物質のことを指している。栄養素は生体内で\n代謝され、生体内物質の原料やエネルギーを産生するのに利用されるとされる。 栄養学\n等では、上記の(生化学等での栄養素の他に）健康を維持するための食事由来の成分を\n含め ...",
   "htmlSnippet": "\u003cb\u003e栄養素\u003c/b\u003e（えいようそ、nutrient）とは、. （栄養学等）栄養のために摂取する物質を要素\u003cbr\u003e\nとして指す言葉。蛋白質、脂肪、炭水化物の三大\u003cb\u003e栄養素\u003c/b\u003eのほかに、無機質、ビタミンなど\u003cbr\u003e\nを指す。 （生物学等）栄養のために摂取される物質。 生物学等では、「\u003cb\u003e栄養素\u003c/b\u003e」と言うと、\u003cbr\u003e\n生物が代謝する目的で外界から吸収する物質のことを指している。\u003cb\u003e栄養素\u003c/b\u003eは生体内で\u003cbr\u003e\n代謝され、生体内物質の原料やエネルギーを産生するのに利用されるとされる。 栄養学\u003cbr\u003e\n等では、上記の(生化学等での\u003cb\u003e栄養素\u003c/b\u003eの他に）健康を維持するための食事由来の成分を\u003cbr\u003e\n含め&nbsp;...",
   "cacheId": "3Ut4C2sD0UAJ",
   "formattedUrl": "https://ja.wikipedia.org/wiki/栄養素",
   "htmlFormattedUrl": "https://ja.wikipedia.org/wiki/\u003cb\u003e栄養素\u003c/b\u003e",
   "pagemap": {
    "metatags": [
     {
      "referrer": "origin-when-cross-origin"
     }
    ]
   }
  },
...2件目以降省略

この中の items に検索結果の最初の10件が入っているので
今回はそれらの title と link と snippet を抽出して
シートに書き出すコードの例を書きました

コード.gs

var API_KEY = "取得したAPI KEY";
var CSE_ID = "取得したCSE ID";
var BASE_URL = "https://www.googleapis.com/customsearch/v1?key=";
var PARAM1 = "&cx=";
var PARAM2 = "&q=";

function get_data() {
  var query = "栄養素";
  var url = BASE_URL + API_KEY + PARAM1 + CSE_ID + PARAM2 + query;
  var fetch = UrlFetchApp.fetch(url).getContentText();
  var obj = JSON.parse(fetch);
  var items = obj["items"];
  var array = [];
  for (var i = 0; i < items.length; i++) {
    var title = items[i]["title"];
    var link = items[i]["link"];
    var snippet = items[i]["snippet"];
    array.push([title, link, snippet])
  }
  set_values(array);
}

function set_values(array){
  var sh = SpreadsheetApp.getActiveSheet();
  var last_row = sh.getLastRow();
  var start_row = last_row + 1;
  var start_col = 1;
  var num_rows = array.length;
  var num_cols = array[0].length;
  var range = sh.getRange(start_row, start_col, num_rows, num_cols);
  range.setValues(array); 
}

意訳

API_KEYを設定する
CSE_IDを設定する
BASE_URLは"https://www.googleapis.com/customsearch/v1?key="
PARAM1は"&cx="
PARAM2は "&q="

この処理は以下を実行する
検索キーワードを決める（例では栄養素）
urlにBASE_URL + API_KEY + PARAM1 + CSE_ID + PARAM2 + queryを入れて
結果を取得する
JSON 文字列をオブジェクトに変換して
itemsを取得する
結果を入れるarrayという入れ物を用意する
itemsの数だけ以下を繰り返す
titleを取得して
linkを取得して
snippetを取得して
arrayに入れて

set_valuesに渡す


この処理は以下を実行する
開いているシートを取得して
データの入っている最終行を取得して
その次の行を入力を開始する行に設定して
入力を開始する列を設定する(例では1列目を指定)
入力する行数はarrayの長さから取得して
入力する列数はarrayの中の1行内のデータ数を取得して
入力を開始する行, 入力を開始する列, 入力する行数, 入力する列数で範囲を指定して
arrayのデータを入力する

2017年12月31日日曜日

2017年12月30日土曜日

補足

補足

補足

補足

2017年12月24日日曜日

1. Google Calendar API を有効にする

2. htmlLinkからEVENT_IDを取得して編集画面へのリンクを作る

3. 実行する

4. シートに書き出す

おまけ

1. Google Calendar API を有効にする

2. htmlLinkを取得するコードを書く

2017年12月23日土曜日

試してみる

おまけ

2017年12月22日金曜日

2017年12月18日月曜日

display

JavaScriptで設定する場合

HTMLで設定する場合

CSSで設定する場合

visibility

JavaScriptで設定する場合

HTMLで設定する場合

CSSで設定する場合

2017年12月15日金曜日

↓

おまけ

2017年12月14日木曜日

2017年12月13日水曜日

2017年12月12日火曜日

やってみる

Latest post

　　　　　　　　　　↓