1
RICOH THETA x IoT
デベロッパーズ
コンテスト
第二回
クラウドAPI
セミナー
株式会社リコー
新規事業開発本部 SV事業開発センター 2016年6月29日

2
アジェンダ
1. リコークラウドAPIの紹介
2. 機能紹介 その１ ～画像処理～
3. 機能紹介 その２ ～フォト＆メディアストレージ～
4. 機能紹介 その３ ～ビデオコミュニケーション～
5. 機能紹介 その４ ～リモートコントロール～
6. Q&A

3
セミナー資料について
 本セミナーの資料は以下で公開中
http://www.slideshare.net/contest-theta360
 第一回目のセミナーの資料は以下で公開
日本語版
スライド http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-api
ビデオ http://ch.nicovideo.jp/contest-theta360
英語版（English）
スライド http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-developers-
contest-cloud-api-seminar
ビデオ 近日公開予定

4
1. リコークラウドAPIの紹介
株式会社リコー
新規事業開発本部 SV事業開発センター
高桑 寿一

5
リコークラウドAPI
 PC、スマートフォン／タブレット、シングルボード
コンピュータで動くプログラムから利用可能なインターフェース
 リコーが提供する以下の機能を持つ
1. 画像処理
2. ビデオコミュニケーション
3. フォト＆メディアストレージ
4. リモートコントロール
5. 認証・認可
 無償ベータ版
リコークラウドAPI
シングルボード
コンピュータ
PC
スマートフォン／
タブレット
ビデオ
コミュニ
ケーション
フォト＆
メディア
ストレージ
認証
認可
リモート
コントロール
画像処理

6
開発者が利用できるリソース
 開発者は以下を利用可能
1. リコークラウドAPI
2. SDK
3. サンプルプログラム
 githubに公開
https://github.com/ricohapi/
開発者 SDK
サンプル
プログラム
リコークラウドAPI
ビデオ
コミュニ
ケーション
フォト＆
メディア
ストレージ
認証
認可
リモート
コントロール
画像処理

7
利用に必要なもの
 リコークラウドAPIの利用には以下が必要
1. クライアントクレデンシャル ※利用アプリを識別するもの
 クライアントID
 クライアントシークレット
2. ユーザーアカウント ※利用ユーザーを識別するもの
 ユーザーID
 パスワード
 取得方法は前回のセミナースライドの8~9ページ目を参照
日本語版 http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-api
英語版 http://www.slideshare.net/contest-theta360/ricoh-theta-x-iot-developers-
contest-cloud-api-seminar

8
２．機能紹介 その１
～画像処理（フィルター）～
株式会社リコー
新規事業開発本部 SV技術開発センター
永井 浩太

9
概要
 Media Storageに保存した画像に対して、画像処理（フィル
ター）をかけることができる
 処理済み画像は、別画像としてMedia Storageに格納される
Ricoh Cloud API
画像保存
(Media Storage Service)
画像処理
(Image Processing Service)
New!

10
API仕様 – 画像処理(フィルター)
REST API
POST https://ips.ricohapi.com/v1/filter
{
"version": “2016-06-24",
"source": {
"mss_id": "a39jcbc5-053c-4873-a7c0-0b20c3948472"
},
"filter": [
{
"command": "resize",
"parameters": {
"width": 256,
"height": 128
}
},
{
"command": "grayscale"
},
{
"command": "equalize"
}
]
}
リクエスト
Media Storage
Service上のid
フィルターの指定
1. ヒストグラム平坦補正
2. グレースケール
3. 画像サイズ縮小

11
API仕様 – 画像処理(フィルター)
REST API
POST https://ips.ricohapi.com/v1/filter
{
"id":"a7ed2e55-9fed-414a-b52f-61fa6a9c93b0",
"content_type":"image/jpeg",
"bytes": 3944775,
"created_at":"2016-02-24T00:56:46Z"
}
レスポンス
処理済み画像の格納先のId

12
ヒストグラム平坦化
 画像にメリハリをつけて鮮明にすることができる
 想定する利用シーン： 暗くて見えない顔を明るくする
オリジナル画像 ヒストグラム平坦化実施後の画像

13
グレースケール
 画像を白黒にすることができる
 想定する利用シーン： 違った雰囲気を楽しめる
オリジナル画像 グレースケール実施後

14
画像サイズの縮小
 画像サイズを小さく、処理の負担軽くすることができる
 想定する利用シーン： サムネイル、タイムラプスの再生
