はじめに
一月ほど前に公開した以下の記事で書いたように、私は学術オリンピックに関する情報や予定を発信するウェブサイト「学術オリンピック非公式まとめサイト」を製作しました。
公開から1か月ほど経過して、現在までに約300人程度の方に閲覧して頂けており、まだ公式Twitter(現X)も50人以上の方にフォローしていただいています。本当にありがとうございます。今後も様々な情報を発信していくつもりですので、よろしくお願いいたします。
さて、公開から今までの約1か月の間、私は様々な機能をサイトに追加、また改修を行ってきました。そのため、備忘録も兼ねてここに実装した機能等を書いていきたいと思います。なお、同様の記事を今後約2ヶ月に1回程度のペースで書く予定です。
機能追加・改修
月別カレンダー機能/簡易リストカレンダー機能の追加
前回の記事で言及していたリスト式カレンダーに加え、PCなど画面の大きいデバイス向けに月別のカレンダーとして予定を表示する機能を作成しました。
当初、予定を一覧で確認するには「スケジュール」機能を用いることになっていましたが、見やすさの都合でエコノミクス甲子園や科学の甲子園など、都道府県単位の予選を伴い、開催回数が非常に多くなる大会を全て表記することが出来ていませんでした。「カレンダー」機能では一つの予定あたりの情報量を削減して、代わりにそれらの大量の予定をまとめて表示しています。
また、「スケジュール」機能では開始日程のみを掲載するため、複数の日に跨るような予定があると、予定被りを正確に表現できません。その点「カレンダー」機能では日ごとに情報を表示するため、予定被りが分かりやすくなっています。
予定被り情報ページの追加
上記に関連して、日程ではなく予定が被っているかどうかに重点を置いた情報ページも作成しました。
現在分かっている各大会の予定に対し、被る予定がない場合は緑のチェックマーク、一部の予定が未確定で被る可能性がある場合はオレンジの「！」、確実に予定が被る場合は赤色の「！」、そもそも日程が不明な場合は灰色の「？」を表示して視覚的にも分かりやすくなっています。また、国内大会だけでなく国際大会の情報にも対応しています。
国内大会/国際大会公式ページのリンクリストの追加
現時点でサイトの存在が確認できている、国内大会のホームページ、国際大会のホームページと年度別の国際大会のホームページのリンク集になります。
元々はサイト運営のためにいわゆる「自分用」として作成しましたが、折角なので公開することにしました。まだ一切CSSを当てていないので見辛いことこの上ないですが、需要が大きいようであればレイアウトの改良等行いたいと思います。また、現時点でサイトの存在が確認できていない大会も複数あるため、URLが確認でき次第追加していきます。
可読性向上のための分野カラーリングの変更
当サイトをインターネット検索で見つけてもらうために、ウェブページの速度チェック等を行っていました。その中に可読性の項目が含まれており、数学オリンピックや科学地理オリンピックのカラーリングが見辛い状態になっていると怒られたため、修正しました。基本的な背景色は極力変えず、文字の色を白から黒に変更するなどしています。数学、生物学、科学の甲子園、言語学、科学地理、脳科学がカラー変更の対象です。
バックエンド面
ページ更新日時設定自動化(Python)
更新の様子が分かりやすいようにサイトの各ページに更新日を表示するようにした一環として、Pythonで更新日時振りを自動化しました。
初めは埋め込みJavaScriptでhtmlファイルの更新日時を取得し、表示させるようにしていましたが、GitHub Pagesの仕様上、ファイル群をビルド(?)しているようで、更新日が全て最後にページをビルドした日程、つまり全ページ同じ日になってしまうことが分かりました。そのため手元にて手動で更新日を振るように変更しましたが、効率が悪いうえ忘れます。ということで、以下に示したコードを作り、サイト編集作業が終わった後に起動してリポジトリ内のhtmlの更新日時を変更しています。（Python初心者なので処理効率は見逃してください）
import datetime import os import re dir_path=r"< folder_path >" for current_dir, sub_dirs, files_list in os.walk(dir_path): for file_name in files_list: root, ext = os.path.splitext(file_name) if ext == '.html': date = datetime.datetime.fromtimestamp(os.path.getmtime(os.path.join(current_dir, file_name))) now = datetime.datetime.now() if date.year != now.year or date.month != now.month or date.day != now.day: continue rep = '<p class="ud">' + str(date.year) + '年' + str(date.month) + '月' + str(date.day) + '日</p>' with open(os.path.join(current_dir, file_name), 'r', encoding="utf-8") as f: content = f.read() content = re.sub('<p class="ud">.*</p>', rep, content) with open(os.path.join(current_dir, file_name), 'w', encoding="utf-8") as w: w.write(content)
スケジュール表示の横幅調整自動化(Python)
こちらはメインページやスケジュールページで表示している、色付きコンテナ型のアイテムに関する処理です。
スケジュールの表示方法の関係で、特に科学地理オリンピックや都道府県大会など、表示が長くなるものがあるため、これまでは手動で文字の横幅の圧縮率を調整していましたが、流石に面倒になってきたので自動化してみました。全角文字を19px、半角文字を9pxと見做して計算しています。
import bs4 import copy import math import os dir_path=r"< folder_path >" for current_dir, sub_dirs, files_list in os.walk(dir_path): for file_name in files_list: root, ext = os.path.splitext(file_name) if ext == '.html': with open(os.path.join(current_dir, file_name), 'r', encoding="utf-8") as f: content = f.read() soup = bs4.BeautifulSoup(content, 'html.parser') ret = soup.find_all(class_='si') if len(ret) == 0: continue for item in ret: s = item.find_all(class_='nr')[0] t = copy.deepcopy(s) cntc = 0 #半角文字(ASCII) cnto = 0 #全角文字(非ASCII) for c in s.string: if str(c).isascii() == True: cntc += 1 else: cnto += 1 val = max((cntc * 9 + cnto * 19 + 9) / 260 - 1, 0) * 20 res = math.ceil(val) * 5 if res > 105: print(str(t) + 'in' + file_name + 'is too long.') res = 105 if res != 0: s['class'] = ['nr', 'n' + str(res)] else: s['class'] = ['nr'] content = content.replace(str(t),str(s)) with open(os.path.join(current_dir, file_name), 'w', encoding="utf-8") as w: w.write(content)
SEO面
今後(2023.11以降)の予定
サイトデザイン改良
個人的にメインページの使い勝手が良くないなー、と思っているので近々改修を行います。主な変更点としては、
を考えています。メインページに大量に情報を置くのではなく、ハブ的な役割にしていくつもりです。
また、上記でちらっと触れましたが、サイトにある剥き出しのリンクをある程度ボタン化していこうかなと思っています。特にスマホだと、私自身指が太いので押し辛いです。
最新情報ページ更新開始
……これは早急に対応していきたいです。ページが存在するだけで全く機能していないのは不味いです。
これだけ遅れているので、情報の簡単な絞り込み機能くらいは作ろうかなと思っています。
本記事および本ブログ内のソースコード表示には以下リンクに掲載されているCSSおよびJavascriptを使用しています。
