予定管理にgoogleカレンダーを使用している方は多いと思います。googleカレンダーには共有機能があるのですが、使っているでしょうか？
１つ目は、googleアカウントに共有先からの共有urlを取得して、了承する方法があります。
２つ目は、webに埋め込む形で表示する方法です。
しかし、カレンダー数が増えてくると管理が難しく、表示が重なってきます。これを解決するのに、いろいろなソフトが存在しています。けど、ソフト導入はコストもかかりますしね。
googleカレンダーだけでやろうとすれば、必要なカレンダーのチェックを外したりするとできるのですが、手数が多く必要になる。また、色で違いはでるのですが、どれがどの色なのか正直わかりにくいこともあります。そこで、
めっちゃ雑ですが、個別のカレンダーを並べて表示する方法を紹介します。予定が多い場合にちょっと見やすくなると思います。webに埋め込む形を並べているだけですけど、では、、、
データは下記から、コピーしてもらえば、OKです。
コピー方法は、ここ（googleカレンダーの予定を一括で削除する方法）を参考に。
並べて表示の使用方法は、ツールバーのhtml作成のhtml作成をクリックするだけ。
クリックすると、googleドライブ内にtestdata.htmlのファイルが作成され、それをブラウザで開くだけ。
印刷すれば、この画面を印刷できます。
なんでかわかりませんが、個別で見たほうがわかりやすいこともあるんですよね。不思議ですよね。
内容的にはこんな感じです。
ツールのGASのコードは下記の通りです。練習なんでかなり雑ですよね。
var testArray = [];
var Cal_len ='';
var clist = '';
function onOpen(){
var myMenu=[
{name:"html作成", functionName:"testhtml"}
];
SpreadsheetApp.getActiveSpreadsheet().addMenu("html作成", myMenu) ;
}
function testhtml() {
calendar();
template_top();
//選択されたカレンダーのIDを取得
for(j = 0; j < Cal_len-3; j++) {
var a='<iframe src="https://calendar.google.com/calendar/embed?';
var b='height=350&wkst=1&';
var c='bgcolor=%23ffffff&ctz=Asia%2FTokyo&';
var d='src='+clist.getRange(j+3, 2).getValue();
var e='&src=amEuamFwYW5lc2UjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20';
var f='&color=%233F51B5&';
var g='mode=WEEK&showTz=0&showCalendars=0&showTitle=1"';
var h='style="border-width:0" width="800" height="350"';
var i='frameborder="0" scrolling="no"></iframe>';
var k = a + b + c + d + e + f + g + h + i ;
testArray.push(k)
}
template_end();
DriveApp.createFile('testdata.html',testArray.join("\n"), MimeType.PLAIN_TEXT);
}
function calendar(){
//関数「GetCalendarList()」と同じ（カレンダー一覧は毎回読み込まないといけないので、ここでも実行）
clist = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('カレンダ');
//削除されたカレンダーが残らないように、一度カレンダーの一覧を削除
clist.getRange(1, 1, clist.getLastRow() + 1, 2).clearContent();
Utilities.sleep(1000);
//一覧が白紙になった上で、再度最新のカレンダー一覧を取得、作成
var calendars = CalendarApp.getAllCalendars();
var range = clist.getRange(1, 1, calendars.length + 1, 2);
var d = 0 ;
range.getCell(1, 1).setValue('カレンダ');
for(i = 0; i <= calendars.length - 1; i++) {
range.getCell(d + 2, 1).setValue(calendars[i].getName());
range.getCell(d + 2, 2).setValue(calendars[i].getId());
d = d + 1;
}
Cal_len = calendars.length;
}
function template_top(){
testArray.push("<html>");
testArray.push("<head>");
testArray.push("</head>");
testArray.push("<body>");
}
function template_end(){
testArray.push("</body>");
testArray.push("</html>");
}
1～3行目は、グローバル変数で、個別関数間でデータを使いたい場合に設定するといいみたい。
function onOpenは、スプレッドシートを開いたときに実行する関数（関数名で固定）。
メニューバーにhtml作成を追加するだけ。
Mymenuの配列に増やしていけば、html作成にサブメニューを追加できる。
function testhtmlは、htmlファイルを作成する関数。
calendar()関数は、自分のアカウントのカレンダーリストを取得する関数で、カレンダシートにリストを書き出す。
template_top(),tenplate_end()関数はhtmlファイルの最低限のデータを記載する関数で、cssを追加したりもできると思う。
20行目以降は、カレンダー毎のweb埋め込み情報を追記するコード。中身は、googleカレンダー共有のカスタマイズを参考にしてください。高さや幅、色等を設定しています。どのカレンダーにも休日が表示されるように追加しています。srcが２つあるのはそのためです。
で、37行目にhtmlファイルを作成しているだけです。
htmlファイルや配列の書き出しにちょっと苦労しましたけど、これでテキストを書き出す方法がわかったので良かったです。次はJSONの使い方を試したいと思います。
データを表示させたりする場合は、htmlが使いやすいと思いますね。mapも使えるし。けど、細かい設定をやろうと思うとちょっと大変ですよね。
ウェブデザイナーって重要だと感じますね。
クラウドワークスで参考になりそうなデータを探して遊んでみたいと思います。稼げる技術を持ちたいものです。
ブログ、なんとか続けてる 