Last active
January 4, 2020 04:56
-
-
Save cm3/3b57b8bf4e84a86569adbd38e6f2fe0d to your computer and use it in GitHub Desktop.
google photos album viewer sample (each description is supposed to begin with month/day), IDs and keys should be replaced. See http://cm3.hateblo.jp/entry/2020/01/04/034303
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment