第38回 Tokyo.R LT資料

1. Shinyを自由に使ってみる
@mtknnktm
1
第38回 Tokyo.R

2. ※ この発表は個人の
見解であり、所属する
組織の公式見解ではあ
りません。
2

3. 自己紹介
• 高野雅典
– システムエンジニア（SIer）
→ フロントエンドエンジニア
→ データマイニングエンジニア
• 普段の仕事
– ソーシャルゲームの分析
– ソシャゲ用BIシステムの設計・開発
– データ分析に関わるR&D
• 得意/興味のある領域
– 複雑系科学/人工生命・進化ゲーム理論
– データ解析・R
– UI・データの可視化・JavaScript
• Twitter: @mtknnktm
3
翻訳しました

4. Shiny
• R でインタラクティブなWebアプリ を手軽に開発
できるフレームワーク
– Rの持つ統計・機械学習・可視化ライブラリを使った
インタラクティブなツールを開発・提供可能！
4
http://glimmer.rstudio.com/winston/stocks/

5. 利用方法
Shiny単体をローカルで使う
5
Shiny
Shiny
Server
Shiny
Webアプリとして公開
WebSocket
WebSocket WebSocket

6. Shinyは簡単故に制約が多い
（UIとか認証とかプロセス数とか※）
JavaやRubyでWebアプリつくる
ようにはいかない
※: Professional 版では、ダッシュボードのカスタマイズ、認証、
マルチプロセス化などの機能有り
※: マルチプロセスについては無理矢理何とかできなくもない
@wdkzさんのスライド「Shiny-Serverあれこれ」
http://www.slideshare.net/wdkz/japanr2013-wdkz
@mtknnktmのブログ「Shiny-Serverをたった1行の変更でマルチプロセス化する方法」
http://mtkn.hatenablog.com/entry/2013/12/11/200733

7. 77
Web
アプリ
Shiny
Ajax
WebSocket
Shiny
Shiny
Shiny
Shinyの前に何かかぶせ
て、色々できるとしあわ
せになれる気がする

8. デモ
とりあえず、ブラウザサイド
を自作して、Shinyと通信し
てみました
https://github.com/mtkn-misty/shiny_client
8
Shiny
WebSocket
ここを自作

9. デモ
9
ShinyのUIをちょっと凝った感じに
Drag & Drop
ggplot

10. Shinyとの通信の概要
10
クライアント Shiny
①WebSocketコネクション開始
②ID類送信
③パラメータ送信
④分析結果やグラフ画像送信
⑤パラメータ送信（変更点のみ）
⑥分析結果やグラフ画像送信
初期画面表示
◯パラメータ送信（変更点のみ）
◯分析結果やグラフ画像送信
パラメータ変更時
・・・

11. ①・②コネクション開始
{
"config": {
"workerId": "”,
"sessionId": "c1f855fed0fe4236a45d0a6a0799e3d5”
}
}
11
②なんか返ってくる
とりあえず、使わなくてもいろいろできるので気にしなくておk
//JavaScriptの例
var conn = new WebSocket('ws://localhost:8081');
①Shiny起動後、WebSocketコネクション開始すると
Shiny→ブラウザ

12. ③パラメータ送信（最初）
12
{
“method”: “init”,
“data”: {
".clientdata_output_summaryFunc_hidden": false,
“vals”: [2, 3, 5, 7, 11, 13, 19]
}
}
こんな感じでパラメータを送信する
shinyServer(function(input, output, session) {
# valuesのsummaryを計算して返す
output$summaryFunc <- renderText({
summary(input$vals)
})
})
.clentdata_output_関数名_hidden をfalseに
設定すると、Shinyアプリの対応する関数が呼
び出される。
Shinyアプリに渡す値
Shinyのserver.r
ブラウザ→Shiny

