SOBA フレームワーク・クラウド 開発ドキュメント

株式会社 SOBA プロジェクト

内容
はじめに・ご利用の流れ ..................................................................................................................... 3
アカウント登録 ............................................................................................................................... 4
アカウント登録(サインアップ)の手順 ..................................................................................................... 4
パーツタグの取得 ............................................................................................................................. 7
パーツを使用する Web サイトを登録する ............................................................................................... 7
WebRTC プラットフォームの登録 ........................................................................................................ 7
使用パーツを選択する .................................................................................................................. 13
使用パーツを貼り付ける ................................................................................................................ 14
パーツタグの用語について ............................................................................................................... 15
1.チャンネルとは？ ................................................................................................................... 15
2.AppID とは？ ..................................................................................................................... 162-2.%appid%の確認方法は？ ................................................................................................. 16
Flash ライブストリームパーツ .............................................................................................................. 16
WebRTC メディアパーツ .................................................................................................................. 16
使い方 ................................................................................................................................... 17
オプション................................................................................................................................. 17
Publisher（配信側） ............................................................................................................. 18
テキストチャットパーツ ........................................................................................................................ 0オプション ................................................................................................................................... 1
表示されるユーザーID を変更する.................................................................................................... 1
CSS でスタイルを変更する ............................................................................................................... 1
チャットの幅、高さを変更する .......................................................................................................... 1
スライドパーツ ................................................................................................................................. 2
スライドデータの URL を取得する方法 .................................................................................................. 2オプション ................................................................................................................................... 4

スライドの幅、高さを変更する ......................................................................................................... 4
スライドデータの取得 URL を指定する ............................................................................................... 5
スライドへの書き込み禁止を指定する ................................................................................................ 5
オプション（API） ........................................................................................................................ 5
ペンの線の幅を変更するには .......................................................................................................... 6
ペン入力か消しゴムのモードを切り替えるには ........................................................................................ 6
スライドを拡大・縮小表示するには.................................................................................................... 6
ペン入力の色を変更するには ......................................................................................................... 6
新しいスライドをセットするには ......................................................................................................... 6
スマートフォン・タブレットでの利用 ........................................................................................................... 7
注意事項 ................................................................................................................................. 7
パーツのご利用手順 ...................................................................................................................... 7
端末のブラウザの場合 ................................................................................................................. 7
SOBA フレームワーク・クラウド動作環境 ................................................................................................... 7
対応クライアント OS ...................................................................................................................... 7対応クライアントブラウザ .................................................................................................................. 8対応サーバーOS .......................................................................................................................... 8

はじめに・ご利 用 の流 れ⚫

STEP1 無料ご登録

ご利用にはユーザー登録が必要です。

ユーザー登録の手順⚫

STEP2 パーツタグ（ウィジェット HTML）の取得

フレームワーク・クラウドの機能をご利用頂くには、パーツを使用する web サイトの URL の登録が必要です。
但し SOBA フレームワーク・クラウドが https での接続を必須にしているためサイトは https である必要があります。

※自己証明書でも問題御座いません。

パーツタグ取得の手順⚫

STEP3 ご利用

STEP2 でご取得頂いたタグを、web サイトに貼り付けるだけでご利用頂けます。

アカウント登 録
アカウント登 録 (サインアップ)の手 順
1.

SOBA framework cloud のページを表示します。

2.

新規登録をクリックします。

3.

任意のメールアドレスとパスワードを入力して、ユーザー登録ボタンをクリックします。

4.

ユーザー登録が完了するとユーザー登録完了ページに遷移します。

5.

登録したメールアドレスにアカウントの確認と言うタイトルのメールが届きます。

メール本文にある“アカウントの確認”と書かれたリンクをクリックしてください。

6.

メール内のアカウントの確認をクリックすると SOBA フレームワーク・クラウドにログインした状態になります。

7.

画面上に表示されている「プロフィールを設定する」をクリックして、プロフィール設定を入力してください。

名前もしくは会社名を記載して変更を保存すると登録は完了です。

パーツタグの取 得
実際に web サイトに貼り付けることになる、パーツタグの取得方法をご説明します。
パーツを使 用 する Web サイトを登 録 する
はじめにパーツを使用するための web サイトを SOBA フレームワーク・クラウドに登録します。これは登録したサイト以外にはパーツの利用を許可しないセキュリティ上の理由です。
1.

右上にあるメニューバーのアプリケーションをクリックします。

2.

アプリケーション一覧画面のアプリケーションを登録をクリックします。

3.

