Embed Size (px)
DESCRIPTION
Citation preview
Bokete Player の裏側 ～ R で作ろう Web アプリケーション～
@hoxo_m
2014/08/30
自己紹介
• hoxo_m
某ECサイトでデータ分析をやっています
• RPubsHotEntry
RPubs のホットエントリを流す Twitter Bot
フォロワー 100人達成！
• ボケてはおもしろい
• ボケてのネタを自動的に流し見できないだろうか？
⇒ それ、Shiny でできるよ！
RSudio Shiny
• R だけで手軽に Web アプリケーションを作ることができるパッケージ
http://shiny.rstudio.com/
Internet Watch に載る
http://internet.watch.impress.co.jp/docs/yajiuma/20140801_660475.html
GIGAZINE に載る
http://gigazine.net/news/20140801-bokete-player/
アクセス伸びる
GIGAZINE 砲
落ちる。
• というわけで、GIGAZINE に載った Bokete Player の作り方を大公開！
作り方
① ウェブスクレイピング (server.R)
② 画面の作成 (ui.R)
① ウェブスクレイピング
• Web サイトから Web ページの HTMLデータを収集して、特定のデータを抽出、整形し直すこと
• あたかも Web API を利用しているかのようにデータを効率的に取得・収集することが可能になる
http://www.sophia-it.com/content/Webスクレイピング
• 日付別ボケランキング
• ここからボケを拾う
http://bokete.jp/boke/daily/20140828
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]])
ここだけ抜き出した
server.R
• コードは下記にあります (30行程度)
• https://github.com/hoxo-m/BoketePlayer/blob/master/server.R
• 全コードは下記：
• https://github.com/hoxo-m/BoketePlayer
② 画面の作成
• ui.R の書き方
⇒ 公式ページを見て下さい (翻訳もあります)
• ここでは、公式に載ってないテクニックを紹介します。
ボタンを追加したい
• デフォルトのアニメーション開始ボタンはわかりにくい
ボタンを追加したい
• 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))
ボタンを追加したい
• 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 で記述
自動的にアニメーションを始めたい
• できます。
$("a.slider-animate-button").click();
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)
GET パラメータを取得したい
• できます。
• Bokete Player では、intervalsec=7 のように渡すと、7 秒ごとの切り替わりになります。
• https://hoxom.shinyapps.io/BoketePlayer/?intervalsec=7
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/
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/
まとめ
• RStudio Shiny 製 Bokete Player の作り方を簡単に説明しました。
• アイデアがあれば、GIGZINE に載るようなアプリを作れます！
• チャレンジ問題：
–ダジャレナビのサイトをスクレイピングして同様のものを作ろう！
– http://www.dajarenavi.net/kw/z_today/0830.htm
ご清聴ありがとうございました