13. ③パラメータ送信（最初）
13
{
“method”: “init”,
“data”: {
".clientdata_output_summaryFunc_hidden": false,
“vals”: [2, 3, 5, 7, 11, 13, 19]
}
}
こんな感じでパラメータを送信する
shinyServer(function(input, output, session) {
# valuesのsummaryを計算して返す
output$summaryFunc <- renderText({
summary(input$vals)
})
})
.clentdata_output_関数名_hidden をfalseに
設定すると、Shinyアプリの対応する関数が呼
び出される。
Shinyアプリに渡す値
Shinyのserver.r
ブラウザ→Shiny

14. ④分析結果やグラフ画像送信
14
{
"errors": {},
"values": {
”summaryFunc": " Min. 1st Qu. Median Mean 3rd Qu. Max. n
2.000 4.000 7.000 8.571 12.000 19.000 "
},
"inputMessages": []
}
こんな感じの結果が返ってくる
summaryFuncの結果
shinyServer(function(input, output, session) {
# valuesのsummaryを計算して返す
output$summaryFunc <- renderText({
summary(input$vals)
})
})
Shinyのserver.r
Shiny→ブラウザ

15. ④分析結果やグラフ画像送信
15
{
"errors": {},
"values": {
”summaryFunc": " Min. 1st Qu. Median Mean 3rd Qu. Max. n
2.000 4.000 7.000 8.571 12.000 19.000 "
},
"inputMessages": []
}
こんな感じの結果が返ってくる
summaryFuncの結果
shinyServer(function(input, output, session) {
# valuesのsummaryを計算して返す
output$summaryFunc <- renderText({
summary(input$vals)
})
})
Shinyのserver.r
Shiny→ブラウザ

16. ⑤・⑥パラメータ送信（2回目以降）
16
{
“method”: “update”,
“data”: {
“vals”: [1, 1, 2, 3, 5, 8, 13]
}
}
こんな感じでパラメータを送信する
updateを指定
変更点だけ送信
{
"errors": {},
"values": {
”summaryFunc": " Min. 1st Qu. Median Mean 3rd Qu. Max. n
1.000 1.500 3.000 4.714 6.500 13.000 "
},
"inputMessages": []
}
summaryFuncの結果
関係する関数の結果のみ返ってくる
Shiny→ブラウザブラウザ→Shiny

17. グラフの描画（ggplot2とか）
17
{
“method”: “init”,
“data”: {
'.clientdata_allowDataUriScheme':true,
'.clientdata_output_plotFunc_hidden':false,
'.clientdata_output_plotFunc_width':300,
'.clientdata_output_plotFunc_height':200,
}
}
こんな感じでパラメータを送信する
グラフを描画する関数名
と画像サイズを指定
{
"errors": {},
"values": {
"plotFunc": {
"src": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...."
"width": 300, …
}
},
"inputMessages": []
}
Base64で画像が返ってくる
Shiny→ブラウザブラウザ→Shiny
これをそのままimageタグのsrc要素に
突っ込めばグラフが表示される
画像データの通信方式。
trueだとbase64でグラフ画像が送られてくる。
falseだと画像のURLが送られてくる。

18. グラフの描画（rCharts）
18
{
“method”: “init”,
“data”: {
'.clientdata_output_rplotFunc_hidden':false
}
}
こんな感じでパラメータを送信する
グラフを描画する関数名
を指定
{
"errors": {},
"values": {
”rplotFunc”: ”<style>.rChart {width: 800px; height: 400px} </style><script type='text/javascript’>
var chartParams = { "dom": "chart2”…”
},
"inputMessages": []
}
HTML（CSS/JSの埋め込み）でグラフが返ってくる
Shiny→ブラウザブラウザ→Shiny
これをそのままタグの中に
突っ込めばグラフが表示される

19. まとめ
• WebSocketで通信することで、任意のアプリ
ケーションからShinyの関数が利用できる
• UI・認証・マルチプロセス制御をShinyの外でで
きるようになるので、より柔軟にShinyを使える
– ただし、Shinyを叩く側は自前で作らないといけない
ので、Shinyそのまま使うよりめんd (ry
19