アプリケーション登録画面にて任意の名前および、パーツを使用する Web サイトの URL を入力してアプリケーションを登録します。

※API 呼び出し元はモバイル用 Air アプリケーションで作成する時に必要です。モバイルアプリで利用しない場合には記述不要です。
※web サイトは https である必要があります。自己証明書のサイトでも問題ありません。

登録が完了すると、アプリケーション一覧画面が表示されます。

WebRTC プラットフォームの登 録

SOBAフレームワーク・クラウドのWebRTCのパーツを利用するためには現在WebRTCの外部ベンダーのサービスに登録する必要があります。
ここではNTT Communications が運営しているSkyWayのサービスに登録する方法について記載します。
1. SkyWayのサービスに登録します。
https://skyway.io/ds/registration

２．アプリケーションを作成します。

※利用可能ドメイン名はSOBAフレームワーククラウドに登録したドメインと同じにします。

３. APIキーを発行します。

APIキーはひとつのキーに複数のドメインを割り当てる事も各APIキーにそれぞれドメインを割り当てる事も可能です。
※SOBAフレームワーク・クラウドのアプリケーションに複数のアドレスやドメインを登録されている場合、SkyWayのAPIキーに複数の同じドメインを割り当てる必要があります。
４. SOBAフレームワーク・クラウドにSkyWayのAPIキーをセットするため、SOBAフレームワーク・クラウドのアプリケーション一覧画面から登録したアプリケーションの名前をクリックします。

詳細画面が表示されます。

名前とウェブサイトはアプリケーション登録時に指定した内容が記載されます。App keyは自動で生成されたものが表示されます。
App key は各アプリケーションの個別のIDです。

5. WebRTC登録タブをクリックしてSkyWayのAPIキーをセットします。

上のWebRTCプラットフォームのAPIキーにSkyWayで発行したAPIキーを入力して「追加」ボタンをクリックして登録します。
※APIキーは複数登録することが出来ます。

6. APIキーとSOBAフレームワーク・クラウドのサイト情報を関連付けます。

登録が完了すると、下の段のWebRTCプラットフォームのAPIキーに追加したAPIキーが表示されるようになります。
SkyWayのAPIキーとSOBAフレームワーク・クラウドのサイト情報を関連付けるため、サイト登録情報をクリックします。

サイト登録情報のページに遷移します。
「追加」ボタンをクリックします。

プルダウンにはSOBAフレームワーク・クラウドのアプリケーションに登録しているURL（ドメイン）が表示されます。
※複数登録している場合は複数表示されます。
このプルダウンの項目と、SkyWayでAPIキーを発行した登録ドメインを紐付けます。
※APIキーに複数のドメインに対して登録している場合、追加をクリックして、SOBAフレームワーク・クラウドのウェブサイトと紐付けます。
サイト登録の設定が完了したら、「更新する」ボタンをクリックします。

使 用 パーツを選 択 する
ここではパーツの利用の仕方を大まかに説明します。詳細は各ツールをご覧ください。

1.

アプリケーション一覧画面から登録したアプリケーションの名前をクリックします。

詳細画面が表示されます。

名前とウェブサイトはアプリケーション登録時に指定した内容が記載されます。
App key は各アプリケーションの個別の ID で自動生成されたものが表示されます。
2.

利用するパーツの作成ボタンをクリックします。

パーツは Flash ライブストリーム、チャット、スライド、WebRTC が用意されていますので、必要なパーツのボタンをクリックします。
作成したいパーツの作成ボタンをクリックするとチャンネルが自動的に生成されます。
チャンネルとはパーツを管理する単位です。

使 用 パーツを貼 り付 ける
1.

作成したパーツタグ（ウィジェット HTML）をコピーします。

2.

コピーしたパーツタグ（ウィジェット HTML）をアプリケーション登録しているウェブサイトに貼り付けます。

※登録した Web サイト以外にタグを貼り付けても動作しませんのでご注意ください。

パーツタグの用 語 についてフレームワーク・クラウドの管理画面から生成されるパーツタグ（ウィジェット HTML）の解説をおこないます。

