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

1. オブジェクトストレージを使って
イメージビューアを
作ってみる
GMOインターネット株式会社
ホスティング事業部
斉藤弘信
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
2014年10月19日

2. 自己紹介(しゃべる人)
• 斉藤弘信(@hironobu_s)
• 所属:GMOインターネットホスティング事業部
• フロントの開発したり、デーモン書いたり、Linux弄
ったり、サーバの面倒見たり、イベントの企画したり
• 8月頃からConoHaの人になりました
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
• 緑陣営Lv7

3. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
自己紹介
• 美雲このは(@MikumoConoHa)
• クラウドのようなVPS「ConoHa」の応援団長
• データセンターの座敷童子
• 年齢: 13歳くらい？
• 身長: 150cm＋α
• https://www.conoha.jp/blog/conoha

4. 発表の前に
https://www.conoha.jp/osc2014
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

5. オブジェクトストレージ始めました
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

6. オブジェクトストレージ
• 今年9月からの新オプションサービス(有料)
• インターネット経由で使えるストレージ
• 450円/100GB〜
• 容量無制限、転送量課金なし
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

7. コントロールパネルと統合されている
ブラウザからちょっとした管理ができます

8. もうちょっと詳しく
• REST APIを通じてアクセスする
• すべてのデータをオブジェクトとして扱う
• オブジェクトにはメタデータを付加できる
• フォルダなどの概念がないフラットな構造
• 冗長化による高い信頼性
• 基盤はOpenStack Swift
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

9. ConoHa技術ブログに連載があります
https://www.conoha.jp/blog/tech/2642.html

10. やってみないとわからないよね
ということで、簡単なイメージビューアを作ってみる
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

11. イメージビューアを作る
• Webブラウザで動作する
• ConoHaブログの画像(250個)を使用
• 画像をオブジェクトストレージに保存
• デモページ(https://www.conoha.jp/osc2014)
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

12. 実装のポイント
• 画像アップロードはPHPでREST APIを叩く
• ビューアはbackbone.jsでお手軽に作る
• 画像ファイルはオブジェクトストレージから
直接読み込む(コンテナ公開機能)
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

13. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

14. デモ
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

15. アップロードスクリプト
• 実装はPHP+cURL
• コンテナのACL設定を変更する
(コンテナ公開機能)
• 詳細は技術ブログをご覧ください
https://www.conoha.jp/blog/tech/3429.html
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

16. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
この部分

17. Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.
実装

18. すいませんGitHub見てください・・・
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

19. イメージビューア本体
• 実装はHTML5 + backbone.js
• ライブラリの管理にbower
• 開発のサポートにGrunt
• オブジェクトストレージが返すJSONを、
そのままbackbone.jsのCollectionで扱います
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

20. この部分
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

21. オブジェクトストレージから画像を取得するシーケンス図
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

22. もう一度デモ
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

23. オブジェクトストレージにホストする
• イメージビューアはHTML, CSS, JavaScriptのみで構
成されているので、オブジェクトストレージにホスト
することもできる。
• オブジェクトストレージ上でWebサイトを作れる
• URLが変更できなため、あまり実用的ではないかも？
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

24. オブジェクトストレージまとめ
• REST APIを通じてアクセスする
• すべてのデータをオブジェクトとして扱う
• オブジェクトにはメタデータを付加できる
• フォルダなどの概念がないフラットな構造
• 冗長化による高い信頼性
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

25. オブジェクトストレージまとめ
• 450円/100GB〜
• 容量無制限、転送量課金なし
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

26. (参考) ConoHaブログ
(https://www.conoha.jp/blog/)
• イベントレポート
• 技術ブログ
• このはとあんずの
• VPS勉強室(マンガ)

27. ご清聴ありがとうございました
Copyright (c) 2014 GMO Internet, Inc. All Rights Reserved.

28. みんなConoHaブースに来てね！