<\/div>'
+ + '<\/div>' );
+
+ $controls.hover( function() { self.ctrlShow(); }, function() { self.ctrlHide(); });
+ $('#toggle').click( function() { self.toggle(); } );
+ $('#prev').click( function() { self.go(-1); } );
+ $('#next').click( function() { self.go(1); } );
+
+ $('#jumplist').change( function() { self.goTo( parseInt( $( '#jumplist' ).val() )); } );
+
+ this.ctrlPopulateJumpList();
+}
+
+
+Slideshow.ctrlDebugOn = function()
+{
+ this.debug( 'calling ctrlDebugOn()' );
+ $( '#controls' ).addClass( 'debug' );
+}
+
+Slideshow.ctrlDebugOff = function()
+{
+ this.debug( 'calling ctrlDebugOff()' );
+ $( '#controls' ).removeClass( 'debug' );
+}
+
+Slideshow.ctrlKeys = function( event, key )
+{
+ this.debug( 'calling ctrlKeys()' );
+
+ switch( key.which ) {
+ case 67: // c
+ this.ctrlToggle();
+ break;
+ }
+}
+
+Slideshow.ctrlChange = function()
+{
+ this.debug( 'calling ctrlChange()' );
+ this.ctrlUpdateJumpList();
+}
+
+// -----------------------------------------------------
+
+Slideshow.ctrlPopulateJumpList = function()
+{
+ var self = this; // NOTE: jquery binds this in .each to element
+
+ var list = $('#jumplist').get(0);
+
+ this.$slides.each( function(i) {
+ var text = "-"; // untitled slide
+
+ // todo: use titleSelector if user set??
+ // $(this).find( self.settings.titleSelector ).text();
+
+ var $h1 = $( 'h1', this );
+ if( $h1.length > 0 )
+ {
+ text = $h1.first().text();
+ }
+ else // try h2
+ {
+ var $h2 = $( 'h2', this );
+ if( $h2.length > 0 )
+ {
+ text = $h2.first().text();
+ }
+ else // try h3
+ {
+ var $h3 = $( 'h3', this );
+ if( $h3.length > 0 )
+ {
+ text = $h3.first().text();
+ }
+ }
+ }
+
+ list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
+ });
+}
+
+Slideshow.ctrlUpdateJumpList = function()
+{
+ $('#jumplist').get(0).selectedIndex = (this.snum-1);
+}
+
+Slideshow.ctrlShow = function()
+{
+ $( '#navLinks' ).css( 'visibility', 'visible' );
+}
+
+Slideshow.ctrlHide = function()
+{
+ $( '#navLinks' ).css( 'visibility', 'hidden' );
+}
+
+Slideshow.ctrlToggle = function()
+{
+ // toggle control panel
+ var $navLinks = $( '#navLinks' );
+
+ if( $navLinks.css( 'visibility' ) != 'visible' )
+ $navLinks.css( 'visibility', 'visible' );
+ else
+ $navLinks.css( 'visibility', 'hidden' );
+}
+
+
+// ------------------------------------------------
+
+Slideshow.ctrlAddEvents = function()
+{
+ $( document ).on( 'slideshow.init', $.proxy( Slideshow.ctrlInit, this ));
+ $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.ctrlDebugOn, this ));
+ $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.ctrlDebugOff, this ));
+ $( document ).on( 'slideshow.keys', $.proxy( Slideshow.ctrlKeys, this ));
+ $( document ).on( 'slideshow.change', $.proxy( Slideshow.ctrlChange, this ));
+}
+
+Slideshow.ctrlAddStyles = function() {
+ this.debug( 'add builtin controls css via inline style elements' );
+
+ var styleProjection =
+"";
+
+ var styleScreen =
+"";
+
+ $( 'head' ).append( styleProjection );
+ $( 'head' ).append( styleScreen );
+}
+
+Slideshow.ctrlAddStyles();
+Slideshow.ctrlAddEvents();
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/jquery.slideshow.counter.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/jquery.slideshow.counter.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,118 @@
+/***********
+ *
+ * counter addon:
+ *
+ * adds slide counter (e.g. 1/7)
+ * - use key-n to toggle slide counter (in projection mode)
+ *
+ * layout structure:
+ *
+ * .layout
+ * > #counter (e.g. 1/7)
+ */
+
+
+Slideshow.counterInit = function()
+{
+ this.debug( 'calling counterInit()' );
+
+ // if no div.layout exists, create one
+ if( $( '.layout' ).length == 0 )
+ $( 'body' ).append( "
");
+
+ $( '.layout' ).append( "
" );
+
+ this.counterUpdate();
+}
+
+Slideshow.counterDebugOn = function()
+{
+ this.debug( 'calling counterDebugOn()' );
+ $( '#counter' ).addClass( 'debug' );
+}
+
+Slideshow.counterDebugOff = function()
+{
+ this.debug( 'calling counterDebugOff()' );
+ $( '#counter' ).removeClass( 'debug' );
+}
+
+Slideshow.counterKeys = function( event, key )
+{
+ this.debug( 'calling counterKeys()' );
+
+ switch( key.which ) {
+ case 78: // n
+ this.counterToggle();
+ break;
+ }
+}
+
+Slideshow.counterChange = function()
+{
+ this.debug( 'calling counterChange()' );
+ this.counterUpdate();
+}
+
+// ------------------------------------------------
+
+Slideshow.counterUpdate = function()
+{
+ $( '#counter' ).html( this.snum + '/' + this.smax );
+}
+
+
+Slideshow.counterToggle = function()
+{
+ // toggle slide number/counter
+
+ // todo/fix: note jquery sets inline css (e.g. display: block)
+ // but css won't get scoped for media (e.g. projection, screen, etc)
+ // thus, css changes "spill over" to all media types
+
+ $( '#counter' ).toggle();
+}
+
+// ------------------------------------------------
+
+Slideshow.counterAddEvents = function()
+{
+ $( document ).on( 'slideshow.init', $.proxy( Slideshow.counterInit, this ));
+ $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.counterDebugOn, this ));
+ $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.counterDebugOff, this ));
+ $( document ).on( 'slideshow.keys', $.proxy( Slideshow.counterKeys, this ));
+ $( document ).on( 'slideshow.change', $.proxy( Slideshow.counterChange, this ));
+}
+
+Slideshow.counterAddStyles = function() {
+ this.debug( 'add builtin counter css via inline style elements' );
+
+ var styleProjection =
+"";
+
+ var styleScreen =
+"";
+
+ $( 'head' ).append( styleProjection );
+ $( 'head' ).append( styleScreen );
+}
+
+Slideshow.counterAddStyles();
+Slideshow.counterAddEvents();
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/jquery.slideshow.footer.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/jquery.slideshow.footer.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,82 @@
+/***********
+ *
+ * footer/header addon:
+ *
+ * adds footer/header
+ * - use key-f to toggle footer/header (in projection mode)
+ *
+ * layout structure:
+ *
+ * .layout
+ * > #header
+ * > #footer
+ */
+
+
+Slideshow.footerDebugOn = function()
+{
+ this.debug( 'calling footerDebugOn()' );
+
+ $( '.layout #header,.layout header' ).addClass( 'debug' );
+ $( '.layout #footer,.layout footer' ).addClass( 'debug' );
+}
+
+Slideshow.footerDebugOff = function()
+{
+ this.debug( 'calling footerDebugOff()' );
+
+ $( '.layout #header,.layout header' ).removeClass( 'debug' );
+ $( '.layout #footer,.layout footer' ).removeClass( 'debug' );
+}
+
+Slideshow.footerKeys = function( event, key )
+{
+ this.debug( 'calling footerKeys()' );
+
+ switch( key.which ) {
+ case 70: //f
+ this.footerToggle();
+ break;
+ }
+}
+
+// ------------------------------------------------
+
+Slideshow.footerToggle = function()
+{
+ // todo/fix: note jquery sets inline css (e.g. display: block)
+ // but css won't get scoped for media (e.g. projection, screen, etc)
+ // thus, css changes "spill over" to all media types
+
+ // fix: add/remove Class hidden?? instead of toggle()
+
+ $( '.layout #footer, .layout footer').toggle();
+}
+
+// ------------------------------------------------
+
+Slideshow.footerAddEvents = function()
+{
+ $( document ).on( 'slideshow.debug.on', $.proxy( Slideshow.footerDebugOn, this ));
+ $( document ).on( 'slideshow.debug.off', $.proxy( Slideshow.footerDebugOff, this ));
+ $( document ).on( 'slideshow.keys', $.proxy( Slideshow.footerKeys, this ));
+}
+
+Slideshow.footerAddStyles = function() {
+ this.debug( 'add builtin footer/header css via inline style elements' );
+
+ var styleProjection =
+"";
+
+ $( 'head' ).append( styleProjection );
+}
+
+
+Slideshow.footerAddStyles();
+Slideshow.footerAddEvents();
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/jquery.slideshow.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/jquery.slideshow.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,535 @@
+
+var Slideshow = {
+
+ settings: {
+ debug: true
+ },
+
+ isProjection: false, // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
+ snum: 1, // current slide # (non-zero based index e.g. starting with 1)
+ smax: 1, // max number of slides
+ incpos: 0, // current step in slide
+ steps: null,
+
+ $slides: null,
+ $stylesProjection: null,
+ $stylesScreen: null,
+
+ slideClasses: [ 'far-past', 'past', 'current', 'next', 'far-next' ]
+};
+
+
+/************************************
+ * lets you define your own "global" transition function
+ * passes in a reference to from and to slide wrapped in jQuery wrapper
+ *
+ * see jquery.slideshow.transition.js for more examples
+ */
+
+Slideshow.transition = function( $from, $to ) {
+ // do nothing here; by default lets use css3 for transition effects
+}
+
+
+Slideshow.debug = function( msg ) {
+ if( this.settings.debug && window.console && window.console.log )
+ window.console.log( '[debug] ' + msg );
+}
+
+
+Slideshow.init = function( options ) {
+
+ this.settings = $.extend({
+ mode : 'slideshow', // slideshow | outline | autoplay
+ titleSelector : 'h1',
+ slideSelector : '.slide', // dummy (not yet working)
+ stepSelector : '.step', // dummy (not yet working)
+ debug : false,
+ normalize : true // normalize selectors (that is, allow aliases
+ // e.g. build,action,etc. for step and so on)
+ }, options || {});
+
+ this.isProjection = false; // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
+ this.snum = 1; // current slide # (non-zero based index e.g. starting with 1)
+ this.smax = 1; // max number of slides
+ this.incpos = 0; // current step in slide
+ this.steps = null;
+
+ if( this.settings.normalize == true )
+ this.normalize();
+
+ this.$slides = $( '.slide' );
+
+ this.smax = this.$slides.length;
+
+ this.addSlideIds();
+ this.steps = this.collectSteps();
+ this.updateSlides(); // mark slides w/ far-past,past,current,next,far-next
+
+ // $stylesProjection holds all styles (
or ";
+
+ var styleScreen =
+"";
+
+ var stylePrint =
+"";
+
+ // note: use prepend (not append) to make sure this
+ // styles come first (and do not overrule user supplied styles)
+
+ $( 'head' ).prepend( styleProjection );
+ $( 'head' ).prepend( styleScreen );
+ $( 'head' ).prepend( stylePrint );
+}
+
+Slideshow.addStyles();
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/jquery.slideshow.ready.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/jquery.slideshow.ready.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,15 @@
+
+$(document).ready( function() {
+ Slideshow.init();
+
+ // Example 2: Start Off in Outline Mode
+ // Slideshow.init( { mode: 'outline' } );
+
+ // Example 3: Use Custom Transition
+ // Slideshow.transition = transitionScrollUp;
+ // Slideshow.init();
+
+ // Example 4: Start Off in Autoplay Mode with Custom Transition
+ // Slideshow.transition = transitionScrollUp;
+ // Slideshow.init( { mode: 'autoplay' } );
+} );
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/jquery.slideshow.transition.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/jquery.slideshow.transition.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,38 @@
+
+function transition( $from, $to ) {
+ $from.hide();
+ $to.show();
+}
+
+function transitionSlideUpSlideDown( $from, $to ) {
+ $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
+}
+
+function transitionFadeOutFadeIn( $from, $to ) {
+ $from.fadeOut( 500 );
+ $to.fadeIn( 500 );
+}
+
+/***********************
+ * sample custom transition using scrollUp effect
+ * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
+ * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
+ */
+
+function transitionScrollUp( $from, $to ) {
+ var cheight = $from.outerHeight();
+
+ // hide scrollbar during animation
+ $( 'body' ).css( 'overflow-y', 'hidden' );
+
+ $to.css( 'top', cheight+'px' );
+ $to.show();
+
+ $from.animate( {top: -cheight}, 'slow' );
+ $to.animate( {top: 0}, 'slow', function() {
+ $from.hide().css( 'top', '0px');
+
+ // restore possible scrollbar
+ $( 'body' ).css( 'overflow-y', 'auto' );
+ });
+}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/js/less-1.1.4.min.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/js/less-1.1.4.min.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,16 @@
+//
+// LESS - Leaner CSS v1.1.4
+// http://lesscss.org
+//
+// Copyright (c) 2009-2011, Alexis Sellier
+// Licensed under the Apache 2.0 License.
+//
+//
+// LESS - Leaner CSS v1.1.4
+// http://lesscss.org
+//
+// Copyright (c) 2009-2011, Alexis Sellier
+// Licensed under the Apache 2.0 License.
+//
+(function(a,b){function u(a,b){var c="less-error-message:"+o(b),e=["
",'[-1] {0} [0] {current} [1] {2} "].join("\n"),f=document.createElement("div"),g,h;f.id=c,f.className="less-error-message",h="
"+(a.message||"There is an error in your .less file")+" "+'
'+b+" ",a.extract&&(h+="on line "+a.line+", column "+(a.column+1)+":
"+e.replace(/\[(-?\d)\]/g,function(b,c){return parseInt(a.line)+parseInt(c)||""}).replace(/\{(\d)\}/g,function(b,c){return a.extract[parseInt(c)]||""}).replace(/\{current\}/,a.extract[1].slice(0,a.column)+'
'+a.extract[1].slice(a.column)+" ")),f.innerHTML=h,p([".less-error-message ul, .less-error-message li {","list-style-type: none;","margin-right: 15px;","padding: 4px 0;","margin: 0;","}",".less-error-message label {","font-size: 12px;","margin-right: 15px;","padding: 4px 0;","color: #cc7777;","}",".less-error-message pre {","color: #ee4444;","padding: 4px 0;","margin: 0;","display: inline-block;","}",".less-error-message pre.ctx {","color: #dd4444;","}",".less-error-message h3 {","font-size: 20px;","font-weight: bold;","padding: 15px 0 5px 0;","margin: 0;","}",".less-error-message a {","color: #10a","}",".less-error-message .error {","color: red;","font-weight: bold;","padding-bottom: 2px;","border-bottom: 1px dashed red;","}"].join("\n"),{title:"error-message"}),f.style.cssText=["font-family: Arial, sans-serif","border: 1px solid #e00","background-color: #eee","border-radius: 5px","-webkit-border-radius: 5px","-moz-border-radius: 5px","color: #e00","padding: 15px","margin-bottom: 15px"].join(";"),d.env=="development"&&(g=setInterval(function(){document.body&&(document.getElementById(c)?document.body.replaceChild(f,document.getElementById(c)):document.body.insertBefore(f,document.body.firstChild),clearInterval(g))},10))}function t(a){d.env=="development"&&typeof console!="undefined"&&console.log("less: "+a)}function s(a){return a&&a.parentNode.removeChild(a)}function r(){if(a.XMLHttpRequest)return new XMLHttpRequest;try{return new ActiveXObject("MSXML2.XMLHTTP.3.0")}catch(b){t("browser doesn't support AJAX.");return null}}function q(a,b,c,e){function i(b,c,d){b.status>=200&&b.status<300?c(b.responseText,b.getResponseHeader("Last-Modified")):typeof d=="function"&&d(b.status,a)}var g=r(),h=f?!1:d.async;typeof g.overrideMimeType=="function"&&g.overrideMimeType("text/css"),g.open("GET",a,h),g.setRequestHeader("Accept",b||"text/x-less, text/css; q=0.9, */*; q=0.5"),g.send(null),f?g.status===0?c(g.responseText):e(g.status,a):h?g.onreadystatechange=function(){g.readyState==4&&i(g,c,e)}:i(g,c,e)}function p(a,b,c){var d,e=b.href?b.href.replace(/\?.*$/,""):"",f="less:"+(b.title||o(e));(d=document.getElementById(f))===null&&(d=document.createElement("style"),d.type="text/css",d.media=b.media||"screen",d.id=f,document.getElementsByTagName("head")[0].appendChild(d));if(d.styleSheet)try{d.styleSheet.cssText=a}catch(h){throw new Error("Couldn't reassign styleSheet.cssText.")}else(function(a){d.childNodes.length>0?d.firstChild.nodeValue!==a.nodeValue&&d.replaceChild(a,d.firstChild):d.appendChild(a)})(document.createTextNode(a));c&&g&&(t("saving "+e+" to cache."),g.setItem(e,a),g.setItem(e+":timestamp",c))}function o(a){return a.replace(/^[a-z]+:\/\/?[^\/]+/,"").replace(/^\//,"").replace(/\?.*$/,"").replace(/\.[^\.\/]+$/,"").replace(/[^\.\w-]+/g,"-").replace(/\./g,":")}function n(b,c,e,f){var h=a.location.href.replace(/[#?].*$/,""),i=b.href.replace(/\?.*$/,""),j=g&&g.getItem(i),k=g&&g.getItem(i+":timestamp"),l={css:j,timestamp:k};/^(https?|file):/.test(i)||(i.charAt(0)=="/"?i=a.location.protocol+"//"+a.location.host+i:i=h.slice(0,h.lastIndexOf("/")+1)+i),q(b.href,b.type,function(a,g){if(!e&&l&&g&&(new Date(g)).valueOf()===(new Date(l.timestamp)).valueOf())p(l.css,b),c(null,b,{local:!0,remaining:f});else try{(new d.Parser({optimization:d.optimization,paths:[i.replace(/[\w\.-]+$/,"")],mime:b.type})).parse(a,function(a,d){if(a)return u(a,i);try{c(d,b,{local:!1,lastModified:g,remaining:f}),s(document.getElementById("less-error-message:"+o(i)))}catch(a){u(a,i)}})}catch(h){u(h,i)}},function(a,b){throw new Error("Couldn't load "+b+" ("+a+")")})}function m(a,b){for(var c=0;c
>>0;for(var d=0;d>>0,c=Array(b),d=arguments[1];for(var e=0;e>>0,c=0;if(b===0&&arguments.length===1)throw new TypeError;if(arguments.length>=2)var d=arguments[1];else do{if(c in this){d=this[c++];break}if(++c>=b)throw new TypeError}while(!0);for(;c=b)return-1;c<0&&(c+=b);for(;ck&&(j[f]=j[f].slice(c-k),k=c)}function q(){j[f]=g,c=h,k=c}function p(){g=j[f],h=c,k=c}var b,c,f,g,h,i,j,k,l,m=this,n=function(){},o=this.imports={paths:a&&a.paths||[],queue:[],files:{},mime:a&&a.mime,push:function(b,c){var e=this;this.queue.push(b),d.Parser.importer(b,this.paths,function(a){e.queue.splice(e.queue.indexOf(b),1),e.files[b]=a,c(a),e.queue.length===0&&n()},a)}};this.env=a=a||{},this.optimization="optimization"in this.env?this.env.optimization:1,this.env.filename=this.env.filename||null;return l={imports:o,parse:function(d,g){var h,l,m,o,p,q,r=[],t,u=null;c=f=k=i=0,j=[],b=d.replace(/\r\n/g,"\n"),j=function(c){var d=0,e=/[^"'`\{\}\/\(\)]+/g,f=/\/\*(?:[^*]|\*+[^\/*])*\*+\/|\/\/.*/g,g=0,h,i=c[0],j,k;for(var l=0,m,n;l0)throw{type:"Syntax",message:"Missing closing `}`",filename:a.filename};return c.map(function(a){return a.join("")})}([[]]),h=new e.Ruleset([],s(this.parsers.primary)),h.root=!0,h.toCSS=function(c){var d,f,g;return function(g,h){function n(a){return a?(b.slice(0,a).match(/\n/g)||"").length:null}var i=[];g=g||{},typeof h=="object"&&!Array.isArray(h)&&(h=Object.keys(h).map(function(a){var b=h[a];b instanceof e.Value||(b instanceof e.Expression||(b=new e.Expression([b])),b=new e.Value([b]));return new e.Rule("@"+a,b,!1,0)}),i=[new e.Ruleset(null,h)]);try{var j=c.call(this,{frames:i}).toCSS([],{compress:g.compress||!1})}catch(k){f=b.split("\n"),d=n(k.index);for(var l=k.index,m=-1;l>=0&&b.charAt(l)!=="\n";l--)m++;throw{type:k.type,message:k.message,filename:a.filename,index:k.index,line:typeof d=="number"?d+1:null,callLine:k.call&&n(k.call)+1,callExtract:f[n(k.call)],stack:k.stack,column:m,extract:[f[d-1],f[d],f[d+1]]}}return g.compress?j.replace(/(\s)+/g,"$1"):j}}(h.eval);if(c=0&&b.charAt(v)!=="\n";v--)w++;u={name:"ParseError",message:"Syntax Error on line "+p,index:c,filename:a.filename,line:p,column:w,extract:[q[p-2],q[p-1],q[p]]}}this.imports.queue.length>0?n=function(){g(u,h)}:g(u,h)},parsers:{primary:function(){var a,b=[];while((a=s(this.mixin.definition)||s(this.rule)||s(this.ruleset)||s(this.mixin.call)||s(this.comment)||s(this.directive))||s(/^[\s\n]+/))a&&b.push(a);return b},comment:function(){var a;if(b.charAt(c)==="/"){if(b.charAt(c+1)==="/")return new e.Comment(s(/^\/\/.*/),!0);if(a=s(/^\/\*(?:[^*]|\*+[^\/*])*\*+\/\n?/))return new e.Comment(a)}},entities:{quoted:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==='"'||b.charAt(d)==="'"){f&&s("~");if(a=s(/^"((?:[^"\\\r\n]|\\.)*)"|'((?:[^'\\\r\n]|\\.)*)'/))return new e.Quoted(a[0],a[1]||a[2],f)}},keyword:function(){var a;if(a=s(/^[A-Za-z-]+/))return new e.Keyword(a)},call:function(){var a,b,d=c;if(!!(a=/^([\w-]+|%)\(/.exec(j[f]))){a=a[1].toLowerCase();if(a==="url")return null;c+=a.length;if(a==="alpha")return s(this.alpha);s("("),b=s(this.entities.arguments);if(!s(")"))return;if(a)return new e.Call(a,b,d)}},arguments:function(){var a=[],b;while(b=s(this.expression)){a.push(b);if(!s(","))break}return a},literal:function(){return s(this.entities.dimension)||s(this.entities.color)||s(this.entities.quoted)},url:function(){var a;if(b.charAt(c)==="u"&&!!s(/^url\(/)){a=s(this.entities.quoted)||s(this.entities.variable)||s(this.entities.dataURI)||s(/^[-\w%@$\/.&=:;#+?~]+/)||"";if(!s(")"))throw new Error("missing closing ) for url()");return new e.URL(a.value||a.data||a instanceof e.Variable?a:new e.Anonymous(a),o.paths)}},dataURI:function(){var a;if(s(/^data:/)){a={},a.mime=s(/^[^\/]+\/[^,;)]+/)||"",a.charset=s(/^;\s*charset=[^,;)]+/)||"",a.base64=s(/^;\s*base64/)||"",a.data=s(/^,\s*[^)]+/);if(a.data)return a}},variable:function(){var a,d=c;if(b.charAt(c)==="@"&&(a=s(/^@@?[\w-]+/)))return new e.Variable(a,d)},color:function(){var a;if(b.charAt(c)==="#"&&(a=s(/^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})/)))return new e.Color(a[1])},dimension:function(){var a,d=b.charCodeAt(c);if(!(d>57||d<45||d===47))if(a=s(/^(-?\d*\.?\d+)(px|%|em|pc|ex|in|deg|s|ms|pt|cm|mm|rad|grad|turn)?/))return new e.Dimension(a[1],a[2])},javascript:function(){var a,d=c,f;b.charAt(d)==="~"&&(d++,f=!0);if(b.charAt(d)==="`"){f&&s("~");if(a=s(/^`([^`]*)`/))return new e.JavaScript(a[1],c,f)}}},variable:function(){var a;if(b.charAt(c)==="@"&&(a=s(/^(@[\w-]+)\s*:/)))return a[1]},shorthand:function(){var a,b;if(!!t(/^[@\w.%-]+\/[@\w.-]+/)&&(a=s(this.entity))&&s("/")&&(b=s(this.entity)))return new e.Shorthand(a,b)},mixin:{call:function(){var a=[],d,f,g,h=c,i=b.charAt(c);if(i==="."||i==="#"){while(d=s(/^[#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/))a.push(new e.Element(f,d)),f=s(">");s("(")&&(g=s(this.entities.arguments))&&s(")");if(a.length>0&&(s(";")||t("}")))return new e.mixin.Call(a,g,h)}},definition:function(){var a,d=[],f,g,h,i;if(!(b.charAt(c)!=="."&&b.charAt(c)!=="#"||t(/^[^{]*(;|})/)))if(f=s(/^([#.](?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+)\s*\(/)){a=f[1];while(h=s(this.entities.variable)||s(this.entities.literal)||s(this.entities.keyword)){if(h instanceof e.Variable)if(s(":"))if(i=s(this.expression))d.push({name:h.name,value:i});else throw new Error("Expected value");else d.push({name:h.name});else d.push({value:h});if(!s(","))break}if(!s(")"))throw new Error("Expected )");g=s(this.block);if(g)return new e.mixin.Definition(a,d,g)}}},entity:function(){return s(this.entities.literal)||s(this.entities.variable)||s(this.entities.url)||s(this.entities.call)||s(this.entities.keyword)||s(this.entities.javascript)||s(this.comment)},end:function(){return s(";")||t("}")},alpha:function(){var a;if(!!s(/^\(opacity=/i))if(a=s(/^\d+/)||s(this.entities.variable)){if(!s(")"))throw new Error("missing closing ) for alpha()");return new e.Alpha(a)}},element:function(){var a,b,c;c=s(this.combinator),a=s(/^(?:[.#]?|:*)(?:[\w-]|\\(?:[a-fA-F0-9]{1,6} ?|[^a-fA-F0-9]))+/)||s("*")||s(this.attribute)||s(/^\([^)@]+\)/)||s(/^(?:\d*\.)?\d+%/);if(a)return new e.Element(c,a);if(c.value&&c.value[0]==="&")return new e.Element(c,null)},combinator:function(){var a,d=b.charAt(c);if(d===">"||d==="+"||d==="~"){c++;while(b.charAt(c)===" ")c++;return new e.Combinator(d)}if(d==="&"){a="&",c++,b.charAt(c)===" "&&(a="& ");while(b.charAt(c)===" ")c++;return new e.Combinator(a)}if(d===":"&&b.charAt(c+1)===":"){c+=2;while(b.charAt(c)===" ")c++;return new e.Combinator("::")}return b.charAt(c-1)===" "?new e.Combinator(" "):new e.Combinator(null)},selector:function(){var a,d,f=[],g,h;while(d=s(this.element)){g=b.charAt(c),f.push(d);if(g==="{"||g==="}"||g===";"||g===",")break}if(f.length>0)return new e.Selector(f)},tag:function(){return s(/^[a-zA-Z][a-zA-Z-]*[0-9]?/)||s("*")},attribute:function(){var a="",b,c,d;if(!!s("[")){if(b=s(/^[a-zA-Z-]+/)||s(this.entities.quoted))(d=s(/^[|~*$^]?=/))&&(c=s(this.entities.quoted)||s(/^[\w-]+/))?a=[b,d,c.toCSS?c.toCSS():c].join(""):a=b;if(!s("]"))return;if(a)return"["+a+"]"}},block:function(){var a;if(s("{")&&(a=s(this.primary))&&s("}"))return a},ruleset:function(){var a=[],b,d,g;p();if(g=/^([.#:% \w-]+)[\s\n]*\{/.exec(j[f]))c+=g[0].length-1,a=[new e.Selector([new e.Element(null,g[1])])];else while(b=s(this.selector)){a.push(b),s(this.comment);if(!s(","))break;s(this.comment)}if(a.length>0&&(d=s(this.block)))return new e.Ruleset(a,d);i=c,q()},rule:function(){var a,d,g=b.charAt(c),k,l;p();if(g!=="."&&g!=="#"&&g!=="&")if(a=s(this.variable)||s(this.property)){a.charAt(0)!="@"&&(l=/^([^@+\/'"*`(;{}-]*);/.exec(j[f]))?(c+=l[0].length-1,d=new e.Anonymous(l[1])):a==="font"?d=s(this.font):d=s(this.value),k=s(this.important);if(d&&s(this.end))return new e.Rule(a,d,k,h);i=c,q()}},"import":function(){var a;if(s(/^@import\s+/)&&(a=s(this.entities.quoted)||s(this.entities.url))&&s(";"))return new e.Import(a,o)},directive:function(){var a,d,f,g;if(b.charAt(c)==="@"){if(d=s(this["import"]))return d;if(a=s(/^@media|@page/)||s(/^@(?:-webkit-)?keyframes/)){g=(s(/^[^{]+/)||"").trim();if(f=s(this.block))return new e.Directive(a+" "+g,f)}else if(a=s(/^@[-a-z]+/))if(a==="@font-face"){if(f=s(this.block))return new e.Directive(a,f)}else if((d=s(this.entity))&&s(";"))return new e.Directive(a,d)}},font:function(){var a=[],b=[],c,d,f,g;while(g=s(this.shorthand)||s(this.entity))b.push(g);a.push(new e.Expression(b));if(s(","))while(g=s(this.expression)){a.push(g);if(!s(","))break}return new e.Value(a)},value:function(){var a,b=[],c;while(a=s(this.expression)){b.push(a);if(!s(","))break}if(b.length>0)return new e.Value(b)},important:function(){if(b.charAt(c)==="!")return s(/^! *important/)},sub:function(){var a;if(s("(")&&(a=s(this.expression))&&s(")"))return a},multiplication:function(){var a,b,c,d;if(a=s(this.operand)){while((c=s("/")||s("*"))&&(b=s(this.operand)))d=new e.Operation(c,[d||a,b]);return d||a}},addition:function(){var a,d,f,g;if(a=s(this.multiplication)){while((f=s(/^[-+]\s+/)||b.charAt(c-1)!=" "&&(s("+")||s("-")))&&(d=s(this.multiplication)))g=new e.Operation(f,[g||a,d]);return g||a}},operand:function(){var a,d=b.charAt(c+1);b.charAt(c)==="-"&&(d==="@"||d==="(")&&(a=s("-"));var f=s(this.sub)||s(this.entities.dimension)||s(this.entities.color)||s(this.entities.variable)||s(this.entities.call);return a?new e.Operation("*",[new e.Dimension(-1),f]):f},expression:function(){var a,b,c=[],d;while(a=s(this.addition)||s(this.entity))c.push(a);if(c.length>0)return new e.Expression(c)},property:function(){var a;if(a=s(/^(\*?-?[-a-z_0-9]+)\s*:/))return a[1]}}}},typeof a!="undefined"&&(d.Parser.importer=function(a,b,c,d){a.charAt(0)!=="/"&&b.length>0&&(a=b[0]+a),n({href:a,title:a,type:d.mime},c,!0)}),function(a){function d(a){return Math.min(1,Math.max(0,a))}function c(b){if(b instanceof a.Dimension)return parseFloat(b.unit=="%"?b.value/100:b.value);if(typeof b=="number")return b;throw{error:"RuntimeError",message:"color functions take numbers as parameters"}}function b(b){return a.functions.hsla(b.h,b.s,b.l,b.a)}a.functions={rgb:function(a,b,c){return this.rgba(a,b,c,1)},rgba:function(b,d,e,f){var g=[b,d,e].map(function(a){return c(a)}),f=c(f);return new a.Color(g,f)},hsl:function(a,b,c){return this.hsla(a,b,c,1)},hsla:function(a,b,d,e){function h(a){a=a<0?a+1:a>1?a-1:a;return a*6<1?g+(f-g)*a*6:a*2<1?f:a*3<2?g+(f-g)*(2/3-a)*6:g}a=c(a)%360/360,b=c(b),d=c(d),e=c(e);var f=d<=.5?d*(b+1):d+b-d*b,g=d*2-f;return this.rgba(h(a+1/3)*255,h(a)*255,h(a-1/3)*255,e)},hue:function(b){return new a.Dimension(Math.round(b.toHSL().h))},saturation:function(b){return new a.Dimension(Math.round(b.toHSL().s*100),"%")},lightness:function(b){return new a.Dimension(Math.round(b.toHSL().l*100),"%")},alpha:function(b){return new a.Dimension(b.toHSL().a)},saturate:function(a,c){var e=a.toHSL();e.s+=c.value/100,e.s=d(e.s);return b(e)},desaturate:function(a,c){var e=a.toHSL();e.s-=c.value/100,e.s=d(e.s);return b(e)},lighten:function(a,c){var e=a.toHSL();e.l+=c.value/100,e.l=d(e.l);return b(e)},darken:function(a,c){var e=a.toHSL();e.l-=c.value/100,e.l=d(e.l);return b(e)},fadein:function(a,c){var e=a.toHSL();e.a+=c.value/100,e.a=d(e.a);return b(e)},fadeout:function(a,c){var e=a.toHSL();e.a-=c.value/100,e.a=d(e.a);return b(e)},spin:function(a,c){var d=a.toHSL(),e=(d.h+c.value)%360;d.h=e<0?360+e:e;return b(d)},mix:function(b,c,d){var e=d.value/100,f=e*2-1,g=b.toHSL().a-c.toHSL().a,h=((f*g==-1?f:(f+g)/(1+f*g))+1)/2,i=1-h,j=[b.rgb[0]*h+c.rgb[0]*i,b.rgb[1]*h+c.rgb[1]*i,b.rgb[2]*h+c.rgb[2]*i],k=b.alpha*e+c.alpha*(1-e);return new a.Color(j,k)},greyscale:function(b){return this.desaturate(b,new a.Dimension(100))},e:function(b){return new a.Anonymous(b instanceof a.JavaScript?b.evaluated:b)},escape:function(b){return new a.Anonymous(encodeURI(b.value).replace(/=/g,"%3D").replace(/:/g,"%3A").replace(/#/g,"%23").replace(/;/g,"%3B").replace(/\(/g,"%28").replace(/\)/g,"%29"))},"%":function(b){var c=Array.prototype.slice.call(arguments,1),d=b.value;for(var e=0;e255?255:a<0?0:a).toString(16);return a.length===1?"0"+a:a}).join("")},operate:function(b,c){var d=[];c instanceof a.Color||(c=c.toColor());for(var e=0;e<3;e++)d[e]=a.operate(b,this.rgb[e],c.rgb[e]);return new a.Color(d,this.alpha+c.alpha)},toHSL:function(){var a=this.rgb[0]/255,b=this.rgb[1]/255,c=this.rgb[2]/255,d=this.alpha,e=Math.max(a,b,c),f=Math.min(a,b,c),g,h,i=(e+f)/2,j=e-f;if(e===f)g=h=0;else{h=i>.5?j/(2-e-f):j/(e+f);switch(e){case a:g=(b-c)/j+(b":a.compress?">":" > "}[this.value]}}(c("less/tree")),function(a){a.Expression=function(a){this.value=a},a.Expression.prototype={eval:function(b){return this.value.length>1?new a.Expression(this.value.map(function(a){return a.eval(b)})):this.value.length===1?this.value[0].eval(b):this},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(" ")}}}(c("less/tree")),function(a){a.Import=function(b,c){var d=this;this._path=b,b instanceof a.Quoted?this.path=/\.(le?|c)ss$/.test(b.value)?b.value:b.value+".less":this.path=b.value.value||b.value,this.css=/css$/.test(this.path),this.css||c.push(this.path,function(a){if(!a)throw new Error("Error parsing "+d.path);d.root=a})},a.Import.prototype={toCSS:function(){return this.css?"@import "+this._path.toCSS()+";\n":""},eval:function(b){var c;if(this.css)return this;c=new a.Ruleset(null,this.root.rules.slice(0));for(var d=0;d0){c=this.arguments&&this.arguments.map(function(b){return b.eval(a)});for(var g=0;g0&&c>this.params.length)return!1;d=Math.min(c,this.arity);for(var e=0;e1?Array.prototype.push.apply(d,e.find(new a.Selector(b.elements.slice(1)),c)):d.push(e);break}});return this._lookups[g]=d},toCSS:function(b,c){var d=[],e=[],f=[],g=[],h,i;this.root||(b.length===0?g=this.selectors.map(function(a){return[a]}):this.joinSelectors(g,b,this.selectors));for(var j=0;j0&&(h=g.map(function(a){return a.map(function(a){return a.toCSS(c)}).join("").trim()}).join(c.compress?",":g.length>3?",\n":", "),d.push(h,(c.compress?"{":" {\n ")+e.join(c.compress?"":"\n ")+(c.compress?"}":"\n}\n"))),d.push(f);return d.join("")+(c.compress?"\n":"")},joinSelectors:function(a,b,c){for(var d=0;d0&&e.push(new a.Selector(g)),h.length>0&&f.push(new a.Selector(h));for(var l=0;l0&&typeof a!="undefined"&&(b.value=c[0]+(b.value.charAt(0)==="/"?b.value.slice(1):b.value)),this.value=b,this.paths=c)},b.URL.prototype={toCSS:function(){return"url("+(this.attrs?"data:"+this.attrs
+.mime+this.attrs.charset+this.attrs.base64+this.attrs.data:this.value.toCSS())+")"},eval:function(a){return this.attrs?this:new b.URL(this.value.eval(a),this.paths)}}}(c("less/tree")),function(a){a.Value=function(a){this.value=a,this.is="value"},a.Value.prototype={eval:function(b){return this.value.length===1?this.value[0].eval(b):new a.Value(this.value.map(function(a){return a.eval(b)}))},toCSS:function(a){return this.value.map(function(b){return b.toCSS(a)}).join(a.compress?",":", ")}}}(c("less/tree")),function(a){a.Variable=function(a,b){this.name=a,this.index=b},a.Variable.prototype={eval:function(b){var c,d,e=this.name;e.indexOf("@@")==0&&(e="@"+(new a.Variable(e.slice(1))).eval(b).value);if(c=a.find(b.frames,function(a){if(d=a.variable(e))return d.value.eval(b)}))return c;throw{message:"variable "+e+" is undefined",index:this.index}}}}(c("less/tree")),c("less/tree").find=function(a,b){for(var c=0,d;c1?"["+a.value.map(function(a){return a.toCSS(!1)}).join(", ")+"]":a.toCSS(!1)};var f=location.protocol==="file:"||location.protocol==="chrome:"||location.protocol==="chrome-extension:"||location.protocol==="resource:";d.env=d.env||(location.hostname=="127.0.0.1"||location.hostname=="0.0.0.0"||location.hostname=="localhost"||location.port.length>0||f?"development":"production"),d.async=!1,d.poll=d.poll||(f?1e3:1500),d.watch=function(){return this.watchMode=!0},d.unwatch=function(){return this.watchMode=!1},d.env==="development"?(d.optimization=0,/!watch/.test(location.hash)&&d.watch(),d.watchTimer=setInterval(function(){d.watchMode&&m(function(a,b,c){a&&p(a.toCSS(),b,c.lastModified)})},d.poll)):d.optimization=3;var g;try{g=typeof a.localStorage=="undefined"?null:a.localStorage}catch(h){g=null}var i=document.getElementsByTagName("link"),j=/^text\/(x-)?less$/;d.sheets=[];for(var k=0;k
+
+
+ [your_title_here]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Your Slide Title Here
+
+ Item One Here
+ Item Two Here
+
+
+
+
+
Steps Demos
+
+
+
+ Item 1.1 Here
+ Item 1.2 Here
+
+
+
+
+ Item 2.1 Here
+ Item 2.2 Here
+
+
+
+
Another Step
+
+
+
+
+
Another Slide Title Here
+
yada yada yada
+
+
+
分散 Database Jungle に関する研究
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
分散 Database Jungleに関する研究
+
+ 琉球大学 大城信康
+
+
+
+
+
+
概要
+
非破壊的木構造データベースJungleに分散実装を行い掲示板システムに特化したデーターベースを作成し、その評価を行った。
+
分散データベースCassandraより2倍以上速く、分散環境下においては10倍以上速くなる結果も確認された。
+
+
+
+
+
研究の背景と目的
+
ウェブサービスにとってデータベースは必須であり、ウェブサービスの規模に比例してデータベースへの負荷も高まる。
+
データベースの処理能力の高さはそのままウェブサービスの質に繋がるため、データベースのスケーラビリティの確保は重要である。
+
スケーラビリティ確保の方法としてデータ分散があるが、分散する方法により性能も変わってくる。
+
ウェブサービスのなかでも、コンテンツマネジメントシステムに合ったスケーラビリティの確保ができるデータベースの開発を行う。
+
+
+
+
+ ウェブサービスにおけるデータベースの重要性
+
+
ウェブサービスへの負荷が高まることは、データベースへの負荷が高まることでもある。
+
データベースの性能が低ければ負荷に耐え切れずサービスはダウンする
+
+
+
そのため、データベースにはスケーラビリティが必要
+
+
+
+
+ スケーラビリティとは
+
+
システムが負荷の増大に対して柔軟に拡張して対応できる性質
+
主に次の2つの方法によりシステムはスケールされる
+
+ スケールアップ ：スケールアウト ：
+
分散システムにおいてはスケールアウト によりスケーラビリティを高める
+
+
+
+
+
+
+ データベースのスケーラビリティ
+
+
データベースのスケーラビリティを考えるとき、どういう用途で使用するかを考えるのが重要。
+
例えば、掲示板システムにおいては、書き込みと読み込みが速いことが求められる。
+
+
ウェブサービスにおいても、どのようなサービスを行うかによってスケーラビリティの確保の仕方も変わってくる。
+
本研究で開発しているデータベースはコンテンツマネジメントシステム（CMS）を対象としている。
+
+
+
+
+
+ コンテンツマネジメントシステム(CMS)
+
+
Webコンテンツを構成するテキストや画像などのデジタルコンテンツを管理し配信するシステム。
+
例：ブログツール、Wiki
+
分散コンテンツマネジメントシステムに求められること。
+
Webコンテンツを分散して管理
+
スケールアウトするシステム
+
データ全体の整合性に遅延がある、結果整合性でもよい。書き込みや読み込みを優先としたデータベースが必要。
+
そこで、非破壊的木構造データベースJungleの開発が行われた。
+
+
+
+
+
+ 非破壊的木構造データベースJungle
+
+
JungleはスケーラビリティのあるCMSの設計を目指して当研究室で開発されているデータベース。
+
データを木構造で、さらに非破壊で保持する。
+
+
+
+
+ 非破壊的木構造
+
+
非破壊的木構造は一度作成したデータは変更しない
+
新しい木構造を作成することでデータの編集を行う
+
+
+
+
+
+
+ 非破壊的木構造の利点
+
+
非破壊的木構造は通常の木構造である破壊的木構造に比べ、以下のような利点を持つ
+
+ 一度作成したデータは変更されない
+ データが変更されないため自由にコピーを作ることができる(いつでも読み込みが可能)
+ ロックがすくない。ロックが必要なのは最新のルートノードを登録するときだけ
+
+
ロックが少なく、いつでもコピーが可能なことから、非破壊的木構造はスケーラブルなシステムに有用となる
+
+
+
+
+ Jungleの分散設計
+
+
ここまでJungleに実装されている非破壊的木構造の利点について述べた。
+
次に、Jungleにおける分散設計について述べる。
+
データ分散を行うにあたり、まず考えることはトポロジーの形成と他のノードからデータの伝搬の仕方である。
+
Jungleはこの問題に対し、ツリートポロジーを形成し、データ編集の際に発生するオペレーションを他のノードに流すことで解決する。
+
+
+
+
+ Jungleトポロジーの形成
+
+
Jungleのトポロジー形成には当研究室で開発している並列分散フレームワークAliceを使用する。
+
Aliceは以下の機能が提供されている
+
+ 複数のノードによる分散トポロジーの設定
+ トポロジー上でのデータアクセス機構
+
+
JungleにAliceを組み込み、Jungleのノード同士でトポロジーを形成する。
+
Aliceの機能である他ノードへのデータアクセス機構を使用してデータ分散を行う。
+
+
+
+
+
+
+
+ 分散設計: データ編集オペレーション
+
+
Aliceにより、ネットワークトポロジーの作成と他サーバが持つデータアクセス機構を実装できた。
+
次はどのデータを取得することでデータの分散を行うか考えなければならない。
+
+
Jungleにはデータ編集に使われるオペレーションがある。
+
データ編集に使われるオペレーションをそのまま他サーバノードへ流すことでデータの分散が行える。
+
オペレーションには次の4つがある
+
+ addNewChild:子ノードの追加を行う
+ deleteChildAt:指定したノードの削除を行う
+ putAttribute:子ノードにattributeに追加を行う
+ deleteAttribute:子ノードのattributeを削除する
+
+
+
+
+ データ編集オペレーション
+
+
子ノードを追加し、その子ノードにattributeを追加する場合次のノードオペレーションが実行される。
+
+ [APPEND_CHILD:<-1>:pos:0]
+ [PUT_ATTRIBUTE:<-1,0>:key:mes,value:hello]
+
+
このノードオペレーションの実行結果を図に示す。
+
+
+
トポロジー上でノードオペレーションを渡すことで同じ編集を行いデータの分散を行う。
+
+
+
+
+
+
+
+ Jungle分散実装
+
+
以上の設計を元にJungleに分散実装を行った。
+
以下の図はJungleにおけるデータ分散の様子を表している。
+
+
+
Aliceでトポロジーを形成後は、データ編集に使われたオペレーションを他サーバノードに送られる。
+
オペレーションを受信したノードはデータ編集を行う。他にサーバが繋がっている場合はそちらにもオペレーションを送る。
+
+
+
+
+
+
+ Jungle分散実装
+
+
これまでの実装でJungleのデータが分散が行われるようになった。
+
しかしもう１つ問題がある。複数のノードから書き込まれるデータの整合性を取る方法が必要である。
+
JungleではこれをMergeを使うことで自動的に解決する。
+
Mergeとは2つ以上の変更の結果を受けて1つの変更に変えることである。
+
今回は、性能比較に用いる掲示板システムにMergeの実装を行った。
+
掲示板システムにおけるMergeを説明する。
+
+
+
+
+ 掲示板システムにおけるMerge
+
+
2つの状態をもつ掲示板の書き込みができる。この2つの書き込みから新しい書き込みを作る。
+
+
+
掲示板はcommutativeなため、いつ書き込んでも良い。よってMergeが自動的に行える。
+
+
+
+
+
+
+
+
+ 分散データベースJungleの評価
+
+
分散データベースとしてJungleの性能を評価する。
+
分散Key-ValueデーターべースCassandraと比較を行う。
+
比較方法は、Jungle, Cassandra をそれぞれバックエンドとした簡易掲示板を作成する。
+
掲示板に対してHTTP Requestで並列に読み込みと書き込みの負荷をかけ計測する。
+
レスポンスが返る平均時間と標準偏差を求めグラフ化する
+
+
+
+
+
+ 実験内容
+
+
実験は2つ行う
+
実験1：サーバを単体で起動し、複数のクライアントからの負荷をかける。
+
+
+
サーバ単体の性能を比較する。
+
クライアントの増加に対してサーバ1台にかかるリクエストも増加
+
+
+
+
+ 実験内容
+
+
実験2：サーバを単体で起動し、複数のクライアントからの負荷をかける。
+
+
+
分散環境下における性能を比較する。
+
クライアントとサーバがともに増加するため、サーバ一台に対するリクエストは変わらず。
+
サーバが全体で受けるリクエストは増加する。
+
+
+
+
+ 実験1:単体サーバへの負荷
+
+
+
+
レスポンス速度(縦軸の数値)が低い程良い
+
クライアント(横軸の数値)の増加に対してレスポンス速度の増加がゆるやかなものほどよい
+
+
+
+
+ 単体サーバへの負荷:読み込み負荷
+
+
+
Cassandraに比べJungleが全体的に良い結果を出している。
+
台数が増える毎にJungleとCassandraの平均時間の差は離れている。
+
+
+
+
+
+
+
+ 単体サーバへの負荷:書き込み負荷
+
+
+
読み込み同様JungleがCassandraよりもより結果を出している。
+
読み込み以上にCassandraとの差がついている。
+
+
+
+
+
+
+
+ 実験1の考察
+
+
読み込み、書き込みともにJungleの性能がよく。平均だけみても2倍以上早い部分もある。
+
特に書き込みに関してはクライアントの数が増えるにつれ差が開いている。
+
+
これはJungleが全体的にロックが少ないことが要因としてあげられる。
+
なぜロックが少ないか
+
Jungleは非破壊でデータの保持をするため、読み込みは自由に行える。書き込み時には木のコピーをとりルートノードを入れ替える
+ ときのみロックが発生する。
+
+
+
+
+ 実験2:分散環境下における負荷
+
+
+
+
レスポンス速度(縦軸の数値)が低い程良い
+
クライアントとノードの数(横軸の数値)の増加に対してレスポンス速度の増加がゆるやかなものほどよい
+
+
+ 分散環境下における負荷：読み込み
+
+
+
QUORUM(緑)はCassandraが3ノードに書き込んでいる結果を示す。
+
Jungle同じレスポンスを維持している。
+
Jungleは1秒から5秒をキープ
+
+
+
+ 分散環境下における負荷：書き込み
+
+
+
QUORUM(緑)はCassandraが3ノードに書き込んでいる結果を示す。
+
Jungle同じレスポンスを維持している。
+
Jungleは5.5秒から7.3秒をキープ
+
+
+
+
+ 実験2の考察
+
+
こちらもJungleがCassadraより良い結果を示した。実験1よりも差がでている。
+
Jungleのグラフが横ばいになっていることに注目したい。
+
+
Jungleはリクエストに対し手元にあるデータを返す。そのためノードの数が増えてもレスポンスの早さを維持できる。
+
Cassandraはデータを持っている数台のノードに読み込みに行くという作業が入るためJungleより遅くなってしまう
+
ただしJungleは全て非同期でデータの伝搬を行うため、データ全体の整合性は落ちる
+
+
+ まとめ
+
+
本研究では非破壊的木構造Jungleに分散データベースの実装を行った
+
非破壊的木構造における利点を述べ、分散実装を行った。
+
分散実装ではAliceを用いたトポロジー形成により、他ノードへデータ編集のオペレーションを送ることで
+ 実装を行った。
+
データの整合性に関してはJungle側がMergeにより自動的にMergeを行うことで解決することを述べた。
+
Mergeアルゴリズムの1つとして掲示板プログラムにおけるMergeについて設計・実装を行った
+
性能比較の実験のためJungle、Cassandraで利用できる簡易掲示板の作成を行った
+
実験は単体サーバと分散環境下において行い、どちらともCassandraより平均時間が最低でも2倍以上速いという結果を示すことができた。
+
+
+
+
+ 今後の課題
+
+
Mergeアルゴリズムの設計
+
+ JungleはMergeを使うことで更新データ衝突の問題を解決する。
+ 今回実装した掲示板プログラムにおけるMergeは単純なもの。
+ 他のアプリケーションではどのようにMergeを行うのか考察が必要。
+
+
+
+ 今後の課題
+
+
過去のデータの掃除について
+
+ Jungleは非破壊でデータを保持するため過去のメモリの使用量が大きい
+ ある程度の単位で過去のデータの掃除を行いたい
+ そのためにはどのノードがどのデータを持っているかという情報を扱うことが必要
+ どれくらいデータが古くなると掃除を行うか判断が必要
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 分散Key-ValueストアCassandraの特徴
+
+
ring型トポロジーを形成。ring上にはHash値があり、書き込むデータのキーのハッシュ値により書き込むノードを決定
+
1つのデータの複製を最大何とるかというReplication factorの設定がある。
+
Consistency Levelというデータの読み書きの際に何台のノードから読み書きするかを決定できる
+
Consistency LevelにはONE,QUORUM,ALLがある。QUORUMはReplication factorの数/2+1 のノードに読み書きする。
+
+
+
+
+ 実験に使用するサーバの仕様
+
+
+
+ ブレードサーバ
+
+
+ CPU
+ Intel(R) Xeon(R) CPU X5650@2.67GHz
+
+
+ コア数
+ 24
+
+
+ Memory
+ 132GB
+
+
+ OS
+ Fedora 16
+
+
+ HyperVisor
+ なし（物理マシン）
+
+
+
+ 並列環境
+
+
+
+ VMWareクラスタ KVMクラスタ
+
+
+ 台数 48 12
+
+
+ CPU
+ Intel(R) Xeon(R) CPU X5650@2.67GHz
+ Intel(R) Xeon(R) CPU X5650@2.67GHz
+
+
+ コア数
+ 4
+ 4
+
+
+ Memory
+ 8GB
+ 8GB
+
+
+ OS
+ Fedora 16
+ Fedora 16
+
+
+ HyperVisor
+ VMWare ESXi
+ KVM (Linux Fedora 16)
+
+
+
+
+
+
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/slides.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/slides.js Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,91 @@
+var BASE_URL_PREFIX = './';
+
+function addScript( name )
+{
+ var el = document.createElement( 'script' );
+ el.type = 'text/javascript';
+ el.src = BASE_URL_PREFIX + name;
+
+ if(!document.head) // fix for Firefox <4.0
+ document.head = document.getElementsByTagName('head')[0];
+
+ document.head.appendChild( el );
+}
+
+function addStyle( name, media )
+{
+ var el = document.createElement( 'link' );
+ el.rel = 'stylesheet';
+ el.type = 'text/css';
+ el.href = BASE_URL_PREFIX + name;
+ el.media = media;
+
+ if(!document.head) // fix for Firefox <4.0
+ document.head = document.getElementsByTagName('head')[0];
+
+ document.head.appendChild( el );
+}
+
+function addStyleLess( name, media )
+{
+ var el = document.createElement( 'link' );
+ el.rel = 'stylesheet/less';
+ el.type = 'text/css';
+ el.href = BASE_URL_PREFIX + name;
+ el.media = media;
+
+ if(!document.head) // fix for Firefox <4.0
+ document.head = document.getElementsByTagName('head')[0];
+
+ document.head.appendChild( el );
+}
+
+
+function letsGo()
+{
+ var useLess = true;
+
+ /*********
+ * add style sheet links
+ */
+
+ if( useLess )
+ {
+ addStyleLess( 'themes/blank5/projection.css.less', 'screen,projection' );
+ addStyleLess( 'themes/blank5/screen.css.less', 'screen' );
+ addStyleLess( 'themes/blank5/print.css.less', 'print' );
+ }
+ else
+ {
+ addStyle( 'themes/blank5/o/projection.css', 'screen,projection' );
+ addStyle( 'themes/blank5/o/screen.css', 'screen' );
+ addStyle( 'themes/blank5/o/print.css', 'print' );
+ }
+
+ /********
+ * add js libs (less, jquery)
+ */
+
+ if( useLess )
+ addScript( 'js/less-1.1.4.min.js' );
+
+ addScript( 'js/jquery-1.7.min.js' );
+
+ /********
+ * add S6 js code
+ */
+
+ addScript( 'js/jquery.slideshow.js' );
+ addScript( 'js/jquery.slideshow.counter.js' );
+ addScript( 'js/jquery.slideshow.controls.js' );
+ addScript( 'js/jquery.slideshow.footer.js' );
+ addScript( 'js/jquery.slideshow.autoplay.js' );
+ addScript( 'js/jquery.slideshow.ready.js' );
+
+ // todo - check why we can't access Slideshow object here
+ // Slideshow.debug( 'letsGo says hello' );
+ // Slideshow.init();
+}
+
+// letsGo();
+document.addEventListener('DOMContentLoaded', letsGo, false);
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/o/print.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/o/print.css Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,33 @@
+/*********************************
* CSS @media print rules (not projection or screen)
*
* (note: this is a less extendend css script, to learn more about less; see lesscss.org)
*/body {
+ font-size: 12pt;
+}
+.slide {
+ page-break-inside: avoid;
+ /********************
* Extra styling for first slide (title/cover slide)
*/
+}
+.slide h1 {
+ page-break-after: avoid;
+}
+.slide ul {
+ page-break-inside: avoid;
+}
+.slide h1 {
+ border-top: 2pt solid gray;
+ border-bottom: 1px dotted silver;
+}
+.slide:first-child {
+ margin-bottom: 3em;
+}
+.slide:first-child h1 {
+ font-size: 200%;
+ border: none;
+ margin: 0.5em 0 0.25em;
+}
+.slide:first-child h3 {
+ margin: 0;
+ padding: 0;
+}
+.slide:first-child h4 {
+ margin: 0 0 0.5em;
+ padding: 0;
+}
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/o/projection.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/o/projection.css Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,120 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ *
+ * (note: this is a less extendend css script, to learn more about less; see lesscss.org)
+ */
+html, body, .presentation {
+ margin: 0;
+ padding: 0;
+}
+.slide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 2% 4% 0% 4%;
+ /* css note: order is => top right bottom left */
+
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ /* css note: lets use border-box; no need to add padding+border to get to 100% */
+
+ overflow-x: hidden;
+ overflow-y: auto;
+ z-index: 2;
+}
+/*****
+ * layout block structure:
+ *
+ * .layout
+ * > #header
+ * > #footer
+ */
+.layout #header, .layout header {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 0.5em;
+ z-index: 1;
+}
+.layout #footer, .layout footer {
+ position: fixed;
+ top: auto;
+ bottom: 0;
+ padding: 1em 0;
+ /* css note: order is => 1st top,bottom; 2nd right,left */
+
+ width: 100%;
+ height: 1em;
+ z-index: 5;
+ /* todo: move font-size and font-style to blank.css */
+ font-size: 100%;
+ font-weight: bold;
+ /* todo: move font-size and font-style to blank.css */
+
+}
+.layout #footer h1, .layout footer h1 {
+ display: block;
+ margin: 0;
+ padding: 0 1em;
+ font-size: 50%;
+}
+.layout #footer h2, .layout footer h2 {
+ display: block;
+ margin: 0;
+ padding: 0 1em;
+ font-size: 50%;
+ font-style: italic;
+}
+/*********************************
+ * general text-alignment classes
+ */
+.left {
+ text-align: left;
+}
+.center {
+ text-align: center;
+}
+.right {
+ text-align: right;
+}
+/*********************************
+ * general _absolute_ font-size classes
+ */
+.small {
+ font-size: 97%;
+}
+.x-small {
+ font-size: 88%;
+}
+.xx-small {
+ font-size: 82%;
+}
+.large {
+ font-size: 103%;
+}
+.x-large {
+ font-size: 112%;
+}
+.xx-large {
+ font-size: 118%;
+}
+/*********************************
+ * general _relative_ font-size classes
+ */
+.smaller {
+ font-size: 82%;
+}
+.larger {
+ font-size: 118%;
+}
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/o/screen.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/o/screen.css Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,26 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ *
+ * (note: this is a less extendend css script, to learn more about less; see lesscss.org)
+ */
+.slide {
+ margin: 1.5em 0 0;
+ border-top: 1px solid #888;
+}
+.slide h1 {
+ border-bottom: 1px solid #AAA;
+}
+.slide:first-child {
+ margin: 0;
+ border: none;
+}
+.slide:first-child h1 {
+ border: none;
+ padding-top: 1.5em;
+}
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/print.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/print.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,1 @@
+/*********************************
* CSS @media print rules (not projection or screen)
*/
//////////////////////////////////////
// note: this is a less extendend css script, to learn more about less; see lesscss.org)
body { font-size: 12pt; }
.slide {
display: block !important;
page-break-inside: avoid;
h1 { page-break-after: avoid; }
ul { page-break-inside: avoid; }
h1 { border-top: 2pt solid gray;
border-bottom: 1px dotted silver;
}
/********************
* Extra styling for first slide (title/cover slide)
*/
&:first-child {
margin-bottom: 3em;
h1 { font-size: 200%;
border: none;
margin: 0.5em 0 0.25em; }
h3 { margin: 0; padding: 0;}
h4 { margin: 0 0 0.5em; padding: 0;}
}
}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/projection.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/projection.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,97 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+
+html,
+body,
+.presentation { margin: 0; padding: 0; }
+
+
+.slide { display: none; /* note: only display current slide in projection mode */
+ position: absolute;
+ top: 0; left: 0;
+ margin: 0;
+ padding: 2% 4% 0% 4%; /* css note: order is => top right bottom left */
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ width: 100%; height: 100%; /* css note: lets use border-box; no need to add padding+border to get to 100% */
+ overflow-x: hidden; overflow-y: auto;
+ z-index: 2;
+ }
+
+.slide.current { display: block; } /* note: only display current slide in projection mode */
+
+
+/*****
+ * layout block structure:
+ *
+ * .layout
+ * > #header
+ * > #footer
+ */
+
+.layout {
+
+ #header, header { position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 0.5em;
+ z-index: 1;
+ }
+
+ #footer, footer { position: fixed;
+ top: auto; bottom: 0;
+ padding: 1em 0; /* css note: order is => 1st top,bottom; 2nd right,left */
+ width: 100%; height: 1em;
+ z-index: 5;
+
+ /* todo: move font-size and font-style to blank.css */
+ font-size: 100%; font-weight: bold;
+
+ /* todo: move font-size and font-style to blank.css */
+
+ h1 { display: block; margin: 0; padding: 0 1em; font-size: 50%; }
+ h2 { display: block; margin: 0; padding: 0 1em; font-size: 50%; font-style: italic; }
+ }
+}
+
+
+
+/*********************************
+ * general text-alignment classes
+ */
+
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+
+
+/*********************************
+ * general _absolute_ font-size classes
+ */
+
+.small { font-size: 97%; }
+.x-small { font-size: 88%; }
+.xx-small { font-size: 82%; }
+
+.large { font-size: 103%; }
+.x-large { font-size: 112%; }
+.xx-large { font-size: 118%; }
+
+/*********************************
+ * general _relative_ font-size classes
+ */
+
+.smaller { font-size: 82%; }
+.larger { font-size: 118%; }
+
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank/screen.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank/screen.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,31 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+.slide
+{
+ display: block !important;
+ margin: 1.5em 0 0;
+ border-top: 1px solid #888;
+
+ h1 { border-bottom: 1px solid #AAA; }
+
+
+ &:first-child {
+ margin: 0;
+ border: none;
+
+ h1 {
+ border: none;
+ padding-top: 1.5em; }
+ }
+}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank5/print.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank5/print.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,35 @@
+/*********************************
+ * CSS @media print rules (not projection or screen)
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+body { font-size: 12pt; }
+
+
+.slide {
+ display: block !important;
+ page-break-inside: avoid;
+
+ h1 { page-break-after: avoid; }
+ ul { page-break-inside: avoid; }
+
+ h1 { border-top: 2pt solid gray;
+ border-bottom: 1px dotted silver;
+ }
+
+ /********************
+ * Extra styling for first slide (title/cover slide)
+ */
+
+ &:first-child {
+ margin-bottom: 3em;
+
+ h1 { font-size: 200%;
+ border: none;
+ margin: 0.5em 0 0.25em; }
+ h3 { margin: 0; padding: 0;}
+ h4 { margin: 0 0 0.5em; padding: 0;}
+ }
+}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank5/projection.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank5/projection.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,307 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+
+html {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ height: 100%;
+ min-height: 740px;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ background: rgb(215, 215, 215);
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+}
+
+.presentation {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+
+ position: absolute;
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
+.slide {
+ display: block;
+
+ position: absolute;
+ overflow: hidden;
+
+ width: 900px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ margin-left: -450px;
+ margin-top: -350px;
+
+ padding: 40px 60px;
+
+ box-sizing: border-box; /* css note: lets use border-box; no need to add padding+border to get to 100% */
+ -o-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ background-color: white;
+
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+ border: 1px solid rgba(0, 0, 0, .3);
+
+ transition: transform .3s ease-out;
+ -o-transition: -o-transform .3s ease-out;
+ -moz-transition: -moz-transform .3s ease-out;
+ -webkit-transition: -webkit-transform .3s ease-out;
+}
+
+
+.slide {
+ display: none;
+}
+
+.slide.far-past {
+ display: block;
+ transform: translate(-2040px);
+ -o-transform: translate(-2040px);
+ -moz-transform: translate(-2040px);
+ -webkit-transform: translate3d(-2040px, 0, 0);
+}
+.slide.past {
+ display: block;
+ transform: translate(-1020px);
+ -o-transform: translate(-1020px);
+ -moz-transform: translate(-1020px);
+ -webkit-transform: translate3d(-1020px, 0, 0);
+}
+
+.slide.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
+.slide.next {
+ display: block;
+ transform: translate(1020px);
+ -o-transform: translate(1020px);
+ -moz-transform: translate(1020px);
+ -webkit-transform: translate3d(1020px, 0, 0);
+}
+
+.slide.far-next {
+ display: block;
+ transform: translate(2040px);
+ -o-transform: translate(2040px);
+ -moz-transform: translate(2040px);
+ -webkit-transform: translate3d(2040px, 0, 0);
+}
+
+
+/***********
+ * styles
+ */
+
+.slide h1 { // use h1 for title
+ margin-top: 200px;
+}
+
+
+.slide h2 { // use h2 for section title/segue
+ position: absolute;
+ bottom: 150px;
+}
+
+.slide.fill h3 {
+ background: rgba(255, 255, 255, .75);
+ padding-top: .2em;
+ padding-bottom: .3em;
+ margin-top: -.2em;
+ margin-left: -60px;
+ padding-left: 60px;
+ margin-right: -60px;
+ padding-right: 60px;
+}
+
+.slide iframe {
+ width: 100%;
+
+ height: 620px;
+
+ background: white;
+ border: 1px solid rgb(192, 192, 192);
+ margin: -1px;
+ /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
+
+ overflow: hidden;
+}
+
+.slide h3 + iframe {
+ margin-top: 40px;
+ height: 540px;
+}
+
+.slide.fill iframe {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+
+ border: 0;
+ margin: 0;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+
+.slide.fill img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ min-width: 100%;
+ min-height: 100%;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+
+
+.slide img.centered {
+ margin: 0 auto;
+ display: block;
+}
+
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+th {
+ text-align: left;
+}
+
+td,
+th {
+ border: 1px solid rgb(224, 224, 224);
+ padding: 5px 10px;
+ vertical-align: top;
+}
+
+ul {
+ list-style-type: square;
+}
+
+.source {
+ position: absolute;
+ left: 60px;
+ top: 644px;
+ padding-right: 175px;
+
+ font-size: 15px;
+ letter-spacing: 0;
+ line-height: 18px;
+}
+
+q {
+ font-size: 300%; // 60px
+ display: block;
+ margin-left: 1em;
+}
+
+q::before {
+ content: '“';
+ color: rgb(192, 192, 192);
+ position: absolute;
+ display: inline-block;
+ margin-left: -1.1em;
+ width: 1em;
+ text-align: right;
+}
+
+q::after {
+ content: '”';
+ color: rgb(192, 192, 192);
+}
+
+
+div.author {
+ text-align: right;
+
+ margin-top: 20px;
+ margin-right: 150px;
+
+ font-size: 200%; // 40px;
+}
+
+div.author::before {
+ content: '—';
+}
+
+
+/***********
+ * smaller
+ */
+
+.slide.smaller {
+
+ p, ul, table { font-size: 80%; } // 20px
+
+ pre { font-size: 60%; } // 15px
+
+ q { font-size: 200%; } // 40px
+}
+
+
+
+
+/*********************************
+ * general text-alignment classes
+ */
+
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+
+
+/*********************************
+ * general color classes
+ */
+
+.white { color: white; }
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/blank5/screen.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/blank5/screen.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,31 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+.slide
+{
+ display: block !important;
+ margin: 1.5em 0 0;
+ border-top: 1px solid #888;
+
+ h1 { border-bottom: 1px solid #AAA; }
+
+
+ &:first-child {
+ margin: 0;
+ border: none;
+
+ h1 {
+ border: none;
+ padding-top: 1.5em; }
+ }
+}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/g5/print.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/g5/print.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,35 @@
+/*********************************
+ * CSS @media print rules (not projection or screen)
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+body { font-size: 12pt; }
+
+
+.slide {
+ display: block !important;
+ page-break-inside: avoid;
+
+ h1 { page-break-after: avoid; }
+ ul { page-break-inside: avoid; }
+
+ h1 { border-top: 2pt solid gray;
+ border-bottom: 1px dotted silver;
+ }
+
+ /********************
+ * Extra styling for first slide (title/cover slide)
+ */
+
+ &:first-child {
+ margin-bottom: 3em;
+
+ h1 { font-size: 200%;
+ border: none;
+ margin: 0.5em 0 0.25em; }
+ h3 { margin: 0; padding: 0;}
+ h4 { margin: 0 0 0.5em; padding: 0;}
+ }
+}
\ No newline at end of file
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/g5/projection.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/g5/projection.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,307 @@
+/*********************************
+ * CSS @media projection rules (not print or screen)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+
+html {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+
+ height: 100%;
+ min-height: 740px;
+
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ background: rgb(215, 215, 215);
+ background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+ background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
+}
+
+.presentation {
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+
+ position: absolute;
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
+.slide {
+ display: block;
+
+ position: absolute;
+ overflow: hidden;
+
+ width: 900px;
+ height: 700px;
+
+ left: 50%;
+ top: 50%;
+
+ margin-left: -450px;
+ margin-top: -350px;
+
+ padding: 40px 60px;
+
+ box-sizing: border-box; /* css note: lets use border-box; no need to add padding+border to get to 100% */
+ -o-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ background-color: white;
+
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+ border: 1px solid rgba(0, 0, 0, .3);
+
+ transition: transform .3s ease-out;
+ -o-transition: -o-transform .3s ease-out;
+ -moz-transition: -moz-transform .3s ease-out;
+ -webkit-transition: -webkit-transform .3s ease-out;
+}
+
+
+.slide {
+ display: none;
+}
+
+.slide.far-past {
+ display: block;
+ transform: translate(-2040px);
+ -o-transform: translate(-2040px);
+ -moz-transform: translate(-2040px);
+ -webkit-transform: translate3d(-2040px, 0, 0);
+}
+.slide.past {
+ display: block;
+ transform: translate(-1020px);
+ -o-transform: translate(-1020px);
+ -moz-transform: translate(-1020px);
+ -webkit-transform: translate3d(-1020px, 0, 0);
+}
+
+.slide.current {
+ display: block;
+ transform: translate(0);
+ -o-transform: translate(0);
+ -moz-transform: translate(0);
+ -webkit-transform: translate3d(0, 0, 0);
+}
+
+.slide.next {
+ display: block;
+ transform: translate(1020px);
+ -o-transform: translate(1020px);
+ -moz-transform: translate(1020px);
+ -webkit-transform: translate3d(1020px, 0, 0);
+}
+
+.slide.far-next {
+ display: block;
+ transform: translate(2040px);
+ -o-transform: translate(2040px);
+ -moz-transform: translate(2040px);
+ -webkit-transform: translate3d(2040px, 0, 0);
+}
+
+
+/***********
+ * styles
+ */
+
+.slide h1 { // use h1 for title
+ margin-top: 200px;
+}
+
+
+.slide h2 { // use h2 for section title/segue
+ position: absolute;
+ bottom: 150px;
+}
+
+.slide.fill h3 {
+ background: rgba(255, 255, 255, .75);
+ padding-top: .2em;
+ padding-bottom: .3em;
+ margin-top: -.2em;
+ margin-left: -60px;
+ padding-left: 60px;
+ margin-right: -60px;
+ padding-right: 60px;
+}
+
+.slide iframe {
+ width: 100%;
+
+ height: 620px;
+
+ background: white;
+ border: 1px solid rgb(192, 192, 192);
+ margin: -1px;
+ /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
+
+ overflow: hidden;
+}
+
+.slide h3 + iframe {
+ margin-top: 40px;
+ height: 540px;
+}
+
+.slide.fill iframe {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+
+ border: 0;
+ margin: 0;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+
+.slide.fill img {
+ position: absolute;
+ left: 0;
+ top: 0;
+ min-width: 100%;
+ min-height: 100%;
+
+ border-radius: 10px;
+ -o-border-radius: 10px;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+
+ z-index: -1;
+}
+
+
+.slide img.centered {
+ margin: 0 auto;
+ display: block;
+}
+
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+th {
+ text-align: left;
+}
+
+td,
+th {
+ border: 1px solid rgb(224, 224, 224);
+ padding: 5px 10px;
+ vertical-align: top;
+}
+
+ul {
+ list-style-type: square;
+}
+
+.source {
+ position: absolute;
+ left: 60px;
+ top: 644px;
+ padding-right: 175px;
+
+ font-size: 15px;
+ letter-spacing: 0;
+ line-height: 18px;
+}
+
+q {
+ font-size: 300%; // 60px
+ display: block;
+ margin-left: 1em;
+}
+
+q::before {
+ content: '“';
+ color: rgb(192, 192, 192);
+ position: absolute;
+ display: inline-block;
+ margin-left: -1.1em;
+ width: 1em;
+ text-align: right;
+}
+
+q::after {
+ content: '”';
+ color: rgb(192, 192, 192);
+}
+
+
+div.author {
+ text-align: right;
+
+ margin-top: 20px;
+ margin-right: 150px;
+
+ font-size: 200%; // 40px;
+}
+
+div.author::before {
+ content: '—';
+}
+
+
+/***********
+ * smaller
+ */
+
+.slide.smaller {
+
+ p, ul, table { font-size: 80%; } // 20px
+
+ pre { font-size: 60%; } // 15px
+
+ q { font-size: 200%; } // 40px
+}
+
+
+
+
+/*********************************
+ * general text-alignment classes
+ */
+
+.left { text-align: left; }
+.center { text-align: center; }
+.right { text-align: right; }
+
+
+/*********************************
+ * general color classes
+ */
+
+.white { color: white; }
diff -r 46a09e9020a3 -r f77de7e7fb66 slides/themes/g5/screen.css.less
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/slides/themes/g5/screen.css.less Fri Feb 06 01:26:13 2015 +0900
@@ -0,0 +1,31 @@
+/*********************************
+ * CSS @media screen (not projection or print)
+ *
+ * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
+ * 2) screen -> outline mode (display all slides-at-once on screen)
+ * 3) print -> print (and print preview)
+ *
+ * toggle between projection/screen (that is, slideshow/outline) mode using t-key
+ */
+
+//////////////////////////////////////
+// note: this is a less extendend css script, to learn more about less; see lesscss.org)
+
+.slide
+{
+ display: block !important;
+ margin: 1.5em 0 0;
+ border-top: 1px solid #888;
+
+ h1 { border-bottom: 1px solid #AAA; }
+
+
+ &:first-child {
+ margin: 0;
+ border: none;
+
+ h1 {
+ border: none;
+ padding-top: 1.5em; }
+ }
+}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+