cm3/index.html

## index.html
<html>
<head>
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://unpkg.com/vue"></script>
<script>

const getDatedList = function (_original){
	const datePattern = /^(\d+)\/(\d+)\s+/;
	arranged_list = [...Array(367)].map(e => {return {}}); //other and 365+(1 for leap year)
	for (let i=0; i<_original.length; i++){
		//_original[i].description
		let [, month, day] = datePattern.exec(_original[i].description);
		let date_num = Math.floor(
  			(new Date(`${month}, ${day} 2020`) - new Date(new Date().getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
		);
		if (!(`${month}\/${day}` in arranged_list[date_num])){arranged_list[date_num][`${month}\/${day}`]=[]}
		_original[i].description = _original[i].description.replace(datePattern,"")
		arranged_list[date_num][`${month}\/${day}`].push(_original[i])
	}
	return arranged_list
}

  /**
   * Sample JavaScript code for photoslibrary.mediaItems.search
   * See instructions for running APIs Explorer code samples locally:
   * https://developers.google.com/explorer-help/guides/code_samples#javascript
   */

  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/photoslibrary https://www.googleapis.com/auth/photoslibrary.readonly https://www.googleapis.com/auth/photoslibrary.readonly.appcreateddata"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    gapi.client.setApiKey("**ApiKey**");
    return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/photoslibrary/v1/rest")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.photoslibrary.mediaItems.search({
      "resource": {
        "albumId": "**albumId**"
      }
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                vue.result_list = getDatedList(response.result.mediaItems);
                console.log("Response", response.result.mediaItems);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: "**client_id**"});
  });
</script>
<style>
h2{background-color:#000000;color:#FFFFFF;padding:0.5em;}
h3{background-color:#66FFAA;padding:0.5em;margin:0.5em;}
div.flex{display:flex;margin:1em;}
div.half{width:40%:margin:3%;}
</style>
</head>
<body>
<h1>一日二歩</h1>
<button onclick="authenticate().then(loadClient)">authorize, load</button>
<button onclick="execute()">and execute</button>
<div id="app"><template>
                <div v-for="(result_dict, index) in result_list">
                    <div v-for="(items, index) in result_dict" class="flex">
                    <h2>{{index}}</h2>
                    <div v-for="item in items" class="half">
                       <h3>{{item.description}}</h3>
                       <img :src="item.baseUrl" />
                    </div>
                    </div>
                </div>
</template></div>
<script>
let vue = new Vue({
    el: '#app',
    data: {
        result_list: []
    }
})
</script>
</body>
</html>
	<html>
	<head>
	<script src="https://apis.google.com/js/api.js"></script>
	<script src="https://unpkg.com/vue"></script>
	<script>

	const getDatedList = function (_original){
	const datePattern = /^(\d+)\/(\d+)\s+/;
	arranged_list = [...Array(367)].map(e => {return {}}); //other and 365+(1 for leap year)
	for (let i=0; i<_original.length; i++){
	//_original[i].description
	let [, month, day] = datePattern.exec(_original[i].description);
	let date_num = Math.floor(
	(new Date(`${month}, ${day} 2020`) - new Date(new Date().getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24
	);
	if (!(`${month}\/${day}` in arranged_list[date_num])){arranged_list[date_num][`${month}\/${day}`]=[]}
	_original[i].description = _original[i].description.replace(datePattern,"")
	arranged_list[date_num][`${month}\/${day}`].push(_original[i])
	}
	return arranged_list
	}

	/**
	* Sample JavaScript code for photoslibrary.mediaItems.search
	* See instructions for running APIs Explorer code samples locally:
	* https://developers.google.com/explorer-help/guides/code_samples#javascript
	*/

	function authenticate() {
	return gapi.auth2.getAuthInstance()
	.signIn({scope: "https://www.googleapis.com/auth/photoslibrary https://www.googleapis.com/auth/photoslibrary.readonly https://www.googleapis.com/auth/photoslibrary.readonly.appcreateddata"})
	.then(function() { console.log("Sign-in successful"); },
	function(err) { console.error("Error signing in", err); });
	}
	function loadClient() {
	gapi.client.setApiKey("ApiKey");
	return gapi.client.load("https://content.googleapis.com/discovery/v1/apis/photoslibrary/v1/rest")
	.then(function() { console.log("GAPI client loaded for API"); },
	function(err) { console.error("Error loading GAPI client for API", err); });
	}
	// Make sure the client is loaded and sign-in is complete before calling this method.
	function execute() {
	return gapi.client.photoslibrary.mediaItems.search({
	"resource": {
	"albumId": "albumId"
	}
	})
	.then(function(response) {
	// Handle the results here (response.result has the parsed body).
	vue.result_list = getDatedList(response.result.mediaItems);
	console.log("Response", response.result.mediaItems);
	},
	function(err) { console.error("Execute error", err); });
	}
	gapi.load("client:auth2", function() {
	gapi.auth2.init({client_id: "client_id"});
	});
	</script>
	<style>
	h2{background-color:#000000;color:#FFFFFF;padding:0.5em;}
	h3{background-color:#66FFAA;padding:0.5em;margin:0.5em;}
	div.flex{display:flex;margin:1em;}
	div.half{width:40%:margin:3%;}
	</style>
	</head>
	<body>
	<h1>一日二歩</h1>
	<button onclick="authenticate().then(loadClient)">authorize, load</button>
	<button onclick="execute()">and execute</button>
	<div id="app"><template>
	<div v-for="(result_dict, index) in result_list">
	<div v-for="(items, index) in result_dict" class="flex">
	<h2>{{index}}</h2>
	<div v-for="item in items" class="half">
	<h3>{{item.description}}</h3>
	<img :src="item.baseUrl" />
	</div>
	</div>
	</div>
	</template></div>
	<script>
	let vue = new Vue({
	el: '#app',
	data: {
	result_list: []
	}
	})
	</script>
	</body>
	</html>