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

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

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

4. HTML5

6. How powerful is
AWS & HTML5 !?

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

8. さんざん調べた。。。

9. あった！

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

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

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

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

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

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

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

17. Demo

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

19. まとめ

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

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

22. CORSとかハイテク！

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

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

25. Thanks!