JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた

JAWS-UGにゴマをすろうと思って
AWSでHTML5してみた
HTML5 Caravan Osaka@AWS FESTA Kansai 2013
2013.9.28
Bathtimeﬁsh 村岡正和

HTML5-WEST.jp代表 / html5j マークアップ部部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおかまさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
@bathtimeﬁsh

監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中！！

How powerful is
AWS & HTML5 !?

ぜんぜん
思いつかねえ。。

さんざん調べた。。。

http://www.w3.org/TR/cors/
Cross-Origin Resource Sharing

AWS S3
http://aws.amazon.com/jp/s3/

S3はCORSをサポートしている

S3はCORSをサポートしている
小っちぇえとか言うな！ヾ(*｀Д́*)ﾉ

通常他サーバーとデータ送受信は許可されていない
他サーバ
<AllowedOrigin>
example.com
</AllowedOrigin>
XHR
自分サーバ
他サーバ
XHR
CORS設定でできるようになる。
自分サーバ
example.com
example.com
WebPage
WebPage

ウェブブラウザからS3に直接ファイルを
アップロードしてみた
https://gist.github.com/bathtimeﬁsh/6657812
http://www.ioncannon.net/programming/1539/direct-browser-uploading-amazon-s3-cors-ﬁleapi-xhr2-and-signed-puts/cf.

普通はサーバー経由
WebPage サーバ
Amazon S3 API
今回は直接アップする
WebPage
<AllowedOrigin>
CORS
PHP
S3 upload URL
File Name
XHR
S3
S3
Amazon S3 REST API
“S3 Key”
“S3 Secret”

やってみた感想
けっこう使えるかも。サーバー負荷減るかも
安価で大容量のGUI付きファイルストレージ
が簡単に持てる。
App Hosting Serverとは別の拡張性の高いスト
レージが安全に使える。App側の開発もカン
タン。

S3安くて便利！
WebアプリのRemote Storage と
して最適じゃね！？

S3安くて便利！
WebアプリのRemote Storage と
して最適じゃね！？
あれ、よく考えたらGAEやHerokuをPaaSにし
てファイルだけS3に上げたらいいんじゃnry
アプリはもちろんEC2でたてる！！

CORSとかハイテク！
実はGoogle Cloud Storageでも
同じことが出来(ry
https://developers.google.com/storage/docs/cross-origin?
hl=ja#Configuring-CORS-on-a-Bucket
S3チョー便利！
さすがAWS！！

みんな、
S3つかおうぜ！！

JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた

More Related Content

What's hot (20)

More from Masakazu Muraoka (20)

Recently uploaded (8)

JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた