HSPでF1ポイントのランキングページを生成してみる～その5～【HSP活用術】

前回ではhtml用のテキストを作成しました。今回はダウンロードからHTML作成までトータルで実行できるプログラムに仕上げましょう。

HSPでF1ポイントのランキングページを生成してみる～その4～【HSP活用術】

前回はデータを取り出しが完了しました。今回はページの作成部分に取り掛かりたいと思います。以前、（アドレス）は以下から...

tks-kan.com

以前、[F1公式サイトのスクレイピング]（アドレス）は以下から。

formula1公式サイトのドライバーズランキングをスクレイピングしてみようその4

おなじみになりつつありますが、まずはそれぞれのクラス名やタグの整理、コードを再確認しておきましょう。クラス名、タグ【...

tks-kan.com

formula1公式サイトのドライバーズランキングをスクレイピングしてみようその3

それぞれのクラス名やタグの整理、コードを再確認しておきましょう。まずはクラス名、タグ【ドライバー名】ファ...

tks-kan.com

formula1公式サイトのドライバーズランキングをスクレイピングしてみようその2

前回（その1）で、それぞれのクラス名やタグの整理をしました。あらためて、確認してみましょう。【ドライバー名】 ...

tks-kan.com

formula1公式サイトのドライバーズランキングをスクレイピングしてみようその1

ニッチ過ぎて需要があるかどうかわかりませんが。。。javascriptで組んで、最終的にはブックマークレットにしてお手軽に実行できる...

tks-kan.com

取り出したデータと格納先

ここまでで取り出せたデータとその格納先です

【ドライバー名】
- ファーストネーム→firstname(数字)
- ファミリーネーム→familyname(数字)
【国籍】
- country(数字)
【所属チーム】
- teamname(数字)
【獲得ポイント】
- getpoint(数字)

という感じです。

htmlで出力（保存）する

テキストを出力する方法と同じで拡張子をhtmlに変更しましょう。使うのはnote系の命令です。debugの見出しもmake_htmlに変更しておきました。

//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: 9rem;\n}\n.country {\nwidth: 6rem;\n}\n.drivername:before {\ncounter-increment:drivername;\ncontent:counter(drivername) \"位　\";\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"

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

stop

となります。これを組み込んで実行してみると

開くと文字化けしていました。。。これは保存されたファイルの文字コードがutf-8になっていないからだと思われるので保存する前にhtml_textをutf-8にエンコードしておきましょう。ということで次の一文をnoteselの前に追加しておきます。

nkfcnv html_text,html_text,"Sw"

今度は文字化けなく表示されました。ドライバー名が長かったりすると改行が発生してしまってるので、微調整しておきましょう。CSSの部分を

.drivername, .team {
    width: 12rem;
}

に修正しておきました。さらに順位とドライバー名の表示も整えたいので

.drivername:before {
    counter-increment: drivername;
    content: counter(drivername) "位　";
    display: inline-flex;
    width: 3rem;
}

としています。

ダウンロードから生成まで通してみる

以前のダウンロードのプログラムと今回までのhtml生成プログラムをつなげてみましょう。特に注意する部分はないですが、記事執筆時にレースが開催されてランキングが変動している可能性があるので、以前のダウンロードしたファイルや生成したファイルはリネームして保存しておきました（混乱しかねないので）。
また、ダウンロードの成功時にstopしておいた部分もコメントアウトしておくのを忘れないように。

//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/drivers.html"
sdim firstname,  40, 40
sdim familyname, 40, 40
sdim country,    40, 40
sdim teamname,   40, 40
sdim getpoint,   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"
}

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回で作成）*/

lfcc "drivers.html"
notesel htmlfile
noteload "drivers.html"
first_cnt = 0 : family_cnt = 0 : country_cnt = 0 : teamname_cnt = 0
repeat notemax
    noteget text_line, cnt
    // ファーストネーム
    if (instr(text_line, 0, "hide-for-tablet") ! -1) {
        strrep text_line, "<span class=\"hide-for-tablet\">", ""
        strrep text_line, "</span>", ""
        strrep text_line, " ", ""
        //split text_line, ">", buf
        //split buf(1), "<", result
        //text_line = result(0)
        firstname(first_cnt) = text_line
        first_cnt++
        continue
    }
    // ファミリーネーム
    if (instr(text_line, 0, "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, "dark semi-bold uppercase") ! -1) {
        strrep text_line, "<td class=\"dark semi-bold uppercase\">", ""
        strrep text_line, "</td>", ""
        strrep text_line, " ", ""
        country(country_cnt) = text_line
        country_cnt++
        continue
    }

    // 所属チーム
    if (instr(text_line, 0, "grey semi-bold uppercase ArchiveLink") ! -1) {
        split text_line, ">", buf
        split buf(1), "<", result
        teamname(teamname_cnt) = result(0)
        teamname_cnt++
        continue
    }

    // 獲得ポイント
    if (instr(text_line, 0, "dark bold") ! -1) and (instr(text_line, 0, "</td>") ! -1) {
        strrep text_line, "<td class=\"dark 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>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"

nkfcnv html_text,html_text,"Sw"

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

stop

これを実行してみると…