【HSP】2017年版 F1ランキングページを生成してみる【その5】

今回は前回の続き。抽出したデータを簡易的にHTMLで出力してみます。さらに、他にもデータ活用できるようにCSVとしても出力してみたいと思います。

【HSP】2017年版 F1ランキングページを生成してみる【その4】

今回は前回調べた2016年のRaceresult（オーストラリアGP）のダウンロードと必要なデータの取り出しをHSPにてプログラミン...

tks-kan.com

【HSP】2017年版 F1ランキングページを生成してみる【その3】

前回に引き続き、2017年版のランキングページの作成に向けて2016年のページを参考にして抽出できるように調べていきます。 ...

tks-kan.com

【HSP】2017年版 F1ランキングページを生成してみる【その2】

まだシーズン開幕前なので、2017年のリザルトページはデータのない状態。とはいえ、年々更新されるページで毎回仕様変更するとは考えにく...

tks-kan.com

【HSP】2017年版 F1ランキングページを生成してみる【その1】

2017年も2月になり、そろそろニューマシンが発表になったりする季節になってきました。いかがお過ごしでしょうか？　昨年はロズベルグが...

tks-kan.com

今回の目的は

簡易的にHTML出力をして確認してみる
さらに他でも活用できるようcsv出力もする

簡易的にHTMLを出力してみる

といっても、これも以前のコードを活用したいと思います。簡易的なのでcssの設定もそのままに（つまり、崩れて表示される可能性あり）しています。まず、コードをみてみましょう。

//make_html
html_text = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"content-language\" content=\"ja\">\n<title>2016ドライバーランキング</title>\n<style>\nbody {\ncounter-reset: drivername;\n}\nli {\ndisplay: flex;\n}\ndiv {\nmargin-right: 1rem;\n}\n.drivername, .team {\nwidth: 12rem;\n}\n.country {\nwidth: 6rem;\n}\n.drivername:before {\ncounter-increment:drivername;\ncontent:counter(drivername) \"位　\";\ndisplay: inline-flex;\nwidth: 3rem;\n}\n</style>\n</head>\n<body>\n<h1>2016ドライバーランキング</h1>\n<ul>"
repeat 40
    if firstname(cnt) = "" : break
    html_text += "<li>\n<div class=\"drivername\">" + firstname(cnt) + " " + familyname(cnt) + "</div>\n<div class=\"country\">" + country(cnt) + "</div>\n<div class=\"team\">" + teamname(cnt) + "</div>\n<div class=\"point\">" + getpoint(cnt) + "</div>\n</li>\n"
loop
//html_text += "</ul>\n</body>\n</html>\n"
html_text += "</ul>\n<p>※" + racename + " 終了時点のランキングです</p></body>\n</html>\n"


nkfcnv html_text,html_text,"Sw"

notesel html_text
//notesave "driverspoint.html"
notesave racename+"_finished.html"
noteunsel
await 1
dialog "save html file"
//mesbox html_text, 640, 400

とりあえず

2016ドライバーランキング　→　2017レースレースリザルト　に変更
終了時点のランキングです　の一文をコメントアウト、その直前の行をコメントアウト解除

しておきます。

repeat～loopの中身を改造

repeat 40
    if firstname(cnt) = "" : break
    html_text += "<li>\n<div class=\"drivername\">" + firstname(cnt) + " " + familyname(cnt) + "</div>\n<div class=\"country\">" + country(cnt) + "</div>\n<div class=\"team\">" + teamname(cnt) + "</div>\n<div class=\"point\">" + getpoint(cnt) + "</div>\n</li>\n"
loop

このrepeatの中身が本丸なのですが、この繰り返しを利用して後でcsvも作成しようと思います。覚えておいてくださいね。

さて、HTMLのイメージとしては以下のような感じで考えてます。

<li>
<div class="position">[1]</div>
<div class="drivername">Nico Rosberg</div>
<div class="country">6</div>
<div class="team">Mercedes</div>
<div class="point">25pt</div>
<div class="times">57(1:48:15.565)</div>
</li>

これをHSPに落とし込むと

html_text += "<li>\n<div class=\"position\">[" + position(cnt) + "]</div>\n<div class=\"drivername\">" + firstname(cnt) + " " + familyname(cnt) + "</div>\n<div class=\"country\">" + carnumber(cnt) + "</div>\n<div class=\"team\">" + teamname(cnt) + "</div>\n<div class=\"point\">" + getpoint(cnt) + "pt</div>\n<div class=\"times\">" + laps(cnt) + "(" + times(cnt) + ")</div>\n</li>\n"

これでOK！

出力部分の改造

notesel html_text
//notesave "driverspoint.html"
notesave racename+"_finished.html"
noteunsel
await 1
dialog "save html file"
//mesbox html_text, 640, 400

上記の部分を

notesel html_text
notesave "Raceresult.html"
//notesave racename+"_finished.html"
noteunsel
await 1
dialog "save html file"
//mesbox html_text, 640, 400

