supinf/dynamic-websites-using-aws-sdk-index.html

## dynamic-websites-using-aws-sdk-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>AWS Javascript Browser SDK Example</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
  <script src="//sdk.amazonaws.com/js/aws-sdk-2.0.16.min.js"></script>
</head>
<body>

  <fb:login-button scope="public_profile" onlogin="checkLoginState();"></fb:login-button>
  <div>Browsers used by you:</div>
  <div id="chart">
    <svg style="width:500px;height:500px" />
  </div>
  <div>
    <span>Browsers used by all users:</span>
    <ul id="browser-list"></ul>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js" charset="utf-8"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js" charset="utf-8"></script>
  <script src="//code.jquery.com/jquery.js"></script>
  <script type="text/JavaScript">
  // IAM Role that you created for Login With Facebook
  var awsRoleArn = 'arn:aws:iam::230936187603:role/demo-awssdk',
      awsRegion = 'ap-northeast-1',
      facebookAppId = '1430761990526092';

  window.fbAsyncInit = function () {
    FB.init({appId: facebookAppId, cookie: true, xfbml: true, version: 'v2.1'});
  };
  function checkLoginState() {
    FB.getLoginStatus(function (response) {
      if (response.status === 'connected') {
        AWS.config.credentials = new AWS.WebIdentityCredentials({
          RoleArn: awsRoleArn,
          ProviderId: 'graph.facebook.com',
          WebIdentityToken: response.authResponse.accessToken
        });
        // AWS region that we're working in
        AWS.config.region = awsRegion;
        doSomethingWithAwsSdk(response.authResponse.userID);
      }
    });
  }

  function doSomethingWithAwsSdk(userID) {
    var detectedBrowser = identifyBrowser();
    var params = {
      TableName: 'user-browsers',
      Key: {
        userId: { S: userID},
        browser: { S: detectedBrowser.n+'-'+detectedBrowser.v}
      },
      AttributeUpdates: {
        count: { Action: 'ADD', Value: { N: '1'}}
      },
      ReturnValues: 'UPDATED_NEW'
    }

    // use DynamoDB's "Atomic Counter" function to update the
    // count page views by the type of browser that we detected
    window.db = new AWS.DynamoDB();
    db.updateItem(params, function (err, data) {
      if (err) {
        console.log(err, err.stack);
        return;
      }
      $('.fb_iframe_widget').hide();
      updateBrowserCount(userID);
    });
  }
  // display current detected browser count
  function updateBrowserCount(userID) {
    var params = {
      TableName: 'user-browsers',
      Select: 'SPECIFIC_ATTRIBUTES',
      AttributesToGet: ['browser', 'count'],
      KeyConditions: {
        'userId': {
          ComparisonOperator: 'EQ',
          AttributeValueList: [{ S: userID}]
        }
      },
    };
    db.query(params, function (err, data) {
      if (err) {
        console.log(err, err.stack);
        return;
      }
      var browsers = [];
      $.each(data.Items, function() {
        browsers.push({
            label: this.browser.S,
            value: this.count.N
        });
      });
      // draw the chart using D3
      drawChart(browsers);
    });
    var params = {
      TableName: 'user-browsers',
      Select: 'SPECIFIC_ATTRIBUTES',
      AttributesToGet: ['browser']
    }
    db.scan(params, function(err, data) {
      if (err) {
        console.log(err, err.stack);
      } else {
        var list = $('#browser-list').html('');
        $.each(data.Items, function() {
          list.append('<li>'+this.browser.S+'</li>');
        });
        // de-dupe browser list
        var seen = {};
        list.find("li").each(function(index, elem) {
          var txt = $(this).text().toLowerCase();
          if (seen[txt]) {
            $(this).remove();
          } else {
            seen[txt] = true;
          }
        });
      }
    });
    // repeat...
    setTimeout(function(){updateBrowserCount(userID)}, 1000 * 10);
  }
  // draw the chart with NVD3
  function drawChart(browsers) {
    nv.addGraph(function() {
      var chart = nv.models.pieChart()
        .x(function(d) { return d.label; })
        .y(function(d) { return d.value; })
        .showLabels(true)
        .labelThreshold(.05)
        .labelType("percent");
      d3.select("#chart svg")
        .datum(browsers)
        .transition().duration(100)
        .call(chart);
      nv.utils.windowResize(chart.update);
    });
  }

  // detect the web browser
  function identifyBrowser(userAgent, elements) {
    var regexps = {
      'Chrome': [ /Chrome\/(\S)/ ],
      'Firefox': [ /Firefox\/(\S)/ ],
      'MSIE': [ /MSIE (\S);/ ],
      'Opera': [ /Opera\/.*?Version\/(\S)/, /* Opera 10 */
      /Opera\/(\S)/ /* Opera 9 and older */
      ],
      'Safari': [ /Version\/(\S).*?Safari\// ],
      'Silk': [ /Silk\/(\S)/ ]
    }, re, m, browser, version;

    if (userAgent === undefined) {
      userAgent = navigator.userAgent;
    }
    if (elements === undefined) {
      elements = 2;
    } else if (elements === 0) {
      elements = 1337;
    }
    for (browser in regexps) {
      while (re = regexps[browser].shift()) {
        if (m = userAgent.match(re)) {
          version = (m[1].match(new RegExp('[^.](?:\.[^.]){0,'
              + (--elements) + '}')))[0];
          return {n: browser, v: version};
        }
      }
    }
    return null;
  }
 // Load the SDK asynchronously
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/ja_JP/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>AWS Javascript Browser SDK Example</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
	<script src="//sdk.amazonaws.com/js/aws-sdk-2.0.16.min.js"></script>
	</head>
	<body>

	<fb:login-button scope="public_profile" onlogin="checkLoginState();"></fb:login-button>
	<div>Browsers used by you:</div>
	<div id="chart">
	<svg style="width:500px;height:500px" />
	</div>
	<div>
	<span>Browsers used by all users:</span>
	<ul id="browser-list"></ul>
	</div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js" charset="utf-8"></script>
	<script src="//code.jquery.com/jquery.js"></script>
	<script type="text/JavaScript">
	// IAM Role that you created for Login With Facebook
	var awsRoleArn = 'arn:aws:iam::230936187603:role/demo-awssdk',
	awsRegion = 'ap-northeast-1',
	facebookAppId = '1430761990526092';

	window.fbAsyncInit = function () {
	FB.init({appId: facebookAppId, cookie: true, xfbml: true, version: 'v2.1'});
	};
	function checkLoginState() {
	FB.getLoginStatus(function (response) {
	if (response.status === 'connected') {
	AWS.config.credentials = new AWS.WebIdentityCredentials({
	RoleArn: awsRoleArn,
	ProviderId: 'graph.facebook.com',
	WebIdentityToken: response.authResponse.accessToken
	});
	// AWS region that we're working in
	AWS.config.region = awsRegion;
	doSomethingWithAwsSdk(response.authResponse.userID);
	}
	});
	}

	function doSomethingWithAwsSdk(userID) {
	var detectedBrowser = identifyBrowser();
	var params = {
	TableName: 'user-browsers',
	Key: {
	userId: { S: userID},
	browser: { S: detectedBrowser.n+'-'+detectedBrowser.v}
	},
	AttributeUpdates: {
	count: { Action: 'ADD', Value: { N: '1'}}
	},
	ReturnValues: 'UPDATED_NEW'
	}

	// use DynamoDB's "Atomic Counter" function to update the
	// count page views by the type of browser that we detected
	window.db = new AWS.DynamoDB();
	db.updateItem(params, function (err, data) {
	if (err) {
	console.log(err, err.stack);
	return;
	}
	$('.fb_iframe_widget').hide();
	updateBrowserCount(userID);
	});
	}
	// display current detected browser count
	function updateBrowserCount(userID) {
	var params = {
	TableName: 'user-browsers',
	Select: 'SPECIFIC_ATTRIBUTES',
	AttributesToGet: ['browser', 'count'],
	KeyConditions: {
	'userId': {
	ComparisonOperator: 'EQ',
	AttributeValueList: [{ S: userID}]
	}
	},
	};
	db.query(params, function (err, data) {
	if (err) {
	console.log(err, err.stack);
	return;
	}
	var browsers = [];
	$.each(data.Items, function() {
	browsers.push({
	label: this.browser.S,
	value: this.count.N
	});
	});
	// draw the chart using D3
	drawChart(browsers);
	});
	var params = {
	TableName: 'user-browsers',
	Select: 'SPECIFIC_ATTRIBUTES',
	AttributesToGet: ['browser']
	}
	db.scan(params, function(err, data) {
	if (err) {
	console.log(err, err.stack);
	} else {
	var list = $('#browser-list').html('');
	$.each(data.Items, function() {
	list.append('<li>'+this.browser.S+'</li>');
	});
	// de-dupe browser list
	var seen = {};
	list.find("li").each(function(index, elem) {
	var txt = $(this).text().toLowerCase();
	if (seen[txt]) {
	$(this).remove();
	} else {
	seen[txt] = true;
	}
	});
	}
	});
	// repeat...
	setTimeout(function(){updateBrowserCount(userID)}, 1000 * 10);
	}
	// draw the chart with NVD3
	function drawChart(browsers) {
	nv.addGraph(function() {
	var chart = nv.models.pieChart()
	.x(function(d) { return d.label; })
	.y(function(d) { return d.value; })
	.showLabels(true)
	.labelThreshold(.05)
	.labelType("percent");
	d3.select("#chart svg")
	.datum(browsers)
	.transition().duration(100)
	.call(chart);
	nv.utils.windowResize(chart.update);
	});
	}

	// detect the web browser
	function identifyBrowser(userAgent, elements) {
	var regexps = {
	'Chrome': [ /Chrome\/(\S)/ ],
	'Firefox': [ /Firefox\/(\S)/ ],
	'MSIE': [ /MSIE (\S);/ ],
	'Opera': [ /Opera\/.?Version\/(\S)/, / Opera 10 */
	/Opera\/(\S)/ /* Opera 9 and older */
	],
	'Safari': [ /Version\/(\S).*?Safari\// ],
	'Silk': [ /Silk\/(\S)/ ]
	}, re, m, browser, version;

	if (userAgent === undefined) {
	userAgent = navigator.userAgent;
	}
	if (elements === undefined) {
	elements = 2;
	} else if (elements === 0) {
	elements = 1337;
	}
	for (browser in regexps) {
	while (re = regexps[browser].shift()) {
	if (m = userAgent.match(re)) {
	version = (m[1].match(new RegExp('[^.](?:\.[^.]){0,'
	+ (--elements) + '}')))[0];
	return {n: browser, v: version};
	}
	}
	}
	return null;
	}
	// Load the SDK asynchronously
	(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/ja_JP/sdk.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>
	</body>
	</html>