LANG SELRCT

コードを書く場所についてはこちら

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でチェックボックスを選択状態にする





チェックボックスを作る では
<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文書です


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

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

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

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






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

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文書です


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

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

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






2017年12月30日土曜日

セレクトボックスを作る(選択肢を表示する)

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




3つの選択肢が見えた状態で選択できるようにする



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <select id="select1" size="3">
      <option value="選択肢1">選択肢1</option>
      <option value="選択肢2" selected>選択肢2</option>
      <option value="選択肢3">選択肢3</option>
    </select>
  </body>
</html>
意訳
これはHTML5文書です


セレクトボックスを置く
1つ目の選択肢
2つ目の選択肢 開いた時に選択しておく
3つ目の選択肢





補足




このように表示したい場合は

<select id="select1" size="3">
<select id="select1">
とする


選択されているセレクトボックスの値を取得する

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" selected>選択肢2</option>
      <option value="選択肢3">選択肢3</option>
    </select>
  <br><br>
  <button type="button" id="bt">ボタン</button>
  <script>
    document.getElementById("bt").onclick = get_select1;

    function get_select1() {
      var select1 = document.getElementById("select1");
      var index = select1.selectedIndex;
      var value = select1[index].value;
      alert(value);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


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


ボタンを置く

ボタンがクリックされたらget_select1を実行する

この機能がやること
対象のセレクトボックスを取得して
何番目の選択肢が選択されているかを取得して
そのvalueを取得して
アラートに出す







選択されているチェックボックスの値を取得する

HTML Serviceでこういう機能を作る







チェックボックスを選択してから「ボタン」をクリックすると
選択されているチェックボックスのvalueがアラートに出る



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <form id="form1">
    <input type="checkbox" name="check1" id="check1_1" value="選択肢1" checked="checked">
    <label for="check1_1">選択肢1</label>
    <br>
    <input type="checkbox" name="check1" id="check1_2" value="選択肢2">
    <label for="check1_2">選択肢2</label>
    <br>
    <input type="checkbox" name="check1" id="check1_3" value="選択肢3">
    <label for="check1_3">選択肢3</label>
  </form>
  <br>
  <button type="button" id="bt">ボタン</button>
  <script>
    document.getElementById("bt").onclick = get_check1;

    function get_check1() {
      var form = document.getElementById("form1");
      var check1 = form.check1;
      var array = [];
      for (var i = 0; i < check1.length; i++) {
        if (check1[i].checked) {
          array.push(check1[i].value);
        }
      }
      alert(array);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


フォームを置く
1つめのチェックボックス
そのラベル

2つめのチェックボックス
そのラベル

3つめのチェックボックス
そのラベル


ボタンを置く

ボタンがクリックされたらget_check1を実行する

この機能がやること
対象のフォームを取得して
対象のグループ(name)を取得して
結果を入れる配列を用意して
チェックボックスの状態をひとつずつ取得する
もしチェックされていたら
arrayに追加する


結果をアラートに出す







選択されているラジオボタンの値を取得する

HTML Serviceでこういう機能を作る






ラジオボタンを選択してから「ボタン」をクリックすると
選択したラジオボタンのvalueがアラートに出る



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <form id="form1">
    <input type="radio" name="radio1" id="radio1_1" value="yes" checked="checked">
    <label for="radio1_1">はい</label>
    <br>
    <input type="radio" name="radio1" value="no" id="radio1_2">
    <label for="radio1_2">いいえ</label>
  </form>
  <br>
  <button type="button" id="bt">ボタン</button>
  <script>
    document.getElementById("bt").onclick = get_radio;

    function get_radio() {
      var form = document.getElementById("form1");
      var radio1 = form.radio1;
      var selected_value = radio1.value;
      alert(selected_value);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


フォームを置く
1つめのラジオボタン
そのラベル

2つめのラジオボタン
そのラベル


ボタンを置く

ボタンがクリックされたらget_radioを実行する

この機能がやること
対象のフォームを取得して
対象のグループ(name)を取得して
選択されている値を取得して
アラートに出す






補足

こういうやり方もある

コード.gs
function get_radio_value(id) {
  var form = document.getElementById(id)
  for(var i = 0; i < form.length; i++) {
    var elem = form[i]
    var check = elem.checked
    if(check === true){
      return elem.value
    }
  }
  return "";
}



テキストが入力された時に反応する機能を作る

HTML Serviceでこういう機能を作る




↑のようにテキストエリアでキーを押したらそのキーコードをアラートに出す



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta"></textarea>
  <script>
    document.getElementById("ta").onkeyup = ta_keyup;

    function ta_keyup(e) {
      var key_code = e.keyCode;
      alert(key_code);
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


テキストエリアを置く idはta

taでキーボードのキーが上がったら

この機能がやること
キーコードを取得して
アラートを出す






改行が入力された時に反応する機能を作る

HTML Serviceでこういう機能を作る




↑のようにテキストエリアに改行がひとつ入ったらアラートを出す



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <textarea id="ta"></textarea>
  <script>
    document.getElementById("ta").onkeyup = ta_keyup;

    function ta_keyup(e) {
      var key_code = e.keyCode;
      var value = this.value;
      var value_split = value.split("\n");
      if (key_code == 13) {
        if (value_split[value_split.length - 1] == "") {
          alert("改行が追加されました")
        }
      } else {}
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


テキストエリアを置く idはta

taでキーボードのキーが上がったら

この機能がやること
キーが上がったキーのキーコードを取得して
taに入力されている値を取得して
それを改行(\n)で区切って
もしキーコードが13で
もし改行が一つ入ったら (改行で区切った最後の値が空なら)
アラートを出す









セレクトボックスを作る

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




クリックすると選択肢が表示される



コード.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" selected>選択肢2</option>
      <option value="選択肢3">選択肢3</option>
    </select>
  </body>
</html>
意訳
これはHTML5文書です


セレクトボックスを置く
1つ目の選択肢
2つ目の選択肢 開いた時に選択しておく
3つ目の選択肢






補足




このように表示したい場合は

<select id="select1">
<select id="select1" size="3">
とする


チェックボックスを作る

HTML Serviceでこういうチェックボックスを作る







コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <input type="checkbox" name="check1" id="check1_1" value="選択肢1" checked="checked">
  <label for="check1_1">選択肢1</label>
  <br>
  <input type="checkbox" name="check1" id="check1_2" value="選択肢2">
  <label for="check1_2">選択肢2</label>
  <br>
  <input type="checkbox" name="check1" id="check1_3" value="選択肢3">
  <label for="check1_3">選択肢3</label>
</body>
</html>
意訳
これはHTML5文書です


1つ目のチェックボックスを作る デフォルトでチェックを入れておく
それにラベルを付ける

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

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





補足


複数選択ではなくひとつだけ選択する場合はラジオボタンを作る
ラジオボタンを作る

ラジオボタンを作る

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






コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<body>
  <input type="radio" name="radio1" id="radio1_1" value="yes" checked="checked">
  <label for="radio1_1">はい</label>
  <br>
  <input type="radio" name="radio1"  id="radio1_2" value="no">
  <label for="radio1_2">いいえ</label>
</body>
</html>
意訳
これはHTML5文書です


1つ目のラジオボタンを作る デフォルトでチェックを入れておく
それにラベルを付ける

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





補足


1. name="raido1"
これでラジオボタンの選択肢をグールプ化している
ラジオボタンはこのグループの中から一つだけ選べる

2. checked="checked"
これを設定すると最初から選択されている状態にできる

3. label for=
idを指定してラジオボタンにテキストを付ける
このテキストを選択してもラジオボタンにチェックが入るようになる
これがないとラジオボタンの丸いアイコンをクリックしないとチェックできない
↓こんな感じでチェックを入れにくい
はい
いいえ

4. 複数選択
複数選択可能にしたい場合はチェックボックスを使う
チェックボックスを作る

ハイパーリンクを作る

HTML Serviceでこういうリンクを作る

HOMEを開く



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <a href="http://www.pre-practice.net/" target="_blank">HOMEを開く</a>
  </body>
</html>
意訳
これはHTML5文書です


テキストにリンクを付ける





新規ウィンドで開きたい場合は target="_blank"
現在のページで開きたい場合は target="_self"

他のtargetも知りたい(クリックするとGoogle検索結果が開きます)

クリックされた時に反応する機能を作る

HTML Serviceでこういう機能を作る




指定した要素(この例ではボタン)をクリックしたらアラートを出す



コード.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() {
      alert("クリックされました")
    }
  </script>
</body>
</html>
意訳
これはHTML5文書です


ボタンを置く idはbt

idがbtの要素がクリックされたらbt_clickedを実行する
この機能がやること
アラートを出す







テキストの入力欄にメッセージを表示する

HTML Serviceでこういう入力欄を作る



入力欄に何も入力されていない時にplaceholderのテキストが表示される
何か入力されたら消える



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="text" placeholder="テキストを入力して下さい">
  </body>
</html>
意訳
これはHTML5文書です


テキストの入力ボックスを置く





ボタンを作る

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





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <button type="button">ボタン</button>
  </body>
</html>
意訳
これはHTML5文書です


ボタンを置く





複数行のテキスト入力エリアを作る

HTML Serviceでこういう入力欄を作る





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <textarea></textarea>
  </body>
</html>
意訳
これはHTML5文書です


テキストエリアを置く





テキストの入力エリアを作る

HTML Serviceでこういう入力欄を作る





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="text">
  </body>
</html>
意訳
これはHTML5文書です


テキストの入力ボックスを置く





時間の入力エリアを作る

HTML Serviceでこういう入力欄を作る





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="time">
  </body>
</html>
意訳
これはHTML5文書です


時間の入力ボックスを置く





日付けの入力エリアを作る

HTML Serviceでこういう入力欄を作る





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
  <body>
    <input type="date">
  </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)では、以下の画面を開くリンクを取得できました



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

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

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



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); 
}


関連記事

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


参考

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

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

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

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


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


eventsのitemsが存在しないか長さが0より大きくなければ
'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





2つの日時の時間差を出したい(時間、分)


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


以下は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);
}
意訳
この処理は以下の処理を実行する
1つ目の日時を指定して
2つ目の日時を指定して
2つの日時の差分を取得して
差分はミリ秒で出るので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の要素を取得して
以下を3回繰り返す
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;
で範囲の先頭列の番号を指定して

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


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月11日月曜日

Fusion Tables API を利用する手順


Fusion tableは December 3, 2019 に終了とのこと
https://support.google.com/fusiontables/answer/9185417
Notice: Google Fusion Tables Turndown
Last updated: December 11, 2018
Google Fusion Tables and the Fusion Tables API will be turned down December 3, 2019. Embedded Fusion Tables visualizations — maps, charts, tables and cards — will also stop working that day. Maps using the Fusion Tables Layer in the Maps JavaScript API v3.37 will start to see errors in August 2019.



今回はFusion Tables API を利用するまでの手順を書きます
(2017/12/11現在に試した手順です)

  1. Fusion TabelsをGoogle Driveに追加する
  2. Fusion Tables APIを有効にする



1. Fusion TabelsをGoogle Driveに追加する


Google Driveのmy-driveにアクセスします
https://drive.google.com/drive/my-drive


新規>その他>アプリを追加 を選択します


検索ボックスに「fusiontable」と入れて確定すると以下のようにFusion Tablesがヒットするので「+ 接続」をクリックします


追加されたら「OK」をクリックして閉じます


新規>その他>「Google Fusion Tables」を選択します


「Create empty table」をクリックします


新しいTableが作成されました



2. Fusion Tables APIを有効にする


スクリプトエディタを開きます
https://script.google.com/macros/create


リソース>「Google の拡張サービス」を選択します


Fusion Tables API を「ON」にします


「Google API コンソール」をクリックします


上部の検索ボックスで「fusion」と入れて出てくる「Fusion Tables API」を選択します


開いたページで「有効にする」をクリックします


完了すると以下のような画面になります

これで Fusion Tables API を使う準備ができました


参考

About Fusion Tables
https://support.google.com/fusiontables/answer/2571232

Using the API
https://developers.google.com/fusiontables/docs/v1/using

Getting Started
https://developers.google.com/fusiontables/docs/v1/getting_started

Using the API
https://developers.google.com/fusiontables/docs/v1/using
Quotas
The default request quota limits are the following:
25,000 requests per day per API project, where reads count as one request and writes count as five requests.
30 write requests per minute per table
You may request more quota at the Google APIs Console under the "Quotas" tab.
The storage quota limits are:
250 MB per table
1 GB total among all your tables
Type and size of files to import
https://support.google.com/fusiontables/answer/171181?hl=en