2018/06/29

【javascript】Googleカレンダーに予定を追加するURLを生成するブックマークレットを書いた

先日,今年行きたい花火大会をまとめる記事を書いていた時そういえばURLでGoogleカレンダーに予定を追加することができるって聞いたなあ,せっかくだしそのリンク貼っとくかと思って調べたのだが,手打ちでURLを作るのはいかにも面倒.

安心と信頼のPythonで書いてもよかったのだが,ブログ執筆中に使うことが多いことを考えればブラウザ上で動いたほうがいいだろう,もっと言うとブックマークレットにすればいいよねということでちょっと書いてみた.

Sponsored Link

コード

javascript:(
function(){  
var title = prompt('予定のタイトルを入力してください');
var date_begin = prompt('予定の開始日時を入力してください\n(Example:2018年8月4日19時00分→201808041900)');
var date_end = prompt('予定の終了日時を入力してください\n(Example:2018年8月4日22時00分→201808042200)');
function zerofill(num){
    return ('0'+num).slice(-2);
}
function formatDate(date){
    var year = date.slice(0,4);
    var month = date.slice(4,6);
    var day = date.slice(6,8);
    var hour = date.slice(8,10);
    var minute = date.slice(10);
    var datestr = year + '-' + month + '-' + day + 'T' + hour + ':' + minute +':00+09:00';
    var date = new Date(datestr);
    var response = date.getUTCFullYear() + zerofill(date.getUTCMonth()+1) + zerofill(date.getUTCDate()) + 'T' + zerofill(date.getUTCHours()) + zerofill(date.getUTCMinutes()) + zerofill(date.getUTCSeconds()) + 'Z';
    return response
}
var location = prompt('場所を入力してください');
var dates = formatDate(date_begin) + '/' + formatDate(date_end);
var url = 'http://www.google.com/calendar/event?' +
'action=TEMPLATE' +
'&text=' + encodeURIComponent(title) +
'&details=' + encodeURIComponent(title) +
'&location=' + encodeURIComponent(location) +
'&dates=' + dates +
'&trp=' + 'false'+
'&sprop=' + encodeURIComponent('https://blog.retore.xyz/') +
'&sprop=name:' + encodeURIComponent('ものぐさブルーライト(retore)');
var d = window.open().document;
d.writeln('<textarea rows=15 cols=80>'+url+'</textarea>');
d.close();
})();

解説的メモと参考にしたサイト

まずはpromptでタイトル,開始日時,終了日時,場所の入力を要求する.日時に関してはyyyyMMddHHmmssで入力する.

日時はUTC時間で,かつ決められたフォーマットの文字列に落とし込みたい.というわけで

  1. 入力された文字列をyyyy, MM, dd, HH, mm, ssに分解した上で
  2. 適切な文字列を再生成し,
  3. それをもとにDate型を生成した上で
  4. UTC時間でのyyyy(以下略)を取得
  5. それを更にGoogle Calendarの要求する文字列に直す

というゴリ押しをすることになった.

trpやspropはお好みで調整していただければ.というか追加された予定見てみたけどこいつらが反映されている気がしないのだが,もしかしてなくてもいいのでは……

これで入力して生成されるリンクは例えばこんなの.これで今年の鎌倉花火大会の予定がGoogleカレンダーに追加される.

参考にしたのは「Googleカレンダーへ予定追加するリンクのURL」(エンジニアをリングする).日時をUTCにしないといけないことになかなか気づかなかったので大変参考になった.

おわりに

これから何かイベントを紹介する時とかに積極的に使っていけたらと思う.

予定をGoogleカレンダーで一元管理していない人はこの機会に是非.PCで登録してもスマホに反映されるしやっぱりクラウドは最高だぜ.

0 件のコメント:

コメントを投稿