ねとけいばのURLからラップの折れ線グラフを作る
自主学習
簡単にグラフを作れるChart.js
簡単に軽いスクレイピングが出来るsimple_html_dom.php
jsとphpの間でデータを橋渡しする$.ajax
こんな感じのができる
ただグラフを作成するだけのものですが記録として
phpが動く環境なら使えます
雑にやったのでURLは
https://race.netkeiba.com/race/result.html?race_id=レースID&rf=race_list
かレースID以下だけ消してるみたいな形じゃないと出来ないはず
↓この画面
コード
rapgraphindex.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ラップタイム折れ線グラフ</title>
</head>
<body>
<div id="inputarea">
URL<input type="text" id="inputurl" value=""><br>
<input type="button" value="submit" onClick="loadCharts()"></input>
</div>
<!-- ここにグラフ -->
<div id="chartarea"></div>
<!-- script -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script type="text/javascript" src="rapgraph.js"></script>
</body>
</html>rapgraph.js
const loadCharts = function () {
// レースのURL受け取り
var RaceUrl = document.getElementById("inputurl").value;
console.log(RaceUrl);
// phpにURLを渡す
$.ajax({
type: "post",
url: "rapgraph.php",
data: {"RaceUrl": RaceUrl},
success: function(result){
// phpでの処理が成功したら
// jsで扱えるデータにする
var arr = JSON.parse(result);
var RaceName = JSON.parse(arr[0]);
var Haronarray = JSON.parse(arr[1]);
var Timearray = JSON.parse(arr[2]);
console.log(RaceName);
console.log(Haronarray);
console.log(Timearray);
// グラフを作成
const chartDataSet = {
type: 'line',
data: {
labels: Haronarray,
datasets: [{
label: RaceName,
data: Timearray,
lineTension: 0, // draw straightline
backgroundColor: 'transparent',
borderColor: 'rgba(60, 160, 220, 0.8)'
}
]},
options: {}
};
const ctx = document.createElement("canvas");
document.getElementById("chartarea").appendChild(ctx);
new Chart(ctx, chartDataSet);
}
})};rapgraph.php
<?php
require_once("simple_html_dom.php");
$URL = $_POST["RaceUrl"]; //取得したいサイトのURL
$ch = curl_init();
//ここからオプション
curl_setopt($ch, CURLOPT_URL, $URL);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //証明書検証しない
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //レスポンスを表示するか
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); //"Location: " ヘッダの内容をたどる
curl_setopt($ch, CURLOPT_MAXREDIRS, 10); //"Location: " ヘッダの内容をたどる深さ
//ここまでオプション
$output = curl_exec($ch) or die('error ' . curl_error($ch)); //cURL セッションを実行する
curl_close($ch); //リソースを閉じ、システムリソースを解放
//日本語のための文字コード設定など
mb_language("Japanese");
$html_source = mb_convert_encoding($output, "UTF-8", "auto");
$html = str_get_html( $html_source );
// レース名
$RaceName = $html->find("div.RaceName", 0)->plaintext;
// 通過距離
foreach ($html->find("table.RaceCommon_Table.Race_HaronTime tr.Header", 0)->find("th") as $th) {
$Haronarray[] = $th->plaintext;
}
// ハロンタイム
foreach ($html->find("table.RaceCommon_Table.Race_HaronTime tr.HaronTime", 1)->find("td") as $td) {
$Timearray[] = $td->plaintext;
}
// エンコード
$RaceName_json = json_encode($RaceName, JSON_UNESCAPED_UNICODE);
$Haronarray_json = json_encode($Haronarray);
$Timearray_json = json_encode($Timearray);
// 1つに纏める
$result = array(
$RaceName_json,
$Haronarray_json,
$Timearray_json
);
// jsファイルに返す
echo json_encode($result);
exit;
?>主に参考にしたサイト
https://kapibara-sos.net/archives/597
https://blog.s-giken.net/441.html
https://blog.s-giken.net/442.html
https://tips.recatnap.info/japanese_translation_manual_simple_html_dom_parser/
https://brainlog.jp/programming/php/post-429/
気が向いたら改良するかもしれんけど多分飽きた
この記事が気に入ったらサポートをしてみませんか？