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.
RICOH THETA x IoT
デベロッパーズ
コンテスト
クラウドAPI
セミナー
株式会社リコー
新規事業開発本部 SV技術開発センター 2016年5月18日
アジェンダ
1. クラウドAPIの紹介
2. 機能紹介 その1 ~ビデオコミュニケーション~
3. 機能紹介 その2 ~フォト&メディアストレージ~
4. Q&A
5. 提供予定の機能の紹介
2
1. クラウドAPIの紹介
3
株式会社リコー
新規事業開発本部 SV技術開発センター プラットフォーム開発室
高桑 寿一
4
質問です
リコークラウドAPI
・PC、スマートフォン/タブレット、シングルボードコンピュータで動く
プログラムから利用可能なインターフェース
・リコーが提供する以下の機能を持つ
1.ビデオコミュニケーション
2.フォト&メディアストレージ
3.認証・認...
開発者が利用できるリソース
・開発者は以下を利用可能
1.クラウドAPI
2.SDK
2.サンプルプログラム
・githubに公開
https://github.com/ricohapi/
6
開発者 SDK
サンプル
プログラム
リコークラウ...
利用に必要なもの
リコークラウドAPIの利用には以下が必要
1.クライアントクレデンシャル ※利用アプリを識別するもの
・クライアントID
・クライアントシークレット
2.ユーザーアカウント ※利用ユーザーを識別するもの
・ユーザーID
・パス...
事前準備 その1 ~クライアント クレデンシャルの取得~
手順1.コンテストサイトから必要事項を入力してエントリー!
手順2.確認メールに記載の手順で手続き
手順3.コンテストの登録完了メールを受信
手順4.その後、API利用案内メールに記載の...
事前準備 その2 ~ユーザーアカウントの取得~
ステップ1)RICOH Unified Communication Systemの管理者向けページを開く
9
https://beta2.ucs.ricoh.com/dashboard/login...
10
2.機能紹介 その1
~ビデオコミュニケーション~
株式会社リコー
新規事業開発本部 SV技術開発センター プラットフォーム開発室
相川 智慎
 概要
 2台のPC間でビデオチャット(映像のみ)を行う
 WebRTC(Webブラウザの機能)を利用
ストリーミング機能紹介
11
 構成
 認証サーバー/BOSH(Bidirectional-streams Over Synchronous HTTP)サーバー
 JavaScript/HTML
ストリーミング機能紹介
※JavaScriptは、Oracle Corp...
 サンプルを取得
 クライアント クレデンシャルを設定
 ビルド
 実行
https://github.com/ricohapi/video-streaming-sample-app
利用手順
$ gulp run
$ git clon...
 シグナリングサーバーをお使い頂けます
 WebRTC(over BOSH)
 ユーザーIDは1つでOK
 abc@example.com+mac
 abc@example.com+theta
 theta360.comライクなビュ...
15
3.機能紹介 その2
~フォト&メディアストレージ~
株式会社リコー
新規事業開発本部 SV技術開発センター プラットフォーム開発室
細野 英司
主なストレージ関連API
ストレージ機能 REST API SDK API
画像アップロード POST /media .upload()
保管済み画像一覧取得 GET /media .list()
画像情報取得 GET /media/{id} ...
早速アプリをつくってみよう
17
スライドショーアプリをつくってみました
特長1. クラウド対応
リコークラウド Media Storageサービスにて保管されている画
像をスライドショー
特長2. マルチアカウント
ユーザーアカウントの切り替えが可能
特長3. マルチプラットフォーム
HTML5で作成 - Mac ...
今回のデモのシステム全体構成
19
My PC
Web Server
http://localhost
RICOH Cloud Service
CSS
HTML
JavaScript
Web Browser
Cloud Media Storag...
デモアプリをつくってみたら・・・
セキュリティ認証など
なにかと骨の折れるクラウド対応ですが
SDKを利用したら
アプリが約100行で出来上がりました
20
ソースコードの構成
21
ファイル 内容 コーディング行数
index.html HTMLファイル 41ライン
ric-sample.css スタイルシート 25ライン
ric-sample.js JavaScriptファイル 53ライン
ri...
プログラムの処理フロー
 Start/Pause/Resumeボタンのタップで、ric-sample.jsの
イベントハンドラー関数を呼び出し
Startの場合:
 クラウド保管済みの画像一覧を取得
 タイマーを開始
