|
0
|
1 <!DOCTYPE html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta charset='utf-8'>
|
|
|
5 <title>Seminar</title>
|
|
|
6
|
|
|
7 <!--
|
|
|
8 Notes on CSS media types used:
|
|
|
9
|
|
|
10 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
|
|
|
11 2) screen -> outline mode (display all slides-at-once on screen)
|
|
|
12 3) print -> print (and print preview)
|
|
|
13
|
|
|
14 Note: toggle between projection/screen (that is, slideshow/outline) mode using t-key
|
|
|
15
|
|
|
16 Questions, comments?
|
|
|
17 - send them along to the mailinglist/forum online @ http://groups.google.com/group/webslideshow
|
|
|
18 -->
|
|
|
19
|
|
|
20 <!-- style sheet links -->
|
|
|
21 <link rel="stylesheet/less" href="themes/blank/projection.css.less" media="screen,projection">
|
|
|
22 <link rel="stylesheet/less" href="themes/blank/screen.css.less" media="screen">
|
|
|
23 <link rel="stylesheet/less" href="themes/blank/print.css.less" media="print">
|
|
|
24
|
|
|
25 <link rel="stylesheet/less" href="blank.css.less" media="screen,projection">
|
|
|
26
|
|
|
27 <!-- Notes about less css support
|
|
|
28 - all less stylesheets (*.css.less) need to get listed/loaded first (before the less.js script)
|
|
|
29 - find more info about less.js online @ http://lesscss.org
|
|
|
30
|
|
|
31 ***** NOTE:
|
|
|
32 less.js browser script currently won’t work if you’re using Google Chrome
|
|
|
33 and the path to your page starts with "file:///" due to a known Chrome issue.
|
|
|
34 (In the developer/js console you will see:
|
|
|
35 XMLHttpRequest cannot load file:///../s6/shared/projection.css.less.
|
|
|
36 Cross origin requests are only supported for HTTP.)
|
|
|
37 -->
|
|
|
38
|
|
|
39 <!-- add js libs (less, jquery) -->
|
|
|
40 <script src="js/less-1.1.4.min.js"></script>
|
|
|
41 <script src="js/jquery-1.7.min.js"></script>
|
|
|
42
|
|
|
43 <!-- S6 JS -->
|
|
|
44 <script src="js/jquery.slideshow.js"></script>
|
|
|
45 <script src="js/jquery.slideshow.counter.js"></script>
|
|
|
46 <script src="js/jquery.slideshow.controls.js"></script>
|
|
|
47 <script src="js/jquery.slideshow.footer.js"></script>
|
|
|
48 <script src="js/jquery.slideshow.autoplay.js"></script>
|
|
|
49 <script>
|
|
|
50 $(document).ready( function() {
|
|
|
51 Slideshow.init();
|
|
|
52
|
|
|
53 // Example 2: Start Off in Outline Mode
|
|
|
54 // Slideshow.init( { mode: 'outline' } );
|
|
|
55
|
|
|
56 // Example 3: Use Custom Transition
|
|
|
57 // Slideshow.transition = transitionScrollUp;
|
|
|
58 // Slideshow.init();
|
|
|
59
|
|
|
60 // Example 4: Start Off in Autoplay Mode with Custom Transition
|
|
|
61 // Slideshow.transition = transitionScrollUp;
|
|
|
62 // Slideshow.init( { mode: 'autoplay' } );
|
|
|
63 } );
|
|
|
64 </script>
|
|
|
65
|
|
|
66 <!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
|
|
|
67 <!--[if IE]>
|
|
|
68 <script src="js/jquery.microsoft.js"></script>
|
|
|
69 <![endif]-->
|
|
|
70
|
|
|
71 </head>
|
|
|
72 <body>
|
|
|
73
|
|
|
74 <div class="layout">
|
|
|
75 <div id="header"></div>
|
|
|
76 <div id="footer">
|
|
|
77 <div align="right">
|
|
|
78 <img src="images/concurrency.png" width="200">
|
|
|
79 </div>
|
|
|
80 </div>
|
|
|
81 </div>
|
|
|
82
|
|
|
83 <div class="presentation">
|
|
|
84
|
|
|
85 <!-- add slides here; example -->
|
|
|
86
|
|
|
87 <div class='slide cover'>
|
|
|
88 <table width="90%" height="90%" border="0" align="center">
|
|
|
89 <tr>
|
|
|
90 <td><div align="center">
|
|
20
|
91 <h1><font color="#808db5">授業やゼミで使える</font></h1>
|
|
|
92 <h1><font color="#808db5">面共有システムTreeVNCの機能拡張</font></h1>
|
|
0
|
93 </div></td>
|
|
|
94 </tr>
|
|
|
95 <tr>
|
|
|
96 <td><div align="left">
|
|
|
97 Miwa Oshiro
|
|
|
98 <script>
|
|
|
99 var date = new Date();
|
|
|
100 var year = date.getFullYear();
|
|
|
101 var month = date.getMonth();
|
|
|
102 var day = date.getDate();
|
|
|
103
|
|
|
104 var monthList = new Array("January","February","March","April","May","June",
|
|
|
105 "July","August","September","October","November","December");
|
|
|
106
|
|
|
107 document.write(monthList[month]+" "+day+", "+year);
|
|
|
108
|
|
|
109 </script>
|
|
|
110 <hr style="color:#ffcc00;background-color:#ffcc00;text-align:left;border:none;width:300%;height:0.2em;">
|
|
|
111 </div></td>
|
|
|
112 </tr>
|
|
|
113 </table>
|
|
|
114 </div>
|
|
|
115
|
|
14
|
116 <div class='slide'>
|
|
20
|
117 <h2>PCを用いた多人数でのコミュニケーションの充実</h2>
|
|
|
118 <p>ゼミや授業等、ひとりひとりがPCを持っている状況で、<br>
|
|
|
119 PCの機能を活かしたコミュニケーションが可能である </p>
|
|
|
120 <p>授業での教授のPC画面をリアルタイムで配信したり、<br>
|
|
|
121 ゼミ等で、発表する学生のPC画面を切り替えることを可能にしたい</p>
|
|
14
|
122 </div>
|
|
0
|
123
|
|
|
124 <div class='slide'>
|
|
20
|
125 <h2>TreeVNCを用いたコミュニケーションの充実</h2>
|
|
|
126 <p>TreeVNCを用いることによって、多人数でのPC端末を用いたコミュニケーションの充実をはかる</p>
|
|
19
|
127 <ul>
|
|
|
128 <li>ひとつの画面を多人数で共有する</li>
|
|
|
129 <li>画面の切り替えをスムーズにする</li>
|
|
|
130 <li>綺麗な画質をリアルタイムで配信する</li>
|
|
20
|
131 <li>遠隔地からでもコミュニケーションに参加できる</li>
|
|
19
|
132 </ul>
|
|
14
|
133 </div>
|
|
|
134
|
|
|
135
|
|
|
136 <div class='slide'>
|
|
20
|
137 <h2>TreeVNCとは</h2>
|
|
|
138 <p>今研究室で開発している多人数向けの画面共有システム</p>
|
|
|
139 <p>TreeVNC 画面配信システムは、参加したクライアントをバイナリツリー状に接続し、<br>
|
|
|
140 配信コストをクライアントに バランスさせる仕組みになっている<br>
|
|
|
141 なので、多人数が参加しても処理性能が下がらない</p>
|
|
|
142 <p>また、RFB プロトコルを用いているので、<br>
|
|
|
143 ケーブルの差し替えなしに共有している画面の切り替えが可能になっている</p>
|
|
|
144 <img src="images/20150218/TreeVNC.png">
|
|
0
|
145 </div>
|
|
|
146
|
|
|
147 <div class='slide'>
|
|
20
|
148 <h2>機能向上のために行った機能拡張</h2>
|
|
|
149 <p>以下のTreeVNCの機能拡張を行った</p>
|
|
|
150 <h3>リファクタリング</h3>
|
|
13
|
151 <ul>
|
|
20
|
152 <li>1台のPCで複数のTreeVNCの立ち上げを可能にした</li>
|
|
|
153 <li>複数のネットワークインタフェースでの使用が可能になった</li>
|
|
|
154 <li>切断の検知方法を解決した</li>
|
|
14
|
155 </ul>
|
|
20
|
156 <h3>新機能実装</h3>
|
|
17
|
157 <ul>
|
|
20
|
158 <li>描画速度の向上</li>
|
|
|
159 <li>シングルディスプレイのみの表示を可能にした</li>
|
|
|
160 <li>遠隔地からの接続を可能にした</li>
|
|
17
|
161 </ul>
|
|
|
162 </div>
|
|
|
163
|
|
14
|
164
|
|
|
165 <div class='slide'>
|
|
20
|
166 <h2>動的なport番号の割り当て</h2>
|
|
|
167 <h3>問題点</h3>
|
|
|
168 <p>固定port番号の使用をしていたため、1台のPCで複数台のTreeVNCを立ち上げることができなかった</p>
|
|
|
169 <h3>解決方法</h3>
|
|
|
170 <p>接続してくるnodeに対して、動的にport番号を割り当てる様に変更を行った<br>
|
|
|
171 node間のメッセージ通信は、割り当てられたport番号を用いて行う様にした</p>
|
|
|
172 <h3>結果</h3>
|
|
|
173 <p>1台のPCで複数台のTreeVNCの立ち上げが可能となった<br>
|
|
|
174 メッセージ通信に、どのportが使用されているかを意識する必要がなくなった</p>
|
|
|
175 </div>
|
|
|
176
|
|
|
177 <!--
|
|
|
178 <div class='slide'>
|
|
|
179 <h2>ホスト切替時の挙動の変更</h2>
|
|
|
180 <h3>問題点</h3>
|
|
|
181 <p>画面配信側にもviewerが表示されてしまい、ビデオフィードバッグが配信されてしまっていた。</p>
|
|
|
182 <h3>解決方法と結果</h3>
|
|
|
183 <p>配信側になった場合、viewerを閉じる様にし、配信者が切り替わると立ち上がるように変更した。<br>
|
|
|
184 </p>
|
|
|
185 </div>
|
|
|
186 -->
|
|
|
187
|
|
|
188 <div class='slide'>
|
|
|
189 <h2>Treeの構成の変更</h2>
|
|
|
190 <h3>問題点</h3>
|
|
|
191 <p>単一のネットワークインタフェースのみでしか使用できなかった<br>
|
|
|
192 構成される木構造がひとつであった</p>
|
|
|
193 <h3>解決方法</h3>
|
|
|
194 <p>ネットワークインタフェース毎に木構造を構成する様変更した</p>
|
|
|
195 <h3>結果</h3>
|
|
|
196 <p>有線・無線、両方でのTreeVNCの使用が可能になった</p>
|
|
|
197 <img src="images/20150218/MultiNetworkTree.png">
|
|
|
198 </div>
|
|
|
199
|
|
|
200 <div class='slide'>
|
|
|
201 <h2>マルチディスプレイ対応</h2>
|
|
|
202 <h3>問題点</h3>
|
|
|
203 <p>配信者の画面がマルチディスプレイだった場合、2画面のデータが配信されてしまう<br>
|
|
|
204 2画面の表示はプレゼンテーションには向いていない</p>
|
|
|
205 <img src="images/20150218/multidisplay.png">
|
|
|
206 <h3>解決方法</h3>
|
|
|
207 <p>配信側のシングルディスプレイサイズを取得し、画面データのフィルタリングを行った</p>
|
|
|
208 <h3>結果</h3>
|
|
|
209 <p>シングルディスプレイのみの表示が可能となった</p>
|
|
|
210 </div>
|
|
|
211
|
|
|
212 <div class='slide'>
|
|
|
213 <h2>遠隔地から接続を可能にした</h2>
|
|
|
214 <h3>結果</h3>
|
|
|
215 <img src="images/20150218/remoteTreeVnc.png">
|
|
|
216 </div>
|
|
|
217
|
|
|
218 <div class='slide'>
|
|
|
219 <h2>遠隔地からの接続の実装方法</h2>
|
|
|
220 <h3>実装方法</h3>
|
|
13
|
221 <ul>
|
|
20
|
222 <li>遠隔地 node から接続したい root に対して接続を要求する WHERE_TO_CONNECT_message を送信する</li>
|
|
|
223 <li>root は、遠隔地 node に対して接続先を含む CONNECT_TO message を送信する</li>
|
|
|
224 <li> 遠隔地 node は指定された接続先に対して接続しに行く </li>
|
|
13
|
225 </ul>
|
|
20
|
226 <img src="images/20150218/remoteVncConnect.png">
|
|
12
|
227 </div>
|
|
0
|
228
|
|
20
|
229
|
|
|
230 <div class='slide'>
|
|
|
231 <h2>その他の問題解決</h2>
|
|
|
232 <h3>ビデオフィードバッグを非表示にした</h3>
|
|
|
233 <h3>切断時の検知方法の変更</h3>
|
|
|
234 <h3>QUALITYモードとSPEEDモード</h3>
|
|
|
235 <h3>表示画面サイズ調整機能</h3>
|
|
|
236 </div>
|
|
|
237
|
|
|
238
|
|
|
239 <div class='slide'>
|
|
|
240 <h2>今後の課題</h2>
|
|
|
241 <h3>音声機能の追加</h3>
|
|
|
242 <h3>記録機能の追加</h3>
|
|
|
243 <h3>意見・質問等の共有機能の追加</h3>
|
|
|
244 </div>
|
|
|
245
|
|
|
246
|
|
|
247
|
|
|
248
|
|
0
|
249 </div> <!-- presentation -->
|
|
|
250 </body>
|
|
|
251 </html>
|
