Shinyを自由に使ってみる​

3,225 views

Published on

第38回 Tokyo.R LT資料

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,225
On SlideShare
0
From Embeds
0
Number of Embeds
409
Actions
Shares
0
Downloads
15
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

Shinyを自由に使ってみる​

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

×