Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bokete player の裏側 ~R で作る Web アプリケーション~

8,873 views

Published on

Published in: Software
  • Be the first to comment

Bokete player の裏側 ~R で作る Web アプリケーション~

  1. 1. Bokete Player の裏側 ~ R で作ろう Web アプリケーション~ @hoxo_m 2014/08/30
  2. 2. 自己紹介 • hoxo_m 某ECサイトでデータ分析をやっています • RPubsHotEntry RPubs のホットエントリを流す Twitter Bot フォロワー 100人達成!
  3. 3. ボケて(http://bokete.jp/) 起きた瞬間、感覚で遅刻を確信
  4. 4. •ボケてはおもしろい •ボケてのネタを自動的に流し見できない だろうか? ⇒ それ、Shiny でできるよ!
  5. 5. RSudio Shiny •R だけで手軽に Web アプリケーションを 作ることができるパッケージ http://shiny.rstudio.com/
  6. 6. 作りました https://hoxom.shinyapps.io/BoketePlayer/
  7. 7. Internet Watch に載る http://internet.watch.impress.co.jp/docs/yajiuma/20140801_660475.html
  8. 8. GIGAZINE に載る http://gigazine.net/news/20140801-bokete-player/
  9. 9. アクセス伸びる GIGAZINE 砲
  10. 10. 落ちる。
  11. 11. •というわけで、GIGAZINE に載った Bokete Player の作り方を大公開!
  12. 12. 作り方 ① ウェブスクレイピング (server.R) ② 画面の作成 (ui.R)
  13. 13. ① ウェブスクレイピング •Web サイトから Web ページの HTML データを収集して、特定のデータを抽出、 整形し直すこと •あたかも Web API を利用しているかのよ うにデータを効率的に取得・収集するこ とが可能になる http://www.sophia-it.com/content/Webスクレイピング
  14. 14. •日付別ボケランキング •ここからボケを拾う http://bokete.jp/boke/daily/20140828
  15. 15. XML パッケージ •Web ページの要素を XPath で指定して抜 き出せる便利パッケージ library(XML) url <- "http://bokete.jp/boke/daily/20140828" html <- htmlParse(url) xpath <- '//*[@class="boke-entry attention ui- widget"]/div[7]/input/@value' imageUrls <- getNodeSet(html, xpath) print(imageUrls[[1]])
  16. 16. ここだけ抜き出した
  17. 17. server.R •コードは下記にあります (30行程度) •https://github.com/hoxo- m/BoketePlayer/blob/master/server.R •全コードは下記: •https://github.com/hoxo-m/BoketePlayer
  18. 18. ② 画面の作成 •ui.R の書き方 ⇒ 公式ページを見て下さい (翻訳もあります) •ここでは、公式に載ってないテクニック を紹介します。
  19. 19. ボタンを追加したい •デフォルトのアニメーション開始ボタン はわかりにくい
  20. 20. ボタンを追加したい •Play ボタン kIntervalSeconds <- 8 kPlayButton <- HTML('<button><i class="icon-play"></i> Play</button>') kPauseButton <- HTML('<button><i class="icon- pause"></i> Pause</button>') kStartButtonHTML <- a(href="#", class="slider-animate- button", "data-target-id"="index", "data- interval"=kIntervalSeconds * 1000, "data-loop"="TRUE", style="opacity: 1;", span(class="play", kPlayButton), span(class="pause", kPauseButton))
  21. 21. ボタンを追加したい •Speed Up ボタン (Speed Down も同じ) kSpeedUpButton <- HTML('<button id="speedUp"><i class="icon- arrow-up"></i> Speed Up</button>') function changeSpeed(newSpeed) { $("a.slider-animate-button").attr("data-interval", newSpeed); $("a.slider-animate-button").click(); $("a.slider-animate-button").click(); $("#intervalSec").text(newSpeed/1000); } $("#speedUp").click(function() { var speed = $("a.slider-animate-button").attr("data-interval"); if(speed > 1000) { var newSpeed = Number(speed) - 500; changeSpeed(newSpeed); } }) 動作は JavaScript で記述
  22. 22. 自動的にアニメーションを始めたい •できます。 $("a.slider-animate-button").click();
  23. 23. Google Analytics を埋め込みたい •できます。 kGoogleAnalyticsCode <- " <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-********-*', 'auto'); ga('send', 'pageview'); </script> “ HTML(kGoogleAnalyticsCode)
  24. 24. GET パラメータを取得したい •できます。 •Bokete Player では、intervalsec=7 の ように渡すと、7 秒ごとの切り替わりにな ります。 •https://hoxom.shinyapps.io/BoketePlayer/?intervalsec=7
  25. 25. GET パラメータを取得したい •まずJSの関数を用意 (ググればたくさん出てくる) function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf("?") + 1).split("&"); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split("="); vars.push(hash[0].toLowerCase()); vars[hash[0].toLowerCase()] = hash[1]; } return vars; } http://apr20.net/web/jquery/2215/
  26. 26. GET パラメータを取得したい •JQuery を使って設定。簡単! (function() { var intervalSec = getUrlVars()["intervalsec"]; if(intervalSec !== undefined && Number(intervalSec) !== NaN) { if(intervalSec >= 1) { $("a.slider-animate-button").attr("data- interval", intervalSec * 1000) } } $("#intervalSec").text(intervalSec); })(); http://apr20.net/web/jquery/2215/
  27. 27. まとめ •RStudio Shiny 製 Bokete Player の作り 方を簡単に説明しました。 •アイデアがあれば、GIGZINE に載るよう なアプリを作れます! •チャレンジ問題: –ダジャレナビのサイトをスクレイピングして 同様のものを作ろう! –http://www.dajarenavi.net/kw/z_today/0830.htm
  28. 28. ご清聴ありがとうございました

×