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.
オブジェクトストレージを使って 
イメージビューアを 
作ってみる 
GMOインターネット株式会社 
ホスティング事業部 
斉藤弘信 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reser...
自己紹介(しゃべる人) 
• 斉藤弘信(@hironobu_s) 
• 所属:GMOインターネットホスティング事業部 
• フロントの開発したり、デーモン書いたり、Linux弄 
ったり、サーバの面倒見たり、イベントの企画したり 
• 8月頃か...
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 
自己紹介 
• 美雲このは(@MikumoConoHa) 
• クラウドのようなVPS「ConoHa」の応援団長 
• デー...
発表の前に 
https://www.conoha.jp/osc2014 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
オブジェクトストレージ始めました 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
オブジェクトストレージ 
• 今年9月からの新オプションサービス(有料) 
• インターネット経由で使えるストレージ 
• 450円/100GB〜 
• 容量無制限、転送量課金なし 
Copyright (c) 2014 GMO Interne...
コントロールパネルと統合されている 
ブラウザからちょっとした管理ができます
もうちょっと詳しく 
• REST APIを通じてアクセスする 
• すべてのデータをオブジェクトとして扱う 
• オブジェクトにはメタデータを付加できる 
• フォルダなどの概念がないフラットな構造 
• 冗長化による高い信頼性 
• 基盤は...
ConoHa技術ブログに連載があります 
https://www.conoha.jp/blog/tech/2642.html
やってみないとわからないよね 
ということで、簡単なイメージビューアを作ってみる 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
イメージビューアを作る 
• Webブラウザで動作する 
• ConoHaブログの画像(250個)を使用 
• 画像をオブジェクトストレージに保存 
• デモページ(https://www.conoha.jp/osc2014) 
Copyrig...
実装のポイント 
• 画像アップロードはPHPでREST APIを叩く 
• ビューアはbackbone.jsでお手軽に作る 
• 画像ファイルはオブジェクトストレージから 
直接読み込む(コンテナ公開機能) 
Copyright (c) 20...
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
デモ 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
アップロードスクリプト 
• 実装はPHP+cURL 
• コンテナのACL設定を変更する 
(コンテナ公開機能) 
• 詳細は技術ブログをご覧ください 
https://www.conoha.jp/blog/tech/3429.html 
C...
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 
この部分
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 
実装
すいませんGitHub見てください・・・ 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
イメージビューア本体 
• 実装はHTML5 + backbone.js 
• ライブラリの管理にbower 
• 開発のサポートにGrunt 
• オブジェクトストレージが返すJSONを、 
そのままbackbone.jsのCollectio...
この部分 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
オブジェクトストレージから画像を取得するシーケンス図 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
もう一度デモ 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
オブジェクトストレージにホストする 
• イメージビューアはHTML, CSS, JavaScriptのみで構 
成されているので、オブジェクトストレージにホスト 
することもできる。 
• オブジェクトストレージ上でWebサイトを作れる 
•...
オブジェクトストレージまとめ 
• REST APIを通じてアクセスする 
• すべてのデータをオブジェクトとして扱う 
• オブジェクトにはメタデータを付加できる 
• フォルダなどの概念がないフラットな構造 
• 冗長化による高い信頼性 
...
オブジェクトストレージまとめ 
• 450円/100GB〜 
• 容量無制限、転送量課金なし 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
(参考) ConoHaブログ 
(https://www.conoha.jp/blog/) 
• イベントレポート 
• 技術ブログ 
• このはとあんずの 
• VPS勉強室(マンガ)
ご清聴ありがとうございました 
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
みんなConoHaブースに来てね!
Upcoming SlideShare
Loading in …5
×

オブジェクトストレージを使ってイメージビューアを作ってみる

2,472 views

Published on

オープンソースカンファレンス2014秋で発表したConoHaの技術セミナーの資料です

Published in: Internet
  • Be the first to comment

オブジェクトストレージを使ってイメージビューアを作ってみる

  1. 1. オブジェクトストレージを使って イメージビューアを 作ってみる GMOインターネット株式会社 ホスティング事業部 斉藤弘信 Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 2014年10月19日
  2. 2. 自己紹介(しゃべる人) • 斉藤弘信(@hironobu_s) • 所属:GMOインターネットホスティング事業部 • フロントの開発したり、デーモン書いたり、Linux弄 ったり、サーバの面倒見たり、イベントの企画したり • 8月頃からConoHaの人になりました Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. • 緑陣営Lv7
  3. 3. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 自己紹介 • 美雲このは(@MikumoConoHa) • クラウドのようなVPS「ConoHa」の応援団長 • データセンターの座敷童子 • 年齢: 13歳くらい? • 身長: 150cm+α • https://www.conoha.jp/blog/conoha
  4. 4. 発表の前に https://www.conoha.jp/osc2014 Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  5. 5. オブジェクトストレージ始めました Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  6. 6. オブジェクトストレージ • 今年9月からの新オプションサービス(有料) • インターネット経由で使えるストレージ • 450円/100GB〜 • 容量無制限、転送量課金なし Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  7. 7. コントロールパネルと統合されている ブラウザからちょっとした管理ができます
  8. 8. もうちょっと詳しく • REST APIを通じてアクセスする • すべてのデータをオブジェクトとして扱う • オブジェクトにはメタデータを付加できる • フォルダなどの概念がないフラットな構造 • 冗長化による高い信頼性 • 基盤はOpenStack Swift Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  9. 9. ConoHa技術ブログに連載があります https://www.conoha.jp/blog/tech/2642.html
  10. 10. やってみないとわからないよね ということで、簡単なイメージビューアを作ってみる Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  11. 11. イメージビューアを作る • Webブラウザで動作する • ConoHaブログの画像(250個)を使用 • 画像をオブジェクトストレージに保存 • デモページ(https://www.conoha.jp/osc2014) Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  12. 12. 実装のポイント • 画像アップロードはPHPでREST APIを叩く • ビューアはbackbone.jsでお手軽に作る • 画像ファイルはオブジェクトストレージから 直接読み込む(コンテナ公開機能) Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  13. 13. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  14. 14. デモ Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  15. 15. アップロードスクリプト • 実装はPHP+cURL • コンテナのACL設定を変更する (コンテナ公開機能) • 詳細は技術ブログをご覧ください https://www.conoha.jp/blog/tech/3429.html Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  16. 16. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. この部分
  17. 17. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved. 実装
  18. 18. すいませんGitHub見てください・・・ Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  19. 19. イメージビューア本体 • 実装はHTML5 + backbone.js • ライブラリの管理にbower • 開発のサポートにGrunt • オブジェクトストレージが返すJSONを、 そのままbackbone.jsのCollectionで扱います Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  20. 20. この部分 Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  21. 21. オブジェクトストレージから画像を取得するシーケンス図 Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  22. 22. もう一度デモ Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  23. 23. オブジェクトストレージにホストする • イメージビューアはHTML, CSS, JavaScriptのみで構 成されているので、オブジェクトストレージにホスト することもできる。 • オブジェクトストレージ上でWebサイトを作れる • URLが変更できなため、あまり実用的ではないかも? Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  24. 24. オブジェクトストレージまとめ • REST APIを通じてアクセスする • すべてのデータをオブジェクトとして扱う • オブジェクトにはメタデータを付加できる • フォルダなどの概念がないフラットな構造 • 冗長化による高い信頼性 Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  25. 25. オブジェクトストレージまとめ • 450円/100GB〜 • 容量無制限、転送量課金なし Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  26. 26. (参考) ConoHaブログ (https://www.conoha.jp/blog/) • イベントレポート • 技術ブログ • このはとあんずの • VPS勉強室(マンガ)
  27. 27. ご清聴ありがとうございました Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
  28. 28. みんなConoHaブースに来てね!

×