と変更。保存するファイル名を仮に「Raceresult.html」としました。この時点で一度実行して、ファイルを生成みると

簡易的でうがHTML出力ちゃんとできてますね！

CSV出力用のテキストを作成する

次にCSV用のテキストを作成したいと思います。基本的にはHTMLとやり方は一緒で、先ほどrepeat部分を利用すると宣言していたとおり、

repeat 40
    if firstname(cnt) = "" : break
    html_text += "<li>\n<div class=\"position\">[" + position(cnt) + "]</div>\n<div class=\"drivername\">" + firstname(cnt) + " " + familyname(cnt) + "</div>\n<div class=\"country\">" + carnumber(cnt) + "</div>\n<div class=\"team\">" + teamname(cnt) + "</div>\n<div class=\"point\">" + getpoint(cnt) + "pt</div>\n<div class=\"times\">" + laps(cnt) + "(" + times(cnt) + ")</div>\n</li>\n"
loop

この部分に追加していきます。それにあたって

入れ物をcsv_textとする
先頭行に項目名を追加
csvなのでカンマ区切りで分ける
出力処理を追加する

以上の点を考慮してコードを書いていきます。まず先頭行に項目追加。

csv_text = "position,firstname,familyname,carnumber,teamname,point,laps,times\n"

これはrepeatの外（直前）に記述しておきます。そして、repeatの中に

csv_text += position(cnt) + "," + firstname(cnt) + "," + familyname(cnt) + "," + carnumber(cnt) + "," + teamname(cnt) + "," + getpoint(cnt) + "," + laps(cnt) + "," + times(cnt) + "\n"

カンマ区切りで繋げて、最後に改行の「\n」も追加しておきます。で、作成したテキストをcsvで出力します。出力部分

notesel html_text
notesave "Raceresult.html"
//notesave racename+"_finished.html"
noteunsel
await 1
dialog "save html file"
//mesbox html_text, 640, 400

これにCSV出力用のコードを追加します。

//HTML出力
notesel html_text
notesave "Raceresult.html"
//notesave racename+"_finished.html"
noteunsel
await 1
// csv出力
notesel csv_text
notesave "Raceresult.csv"
noteunsel
await 1
dialog "save html file"
//mesbox html_text, 640, 400

これで完了！

まとめ

今回はここまで。最後にコードを載せておきますね。さて、データの抽出とHTML・CSVの出力までこぎつけました。この後の展開は

なるべく自動的にRaceresultを取得できるようにする
ドライバーズポイントのランキングもcsv出力させる

といったところです。どういう風に処理をしていこうかな。。。悩むｗ

//HSPモジュール　SAKMISさんのを使用しています
//命令→lfcc ファイルネーム
//読み込み→改行置換→保存
    #module
    #deffunc lfcc str filename
;   mref filename,32
;   mref status,64
        exist filename
        size=strsize
        if size=-1 : status=-1 : return
        sdim ss,size+1,1
        bload filename,ss,size

        ii=0
        code=0
        sdim data,size<<1,1

    repeat size
        tt = peek (ss,cnt)
        if tt=10 : code=10 : break
        if tt=13 {
        code=13
        tt = peek (ss,cnt+1)
        if tt=10 : code=0
        break
        }
    loop

        if code=0 : status=-1 : return

    repeat size
        tt = peek (ss,cnt)
        if tt=code : wpoke data,ii,2573 : ii+2 : continue
        poke data,ii,tt : ii++
    loop

        bsave filename,data,ii
        status=ii
    return