<div id="soba-widget-publisher-%channel%"></div><script src="https://widgets.soba-project.com/apps/%appid%/videos/%channel%/publisher.js?v=2"
type="text/javascript"></script>1.チャンネルとは？
例：パーツタグの取得で作成されたウィジェット HTML<div id="soba-widget-publisher-jZe1cBpM8wwkTZGi"></div><script src="https://widgets.sobaproject.com/apps/ZVxGAdxLhFSzYQlq/videos/jZe1cBpM8wwkTZGi/publisher.js?v=2"
type="text/javascript"></script>
上記の jZe1cBpM8wwkTZGi を、チャンネルと呼び<%channel%>で表示しています。
<%channel%>とは、各パーツを結びつける役割をしているパラメータです。
例えば、テキストチャットパーツであれば、<%channel%>の値が同じパーツ同士でメッセージのやり取りが行えます。（設置数は無制限です）
1-2.%channel%の名称 変更<%channel%>の値は任意に指定して変更することが可能です。
例えば、<%channel%>を分かりやすく社名（例：SOBA）に変更してご使用頂くような場合は下記のようになります。
<div id="soba-widget-publisher-SOBA"></div><script src="https://widgets.sobaproject.com/apps/ZVxGAdxLhFSzYQlq/videos/SOBA/publisher.js?v=2"
type="text/javascript"></script>
名称変更の注意点•

必ず英字から開始して下さい。

•英数字（大文字・小文字）が指定可能です。

2.AppID とは？
例：パーツタグの取得で作成されたウィジェット HTML<div id="soba-widget-publisher-jZe1cBpM8wwkTZGi"></div><script src="https://widgets.sobaproject.com/apps/ZVxGAdxLhFSzYQlq/videos/jZe1cBpM8wwkTZGi/publisher.js?v=2"
type="text/javascript"></script>
上の ZVxGAdxLhFSzYQlq を、AppID と呼び<%appid%>で表示しています。
<%appid%>とは、SOBA フレームワーク・クラウドに登録のある利用可能なドメインを管理する ID です。
※ パーツタグの取得の(3)で登録した Web サイトと生成されたコードの<%appid%>が一致しなければ、フレームワーク・クラウドは動作しません。
2-2.%appid%の確 認 方 法 は？
パーツタグの取得の通りにパーツを作成して頂くと、例のようなコードが生成されます。コードの AppID の部分をご確認頂くと、Webサイトに紐づけられた AppID が確認できます。

Flash ライブストリームパーツ※Flash ライブストリームパーツは 2020 年 7 月 31 日に提供を終了しました。
既に発行済みのパーツを含めて現在、ご利用頂けません。

WebRTC メディアパーツWebRTC メディアパーツは WebRTC で WEB カメラ等の映像とマイクの音声を配信および受信する機能を提供します。
WebRTC メディアパーツは対応ブラウザのみ利用可能です。Google Chrome での利用を推奨しています。また WebRTC メディア
パーツを使用するには カメラが必須になります。

使 い方

タグを発行すると、配信側・受信共通のタグが表示されます。
双方向通信を行うにはそれぞれのページを必ずご用意ください。
本ドキュメントでは 2 人で双方向通信することを想定して、a.html b.html の２つのページを作成します。
a.html には発行されたタグをそのまま貼り付けてください。
b.html には発行されたタグを張り付ける時に、id タグの中にある data-id を変更し貼り付けてください。

<div id="soba-widget-webrtc-media-publisher-pAHh2tc8APEXlSKu" dataid="2"></div><script src="https://widgets.sobaproject.com/apps/CtNGCCBQiaLnRKni/webrtc_media/pAHh2tc8APEXlSKu/webrtc_media_publisher.js?v=3" type="text/javascript"></script>

ここでは data-id を 2 に変更しています。
2 台の PC を用意して一方は a.html を表示して、もう一方は b.html を表示します。
それぞれのページに自分の映像と相手の映像が表示されます。
オプション

オプションを追加することでカメラ映像の幅や高さ、フレームレートを変更するなどの設定を行うことが出来ます。

iv id="soba-widget-webrtc-media-publisher-xxxxx"></div><script src="xxxxx" type="text/javascript"></script>

Publisher（配 信 側 ）⚫

data-auto-start ウィジェットロード時に映像を自動的に再生 (0 or 1 または false or true、デフォルトは false)⚫

data-width (デフォルトは 320 ディスプレイ表示解像度)⚫

data-camera-width (デフォルトは data-width と同じ値 映像の解像度)⚫

data-height (デフォルトは 240)⚫

data-camera-height (デフォルトは data-height と同じ値)⚫

data-fps フレームレート (デフォルトは 24、Firefox では 30 固定)⚫

data-user_id 自分の映像につける名前表示 (デフォルトは無し)⚫

data-id 相手の画面で自分の映像を識別するための ID (デフォルトは無し)⚫

data-extra_class 相手の画面に自分の映像を表示する時に適用する CSS クラス名 (デフォルトは無し)⚫

