AWS SDK for JavaScript
SDK v2 開発者ガイド

Amazon S3 バケット内の写真の表示: 完全なコード

このセクションには、Amazon S3 バケット内の写真を表示できる例の完全な HTML コードと JavaScript コードが含まれています。詳細と前提条件については、親セクションを参照してください。

この例の HTML:

<!DOCTYPE html> <html> <head> <!-- **DO THIS**: --> <!-- Replace SDK_VERSION_NUMBER with the current SDK version number --> <script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.js"></script> <script src="./PhotoViewer.js"></script> <script>listAlbums();</script> </head> <body> <h1>Photo Album Viewer</h1> <div id="viewer" /> </body> </html>

このサンプルコードは、GitHub のこちらで入手できます。

この例のブラウザスクリプトコード:

// // Data constructs and initialization. // // **DO THIS**: // Replace BUCKET_NAME with the bucket name. // var albumBucketName = 'BUCKET_NAME'; // **DO THIS**: // Replace this block of code with the sample code located at: // Cognito -- Manage Identity Pools -- [identity_pool_name] -- Sample Code -- JavaScript // // Initialize the Amazon Cognito credentials provider AWS.config.region = 'REGION'; // Region AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: 'IDENTITY_POOL_ID', }); // Create a new service object var s3 = new AWS.S3({ apiVersion: '2006-03-01', params: {Bucket: albumBucketName} }); // A utility function to create HTML. function getHtml(template) { return template.join('\n'); } // // Functions // // List the photo albums that exist in the bucket. function listAlbums() { s3.listObjects({Delimiter: '/'}, function(err, data) { if (err) { return alert('There was an error listing your albums: ' + err.message); } else { var albums = data.CommonPrefixes.map(function(commonPrefix) { var prefix = commonPrefix.Prefix; var albumName = decodeURIComponent(prefix.replace('/', '')); return getHtml([ '<li>', '<button style="margin:5px;" onclick="viewAlbum(\'' + albumName + '\')">', albumName, '</button>', '</li>' ]); }); var message = albums.length ? getHtml([ '<p>Click on an album name to view it.</p>', ]) : '<p>You do not have any albums. Please Create album.'; var htmlTemplate = [ '<h2>Albums</h2>', message, '<ul>', getHtml(albums), '</ul>', ] document.getElementById('viewer').innerHTML = getHtml(htmlTemplate); } }); } // Show the photos that exist in an album. function viewAlbum(albumName) { var albumPhotosKey = encodeURIComponent(albumName) + '/_'; s3.listObjects({Prefix: albumPhotosKey}, function(err, data) { if (err) { return alert('There was an error viewing your album: ' + err.message); } // 'this' references the AWS.Response instance that represents the response var href = this.request.httpRequest.endpoint.href; var bucketUrl = href + albumBucketName + '/'; var photos = data.Contents.map(function(photo) { var photoKey = photo.Key; var photoUrl = bucketUrl + encodeURIComponent(photoKey); return getHtml([ '<span>', '<div>', '<br/>', '<img style="width:128px;height:128px;" src="' + photoUrl + '"/>', '</div>', '<div>', '<span>', photoKey.replace(albumPhotosKey, ''), '</span>', '</div>', '</span>', ]); }); var message = photos.length ? '<p>The following photos are present.</p>' : '<p>There are no photos in this album.</p>'; var htmlTemplate = [ '<div>', '<button onclick="listAlbums()">', 'Back To Albums', '</button>', '</div>', '<h2>', 'Album: ' + albumName, '</h2>', message, '<div>', getHtml(photos), '</div>', '<h2>', 'End of Album: ' + albumName, '</h2>', '<div>', '<button onclick="listAlbums()">', 'Back To Albums', '</button>', '</div>', ] document.getElementById('viewer').innerHTML = getHtml(htmlTemplate); }); }

このサンプルコードは、GitHub のこちらで入手できます。