#global

    #include "hspinet.as"

    // ネット接続の確認
    netinit
    if stat : dialog "ネット接続できません" : end

    // 初期設定
    download_url = "https://www.formula1.com/en/results.html/2016/races/938/australia/race-result.html"
    sdim firstname,  40, 40
    sdim familyname, 40, 40
    sdim country,    40, 40
    sdim teamname,   40, 40
    sdim getpoint,   40, 40
    // 追加したもの
    sdim position,   40, 40
    sdim carnumber,  40, 40
    sdim laps,       40, 40
    sdim times,      40, 40


    /* 第一回で作成したダウンロード部分 */

    //　URL分解
    if (instr(download_url, 0, ".html") ! -1) or (instr(download_url, 0, ".php") ! -1) { //.html .phpが含まれているなら
        split download_url, "/", result
        url_pagename = result(stat-1)
        url_address  = download_url
        strrep url_address, url_pagename, ""
    } else { // 含まれていない場合はindex.htmlにする
        url_address  = download_url
        url_pagename = "index.html"
    }

    // チェック用分岐
    goto *skippoint


    neturl url_address
    netrequest url_pagename

    *main
    //取得待ち確認
    netexec res
    if res > 0 : goto *comp
    if res < 0 : goto *bad
    await 50
    goto *main

    *bad
    //エラー
    neterror estr
    mes "ERROR "+estr
    stop

    *comp
    mes "DOWNLOAD 完了"
    stop



    /*html生成部分（2～5回で作成）*/
    *skippoint //チェック用ラベル
    lfcc url_pagename
    notesel htmlfile
    noteload url_pagename
    first_cnt = 0 : family_cnt = 0 : country_cnt = 0 : teamname_cnt = 0
    position_cnt = 0 : carnumber_cnt = 0 : laps_cnt = 0 : times_cnt = 0
    repeat notemax
        noteget text_line, cnt
        // 着順
        if (instr(text_line, 0, "<td class=\"dark\">") ! -1) {
            strrep text_line, "<td class=\"dark\">", ""
            strrep text_line, "</td>", ""
            strrep text_line, " ", ""
            position(position_cnt) = text_line
            position_cnt++
            continue
        }
        // カーナンバー
        if (instr(text_line, 0, "<td class=\"dark hide-for-mobile\">") ! -1) {
            strrep text_line, "<td class=\"dark hide-for-mobile\">", ""
            strrep text_line, "</td>", ""
            strrep text_line, " ", ""
            carnumber(carnumber_cnt) = text_line
            carnumber_cnt++
            continue
        }
        // ファーストネーム
        if (instr(text_line, 0, "<span class=\"hide-for-tablet\">") ! -1) {
            strrep text_line, "<span class=\"hide-for-tablet\">", ""
            strrep text_line, "</span>", ""
            strrep text_line, " ", ""
            firstname(first_cnt) = text_line
            first_cnt++
            continue
        }
        // ファミリーネーム
        if (instr(text_line, 0, "<span class=\"hide-for-mobile\">") ! -1) {
            strrep text_line, "<span class=\"hide-for-mobile\">", ""
            strrep text_line, "</span>", ""
            strrep text_line, " ", ""
            familyname(family_cnt) = text_line
            family_cnt++
            continue
        }
        // 所属チーム
        if (instr(text_line, 0, "semi-bold uppercase hide-for-tablet") ! -1) {
            split text_line, ">", buf
            split buf(1), "<", result
            teamname(teamname_cnt) = result(0)
            teamname_cnt++
            continue
        }
        // ラップ
        if (instr(text_line, 0, "<td class=\"bold hide-for-mobile\">") ! -1) {
            strrep text_line, "<td class=\"bold hide-for-mobile\">", ""
            strrep text_line, "</td>", ""
            strrep text_line, " ", ""
            laps(laps_cnt) = text_line
            laps_cnt++
            continue
        }
        // タイム
        if (instr(text_line, 0, "<td class=\"dark bold\">") ! -1) and (instr(text_line, 0, "</td>") ! -1) {
            split text_line, ">", buf
            split buf(1), "<", result
            times(times_cnt) = result(0)
            times_cnt++
            continue
        }
        // 獲得ポイント
        if (instr(text_line, 0, "<td class=\"bold\">") ! -1) {
            strrep text_line, "<td class=\"bold\">", ""
            strrep text_line, "</td>", ""
            strrep text_line, " ", ""
            getpoint(point_cnt) = text_line
            point_cnt++
            continue
        }

    loop
    noteunsel

    //make_html
    html_text = "<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<meta http-equiv=\"content-language\" content=\"ja\">\n<title>2017レースリザルト</title>\n<style>\nbody {\ncounter-reset: drivername;\n}\nli {\ndisplay: flex;\n}\ndiv {\nmargin-right: 1rem;\n}\n.drivername, .team {\nwidth: 12rem;\n}\n.country {\nwidth: 6rem;\n}\n.drivername:before {\ncounter-increment:drivername;\ncontent:counter(drivername) \"位　\";\ndisplay: inline-flex;\nwidth: 3rem;\n}\n</style>\n</head>\n<body>\n<h1>2017レースリザルト</h1>\n<ul>"
    csv_text = "position,firstname,familyname,carnumber,teamname,point,laps,times\n"
    repeat 40
        if firstname(cnt) = "" : break
        html_text += "<li>\n<div class=\"position\">[" + position(cnt) + "]</div>\n<div class=\"drivername\">" + firstname(cnt) + " " + familyname(cnt) + "</div>\n<div class=\"country\">" + carnumber(cnt) + "</div>\n<div class=\"team\">" + teamname(cnt) + "</div>\n<div class=\"point\">" + getpoint(cnt) + "pt</div>\n<div class=\"times\">" + laps(cnt) + "(" + times(cnt) + ")</div>\n</li>\n"
        csv_text += position(cnt) + "," + firstname(cnt) + "," + familyname(cnt) + "," + carnumber(cnt) + "," + teamname(cnt) + "," + getpoint(cnt) + "," + laps(cnt) + "," + times(cnt) + "\n"
    loop
    html_text += "</ul>\n</body>\n</html>\n"


    nkfcnv html_text,html_text,"Sw"

    //HTML出力
    notesel html_text
    notesave "Raceresult.html"
    noteunsel
    await 1
    // csv出力
    notesel csv_text
    notesave "Raceresult.csv"
    noteunsel
    await 1
    dialog "save html file"

    end
    stop