GDG DevFest 2014 Spring GAS hanson Web Application

この資料について

下記サンプルは、2014/04/06開催されたGDG DevFest2014 SpringのGASハンズオンの拡張資料です。

始める前に

メインのハンズオンが終わっていることを期待しています。設定等は下記資料参照のこと
https://docs.google.com/presentation/d/1MFWNWHOhuFJXa_vgCnRYOL0Tu6TiNszCwovAHuJPy94/edit#slide=id.p

動作デモ

https://script.google.com/macros/s/AKfycbyD8rM3yM0ofDMtyXOyosE5hocyzqhgjXr0UnxjaA25nzPfGmU/exec
初回実行時に承認ダイアログが出ます。実行権限はアクセスした本人になっています。検索クエリ等は収集していません。

main.gs

function doGet() {

  ytJson = getYoutubeResult()
  var template = HtmlService.createTemplateFromFile("list.html");
  var body = template.evaluate().getContent();
  //Logger.log(body);

  return HtmlService.createHtmlOutput(body).setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

function getYoutubeResult(query, cnt){
  _q = check_query(query)
  _cnt = check_cnt(cnt)
  var result = YouTube.Search.list("snippet", {
    q: _q,
    order: "date",
    maxResults: _cnt,
  });
  Logger.log("get youtube");
  Logger.log( _q );
  Logger.log( _cnt );

  return result
}


function check_query(arg){
  Logger.log("check query");  
  Logger.log( arg );
  if(arg==undefined){
    return 'Google Apps Script';
  } else {
    return arg;
  }
}

function check_cnt(arg){
        return arg || 30;
}

list.html

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<style>
body{
  padding: 30px;
}

.contents{
  background-color: #EEE;
}
.ytVideo{
  margin: 3px;
  padding: 5px;
  float: left;
  background-color: #fff;
  border: 1px gray solid;
}

#controls{
  padding: 10px;
  margin: 10px;
  border: 1px gray solid;
  border-radius: 10px;
}

#ytList{
  float: left;
  padding: 30px;
  background-color: #AAA;
}
</style>

<script>
$(function() {
update();
$("#seatch_button").on('click', update );
$("#remove_button").on("click", removeItems );

function show_yt_list(ytJson) {
  var list = $('#ytList');
  list.empty();
  list.append('<div class="contents">');
  for (var i = 0; i < ytJson.items.length; i++) {
    list.append(
    '<div class="ytVideo">' + 
    "<a href='https://www.youtube.com/watch?v=" + ytJson.items[i].id.videoId +"' target=_blank>" +
    "<img src=" + ytJson.items[i].snippet.thumbnails.medium.url + "><br>" +
    //ytJson.items[i].snippet.title +
    "</a>" +
    '</div>');
  }
  list.append('</div');
}

function removeItems(){
  $("#ytList").html("Empty");
}

function update(){
  removeItems();
  var _query = $("#search_query").val();
  var _count = $("#search_count").val();
  console.log( _query );
  console.log( _count );
  google.script.run.withSuccessHandler(show_yt_list).getYoutubeResult(_query, _count);
}
});


</script>

<div id='controls'>
  <label>Search:</label>
  <input type='text' size=50 id="search_query" value="Google Apps Scripts"/>
  <input type='text' size=3 id="search_count" value="20"/>  
  <button id="seatch_button">update</button>
  <button id="remove_button">reset</button>
</div>
<div id="ytList">empty</div>