Google Calendar の情報をAPIで取得して、Timeline APIで表示する（その２）
1.Timeline APIの表示最適化
前回の記事では、とりあえず、Google Calendar の情報をAPIで取得して、TimeLine APIで表示させるところまでを紹介してみたのですが、これだと、Timeline の表示がなんとなくプアでもう少しいろいろとしたいと思うところ。で、今回は、その表示関連の設定についてまとめたい。
2.マニュアルが無い
といいつつ、公式サイトにいっても、この表示設定関連はまだマニュアルが存在しなくて、”コードそのものをみろ”みたいな感じになっているので、その部分を噛み砕いてみる。ちなみにコードはこちら。
以下に示すコードのうち、”/* 以下が表示関連の設定 */”の項目に書いているものが、該当部分（前回記述せず）。
以下に各設定内容を書き込んでいます（一部未解読部分あり）*1。
//javascript 関数 function onLoad() { /* datasetting */ var now=new Date(); /* Timeline Setting */ var eventSource = new Timeline.DefaultEventSource(); /* 以下が表示関連の設定 */ //表示設定クラス呼び出し var bandTheme=Timeline.ClassicTheme.create(); // 一週間の開始曜日設定（日曜日が0で、そこから順番に増えていく。1は月曜日） bandTheme.firstDayOfWeek = 1; //背景色の設定。表示するカレンダーの数だけ設定する。 bandTheme.ether.backgroundColors=[ "#ccffcc" , // Background Color for First Calendar "#ffffcc" // Background Color for Second Calendar ]; //ハイライト部の色 bandTheme.ether.highlightColor="#ccffcc"; //ハイライト部の透明度 bandTheme.ether.highlightOpacity=90; //月などの区切りラインの表示非表示設定 bandTheme.ether.interval.line.show=true; //その区切りラインの色 bandTheme.ether.interval.line.color="#330066"; //その区切りラインの透明度 bandTheme.ether.interval.line.opacity=30; //週末表示の色 bandTheme.ether.interval.weekend.color="#99ff33"; //週末表示の透明度 bandTheme.ether.interval.weekend.opacity=60; //Markerの表示位置 bandTheme.ether.interval.marker.hAlign="Bottom"; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.hBottomStyler=function(elmt) { elmt.className = "timeline-ether-marker-bottom"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.hBottomEmphasizedStyle=function(elmt) { elmt.className = "timeline-ether-marker-bottom-emphasized"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.hTopStyler=function(elmt) { elmt.className = "timeline-ether-marker-top"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.hTopEmphasizedStyler=function(elmt) { elmt.className = "timeline-ether-marker-top-emphasized"; }; bandTheme.ether.interval.marker.vAlign="Right"; //Markerの表示位置 //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.vRightStyler=function(elmt) { elmt.className = "timeline-ether-marker-right"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.vRightEmphasizedStyler=function(elmt) { elmt.className = "timeline-ether-marker-right-emphasized"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.vLeftStyler=function(elmt) { elmt.className = "timeline-ether-marker-left"; }; //Markerの表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する) bandTheme.ether.interval.marker.vLeftEmphasizedStyler=function(elmt) { elmt.className = "timeline-ether-marker-left-emphasized"; }; // 各イベント表示バンドのオフセット設定（em単位） bandTheme.event.track.offset=0.2; // 各イベント表示バンドの高さ設定（em単位） bandTheme.event.track.height=1.2; // 各イベント表示バンドの隙間設定（em単位） bandTheme.event.track.gap=0.2; // イベントのマーク画像設定 bandTheme.event.instant.icon="http://simile.mit.edu/timeline/api/images/dull-blue-circl.png"; bandTheme.event.instant.lineColor="#0066cc"; //未解読 bandTheme.event.instant.impreciseColor="#0066cc"; //未解読 bandTheme.event.instant.mpreciseOpacity=20; //未解読 bandTheme.event.instant.showLineForNoText=true; //未解読 bandTheme.event.duration.color="#0066cc"; //未解読 bandTheme.event.duration.opacity=90; //未解読 bandTheme.event.duration.impreciseColor="#0066cc"; //未解読 bandTheme.event.duration.impreciseOpacity=20; //未解読 //イベントタイトルのバーと重なる部分のテキスト色 bandTheme.event.label.insideColor="#ffffcc"; //イベントタイトルのバーと重ならない部分のテキスト色 bandTheme.event.label.outsideColor="#0066cc"; //イベントタイトルの表示長さ(px) //この幅によって表示するテキスト長さが変わる。 bandTheme.event.label.width=250; //イベントハイライト部分の色。表示するカレンダーの数だけ設定。 bandTheme.event.highlightColors=["#ffff00", "#ffff00"]; //イベントクリック時の吹き出し表示の幅設定(px) bandTheme.event.bubble.width=250; //イベントクリック時の吹き出し表示の高さ設定(px) bandTheme.event.bubble.height=125; //ベントクリック時の吹き出し表示のタイトル部分に使用するCSS クラスの名前 //(CSS内にその設定を記述する)（以下にサンプルあり） bandTheme.event.bubble.titleStyler=function(elmt) { elmt.className = "timeline-event-bubble-title"; }; //ベントクリック時の吹き出し表示のイベント内容部分に使用するCSS クラスの名前 //(CSS内にその設定を記述する)（以下にサンプルあり） bandTheme.event.bubble.bodyStyler=function(elmt) { elmt.className = "timeline-event-bubble-body"; }; //ベントクリック時の吹き出し表示のイベント画像に使用するCSS クラスの名前 //(CSS内にその設定を記述する)（以下にサンプルあり） bandTheme.event.bubble.imageStyler=function(elmt) { elmt.className = "timeline-event-bubble-image"; }; //ベントクリック時の吹き出し表示のイベントwikiに使用するCSS クラスの名前 //(CSS内にその設定を記述する)（以下にサンプルあり） bandTheme.event.bubble.wikiStyler=function(elmt) { elmt.className = "timeline-event-bubble-wiki"; }; //ベントクリック時の吹き出し表示のイベント時間表示に使用するCSS クラスの名前 //(CSS内にその設定を記述する)（以下にサンプルあり） bandTheme.event.bubble.timeStyler=function(elmt) { elmt.className = "timeline-event-bubble-time"; }; /* 表示関連の設定終了 */ var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, timeZone: +9, date: now, width: "70%", intervalUnit: Timeline.DateTime.WEEK, intervalPixels: 100, theme:bandTheme //上記の設定をここで読み込ませる }), Timeline.createBandInfo({ eventSource: eventSource, date: now, timeZone: +9, showEventText: false, trackHeight: 0.3, trackGap: 0.2, width: "30%", intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 60, theme:bandTheme //上記の設定をここで読み込ませる }) ]; bandInfos[1].syncWith = 0; bandInfos[1].highlight = true; tl = Timeline.create(document.getElementById("mytimeline"), bandInfos); Timeline.loadXML('http://www.dlinkbring.com/cache/art_timeline.xml', function(xml, url) { eventSource.loadXML(xml, url); }); }
3.こんな感じになる
上記の設定を入れ込むと、こちらのサイト(dLINKbRING.Art)に表示しているようなものができあがります。
ちなみに、各イベントのタイトルテキストのサイズは、このカレンダーを入れている"div"のテキストサイズ設定で設定できます。
CSSのサンプルは以下*2。
4.雑感//CSS ファイルサンプル div#mytimeline{ line-height:120%; font-size:80%; height:400px; width:585px; border: 1px solid #cc0033; font-weight:lighter; } .my_timeline-event-bubble-title { font-size:small; font-weight: bold; border-bottom: 1px solid #cc0033; margin-bottom: 0.5em; } .my_timeline-event-bubble-body { font-size:small; font-weight: slighter; } .my_timeline-event-bubble-wiki { margin: 0.5em; text-align: right; color: #A0A040; } .my_timeline-event-bubble-wiki a { color: #A0A040; } .my_timeline-event-bubble-time { font-size:x-small; color: #808080; line-height:100%; } .my_timeline-event-bubble-image { float: right; padding-left: 5px; padding-bottom: 5px; }.my_timeline-container { position: relative; overflow: hidden; }
ということで、これ、まだ、未解読部分はあるものの結構使える。これを使って、ファイラーなんかも作ると便利とおもうのです。時間軸でファイルを探したいときって、結構あるので。それは、これからトライという感じ。
関連リンク：
SIMILE | Timeline
関連サーチ：
Timeline(Google)
Timeline(Technorati.jp)
Timeline(YouTube)
Timeline(AMAZON.com)
Powered BY AmazoRogi
