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