Googleカレンダーのデータ取得ができる事が確認できたので、今回はカレンダー表示を作ってみます。
簡易な見た目ですが、カレンダーの基本を抑えた必要最低限の表示なので、デザインについてはまた別に考える必要があります。
でも、アプリの基本形として雛形になればと思いWebデスクトップに追加しておきます。
デモ
カレンダーアイコンをダブルクリックすると、カレンダーが開きます。
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回の最終Commitは"#32"です。
解説
カレンダーウィンドウを開くと、現在の月の表示が表示されます。
年月の書いてある横の三角ボタンを押すと、前の月、次の月、のどちらかに表示が切り替わります。
GoogleAppsScriptソースの更新
前回取得したGoogleAppsScriptも少しソースを変更してあります。
// 休日の取得
function holidays(year, month){
const calendarId = 'ja.japanese#holiday@group.v.calendar.google.com'
const holidayCalendar = CalendarApp.getCalendarById(calendarId)
const dt = new Date()
const y = year || dt.getFullYear()
const m = month ? Number(month) -1 : dt.getMonth()
const m1 = m
const m2 = m+1
const start = new Date(y, m1, 1)
const end = new Date(y, m2, 0)
console.log(start,end, y,m)
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
}
function doGet(e){
const param = e ? e.parameter : {}
const y = Number(param.year)
const m = Number(param.month)
const datas = holidays(y,m)
const json = JSON.stringify({
e : e,
name : "holidays",
year : y,
month : m,
datas : datas,
})
console.log(json)
const response = ContentService.createTextOutput()
response.setMimeType(MimeType.JSON)
response.setContent(json)
return response
}
前回のソースを上記に入れ替えて、デプロイの更新をすると、スクリプトが更新されます。
カレンダーappのソース解説
前回は、GASのデータ取得までの工程だったので、表示もほぼ無かったし、月を切り替える更新処理なども入っていなかったので、大幅に変更することにしました。
表示に関しては、Javascriptでは、日付データに曜日の値があり、日曜日が0、月曜日が1という風に数字で曜日を取得できます。
ビジネスでは、月曜スタートで使うケースが多いのですが、一般的な日曜日スタートの表にしてみました。
カレンダーの表示アルゴリズムを簡易に説明すると、
1. 月の1日の曜日を取得
2. 月の最終日を取得
3. 何週あるかを取得
この３つのデータ取得ができると、テーブルでカレンダーを表示することができます。
そして、表示している年と月をGASにGETクエリを付けて送ると、その月の国民の休日データを取得できるようにしています。
動きは遅いですが、GASの中のカレンダーIDを変更すると、自分のカレンダーや、他のカレンダーなどいろいろなバリエーションを盛らせられます。
イベントでは、前の月と次の月の年月を、Date関数を使って取得して、そのままGAS連携→表示クラスを起動の手順で行っています。
あとがき
カレンダーをWebデスクトップとして利用する場合は、Googleアカウントでログインすると、自動的に連動できるようになります。（今回はしてませんが）
そして、Webデスクトップ上で、カレンダーデータの追加や更新ができれば、簡易に仕事する環境が作れたりもしますからね。
でも、実はカレンダーって非常に奥深くて、
今回は月表示のみでしたが、週表示や日表示、3日表示のような切り替えが、だいたいのカレンダーアプリやサービスでは表示されると思います。
中には大規模な年表示や、イベントだけのリスト表示をしたり、データ検索から、他人とのカレンダー共有連携などの機能も無いと、今どきのカレンダーアプリとしては、機能不足なんですよね。
まあ、Webデスクトップもこれからのシステムなので、この辺は、年月を経て機能追加して、普通に使えるツールになることでしょう。
0 件のコメント:
コメントを投稿