スライドパーツ

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

スライド画面

HTML

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

スライドデータのURLを取得する方法

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

  1. 下記フォームからPDFファイルをアップロードしてください。
  2. アップロードすると、以下が表示されます。(id以外は省略しています。)
  3. {"callback_url":・・・・"id":"d3abbb4e462bfb98cfe31f8f927a7f32eacf2686"}
  4. https://conv.soba-project.com/api/docs/ の後ろに先ほど表示されたidを追記してください。
  5. 上記の例なら、https://conv.soba-project.com/api/docs/d3abbb4e462bfb98cfe31f8f927a7f32eacf2686となります。
  6. data-slide-url="https://conv.soba-project.com/api/docs/d3abbb4e462bfb98cfe31f8f927a7f32eacf2686"とスライドタグに指定します。

オプション

スライドの幅、高さを変更する

スライドの幅、高さを変更するにはstyle="width: px; height: px;"を追加します。

style="width: px; height: px;"は必ず入れる必要があります。入れなかった場合、表示されませんので注意が必要です。

HTML

                          <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を入力してください。

HTML

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

スライドへの書き込み禁止を指定する

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

HTML

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

オプション(API)

以下のオプションについてはAPIを用いて変更します。

xxxxxxには、htmlタグを取得したときに表示される、チャンネル名を記述してください。

ペンの線の幅を変更するには

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");

毎月2,500分まで無料。まずはお試し

更新中!「こうしたい時はどうするの?」等のご質問、大歓迎です!

作成してみた

お電話は 0120-169-279 までお気軽にどうぞ。

担当者よりお電話をおかけします。

以下のフォームにご記入下さい。