Pauseの場合:
...
クラウド対応のポイント
クラウド対応 2つのポイント
23
クラウド対応のポイント1
ポイント1
クラウドに接続する前に、SDKのAPIを介して、認証情報を
セットしておきます。
あとはSDKにお任せ!クラウドサーバーとの通信時に必要とな
るセキュリティ認証手続きをSDKが代行します。
※認証情報: C...
クラウド対応のポイント1(続き)
25
$(document).ready(function() {
var authClient = new AuthClient("koTjKwBm…", "rWOwyT5d…"),
mediaStorage...
クラウド対応のポイント2
ポイント2
クラウドに保管されている画像データは、セキュリティ上問題
となるため、<img>タグから直接参照することはできません。
クラウドからセキュアに画像データを取得し、そのデータを
Blob形式に変換する手法がお...
クラウド対応のポイント2(続き)
function slideshow() {
var mediaID = photoList[photoIndex++].id;
if (photoIndex == photoList.length) phot...
補足
ブラウザ用SDKへの変換について
JavaScript用のMedia Storage SDKはNode.js用パッケージ
として提供されているため、ブラウザ環境で使用するためには
ソースコードの変換(Browserify)が必要です。
変...
29
4. Q&A
30
5. 提供予定機能のご紹介
提供予定機能
以下の機能の提供を検討中
・リモートコントロール
・センサー連携
・画像処理、画像認識
・データ蓄積、分析
・SNS連携
31
RICOH
THETA S
撮影命令
リモートコントロール機能のイメージ
32
MQTT
リコークラウドAPIシングルボード
コンピュータ
RICOH
THETA S
シングルボード
コンピュータ
撮影命令 撮影
MQTT
例1)撮影
画像取得...
まとめ
クラウドAPIについて
・機能
・利用方法
機能紹介
・ビデオコミュニケーション
・フォト&メディアストレージ
提供予定の機能
33
34
Enjoy
RICOH THETA
and
RICOH Cloud API!!
RICOH THETA x IoT  デベロッパーズ  コンテスト クラウドAPIセミナー
Upcoming SlideShare
Loading in …5
×

RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPIセミナー

471 views

Published on

http://contest.theta360.com/

Published in: Technology
  • Be the first to comment

RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPIセミナー

  1. 1. RICOH THETA x IoT デベロッパーズ コンテスト クラウドAPI セミナー 株式会社リコー 新規事業開発本部 SV技術開発センター 2016年5月18日
  2. 2. アジェンダ 1. クラウドAPIの紹介 2. 機能紹介 その1 ~ビデオコミュニケーション~ 3. 機能紹介 その2 ~フォト&メディアストレージ~ 4. Q&A 5. 提供予定の機能の紹介 2
  3. 3. 1. クラウドAPIの紹介 3 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 高桑 寿一
  4. 4. 4 質問です
  5. 5. リコークラウドAPI ・PC、スマートフォン/タブレット、シングルボードコンピュータで動く プログラムから利用可能なインターフェース ・リコーが提供する以下の機能を持つ 1.ビデオコミュニケーション 2.フォト&メディアストレージ 3.認証・認可 ・無償ベータ版 5 リコークラウドAPI シングルボード コンピュータ PC スマートフォン/ タブレット ビデオ コミュニケーション フォト&メディア ストレージ 認証・認可
  6. 6. 開発者が利用できるリソース ・開発者は以下を利用可能 1.クラウドAPI 2.SDK 2.サンプルプログラム ・githubに公開 https://github.com/ricohapi/ 6 開発者 SDK サンプル プログラム リコークラウドAPI ビデオ コミュニケーション フォト&メディア ストレージ 認証・認可
  7. 7. 利用に必要なもの リコークラウドAPIの利用には以下が必要 1.クライアントクレデンシャル ※利用アプリを識別するもの ・クライアントID ・クライアントシークレット 2.ユーザーアカウント ※利用ユーザーを識別するもの ・ユーザーID ・パスワード 7
  8. 8. 事前準備 その1 ~クライアント クレデンシャルの取得~ 手順1.コンテストサイトから必要事項を入力してエントリー! 手順2.確認メールに記載の手順で手続き 手順3.コンテストの登録完了メールを受信 手順4.その後、API利用案内メールに記載の手順でダウンロード 8 http://contest.theta360.com/
  9. 9. 事前準備 その2 ~ユーザーアカウントの取得~ ステップ1)RICOH Unified Communication Systemの管理者向けページを開く 9 https://beta2.ucs.ricoh.com/dashboard/login ステップ4)確認メールのURLをクリックして完了 ※メールアドレスをユーザーIDとして利用 ステップ3)フォームを入力して「Send」をクリック ステップ2)リンクをクリック ※日本語の場合は以下
  10. 10. 10 2.機能紹介 その1 ~ビデオコミュニケーション~ 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 相川 智慎
  11. 11.  概要  2台のPC間でビデオチャット(映像のみ)を行う  WebRTC(Webブラウザの機能)を利用 ストリーミング機能紹介 11
  12. 12.  構成  認証サーバー/BOSH(Bidirectional-streams Over Synchronous HTTP)サーバー  JavaScript/HTML ストリーミング機能紹介 ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。 12
  13. 13.  サンプルを取得  クライアント クレデンシャルを設定  ビルド  実行 https://github.com/ricohapi/video-streaming-sample-app 利用手順 $ gulp run $ git clone https://github.com/ricohapi/video-streaming-sample-app $ cd video-streaming-sample-app $ cp samples/config_template.js samples/config.js $ vi samples/config.js $ npm install $ gulp build 13
  14. 14.  シグナリングサーバーをお使い頂けます  WebRTC(over BOSH)  ユーザーIDは1つでOK  abc@example.com+mac  abc@example.com+theta  theta360.comライクなビューサンプル  WebGL 是非面白い使い方を考えてみてください! 要望も歓迎です まとめ 14
  15. 15. 15 3.機能紹介 その2 ~フォト&メディアストレージ~ 株式会社リコー 新規事業開発本部 SV技術開発センター プラットフォーム開発室 細野 英司
  16. 16. 主なストレージ関連API ストレージ機能 REST API SDK API 画像アップロード POST /media .upload() 保管済み画像一覧取得 GET /media .list() 画像情報取得 GET /media/{id} .info() 画像データ取得 GET /media/{id}/content .download() 画像削除 DELETE /media/{id} .delete() サービスURL: https://mss.ricohapi.com/v1/media 16 認証・認可機能 REST API SDK API ユーザー認証 POST /auth/token .connect() サービスURL: https://auth.beta2.ucs.ricoh.com/auth/token
  17. 17. 早速アプリをつくってみよう 17 スライドショーアプリをつくってみました
  18. 18. 特長1. クラウド対応 リコークラウド Media Storageサービスにて保管されている画 像をスライドショー 特長2. マルチアカウント ユーザーアカウントの切り替えが可能 特長3. マルチプラットフォーム HTML5で作成 - Mac OS, Windows, iOS, Androidで動作可能 18 デモアプリ概略 ブラウザでアプリを起動してみましょう ※ Mac OSは、Apple Inc.の商標です。 ※ Windowsは、米国 Microsoft Corporation の、米国およびその他の国における登録商標または商標です。 ※ Windowsの正式名称は、Microsoft Windows Operating Systemです。 ※ iOSは、米国およびその他の国における商標またはシスコの登録商標であり、ライセンスのもとに使用されます。 ※ Androidは、Google Inc.の商標です。
  19. 19. 今回のデモのシステム全体構成 19 My PC Web Server http://localhost RICOH Cloud Service CSS HTML JavaScript Web Browser Cloud Media Storage Server https://mss.ricohapi.com Photos by User A Photos by User B Photos by User C Ricoh API Auth Server CSS HTML JavaScript 1. アプリのコンテンツを Web Serverから配信 2. ブラウザでアプリのURLを開くと コンテンツが読み込まれてアプリが起動 3. JavaScript版SDKで RICOHクラウドサービスと連携 ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
  20. 20. デモアプリをつくってみたら・・・ セキュリティ認証など なにかと骨の折れるクラウド対応ですが SDKを利用したら アプリが約100行で出来上がりました 20
  21. 21. ソースコードの構成 21 ファイル 内容 コーディング行数 index.html HTMLファイル 41ライン ric-sample.css スタイルシート 25ライン ric-sample.js JavaScriptファイル 53ライン ricohapi-mstorage.js Media Storage SDK (GitHubにて配布) 合計 約100行!(119ライン) ※空行、コメント、ログ出力はカウント対象外 ブラウザでソースコードと動作を確認してみましょう ※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
  22. 22. プログラムの処理フロー  Start/Pause/Resumeボタンのタップで、ric-sample.jsの イベントハンドラー関数を呼び出し Startの場合:  クラウド保管済みの画像一覧を取得  タイマーを開始 Pauseの場合:  タイマーを停止 Resumeの場合:  タイマーを開始  タイマー処理にて、一定間隔でクラウドから画像を取得して 表示 22
  23. 23. クラウド対応のポイント クラウド対応 2つのポイント 23
  24. 24. クラウド対応のポイント1 ポイント1 クラウドに接続する前に、SDKのAPIを介して、認証情報を セットしておきます。 あとはSDKにお任せ!クラウドサーバーとの通信時に必要とな るセキュリティ認証手続きをSDKが代行します。 ※認証情報: Client ID/Secret, User ID/Password 24
  25. 25. クラウド対応のポイント1(続き) 25 $(document).ready(function() { var authClient = new AuthClient("koTjKwBm…", "rWOwyT5d…"), mediaStorage = null; … $("#ric-start-stop").on("click", function() { var buttonText = $(this).text(); if (buttonText == "Start") { var userID = $("#ric-account").val(); authClient.setResourceOwnerCreds(userID, USER_PASSWORD[userID]); mediaStorage = new MStorage(authClient); mediaStorage.connect(); … } … }); }); 1. アプリ起動時に Client ID/Secretを指定 2. Startボタンが押されたら User ID/Passwordを指定 3. ストレージAPIの使用開始時に 認証情報をセット ストレージAPIの使用時には SDKが自動的にセキュリティ認証してくれる ブラウザで実際の動作を確認してみましょう
  26. 26. クラウド対応のポイント2 ポイント2 クラウドに保管されている画像データは、セキュリティ上問題 となるため、<img>タグから直接参照することはできません。 クラウドからセキュアに画像データを取得し、そのデータを Blob形式に変換する手法がお勧めです。 Blob形式の画像データは、それを格納したオブジェクトURLを 生成することで<img>タグからの参照が可能です。 ※Blob: Binary Large OBject データの取得と変換はSDKにお任せ!SDKは、Blob形式によ る画像データの取得をサポートしています。 26
  27. 27. クラウド対応のポイント2(続き) function slideshow() { var mediaID = photoList[photoIndex++].id; if (photoIndex == photoList.length) photoIndex = 0; mediaStorage.download(mediaID, "blob") .then(function(blob) { var imageURL = URL.createObjectURL(blob); $("#ric-view") .one("load", function() { URL.revokeObjectURL(imageURL); }) .attr("src", imageURL); }); … } 27 1. Blob形式を指定して 画像データを取得 3. <img>タグのsrc属性に オブジェクトURLを設定 2. Blobデータが格納された オブジェクトURLを生成 クラウドの画像が表示される ブラウザで実際の動作を確認してみましょう
  28. 28. 補足 ブラウザ用SDKへの変換について JavaScript用のMedia Storage SDKはNode.js用パッケージ として提供されているため、ブラウザ環境で使用するためには ソースコードの変換(Browserify)が必要です。 変換済みのソースコードは、GitHubリポジトリにて配布を予定 しています。 ブラウザ用Media Storage SDK: https://github.com/ricohapi/media-storage-js/tree/master/build ※近日公開予定 28※JavaScriptは、Oracle Corporation及びその子会社、関連会社の米国及びその他の国おける登録商標です。
  29. 29. 29 4. Q&A
  30. 30. 30 5. 提供予定機能のご紹介
  31. 31. 提供予定機能 以下の機能の提供を検討中 ・リモートコントロール ・センサー連携 ・画像処理、画像認識 ・データ蓄積、分析 ・SNS連携 31
  32. 32. RICOH THETA S 撮影命令 リモートコントロール機能のイメージ 32 MQTT リコークラウドAPIシングルボード コンピュータ RICOH THETA S シングルボード コンピュータ 撮影命令 撮影 MQTT 例1)撮影 画像取得命令 MQTT リコークラウドAPIシングルボード コンピュータ シングルボード コンピュータ 画像取得命令 画像取得 MQTT 例2)画像取得 画像
  33. 33. まとめ クラウドAPIについて ・機能 ・利用方法 機能紹介 ・ビデオコミュニケーション ・フォト&メディアストレージ 提供予定の機能 33
  34. 34. 34 Enjoy RICOH THETA and RICOH Cloud API!!

×