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

youtubeなどを探してみるとシーズン前テストの動画が多数ありますよね。

まあ、jpサイトなので当然なのかもしれませんが、ホンダとマクラーレンの対比が意外に多く感じます。

いい走り、面白いレースをしてもらいたいタイプなので、どっちがどうだとかいう「あおり系」の動画タイトルとか見かけると少々心苦しい感じがしたりしますが、みなさんはいかがなもんなのでしょうか?

とまあ、真面目な感想も入れつつ…前回に引き続き、原稿のプログラムに少々改造を施していきたいと思います。

<前回url>

前回はサイトでの表示を少し見栄え良くするためにcssやhtmlを追加して形を整えました。

今回はその整えた形にそって出力できるようにプログラムの方を改良していきたいと思います。

スポンサーリンク

htmlのフォーマットを作成

毎回、htmlの記述がプログラムの中で行われておりブラックボックス化している状態なので、今シーズンはフォーマット化して外部にhtmlやcssを用意しておいて、メンテナンス性を向上させたいと思います。

まずはhtmlのフォーマットを用意。

といっても、いままで作成したhtmlから共通部分を取り出してフォーマットとしてしまおうというだけのこと。

前回作成したhtmlファイルから

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="ja">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<title>F1 | 2018 ポイントランキングtop10</title>
<body>
<header><h1>2018 ポイントランキングtop10</h1></header>
<div id="main">
<!-- content -->
</div>
<footer>
<a href="https://tks-kan.com">tks-kan.com</a>
</footer>
</body>
</head>

div id=”main”の中身だけを削除してしまいます。

コメントアウト<!– content –>の部分だけを戻して、これをフォーマットとしました。

outputフォルダを用意して、その中に前回作ったファイルを用意。他にimagesフォルダとformatフォルダを追加して、その中にindex.htmlの名前で先ほどのコードを保存しておきました。

ひとまずformatファイルの準備はここまで。

プログラム側の修正~フォルダ対応

2018f1race009_01.hspの中身

この部分、が保存先のフォルダなどを設定している部分です。

前回、htmlフォルダからresultフォルダに変更しているのですが、そもそもの出力先をoutputフォルダにした(上でoutputフォルダをつくって中身を突っ込んだのがその部分になります)ので、

html_posの”\\html”を”\\output”に変更、その下のfolder_checkの部分も”html”を”output”に修正。

その下のcsv_check部分ですがこのcsvフォルダには格納していません。これはレースリザルトのurlを格納するファイルなので、作業スペースに置いておきたいものと考えてます。

※一応、それぞれの部分に注意書きを追加して分かりやすくしてみました。

同じく2018f1race009_02.hspの方の中身

同じように修正しましょう。

また、2017表記になっている部分は2018に修正してくださいね(結構抜け抜けになってしまってます、すみません)。

そして、レース結果をresultフォルダに格納するので

result_pos = html_pos + “\\result”

を追加しました。

もちろん2018f1race009_01.hsp、2018f1race009_02.hsp両方にね。

フォルダがあるかどうかの確認部分も修正。

resultフォルダの有無をチェックして、なければ作成するプログラムを追加します。

chdir html_pos
dirlist chk, "*.*", 5
if instr(chk, 0, "result") = -1 : mkdir "result"

ディレクトリをhtml_posに移動し、ファイルリストをchkに格納。

中にresultフォルダがなければ、mkdirでフォルダを作成。

これも両方のプログラムに追加します。

さらに2018f1race009_01.hspのみですが

このHTML出力の部分ですが、これはレース結果を出力している部分になるので

chdir html_pos を chdir result_pos

に変更してあげます。

他はcsv_posのままでok

formatを読み込む

いよいよ本題…とその前に。

よく考えると今回のフォーマット化ってtop10の部分だけになっていたんですよね。

他はそのままなので、、、レース結果部分も改良しなきゃですよね~。

ということに気が付いてしましました。

ここまで2018f1race009_01.hspの中身も変更してきたんですが、肝心の出力部分でいじるのは02.hspのファイルのみだったりします。

もちろん、フォルダ変更などをしているので01.hspもいじる必要はあったんですけどね。

本題に戻りますか。

formatを読み込み、プログラムとして完成させるには

  • formatの保存場所を指定
  • formatファイル(index.html)を読み込む(プログラム上に格納)
  • 生成したタグを該当位置に埋め込む
  • index.htmlとしてファイルを出力する

といった感じの工程が必要かなと予測できます。

◆ format保存場所の指定

先ほどのフォルダの修正と同じ部分に

format_pos = html_pos + “\\format”

を追加します。これで場所の指定は完了

◆ formatファイル(index.html)を読み込む(プログラム上に格納)

notesel、noteload命令を使って格納しておく

chdir format_pos
notesel format_html
noteload “index.html”
noteunsel

これを、先ほどの保存場所の指定の下あたりに追加でOK。

◆ 生成したタグを該当位置に埋め込む

これは少し考えないとですね。

まず、format側の埋め込む位置を指定しちゃいましょう。

そこでポイントとなるのが残しておいたコメントアウト<!ーー content ーー>の部分。

これを探し出して、この下に作成したタグを追加してあげれば良さそうですよね。

notesel format_html
repeat notemax
noteget text_line, cnt
if text_line = “<!ーー content ーー>” : <追加するタグ処理> : break
loop

次に追加するタグ部分ですが、これはいままでの作成部分を流用・改造していきます。

html_text = “\n<div class=\”top10\”>\n<ul>\n”
repeat 10
html_text += “<li>\n<div class=\”drivername\”>” + sort_driver(cnt) + “</div>\n<div class=\”point\”>” + driver_point(cnt) + “</div>\n</li>\n”
loop
html_text += “</ul>\n<p>※ ” + lastracename + ” 終了時点</p>\n</div>\n<div class=”gpresult”>\n<ul>” + a_tag + “</ul>\n</div>\n”

ここで出てくるa_tag部分もリスト化しておかないといけませんでしたね。同じく流用・改造して

a_tag += “<li><a href=’html/” + a_link + “‘>” + a_text + “</a></li>\n”

としておきます。これを<追加するタグ処理>の部分にてformatに埋め込んであげます。命令はnoetaddを使用。

noteadd html_text, cnt

あとは文字のコンバート処理をしてあげておきます。

hspではS-JISメインなので、最初の読み込み後にS-JISへ変換、ファイル保存前にuft-8に変換。

// utf-8にコンバート
nkfcnv format_html,format_html,”Sw”

◆ index.htmlとしてファイルを出力する

これはちょっぴり変更してあげれば完了。

//HTML出力
chdir home_pos
notesave “index.html”
noteunsel

これで一応修正完了。

のちほど、ファイルはDL出来るようにしておきますね。

テスト

実際にちゃんと動くかテストしてみます。

※ここでは2017年データを利用しています。

では、ぽちっとな。

無事index.htmlが出力。ブラウザで開いてみると…

バッチリでした!

まとめ

今回のポイントはフォーマット化したファイルの読み込みと作成したタグの挿入です。

これができるようになれば、簡単なcssの修正などは外部ファイルでできるようになり、プログラムを書き換えたり今までのデータを取り直すことなく見た目の変更なども、ある程度は手軽にできるようになります。

ちょっぴり駆け足でしたが、参考になれば幸いです。

file20180308_f1.zip

※ファイルには去年データが入っているので、シーズンインの際には削除してくださいね