GAS (Google Apps Script)通称、
ガス
以前もGoogleSpreadSheetの連携で使ったガスですが、これ本当に便利で利便性が高い機能なんですよ。
Web制作でもかなりかゆいところに手が届くヤツなので、扱い慣れておいたほうがいいですね。
Googleの結構いろいろなWebアプリのデータをJavascriptだけで取得したり、活用できるので、今回はカレンダー機能を作ってみたいと思いました。
ただ、完璧なカレンダー機能となると、少し大掛かりな開発になりそうだったので、
今回は、国民の休日カレンダーを引っ張ってくる機能をWebデスクトップに搭載してみようと思います。
デモ
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回の最終Commitは"Merge pull request #44"です。
解説
今回はほとんど、GAS（ガス）の説明になってしまいます。
手順としては、SpreadSheetの時とほぼ同じですが、今回は開発で気がついた注意点なども記述しておきます。
GASの準備
1. Google Apps Scriptのソース管理画面
今現在どこにもリンクが設置されていなかったので、URL貼り付けておきますので、直接行ってみましょう。
https://script.google.com/home
これまでスプレッドシートなどでAppsScript書いた事ある人は、ここにソース（プロジェクト）一覧が表示されていると思いますが、スプレッドシートとの違いは、アプリからのスクリプト起動をせずに、直接GASプロジェクトを立ち上げるという点です。
2. 新しいプロジェクトを作成
画面左上の「新しいプロジェクト」ボタンをクリックして、新規にプロジェクトを作成してみましょう。
こんな画面が立ち上がりますよ。
3. ソースを作成（コピペして）
function doGet(){
const data = holidays()
const response = ContentService.createTextOutput()
response.setMimeType(MimeType.JSON)
const json = JSON.stringify(data)
response.setContent(json)
console.log(json)
return response
}
// 休日の取得
function holidays(){
const calendarId = 'ja.japanese#holiday@group.v.calendar.google.com'
const holidayCalendar = CalendarApp.getCalendarById(calendarId);
const dt = new Date()
const start = new Date(dt.getFullYear(), 0, 1);
const end = new Date(dt.getFullYear()+1, 0, 1);
const holidayEvents = holidayCalendar.getEvents(start, end);
const holidayNames = holidayEvents.map(holidayEvent => {
const ymd = Utilities.formatDate(holidayEvent.getStartTime(), "JST", "yyyy-MM-dd")
const title = holidayEvent.getTitle()
return {
date : ymd,
title : title,
};
})
return holidayNames
}
4. 新しいデプロイを作成
5. ウェブアプリを選択
6. 適当な名前を付けて「全員」を選択
上記で「デプロイ」ボタンを押します。
7. アクセス認証許可
ボタンをポチる。
おなじみのこの画面、許可しまくってください。（あと2ページほどあるのは割愛）
8. URLをコピっておく
コピったURLをブラウザのアドレスに入れて、ちゃんと国民の休日一覧が、JSONで表示されるか確認する。
これで、GAS下準備は完了です。
ガス完了！！！
Webデスクトップのアプリ設定
続いて、アプリ側は、setting.jsonのアイコンを追加しておきます。
※このカレンダー機能は、最終的には、システムに以降するので、setting.jsonからは消す予定です。今回は、アクセステストの為の設定です。
{
"id" : "calendar",
"name" : "カレンダー",
"type" : "app"
}
そして、app/calendar/ この中にアプリソース一式が入っています。
※ソースはGithubを参照してください。（スミマセン）
先ほどコピった、デプロイURLは、
app/calendar/setting.json
の中のurlというkeyに貼り付けています。
表示して、コンソール確認
あとがき
今回は表示は作っていません。
コンソールに国民の休日が1年分取得できていれば、設定完了です。
次回以降に、カレンダーとしての機能を仕上げていきたいと思います。
0 件のコメント:
コメントを投稿