オリジナル画像 サイズ変更後の画像
縦横比を変えなければ、
ビューアで再生可能！
3.9 MB
1.21 MB
½ * ½ に変換

15
 ご意見、要望お待ちしております。

16
３．機能紹介 その２
～フォト＆メディアストレージ～
株式会社リコー
新規事業開発本部 SV技術開発センター
細野 英司

17
5月に開催した
第一回APIセミナーでは
第一回セミナーでは・・・

18
第一回セミナーでは・・・
スライドショーアプリを
つくってみました

19
クラウド対応 × マルチユーザー × マルチプラットフォーム
全部入り・出し惜しみなしの
スライドショーアプリ
第一回セミナーでは・・・

20
第一回セミナーでは・・・
そんなアプリが
HTML, CSS, JavaScript
合計で
約100ライン
(※119ライン)
アナタにも つくれます
※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。

21
そして今回・・・
そして今回

22
新機能！
待望の新機能！

23
新機能！
ユーザーメタ＆検索

24
ユーザーメタ＆検索機能
 クラウドの画像にメタデータを付加す
ることができる
 メタデータは、{ “<key>”: “<value>” } 形式のペア文字列
 1画像あたり最大10個まで
 メタデータをキーにして画像を検索す
ることができる

25
ユーザーメタ＆検索機能
すべてをカバーするスグレモノ
お気に入り いいね
レーティング コメント

26
ユーザーメタ＆検索機能
{ “<key>”: “<value>” }
{ “favorite”: “marked” } { “liked”: “yes” }
{ “stars”: “3” } { “comment”: “Trip to Maldives” }

27
ユーザーメタ＆検索機能 API/SDK
機能 REST API SDKメソッド
画像一覧取得／
画像検索
GET /media
POST /media/search
.list()
メタデータ取得 GET /media/{id}/meta
GET /media/{id}/meta/user
GET /media/{id}/meta/user/{key}
.meta()
ユーザーメタ追加 PUT /media/{id}/meta/user/{key} .addMeta()
ユーザーメタ削除 DELETE /media/{id}/meta/user/{key} .removeMeta()
サービスURL: https://mss.ricohapi.com/v1/media
SDKが用意されているので
アプリ開発も楽勝！

28
デモアプリ
ということで
今回も
アプリをつくってみました

29
デモアプリ
お気に入り対応
スライドショーアプリ

30
お気に入り
ボタン
検索
フィルター
デモアプリ

31
今回のアプリも
HTML, CSS, JavaScript
合計で
約100ライン
(※126ライン)
アナタにだって つくれます
デモアプリ
※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。

32
My PC
Web Server
RICOH Cloud Service
CSS
HTML
JavaScript
Web Browser
Media Storage Server Auth Server
CSS
HTML
JavaScript
今回のデモのシステム全体構成
2. ブラウザでアプリの
コンテンツを起動
3. SDKで
クラウドと連携
1. アプリのコンテンツを
ローカルホストから配信※JavaScriptは、Oracle Corporation及びその子会社、
関連会社の米国及びその他の国おける登録商標です。

33
デモ
お待たせしました
デモをご覧ください

34
ソースコード説明
引き続き
ソースコードを説明します