data-call-only 発信のみ(相手からの着信は受け付けない) (0 or 1 または false or true、デフォルトは false)

例１ ディスプレイの解 像度 （幅 、高 さ）を変 更 する

ディスプレイの解像度（幅、高さ）を変更するには data-width,data-height の値を変更します。比率は 4:3 もしくは16:9 にします。

<div id="soba-widget-webrtc-media-publisher-xxxxx" data-width="320" dataheight="240"></div><script src="xxxxx" type="text/javascript"></script>

例２ 映 像を滑 らかに表 示 する

映像を滑らかに表示するには、フレームレートの FPS の値を大きくします。FPS の値を変更するには data- fps の値を変更します。

<div id="soba-widget-webrtc-media-publisher-xxxxx" data-fps="5"></div><script src="xxxxx" type="text/javascript"></script>

例３ マイクを無 効化 する

配信側のマイクを無効化するには data-mic の値を disable にします。

<div id="soba-widget-webrtc-media-publisher-xxxxx" data-mic="disable"></div><script src="xxxxx" type="text/javascript"></script>

例４ カメラの解 像 度（幅、高さ）を変更 する

カメラの解像度（幅、高さ）を変更するには data-camera-width,data-camera-height の値を変更します。ディスプレイ解像度と同じ比率にしないと崩れて表示されます。

<div id="soba-widget-webrtc-media-publisher-xxxxx" data-camera-width="40" data-cameraheight="30"></div><script src="xxxxx" type="text/javascript"></script>

テキストチャットパーツ
テキストチャットパーツではテキストチャットの機能を提供します。
下の実行画面の「こんばんは。」と記述されている下枠が文字を入力するところです。
文字を入力した後に送信ボタンを押すことで「こんにちは。」が表示されている枠に入力した文字が表示されます。

入力した文字の上に表示されているのはユーザーID です。

<div id="soba-widget-chat-<%channel%>"></div><script src="https://widgets.soba-project.com/apps/<%appid%>/chats/<%channel%>/chat.js"
type="text/javascript"></script>

オプション

表 示 されるユーザーID を変 更 する表示されるユーザーID を変更するには data-user-id を追加します。

<div id="soba-widget-chat-<%channel%>" data-user-id="SOBA"></div><script src="https://widgets.soba-project.com/apps/<%appid%>/chats/<%channel%>/chat.js"
type="text/javascript"></script>

CSS でスタイルを変 更 する

チャットの幅 、高 さを変 更 する
チャットの幅、高さを変更するには style="width: px; height: px;"を追加します。
※指定したい値を width,height の後ろに入力してください。

<div id="soba-widget-chat-<%channel%>" style="width:320px; height:240px;"></div><script src="https://widgets.soba-project.com/apps/<%appid%>/chats/<%channel%>/chat.js"

type="text/javascript"></script>

スライドパーツ

スライドパーツはプレゼンテーションで使用するようなスライドの機能を提供します。
スライドに表示している資料に自由に書き込めるお絵描き機能も標準搭載しています。 お絵描き機能を単独でご利用いただくことも可能です。

<div id="soba-widget-slide-xxxxx" style="width:320px; height:240px;"data-slide-url=""></div><script src="xxxxx" type="text/javascript"></script>

スライドのチャンネルを作成すると、アップローダーのウィジェット HTML も自動で発行されます。

スライドデータの URL を取 得 する方 法
スライドパーツはタグに data-slide-url を指定しないとスライドが表示されません。

スライドパーツを発行する時にアップローダーのウィジェット HTML も発行されますが、スライドを表示するにはアップローダーから PDF ファイルをアップロードして発行される data-slide-url を指定します。
ここでは、デモサイトから slide-data-url を取得する方法を記載します。
アップローダーも登録した web サイトに貼り付ける事で利用可能です。

1.

アップローダーを登録した web サイトに貼り付けると以下のような画面が表示されます。ファイル選択からPDF ファイルを選択してアップロードします。

2.

アップロードすると、json でレスポンスが返ってきます。

{"callback_url":null,"created_at":"2015-0318T07:10:12Z","file":{"url":"/uploads/doc/file/3825/test.pdf"},"format":"pdf","name":"test.pdf","pages":1,"redirect_url":null,"status":"done","updated_at":"2015- 0318T07:10:15Z","id":"d3abbb4e462bfb98cfe31f8f927a7f32eacf2686","images":["//conv.sobaproject.com/docs/ d3abbb4e462bfb98cfe31f8f927a7f32eacf2686/images/page1.png"]}

callback_url

常に nullcreated_at

