前回までの説明
さて、前回ゴールイメージと実際のコード全体を明示しました。お忘れのかたは以下の記事をどうぞ。
さて、続きとなる今回は、Urlfetchしてから、スプレッドシートに表示するためのデータを配列に格納する部分を見ていきます。
コード全体像のおさらい
前回示したコードの全容は以下でした。前回はvar token…までで利用されている、①GithubAPIの内容②GASのPropertiesServiceについて説明しました。
function setTitleFromGithub() {
//github_apiで稟議書ファイルを取得。利用するAPIはContents APIで一旦一覧取得
var url = "https://api.github.com/repos/{User_name}/{repository_name}/contents/";
var token = PropertiesService.getScriptProperties().getProperties();
var option = {
method: 'get',
contentType: 'application/json; charset=utf-8',
muteHttpExceptions: true,
"headers": {"Authorization": "token " + token.github_token}
};
// UrlFetchでデータを取得して、JSONデータをパースする
var response = UrlFetchApp.fetch(url,option);
var datas = JSON.parse(response);
// datasをスプレッドシートに入力できるように一次配列にする
var data = [];
for(var i = 0; i < datas.length; i++){
data.push([i,datas[i].path]);
}
//対象となるシートを指定して、データを貼り付ける
var sheet = SpreadsheetApp.getActiveSheet();
sheet.getRange(1,1,data.length,data[0].length).setValues(data);
}Step1 : Urlfetchしてデータを取得する
// UrlFetchでデータを取得して、JSONデータをパースする
var response = UrlFetchApp.fetch(url,option);
var datas = JSON.parse(response);UrlfetchApp.fetchというメソッドを利用すると、指定したurlにアクセスして様々なデータを取ってくることができます。今回の場合、urlには var url で設定したGithubAPI ContentsAPIのurlが含まれています。urlの後ろについている、optionについては、その取得方法や一緒に送るデータが含まれており、こちらは詳細説明を割愛しますが、データを取得する場合はmethodを ‘get’とします。データを送る場合はpostなのですが、getの方が利用頻度は高いと思います。
あとは、headersという部分に、Github上で作成したtoken(personal token)の情報を入れて、一緒にリクエストしています。これは、私はこのトークンを持ってる人だから、このレポジトリにちゃんとアクセスさせてね（今回の場合は多めの回数でもアクセスさせてね）という意味を持ちます。トークンはOAuthという技術に関連しますが、ここら辺は深入りすると重いので一旦通行手形みたいなのだとイメージしていただいて、これをurlと一緒にheaderに入れて渡せばいいことあるんだなくらいの理解でいいです。
さて、次にJSON.parse(response)です。
これは、さっきurlfetchで取得したデータがresponseという変数に格納されているので、それをJSON（Javascript Object Notation）形式に変換するものです。なぜ変換が必要かというと、プログラミングは扱いやすいデータの型があるのですが、ここではJSONというAPIを利用する場合に多く用いられる方法で読み替えているイメージです。そして、読み替えたデータが今datasという変数に格納されている、という段階まできました。
Step2 : Arrayを使ってスプレッドシートにデータ張り付けできるように整形する
// datasをスプレッドシートに入力できるように一次配列にする
var data = [];
for(var i = 0; i < datas.length; i++){
data.push([i,datas[i].path]);
}さて、取得してきたデータを確認してもらえればわかるのですが、データがobject型で多次元型の構造になっています。そして、いらないデータも多く含まれています（shaとかなんやらかんやら）。各データにそれぞれ活用する意味はあるのですが、今回のケースで使うのはマージしたファイルの名前だけなので、その部分だけ抽出する処理になります。
var data = []; は、単にArray（配列）という形式の入れ物を作っているだけです。ここの中に、スプレッドシートに張り付けたいデータだけをdatasから抽出して、入れ込んでいきます。
for(var i =….は、取得したdatasをそれぞれ１個ずつ連番と、データからファイル名を取り出して、変数dataの配列内に入れています。pushという部分がそうです。
for文やその他の基本的なGASの構文はおいおい別記事で説明していきますが、パッと勉強してみたいという方は、隣IT（https://tonari-it.com/gas-for/）かJavascriptの本の該当箇所を読まれるといいかと思います。
まとめ
さて、今回の記事ではUrlfetchでデータをAPIから取得して、対象部分だけをdataという配列の中に格納しました。これまでGASやJavascriptに触れたことがない方は、よくわからないってなるかもしれませんが、まずは写経してわからなければ調べてを繰り返していただけるといいかと思います。そのうち、このブログでもGASのもととなっているJavascript系の基本構文くらいは記事にしていきたいなと思います。