35
ソースコード説明1
$("#ric-toggle-favorite").on("click", function() {
if (activeMediaID == null) return;
$(this).toggleClass("ui-btn-active");
if ($(this).hasClass("ui-btn-active")) {
mediaStorage.addMeta(activeMediaID, { “user.favorite" : "marked" });
} else {
mediaStorage.removeMeta(activeMediaID, "user.favorite");
}
})
お気に入りボタンが押されたら
ユーザーメタを追加／削除

36
ソースコード説明2
function slideshow() {
…
mediaStorage.meta(activeMediaID, "user")
.then(function(meta) {
$("#ric-toggle-favorite")
.toggleClass("ui-btn-active", meta.favorite == "marked");
return mediaStorage.download(activeMediaID, "blob");
})
.then(function(blob) {
var imageURL = URL.createObjectURL(blob);
$("#ric-view")
.one("load", function() { URL.revokeObjectURL(imageURL); })
.attr("src", imageURL);
});
画像を更新するときに
ユーザーメタの設定状況を確認

37
$("#ric-start-stop").on("click", function() {
…
var filterText = $("#ric-filter").val();
mediaStorage.connect()
.then(function() {
var options = filterText == "My Favorites" ?
{ filter: { "meta.user.favorite": "marked" } } : null;
return mediaStorage.list(options);
})
.then(function(list) {
photoList = list.media;
photoIndex = 0;
slideshowTimer = setTimeout(slideshow, 0);
});
…
}
画像一覧取得時のフィルターに
検索条件を設定
ソースコード説明3

38
ソースコード説明
That’s ALL

39
ありがとうございました
ユーザーメタ＆検索
活用方法
アナタしだい

40
４．機能紹介 その３
～ビデオコミュニケーション～
株式会社リコー
新規事業開発本部 SV技術開発センター
丸本 耕平

41
目次
 サンプルアプリの概要
 サンプルアプリのデモ
 サンプルアプリの構成
 まとめ

42
ビデオコミュニケーションのサンプル
 Githubでサンプルを公開しています
https://github.com/ricohapi/video-streaming-sample-app/
(4/1公開時から構成を変更しております。詳しい使い方はREADMEをご参照ください)
 サンプル①：PC間でビデオチャット
 サンプル②：シングルボードコンピューターからビデオ配信
※シングルボードコンピューター：数千円の小型のコンピューター
New

43
サンプル①の概要
 PC間でビデオチャット
 WebRTC(ブラウザの機能)を使用
video stream
signaling signaling
RICOH

44
サンプル②の概要
 シングルボードコンピューターからビデオ配信
 WebRTC(ブラウザの機能)を使用
signaling signaling
RICOH
video stream

45
サンプル②の手順
 配信側
1. あらかじめスクリプトのビルドや設定などを行っておく
https://github.com/ricohapi/video-streaming-sample-app/tree/master/samples/oneway-broadcast
2. RICOH THETA Sをライブストリーミングモードで起動して接続
(撮影モードボタンを押しながら起動）
3. スクリプトを実行すると待機状態となり準備完了
 視聴側
1. あらかじめスクリプトのビルドや設定などを行っておく
https://github.com/ricohapi/video-streaming-sample-app/tree/master/samples/oneway-watch
2. ブラウザでHTMLページを開く
3. ログインして、配信側のIDに接続すると視聴開始
4. 終了時はログオフボタンを押す

46
ビデオストリーミング配信のデモ

47
サンプルアプリ②の構成
signaling signaling
RICOH
video stream
Auth
Signaling (XMPP over BOSH)
Web Browser
OSS (WebRTC, BOSH)
Sample.js
Web Browser (No GUI)
OSS (WebRTC, BOSH)
Sample.js
Selenium WebDriver

48
まとめ
 リコーのシグナリングサーバーとWebRTCを利用して
RICOH THETA Sのビデオストリーミングが可能
 ビデオの配信はシングルボードコンピューターで可能
 ビデオの視聴はPCやAndroidスマートフォンなどで可能
 複数台からの視聴も可能

49
５．機能紹介 その４
～リモートコントロール～
株式会社リコー
新規事業開発本部 SV技術開発センター
水藤 浩

50
目次
1. リモートコントロールサービス概要
 リモートコントロールとは
 提供システムの概要
 利用手順(python client)
2. ライブラリとサンプルプログラムの紹介
 主要なリモートコントロールメソッド
 サンプルプログラムの解説と使い方
 OSCとサンプルライブラリの紹介
 サンプルプログラムの実行
 メディアストレージサービスとの連携例(参考資料)

51
リモートコントロールサービス概要
リコークラウドAPI
RICOH
TEHTA S
撮影
撮影指示
メディアストレージ
リモートコントロール
認証サービス
RICOH Cloud Service
転送
メッセージング
 リモートコントロールとは
 無線LAN接続されているRICOH THETA Sを遠隔から操作するためのライブラリ
 IoT向け軽量メッセージングプロトコルであるMQTTを利用している
 リコークラウドが提供する認証サービスと合わせて使うため安全・簡単に利用で
きます
ビデオコミュニケーション
New

52
リモートコントロールサービス概要
 提供システムの概要
 対応言語としては、pythonとJavascriptを提供
 通信路はTLSによる暗号化(MQTT over TLS)をサポート
 Javascriptは、通信プロトコルにwebsocket(MQTT over WSS)もサポート
 同一ユーザーＩＤ間のみでのメッセージングをサポート(アクセス制御)
メッセージの管理・配信
RICOH
TEHTA S
リモートコントロール
MQTTS(WSS)
MQTTS(WSS)
MQTTS(WSS)
OSC
デバイス
コントロール
ライブラリ
メッセージング
ライブラリ

53
利用手順
 認証ライブラリとリモートコントロールアプリのインストール
 中間証明書のダウンロード
 クライアントクレデンシャル、ユーザーアカウント、証明書を設定
参照 https://github.com/ricohapi/camera-control-sample-py
$ pip install --upgrade git+https://github.com/ricohapi/auth-py.git
$ git clone https://github.com/ricohapi/camera-control-sample-py.git
$ cd camera-control-sample-py
$ pip install . (pip install –e .)
$ cd samples
$ mv config_template.json config.json
$ edit config.json
$ wget –O devcon.crt https://support.comodo.com/index.php?/Knowledgebase/Article/GetAttachment/991/1070566
ウェブブラウザでアクセスし取得していただいても構いません
https://support.comodo.com/index.php?/Knowledgebase/Article/GetAttachment/991/1070566

54
目次
1. リモートコントロールサービス概要
 リモートコントロールとは
 提供システムの概要
 利用手順(python client)
2. ライブラリとサンプルプログラムの紹介
 主要なリモートコントロールメソッド
 サンプルプログラムの解説と使い方
 OSCとサンプルライブラリの紹介
 サンプルプログラムの実行
 メディアストレージサービスとの連携例(参考)

55
ライブラリとサンプルプログラムの紹介
クラス
コンストラクタ Client(client_id, client_secret)
概要 クラスメソッド
サーバー接続 .connect(user_id, user_pass, ca_certs)
撮影待機 .listen(device_id, func=None, fargs=None)
撮影指示 .shoot(device_id, param=None)
サーバー接続解除 .disconnect()
撮影待機解除 .unlisten()
メッセージ購読 .subscribe(topic, func=None, fargs=None)
メッセージ発行 .publish(topic, message=None)
connect() connect()
shoot(theta) listen(theta)
RICOH Cloud Service
撮影者サイド デバイスサイド
 主要なリモートコントロールメソッド

56
サンプルプログラムの解説と使い方(1/3)
 Clientクラスのインポート
 撮影者サイドのコード
 デバイスサイドのコード
with Client(client_id, client_secret) as camera:
camera.connect(user_id, user_pass, ca_certs)
camera.listen(dev_id, func=on_receive, fargs=('callback_args',))
wait_key()
with Client(client_id, client_secret) as camera:
camera.connect(user_id, user_pass, ca_certs)
camera.shoot(dev_id, param=None)
from ricohapi.cameractl.client import Client
ポイント
 撮影者サイドと、デバイスサイドとで同一のユーザID/パスワードを指定する
 指定したdev_idに対し指示を伝達するので、予め送受信間でdev_idを決めておく
 撮影指示受信時に実行するコールバック関数を指定し、撮影処理を実装する
 撮影指示送信前に、デバイスサイドで該当デバイスをlisten()しておく
デバイスIDとして使える文字は
大小英数字と_(アンダースコア)で
32文字までとなります
コールバック関数を指定

57
 実行例1
 撮影者サイド
 デバイスサイド
 実行例2
 撮影者サイド
 デバイスサイド
$ python remocon.py –d THETA start
connecting…
hit enter key to quit.
device : THETA
command : shoot
rcv_param: None
fun_param: callback_args
サンプルプログラムの解説と使い方(2/3)
$ python remocon.py –d THETA shoot
撮影者サイドから送信されたパラメータ
デバイスサイドで指定している引数
$ python remocon.py –d THETA –p '{"_shutterSpeed": 0.01, "_iso": 200}' shoot
device : THETA
command : shoot
rcv_param: {u'_shutterSpeed': 0.01, u'_iso': 200}
fun_param: callback_args

58
 撮影指示受信時のコールバック関数
サンプルプログラムの解説と使い方(3/3)
def on_receive(devid, command, rcv_param, fun_param):
ポイント
 デバイスサイドは撮影者サイドから送信されるパラメータに応じた適切な処理を
コールバック関数として実装する
 コールバック関数は必須パラメータと、開発者が追加するパラメータから成る
 サンプルプログラムの使い方に関して
 start/shootコマンドでサーバーへの接続、撮影待機、撮影指示を行う
 -dオプションでデバイスＩＤを指定する
 -pオプションで伝達パラメータを指定する。指定できる文字列はJSON文字列フォーマット
with Client(client_id, client_secret) as camera:
camera.connect(user_id, user_pass, ca_certs)
camera.listen(dev_id, func=on_receive, fargs=('callback_args',))
wait_key()
[必須パラメータ]
システムが値をセット
[オプションパラメータ]
タプルで指定した個数分指定する

59
Open Spherical Camera API version 1.0
 RICOH THETA Sはgoogle社のOSCに準拠しています(独自拡張あり)
 OSCを使うとRICOH THETA S等の球体カメラを制御できます
 OSCを利用してRICOH THETA Sをコントロールするサンプルも同梱してます
クラスメソッド 概要
ThetaV2() インスタンス生成
.get_info() カメラに関する基本情報取得する
.get_state() カメラの状態を取得する
.check_for_updates() Stateの状態変化を確認する
.get_command_status() コマンドの実行状況を取得する
.get_options() 指定プロパティのプロパティ値、サポート仕様を取得する
.set_options() 指定プロパティに値を設定する
.take_picture() 静止画撮影を実行する
.take_picture_to_file() 静止画撮影を実行し、ホストＰＣへ撮影画像を転送する
.get_image() 指定した画像をホストＰＣへ転送する
.delete() 指定した画像を削除する
なお、RICOH THETA API v2の詳細は https://developers.theta360.com/ja/docs/v2/api_reference/

60
サンプルプログラムの実行
 概要
 簡単のため1台のPCで撮影者サイドとデバイスサイドを実行します
 デバイスサイドはNICが２つ必要で、１つはRICOH THETA Sと無線接続します
 RICOH THETA Sとの無線LAN接続は、底面のシリアルナンバーがSSIDが初期パ
スワードとなります
$ $
INTERNET
デバイスサイド撮影者サイド
参考：
インターネットに接続できない場合は、イ
ンターネットに接続している側のNICの設
定を優先するようにしてみてください
(メトリック値の設定)

61
メディアストレージサービスとの連携例
メディアストレージ
メッセージング
メッセージの管理・配信
UPDL
メディアデータの管理
2.1.
3.
4.
5.
6.7.
8.
目的
遠隔地から撮影した画像を取得したい
シーケンス概要
1. 撮影指示、撮影ID送信
2. 撮影指示受信
3. 撮影コマンド発行
4. 撮影画像転送
5. 撮影画像アップロード、メディアID取得
6. 撮影IDを送り先としてメディアIDを送信
7. メディアIDを受信
8. 撮影画像ダウンロード
ポイント
 画像データはメディアストレージにアップ
ロードすることで画像の管理はクラウド側
で行う
 適切なサービスを組み合わせることでアプ
リケーションを簡単に作成できる
(参考資料)

62
with Client(client_id, client_secret) as camera:
aclient = AuthClient(client_id, client_secret)
aclient.set_resource_owner_creds(user_id, user_pass)
mstorage = MediaStorage(aclient)
mstorage.connect()
uploader = media_uploader(mstorage)
next(uploader)
camera.connect(user_id, user_pass, ca_certs)
camera.listen(dev_id, func=on_receive, fargs=(camera, uploader))
wait_keyboard_interrupt()
ストレージサービスとの連携例(upload)
def media_uploader(mstorage):
media_id = None
while True:
file_path = yield media_id
media_id = mstorage.upload(file_path)['id']
def on_receive(devid, cmd, rcv_param, camera, uploader):
file_path = './upload_path.JPG'
ThetaV2().take_picture_to_file(file_path, override_file=True)
media_id = uploader.send(file_path)
camera.publish(rcv_param['_shooting_id'], message=media_id)
 撮影者サイド (参考資料)

63
with Client(client_id, client_secret) as camera:
aclient = AuthClient(client_id, client_secret)
aclient.set_resource_owner_creds(user_id, user_pass)
mstorage = MediaStorage(aclient)
mstorage.connect()
downloader = media_downloader(mstorage)
next(downloader)
shoot_id = str(uuid.uuid4())
send_param = validate_usr_param(str('{"_shooting_id": "' + shoot_id + '"}'))
file_path = './download_path.JPG'
camera.connect(user_id, user_pass, ca_certs)
camera.shoot(dev_id, param=send_param)
camera.subscribe(shoot_id, func=on_result, fargs=(downloader, file_path))
wait_keyboard_interrupt()
ストレージサービスとの連携例(download)
def media_downloader(mstorage):
while True:
media_inf = yield
mstorage.download_to(media_inf['media_id'], media_inf['save_path'])
def on_result(msg, downloader, file_path):
media_inf = {'media_id': msg.payload, 'save_path': file_path}
downloader.send(media_inf)
 撮影サイド (参考資料)

64
６. Q&A

65
まとめ
リコークラウドAPIについて
機能紹介
・画像処理（フィルター）
・フォト＆メディアストレージ
・ビデオコミュニケーション
・リモートコントロール

66
Enjoy
RICOH THETA
and
RICOH Cloud API!!

67