Shinyを自由に使ってみる
-
Upload
m-tkn -
Category
Technology
-
view
1.246 -
download
7
description
Transcript of Shinyを自由に使ってみる
Shinyを自由に使ってみる
@mtknnktm
2014/4/19 1
第38回 Tokyo.R
※この発表は個人の
見解であり、所属する組織の公式見解ではありません。
22014/4/19
自己紹介
• 高野雅典
– システムエンジニア(SIer)
→ フロントエンドエンジニア→ データマイニングエンジニア
• 普段の仕事
– ソーシャルゲームの分析
– ソシャゲ用BIシステムの設計・開発
– データ分析に関わるR&D
• 得意/興味のある領域
– 複雑系科学/人工生命・進化ゲーム理論
– データ解析・R
– UI・データの可視化・JavaScript• Twitter: @mtknnktm
3
翻訳しました
Shiny
• R でインタラクティブなWebアプリ を手軽に開発できるフレームワーク
– Rの持つ統計・機械学習・可視化ライブラリを使ったインタラクティブなツールを開発・提供可能!
42014/4/19
http://glimmer.rstudio.com/winston/stocks/
利用方法
Shiny単体をローカルで使う
52014/4/19
Shiny
ShinyServer
Shiny
Webアプリとして公開
WebSocket
WebSocket WebSocket
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
72014/4/192014/4/19 7
Webアプリ
ShinyAjax
WebSocket
Shiny
Shiny
Shiny
Shinyの前に何かかぶせ
て、色々できるとしあわせになれる気がする
デモ
とりあえず、ブラウザサイドを自作して、Shinyと通信し
てみましたhttps://github.com/mtkn-misty/shiny_client
2014/4/19 8
ShinyWebSocket
ここを自作
デモ
2014/4/19 9
ShinyのUIをちょっと凝った感じに
Drag & Drop
ggplot
Shinyとの通信の概要
102014/4/19
クライアント Shiny①WebSocketコネクション開始
②ID類送信
③パラメータ送信
④分析結果やグラフ画像送信
⑤パラメータ送信(変更点のみ)
⑥分析結果やグラフ画像送信
初期画面表示
◯パラメータ送信(変更点のみ)
◯分析結果やグラフ画像送信
パラメータ変更時・・・
①・②コネクション開始
{
"config": {
"workerId": "”,
"sessionId": "c1f855fed0fe4236a45d0a6a0799e3d5”
}
}
112014/4/19
②なんか返ってくる
とりあえず、使わなくてもいろいろできるので気にしなくておk
//JavaScriptの例
var conn = new WebSocket('ws://localhost:8081');
①Shiny起動後、WebSocketコネクション開始すると
Shin
y→ブラウザ
③パラメータ送信(最初)
122014/4/19
{
“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
ブラウザ
→Sh
iny
③パラメータ送信(最初)
132014/4/19
{
“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
ブラウザ
→Sh
iny
④分析結果やグラフ画像送信
142014/4/19
{
"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
Shin
y→ブラウザ
④分析結果やグラフ画像送信
152014/4/19
{
"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
Shin
y→ブラウザ
⑤・⑥パラメータ送信(2回目以降)
162014/4/19
{
“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の結果
関係する関数の結果のみ返ってくる
Shin
y→ブラウザ
ブラウザ
→Sh
iny
グラフの描画(ggplot2とか)
172014/4/19
{
“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で画像が返ってくる
Shin
y→ブラウザ
ブラウザ
→Sh
iny
これをそのままimageタグのsrc要素に突っ込めばグラフが表示される
画像データの通信方式。trueだとbase64でグラフ画像が送られてくる。falseだと画像のURLが送られてくる。
グラフの描画(rCharts)
182014/4/19
{
“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の埋め込み)でグラフが返ってくる
Shin
y→ブラウザ
ブラウザ
→Sh
iny
これをそのままタグの中に突っ込めばグラフが表示される
まとめ
• WebSocketで通信することで、任意のアプリケーションからShinyの関数が利用できる
• UI・認証・マルチプロセス制御をShinyの外でできるようになるので、より柔軟にShinyを使える
–ただし、Shinyを叩く側は自前で作らないといけないので、Shinyそのまま使うよりめんd (ry
192014/4/19