これまでホビープログラマとして見た目より処理速度を追求してきたために、JavaScriptやPHPと関わる機会が少なかったのですが、ここらで息抜きを兼ねてWordPressに触れながらこれらの言語のスキルを高めていきたいと思います。
手始めにテーマを作成してみます。今使っているtwentyfifteenをコピーして自分なりのテーマに変えていきます。
WordPressを扱うだけで、HTMLやCSSのみならず、PHPやJavaScript(埋め込みだけですが)、そして間接的にMySQLを操作していることになるわけで、言い方は悪いですがITリテラシーの低い方々にハッタリをかますにはうってつけのツールになり得ますね。
MySQLについては自製競馬DBをプログラムで管理している身として、同列に扱われる可能性があることには複雑な心境ですが、評価する側に伝えるスキルも必要ですし、仮に劣勢に立たされたとしてもそんな評価者を選んだのは自分なので受け入れるしかないです。
記事をClassic editorで書いてみることにしました。
最初に困ったのが、テキストタブでブロックコードを書いてビジュアルタブに変えると勝手に自動整形されてしまうところです。
以下のコードをfunctions.phpに追加して無効にしました。ついでに自動変換も無効にしてみました。
CSSを多少はいじれるようになったので、少しずつ見栄えを変えていきます。
// wpautop関数(自動整形)を無効化 remove_filter('the_title', 'wpautop'); remove_filter('the_content', 'wpautop'); remove_filter('comment_text', 'wpautop'); remove_filter('the_excerpt', 'wpautop'); // wptexturize関数（特定の記号などを変換）を無効化 remove_filter('the_title', 'wptexturize'); remove_filter('the_content', 'wptexturize'); remove_filter('comment_text', 'wptexturize'); remove_filter('the_excerpt', 'wptexturize');
gccの最適化オプションを試してみました。-O3, -Ofast, -ffast-mathではプログラムが壊れる可能性があるので取り扱い注意です。
約24000件処理の時間を測定しました。それなりの効果はあるようです。
-O0 78.3秒
-O1 76.0秒
-O2 75.4秒
-O3 74.1秒
-Ofast 75.8秒
-ffast-math 78.1秒
gcc -S [最適化オプション] [cファイル]
アセンブラファイルを作成後、実行ファイルを作成して測定実施C言語のアセンブラファイルをチェックしたところ、関数ファイル内の使わない関数を読み込んでいたので削除しましたが、処理時間は変わらずでした。
処理時間の測定にはPythonを使いました。
まあ端折っても最初の読み込みがなくなるだけなのでそんなところでしょう。ループ箇所などをチェックする方がいいようです。
import datetime,time,os,subprocess
start = time.time()
dt_now = datetime.datetime.now()
print('スタート 現在時刻 ' + str(dt_now))
proc = subprocess.run("as -o ./test.o ./test.s; gcc -o ./test ./test.o ; ./test; ECHO 'C言語実行完了'", shell=True, stdout= subprocess.PIPE, stderr = subprocess.PIPE)
process_time = time.time() - start
td = datetime.timedelta(seconds = process_time)
dt_now2 = datetime.datetime.now()
print('テスト 完了 ' + str(td) + ' 現在時刻 ' + str(dt_now2))
# Macのデスクトップ通知
os.system("osascript -e 'display notification \"テスト完了\n\"'")[macOS catalina 10.15.7 , IDE : Eclipse 2021-06 , JRE : Java 16]
検討の流れでJEditorPaneをJTextPaneに変更しました。編集はしないので本来はこの選択が正しいです。
ある程度CSSでHTMLの設定は可能ですが、tableの列ごとにテキストの位置を変えることはできませんでした。全体のテキスト位置は設定可能です。設定にはCSSファイルあるいはHTMLEditorKitを使います。
結局、tableの各列テキスト位置はHTML内で設定しました。
話変わって、LTS版のJava 17が来月9月14日にリリースされるようです。標準ライブラリ入りをキープしているSwingは引き続き使えると思いますが、早く動作確認したいところです。
調べるほどにJavaFXの近年の失速ぶりが明確になりました。のめり込まないうちにSwingに移行して結果的には正解でした。6月頃に「これからはJavaFXの時代だ」と早合点して中古本を1冊購入したのはご愛嬌です。
2014から18年頃のWeb記事で、JavaFXが標準ライブラリ定着となりSwingが廃止決定、などといったガセ情報が結構目立っています。しかし2018年9月リリースのJava11以降は標準ライブラリ除外となっています(OpenJFKとして開発は継続)。JavaFXの進歩性には私も心躍りましたが、残念至極です。
ところで秋に発表予定のM1X MacBook。外部ディスプレイを2台使えるようになるのでしょうか(購入にあたってゆずれない条件)。
グラフィック性能が何割増しではなく数倍になるという噂を聞いて嫌な予感しかしません。拡張性を犠牲にして性能向上を優先？ともあれAppleシリコンMacがJavaFXのような一発屋にならないことを祈るばかりです。
import javax.swing.text.html.HTMLEditorKit;
import javax.swing.text.html.StyleSheet;
HTMLEditorKit editorKit = new HTMLEditorKit();
StyleSheet css = editorKit.getStyleSheet();
css.addRule("table {background-color: #faf0e6;}");StringBuilder HTMLcode = new StringBuilder();
int count = 0;
HTMLcode.append("<html><head></head>" + "<table" + " " + "border='1'" + " " + "id='dataframe'>" + "<thead><tr>");
for (ArrayList<String> raceList: raceListConSorts){
if (count == 0){
for (int i = 0 ; i < raceList.size() ; i++){
HTMLcode.append("<th>" + raceList.get(i) + "</th>");}
HTMLcode.append("</tr></thead><tbody>");
HTMLcode.append("<tr>");
count++;
}else{
for (int i = 0 ; i < raceList.size() ; i++){
if (i == 4) {
String race_html = String.format("/%s_%s_%03d.html",now,name_latin,count);
HTMLcode.append("<td>");
HTMLcode.append("<a href='" + race_html + "'>" + raceList.get(i) + "</a>");
HTMLcode.append("</td>");
}else if (((i>=5)&&(i<=9))||(i==19)){
HTMLcode.append("<td align='right'>" + raceList.get(i) + "</td>");
}else {
HTMLcode.append("<td>" + raceList.get(i) + "</td>");
}
}
HTMLcode.append("</tr>");
count++;
}
}
HTMLcode.append("</tbody></table></html>");
前回の続きです。HTMLのレイアウトを一応完成させました。
列ごとの設定には少し手間取りました。複数tableの設定に関するネット情報は調べた範囲では見当たりませんでした。まあ情報が乏しくても推測で分かると思います。
body {
background-color: #f0f8ff;
}
th {
text-align: center;
}
.container {
display: block;
}
#tableA{
background-color: #ffffe0;
margin: 15px 5px 15px 5px;
}
#tableB{
background-color: #e0ffff;
margin: 15px 5px 15px 5px;
}
#tableC{
background-color: #7fffd4;
margin: 15px 5px 15px 5px;
}
#tableB tr td:nth-of-type(1){text-align: right} /* 着順 */
#tableB tr td:nth-of-type(2){text-align: right} /* 枠番 */
#tableB tr td:nth-of-type(3){text-align: right} /* 馬番 */
#tableB tr td:nth-of-type(4){width: 160px;padding:0 0 0 5px} /* 馬名 */
#tableB tr td:nth-of-type(5){text-align: center} /* 性齢 */
#tableB tr td:nth-of-type(6){text-align: right;width: 45px} /* 斤量 */
#tableB tr td:nth-of-type(7){width: 80px;padding:0 0 0 5px} /* 騎手 */
#tableB tr td:nth-of-type(8){width: 60px} /* タイム */
#tableB tr td:nth-of-type(9){text-align: left} /* 着差 */
#tableB tr td:nth-of-type(10){text-align: left} /* 通過 */
#tableB tr td:nth-of-type(11){text-align: right;width: 45px;} /* 上り */
#tableB tr td:nth-of-type(12){text-align: right; width: 45px} /* 単勝 */
#tableB tr td:nth-of-type(13){text-align: right} /* 人気 */
#tableB tr td:nth-of-type(14){width: 85px;padding:0 0 0 5px} /* 馬体重 */
#tableB tr td:nth-of-type(15){width: 100px} /* 調教師 */
#tableB tr td:nth-of-type(16){padding:0 0 0 5px} /* 馬主 */
#tableB tr td:nth-of-type(17){text-align: right} /* 賞金 */HTMLの各tableにidを付けて色設定等を変えてみました。
同じ文字列(class=”dataframe”)をそれぞれ違う文字列(id=”tableA”他)に変えるには、このような野暮ったい方法しか思いつきませんでした。
pandasではtableの線が2重線なので1重線にして色を付けました。
＜CSVファイルの読み込み以降＞
try:
df2 = pd.read_csv(racefile_path,encoding="shift_JIS")
except UnicodeDecodeError:
df2 = pd.read_csv(racefile_path,encoding="UTF-8")
# df2を3つのtableに分割
dfA = df2[['1 日付','2 開催','3 レース','4 レース名','5 条件','6 コース','7 天候','8 馬場状態','9 発走時刻']]
dfB = df2[['着順','枠番','馬番','馬名','性齢','斤量','騎手','タイム','着差','通過','上り','単勝','人気','馬体重','調教師','馬主','賞金(万円)']]
dfB2 = dfB[:-3]
dfC = dfB[-2:]
print(dfC)
dfC2 = dfC[['着順','枠番']]
print(dfC2)
# dfAのデータ行のみ抽出
row_num = len(df2)-3
print(row_num)
# データ行以外の行番号をリスト化
row_list = [row for row in range(0,row_num + 3) if not row==row_num]
print(row_list)
dfA2 = dfA.drop(dfA.index[row_list])
dfA3 = dfA2.rename(columns={'1 日付': '日付','2 開催': '開催','3 レース': 'レース','4 レース名': 'レース名','5 条件': '条件','6 コース': 'コース','7 天候': '天候','8 馬場状態': '馬場状態','9 発走時刻': '発走時刻'})
dfB3 = dfB2.fillna('')
print(dfB3.dtypes)
try:
dfB3['着順'] = pd.to_numeric(dfB3['着順'], downcast='signed')
except Exception as e:
print(e)
dfB3['枠番'] = pd.to_numeric(dfB3['枠番'], downcast='signed')
dfB3['馬番'] = pd.to_numeric(dfB3['馬番'], downcast='signed')
dfB3['人気'] = pd.to_numeric(dfB3['人気'], downcast='signed')
print(dfB3.dtypes)
html_string = '''
<html>
<head>
<meta charset="UTF-8">
<title>{raceID}</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
{tableA}
{tableB}
{tableC}
</div>
</body>
</html>
'''
with open(html_file,'w') as f:
f.write(html_string.format(tableA=dfA3.to_html(index=False),tableB=dfB3.to_html(index=False),tableC=dfC2.to_html(index=False,header=False),raceID=raceID))
with open(html_file,'r') as f:
html = f.read()
htmlH = html.split('<table border="1" class="dataframe">')[0]
htmlA = html.split('<table border="1" class="dataframe">')[1]
htmlB = html.split('<table border="1" class="dataframe">')[2]
htmlC = html.split('<table border="1" class="dataframe">')[3]
htmlA2 = '<table id="tableA" border="1" style="border-collapse: collapse; border-color: #add8e6">' + htmlA
htmlB2 = '<table id="tableB" border="1" style="border-collapse: collapse; border-color: #ffb6c1">' + htmlB
htmlC2 = '<table id="tableC" border="1" style="border-collapse: collapse; border-color: #f0e68c">' + htmlC
html_new = htmlH + htmlA2 + htmlB2 + htmlC2
with open(html_file,'w') as f:
f.write(html_new)body {
background-color: #f0f8ff;
}
th {
text-align: center;
}
.container {
display: block;
}
#tableA{
background-color: #ffffe0;
margin: 15px 5px 15px 5px;
}
#tableB{
background-color: #e0ffff;
margin: 15px 5px 15px 5px;
}
#tableC{
background-color: #7fffd4;
margin: 15px 5px 15px 5px;
}もう一息のところまで出来ました。
データ型の変更でastype関数が効かないため、to_numeric関数を使いました。to_numeric関数の取り扱いはドキュメントを読まないと分かりませんでした。中級者向けでしょうか。
あとは2番目のtableのいくつかの列を右寄せにして一応完成になります。
各tableにIDを付けて2番目だけ書式設定する必要がありますが、少し工数が掛かりそうなので次回以降の記事で紹介します。
このアプリを作り上げてきて、ようやく実用に耐えるレベルに達したように思います。インターネット接続が従量制だった頃であれば、どれだけコストが浮いたことでしょう。
＜CSVファイルの読み込み以降＞
try:
df2 = pd.read_csv(racefile_path,encoding="shift_JIS")
except UnicodeDecodeError:
df2 = pd.read_csv(racefile_path,encoding="UTF-8")
# df2を複数のTableに分割
dfA = df2[['1 日付','2 開催','3 レース','4 レース名','5 条件','6 コース','7 天候','8 馬場状態','9 発走時刻']]
dfB = df2[['着順','枠番','馬番','馬名','性齢','斤量','騎手','タイム','着差','通過','上り','単勝','人気','馬体重','調教師','馬主','賞金(万円)']]
dfB2 = dfB[:-3]
dfC = dfB[-2:]
print(dfC)
dfC2 = dfC[['着順','枠番']]
print(dfC2)
# dfAのデータ行のみ抽出
row_num = len(df2)-3
print(row_num)
# データ行以外の行番号をリスト化
row_list = [row for row in range(0,row_num + 3) if not row==row_num]
print(row_list)
dfA2 = dfA.drop(dfA.index[row_list])
dfA3 = dfA2.rename(columns={'1 日付': '日付','2 開催': '開催','3 レース': 'レース','4 レース名': 'レース名','5 条件': '条件','6 コース': 'コース','7 天候': '天候','8 馬場状態': '馬場状態','9 発走時刻': '発走時刻'})
dfB3 = dfB2.fillna('')
print(dfB3.dtypes)
# 中(止)、除(外)、取(消)への対応
try:
dfB3['着順'] = pd.to_numeric(dfB3['着順'], downcast='signed')
except Exception as e:
print(e)
dfB3['枠番'] = pd.to_numeric(dfB3['枠番'], downcast='signed')
dfB3['馬番'] = pd.to_numeric(dfB3['馬番'], downcast='signed')
dfB3['人気'] = pd.to_numeric(dfB3['人気'], downcast='signed')
print(dfB3.dtypes)
html_string = '''
<html>
<head>
<meta charset="UTF-8">
<title>{raceID}</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
{tableA}
{tableB}
{tableC}
</div>
</body>
</html>.
'''
with open(html_file,'w') as f:
f.write(html_string.format(tableA=dfA3.to_html(index=False),tableB=dfB3.to_html(index=False),tableC=dfC2.to_html(index=False,header=False),raceID=raceID))
CSVファイル由来のTableを3つに分割し、縦に並べたHTMLファイルを作成しました。
大分見栄えが良くなりました。あともう少しです。
CSVデータを簡単にHTMLにしてくれるpandasは本当に頼りになるツールです。他のスクリプト言語でpandasに相当するものは存在するのでしょうか。
＜CSVファイルの読み込み以降＞
try:
df2 = pd.read_csv(racefile_path,encoding="shift_JIS")
except UnicodeDecodeError:
df2 = pd.read_csv(racefile_path,encoding="UTF-8")
# df2を複数のTableに分割
dfA = df2[['1 日付','2 開催','3 レース','4 レース名','5 条件','6 コース','7 天候','8 馬場状態','9 発走時刻']]
dfB_pre = df2[['着順','枠番','馬番','馬名','性齢','斤量','騎手','タイム','着差','通過','上り','単勝','人気','馬体重','調教師','馬主','賞金(万円)']]
dfB = dfB_pre[:-3]
dfC_pre = dfB_pre[-2:]
print(dfC_pre)
dfC = dfC_pre[['着順','枠番']]
print(dfC)
# dfAのデータ行のみ抽出
row_num = len(df2)-3
print(row_num)
# データ行以外の行番号をリスト化
row_list = [row for row in range(0,row_num + 3) if not row==row_num]
print(row_list)
dfA2 = dfA.drop(dfA.index[row_list])
html_string = '''
<html>
<head>
<meta charset="UTF-8">
<title>{raceID}</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
{tableA}
{tableB}
{tableC}
</div>
</body>
</html>.
'''
with open(html_file,'w') as f:
f.write(html_string.format(tableA=dfA2.to_html(index=False),tableB=dfB.to_html(index=False),tableC=dfC.to_html(index=False,header=False),raceID=raceID))
Python外部プログラムによりCSVファイルを2つのtableに分割し、これらを縦に並べたHTMLファイルにしました。レイアウトはCSSファイルで設定しています。
ここからheaderの数字やNaNを削除、小数を整数化、列幅設定など体裁を整えていきます。
JavaScriptのElectronでCSSを少し学んだことがここで役に立ちました。
import glob,csv,re
import pandas as pd
paths = glob.glob('/*.csv')
paths2 = sorted(paths)
csvfile = paths2[-2]
df = pd.read_csv(csvfile,encoding='UTF-8')
race_count = len(df)
print("レース数 " + str(len(df)))
list_raceID = df['raceID'].tolist()
pathsB = glob.glob('/*.html')
pathsB2 = sorted(pathsB)
html_file = pathsB2[-1]
# ファイル名からレース番号を抽出
race_num = html_file.split(".")[0][-3:]
print(race_num)
raceID = list_raceID[int(race_num) -1]
print(raceID)
# racefileパスを作成する
year = raceID[1:5]
course = raceID[5:7]
kai = raceID[7:9]
racefile = "race" + raceID[1:] + ".csv"
racefile_path = f"/race/{year}/{course}/{kai}/{racefile}"
try:
df2 = pd.read_csv(racefile_path,encoding="shift_JIS")
except UnicodeDecodeError:
df2 = pd.read_csv(racefile_path,encoding="UTF-8")
# df2を2つに分割
dfA = df2[['1 日付','2 開催','3 レース','4 レース名','5 条件','6 コース','7 天候','8 馬場状態','9 発走時刻']]
dfB = df2[['着順','枠番','馬番','馬名','性齢','斤量','騎手','タイム','着差','ﾀｲﾑ指数','通過','上り','単勝','人気','馬体重','調教ﾀｲﾑ','厩舎ｺﾒﾝﾄ','備考','調教師','馬主','賞金(万円)']]
# dfAのデータ行番号を算出
row_num = len(df2)-3
print(row_num)
# データ行以外の行番号をリスト化
row_list = [row for row in range(0,row_num + 3) if not row==row_num]
print(row_list)
# データ行以外を削除
dfA2 = dfA.drop(dfA.index[row_list])
html_string = '''
<html>
<head>
<meta charset="UTF-8">
<title>{raceID}</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
{tableA}
{tableB}
</div>
</body>
</html>.
'''
with open(html_file,'w') as f:
f.write(html_string.format(tableA=dfA2.to_html(index=False),tableB=dfB.to_html(index=False),raceID=raceID))body {
background-color: #f0f8ff;
}
table {
margin: 30px 10px 30px 10px;
}
.container {
display: block;
}
.dataframe{
background-color: #fffacd;
}