Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JAWS-UGにゴマをすろうと思って
AWSでHTML5してみた
HTML5 Caravan Osaka@AWS FESTA Kansai 2013
2013.9.28
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
H...
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
HTML5
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設定でできるようになる。
自分サーバ
exampl...
ウェブブラウザからS3に直接ファイルを
アップロードしてみた
https://gist.github.com/bathtimefish/6657812
http://www.ioncannon.net/programming/1539/direc...
普通はサーバー経由
WebPage サーバ
Amazon S3 API
今回は直接アップする
WebPage
<AllowedOrigin>
CORS
PHP
S3 upload URL
File Name
XHR
S3
S3
Amazon S...
Demo
やってみた感想
けっこう使えるかも。サーバー負荷減るかも
安価で大容量のGUI付きファイルストレージ
が簡単に持てる。
App Hosting Serverとは別の拡張性の高いスト
レージが安全に使える。App側の開発もカン
タン。
まとめ
S3安くて便利!
WebアプリのRemote Storage と
して最適じゃね!?
S3安くて便利!
WebアプリのRemote Storage と
して最適じゃね!?
あれ、よく考えたらGAEやHerokuをPaaSにし
てファイルだけS3に上げたらいいんじゃnry
アプリはもちろんEC2でたてる!!
CORSとかハイテク!
CORSとかハイテク!
実はGoogle Cloud Storageでも
同じことが出来(ry
https://developers.google.com/storage/docs/cross-origin?
hl=ja#Configuring...
みんな、
S3つかおうぜ!!
Thanks!
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
Upcoming SlideShare
Loading in …5
×

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

1,191 views

Published on

Published in: Technology

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

  1. 1. JAWS-UGにゴマをすろうと思って AWSでHTML5してみた HTML5 Caravan Osaka@AWS FESTA Kansai 2013 2013.9.28 Bathtimefish 村岡 正和
  2. 2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など むらおか まさかず 村岡正和 HTML5-WEST.jp Webアプリケーション開発 IT業務システム設計/開発 Webサービス導入/事業戦略コンサルティング @bathtimefish
  3. 3. 監修しました。 実例ごとの実装例がたくさん書いてあ ります。ウェブサイト制作やCMSの運 用時に便利です。 好評販売中!!
  4. 4. HTML5
  5. 5. How powerful is AWS & HTML5 !?
  6. 6. ぜんぜん 思いつかねえ。。
  7. 7. さんざん調べた。。。
  8. 8. あった!
  9. 9. http://www.w3.org/TR/cors/ Cross-Origin Resource Sharing
  10. 10. AWS S3 http://aws.amazon.com/jp/s3/
  11. 11. S3はCORSをサポートしている
  12. 12. S3はCORSをサポートしている 小っちぇえとか言うな! ヾ(*`Д́*)ノ
  13. 13. 通常他サーバーとデータ送受信は許可されていない 他サーバ <AllowedOrigin> example.com </AllowedOrigin> XHR 自分サーバ 他サーバ XHR CORS設定でできるようになる。 自分サーバ example.com example.com WebPage WebPage
  14. 14. ウェブブラウザから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.
  15. 15. 普通はサーバー経由 WebPage サーバ Amazon S3 API 今回は直接アップする WebPage <AllowedOrigin> CORS PHP S3 upload URL File Name XHR S3 S3 Amazon S3 REST API “S3 Key” “S3 Secret”
  16. 16. Demo
  17. 17. やってみた感想 けっこう使えるかも。サーバー負荷減るかも 安価で大容量のGUI付きファイルストレージ が簡単に持てる。 App Hosting Serverとは別の拡張性の高いスト レージが安全に使える。App側の開発もカン タン。
  18. 18. まとめ
  19. 19. S3安くて便利! WebアプリのRemote Storage と して最適じゃね!?
  20. 20. S3安くて便利! WebアプリのRemote Storage と して最適じゃね!? あれ、よく考えたらGAEやHerokuをPaaSにし てファイルだけS3に上げたらいいんじゃnry アプリはもちろんEC2でたてる!!
  21. 21. CORSとかハイテク!
  22. 22. CORSとかハイテク! 実はGoogle Cloud Storageでも 同じことが出来(ry https://developers.google.com/storage/docs/cross-origin? hl=ja#Configuring-CORS-on-a-Bucket S3チョー便利! さすがAWS!!
  23. 23. みんな、 S3つかおうぜ!!
  24. 24. Thanks!

×