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

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

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

作ってみる

GMOインターネット株式会社ホスティング事業部斉藤弘信

2014年10月19日


自己紹介(しゃべる人)

•斉藤弘信(@hironobu_s)

•所属:GMOインターネットホスティング事業部

•フロントの開発したり、デーモン書いたり、Linux弄ったり、サーバの面倒見たり、イベントの企画したり

• 8月頃からConoHaの人になりました

•緑陣営Lv7


自己紹介

•美雲このは(@MikumoConoHa)

•クラウドのようなVPS「ConoHa」の応援団長

•データセンターの座敷童子

•年齢: 13歳くらい？

•身長: 150cm＋α

• https://www.conoha.jp/blog/conoha

https://www.conoha.jp/blog/conoha


発表の前に

https://www.conoha.jp/osc2014



オブジェクトストレージ始めました


オブジェクトストレージ

• 今年9月からの新オプションサービス(有料)

• インターネット経由で使えるストレージ• 450円/100GB〜• 容量無制限、転送量課金なし

コントロールパネルと統合されている

ブラウザからちょっとした管理ができます


もうちょっと詳しく

• REST APIを通じてアクセスする

• すべてのデータをオブジェクトとして扱う

• オブジェクトにはメタデータを付加できる

• フォルダなどの概念がないフラットな構造

• 冗長化による高い信頼性

• 基盤はOpenStack Swift

ConoHa技術ブログに連載があります

https://www.conoha.jp/blog/tech/2642.html


やってみないとわからないよね

ということで、簡単なイメージビューアを作ってみる


イメージビューアを作る

• Webブラウザで動作する

• ConoHaブログの画像(250個)を使用

• 画像をオブジェクトストレージに保存

• デモページ(https://www.conoha.jp/osc2014)



実装のポイント

• 画像アップロードはPHPでREST APIを叩く

• ビューアはbackbone.jsでお手軽に作る

• 画像ファイルはオブジェクトストレージから

直接読み込む(コンテナ公開機能)



デモ


アップロードスクリプト

• 実装はPHP+cURL

• コンテナのACL設定を変更する(コンテナ公開機能)

• 詳細は技術ブログをご覧くださいhttps://www.conoha.jp/blog/tech/3429.html

https://www.conoha.jp/blog/tech/3429.html


この部分


実装


すいませんGitHub見てください・・・


イメージビューア本体

• 実装はHTML5 + backbone.js

• ライブラリの管理にbower

• 開発のサポートにGrunt

• オブジェクトストレージが返すJSONを、そのままbackbone.jsのCollectionで扱います


この部分


オブジェクトストレージから画像を取得するシーケンス図


もう一度デモ


オブジェクトストレージにホストする

• イメージビューアはHTML, CSS, JavaScriptのみで構成されているので、オブジェクトストレージにホストすることもできる。

• オブジェクトストレージ上でWebサイトを作れる

• URLが変更できなため、あまり実用的ではないかも？


オブジェクトストレージまとめ

• REST APIを通じてアクセスする

• すべてのデータをオブジェクトとして扱う

• オブジェクトにはメタデータを付加できる

• フォルダなどの概念がないフラットな構造

• 冗長化による高い信頼性


オブジェクトストレージまとめ

• 450円/100GB〜• 容量無制限、転送量課金なし

(https://www.conoha.jp/blog/)

(参考) ConoHaブログ

• イベントレポート

• 技術ブログ

• このはとあんずの

• VPS勉強室(マンガ)

https://www.conoha.jp/blog/


ご清聴ありがとうございました

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