バケット内のアイテム一覧を取得する
では、htmlだけでどこまでできるのか確かめてみましょう。まずは一番簡単なサンプルとして、あるバケット内のアイテム一覧を表示してみます。これでも結構大変なんで手順の概略だけ先に箇条書きにしておきます。
- バケットを作成する
- バケットにAPIでアクセスできるよう設定
- ファイルをアップする
- そのバケットにアクセスする専用のIAMユーザを作成
- そのIAMユーザがAPIを使用できるようにAccessKeyを発行
- そのIAMユーザがバケットを使用できるようにPermissionを設定
- HTML作成
- ブラウザでHTML読み込み＆実行
(以下注意点だけ説明していく)
バケットにAPIでアクセスできるよう設定
S3管理画面→バケット選択→Properties→Permissions→Add CORS Configuration
で、以下を設定する。
HTML5の仕様で、クロスドメインでも通信できるようにする設定です
<CORSConfiguration> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
IAMユーザを作成し、対象となるバケットだけアクセスできるようにする
IAM管理画面→Users→ユーザ選択→Permissions→Attach User Policy
で以下を設定する
{
"Version":"2012-10-17",
"Statement":[
{
"Effect":"Allow",
"Action": ["s3:ListAllMyBuckets", "s3:GetBucketLocation"],
"Resource":"arn:aws:s3:::*"
},
{
"Effect":"Allow",
"Action":[
"s3:ListBucket",
"s3:PutObject",
"s3:GetObject",
"s3:DeleteObject"
],
"Resource": "arn:aws:s3:::バケット名*"
}
]
}
APIキーを発行
IAM管理画面→Users→ユーザ選択→Secrity Credentials→Access Keys→「Manage Access Keys」
ボタンを押して、APIキーを発行する
HTML作成
<!DOCTYPE html> <html> <head> <title>AWS サンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>AWS サンプル</h1> <button id="btn1">listBuckets</button> <div id="status">結果</div> <div id="objects">リスト</div> <script src="http://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc13.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script type="text/javascript">//<![CDATA[ $(function() { AWS.config.region = 'ap-northeast-1'; AWS.config.update({ accessKeyId : 'アクセスキー', secretAccessKey : 'シークレットキー' }); var s3 = new AWS.S3({params: {Bucket: 'バケット名'}}); $("#btn1").click( function() { s3.listObjects(function (err, data) { if(err) { $("#status").html("失敗しました"); console.dir(err); return; } $("#status").html("読み込み成功"); for( var i=0; i<data.Contents.length; ++i) { $("#objects").append("<li>"+data.Contents[i].Key+"</li>"); } }); }); }); //]]></script> </body> </html>