YYYY-MM-DDThh:mm:ssTZD

file

アップロードしたファイル情報url

アップロードしたファイルの場所

format

ファイルフォーマット

name

アップデートしたファイル名

pages

null/1redirect_url

常に nullstatusnew/processing/done

updated_at

YYYY-MM-DDThh:mm:ssTZD

id

独自 id この id をスライドに指定します。

images変換後のファイルの 1 枚目

3.

https://conv.soba-project.com/api/docs/ の後ろに id を追記します。

4.

上 記 の 例 な ら 、 https://conv.sobaproject.com/api/docs/d3abbb4e462bfb98cfe31f8f927a7f32eacf2686

5.となります。

data-slide-url="https://conv.sobaproject.com/api/docs/d3abbb4e462bfb98cfe31f8f927a7f32eacf2686"とスライドタグに指定します。

オプション

スライドの幅 、高 さを変 更 する
スライドの幅、高さを変更するには style="width: px; height: px;"を追加します。
style="width: px; height: px;"は必ず入れる必要があります。入れなかった場合、表示されません
ので注意が必要です。

<div id="soba-widget-slide-xxxxx" style="width:320px; height:240px;"data-slide-url=""></div><script src="xxxxx" type="text/javascript"></script>

スライドデータの取 得 URL を指 定 する
スライドデータの取得 URL を指定するには data-slide-url に URL を入力してください。

<div id="soba-widget-slide-xxxxx" data-slide-url="xxxxx"></div><script src="xxxxx" type="text/javascript"></script>

スライドへの書 き込 み禁 止 を指 定 する
スライドへの書き込み禁止の指定をするには data-readonly の値を変更します。true にすると書き込み禁止,false にすると書き込み可となります。

<div id="soba-widget-slide-xxxxx"data-readonly="true" data-slide-url=""></div><script src="xxxxx" type="text/javascript"></script>

オプション（API）
以下のオプションについては API を用いて変更します。
xxxxxx には、HTML タグを取得したときに表示される、チャンネル名を記述してください。
“#soba-widget-slide-xxxxxx”の部分はスライドのウィジェット HTML の div id と同じになります。

ペンの線 の幅 を変 更 するには
setLineWidth の中にある 10 を適宜書き換えてください。

$("#soba-widget-slide-xxxxxx").data('SobaSlide').setLineWidth(10);

ペン入 力 か消 しゴムのモードを切 り替 えるにはtrue にすると消しゴムモード、false にするとペン入力モードになります。 PC では左クリックがペン入力モード、右クリックが消しゴムモードになります。スマートフォン・タブレットでのご利用の場合、以下の API を用いて切り替えます。

$("#soba-widget-slide-xxxxxx").data('SobaSlide').setLineEraser(true);

スライドを拡 大 ・縮 小 表 示 するにはvalue に数字を入力してください。設定していない場合、scale(1)になります。

$("#soba-widget-slide-xxxxxx").data('SobaSlide').scale(value);

ペン入 力 の色 を変 更 するには
setLineColor の中に記述します。「" "」で囲む必要があります。設定していない場合は、黒色になります。

$("#soba-widget-slide-xxxxxx").data('SobaSlide').setLineColor("Red");

新 しいスライドをセットするにはnewSlide に新しいスライドデータの url 記述します。第一引数にはスライドデータの url を記載します。

$("#soba-widget-slide-xxxxxx").data('SobaSlide').newSlide(“https://conv.sobaproject.com/api/docs/abcdefghijklmnopqrsoba”);※ここで記載しているスライドデータは仮のものです。

スマートフォン・タブレットでの利 用フレームワーク・クラウドは、スマートフォン・タブレットでもご利用が可能です。
各パーツはブラウザでそのまま表示することが可能です。
注意事項
WebRTC メディアパーツは Android の場合は Chrome,iOS や iPadOS の場合は Safari でご利用頂けます。また、各 webview でも適切に記載すれば動作します。

パーツのご利 用 手 順

端 末 のブラウザの場 合
端末のブラウザを起動し、指定の URL を入力して表示します。

SOBA フレームワーク・クラウド動 作 環 境
対 応 クライアント OS
Windows 7／8.1/10 mac OS 10.8 以降

Android 6 以降, iOS13 以降
対 応 クライアントブラウザ
Firefox／Safari／Chrome/Edge それぞれ最新版※ WebRTC については Chrome 最新版を推奨

対 応 サーバーOS
Linux,WindowsServer など、web サーバーが動作する環境。
web サーバーのアプリケーション（IIS, NGINX など）は問いません。