学術オリンピック非公式まとめサイト更新記録(~2023.10.17)

当初、予定を一覧で確認するには「スケジュール」機能を用いることになっていましたが、見やすさの都合でエコノミクス甲子園や科学の甲子園など、都道府県単位の予選を伴い、開催回数が非常に多くなる大会を全て表記することが出来ていませんでした。「カレンダー」機能では一つの予定あたりの情報量を削減して、代わりにそれらの大量の予定をまとめて表示しています。

また、「スケジュール」機能では開始日程のみを掲載するため、複数の日に跨るような予定があると、予定被りを正確に表現できません。その点「カレンダー」機能では日ごとに情報を表示するため、予定被りが分かりやすくなっています。

予定被り情報ページの追加

firmianai7z9.github.io

上記に関連して、日程ではなく予定が被っているかどうかに重点を置いた情報ページも作成しました。

現在分かっている各大会の予定に対し、被る予定がない場合は緑のチェックマーク、一部の予定が未確定で被る可能性がある場合はオレンジの「！」、確実に予定が被る場合は赤色の「！」、そもそも日程が不明な場合は灰色の「？」を表示して視覚的にも分かりやすくなっています。また、国内大会だけでなく国際大会の情報にも対応しています。

国内大会/国際大会公式ページのリンクリストの追加

firmianai7z9.github.io

現時点でサイトの存在が確認できている、国内大会のホームページ、国際大会のホームページと年度別の国際大会のホームページのリンク集になります。

元々はサイト運営のためにいわゆる「自分用」として作成しましたが、折角なので公開することにしました。まだ一切CSSを当てていないので見辛いことこの上ないですが、需要が大きいようであればレイアウトの改良等行いたいと思います。また、現時点でサイトの存在が確認できていない大会も複数あるため、URLが確認でき次第追加していきます。

可読性向上のための分野カラーリングの変更

当サイトをインターネット検索で見つけてもらうために、ウェブページの速度チェック等を行っていました。その中に可読性の項目が含まれており、数学オリンピックや科学地理オリンピックのカラーリングが見辛い状態になっていると怒られたため、修正しました。基本的な背景色は極力変えず、文字の色を白から黒に変更するなどしています。数学、生物学、科学の甲子園、言語学、科学地理、脳科学がカラー変更の対象です。

リリースノートの追加

firmianai7z9.github.io

サイト更新に関する情報をどこにも掲載していなかったので、「当サイトについて」のページからGitHubのWiki機能で作成したリリースノートに遷移できるようにしました。また、このページ自体にも現在のバージョン等を記載するようにしました。

軽量化(サイズ・読み込み)

カラーリング変更の項で既に書きましたが、SEO対策の一環でサイトの軽量化を行いました。

まずHTML中の無駄なインデントや改行をサイト更新前に削除し、ファイルサイズを圧縮しました。次にCSSで用いるクラス名を最大3文字に短縮、CSSファイルも無駄なスペースと改行を削除し圧縮しました。この段階でサイトのヘッダー部分をJQueryで全ページ共通の外部ファイルから読み込んでいましたが、サイト生成時の遅延行為になるため全て埋め込みました。

バックエンド面

ページ更新日時設定自動化(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面

GoogleSearchConsoleへのインデックス登録

サイト公開時からsitemap.xmlを作成し、SearchConsoleに登録していましたが、現時点で53ページ中30ページのインデックス登録が確認できました。つまりGoogle検索から閲覧できるということです。思ったより早くて驚いています。

今の段階でも、Google検索からこのサイトに来てくれている方も少数ながらいるようなので、よりサイトの機能や情報を拡充してSEO精度を上げていきます。

メタディスクリプション等SEO対策

上記に関連して、さらにGoogle検索でタイトルと共に表示される説明文(メタディスクリプション)の登録も行いました。現時点では初期に適当に追加した文が全ページ共通で表示されているかと思いますが、ページごとに修正しています。

今後(2023.11以降)の予定

サイトデザイン改良

個人的にメインページの使い勝手が良くないなー、と思っているので近々改修を行います。主な変更点としては、

ページ下部の「最新情報」「直近の予定」「コンテスト一覧」を削除し、各ページへのリンクに置き換え
「本日の予定」欄追加
サイト更新情報等の通知欄明確化
Twitterアカウント等リンクのCSS対応

を考えています。メインページに大量に情報を置くのではなく、ハブ的な役割にしていくつもりです。

また、上記でちらっと触れましたが、サイトにある剥き出しのリンクをある程度ボタン化していこうかなと思っています。特にスマホだと、私自身指が太いので押し辛いです。

Firmianaの落書き

プログラミング関係のことを中心に書きます（多分）

学術オリンピック非公式まとめサイト更新記録(~2023.10.17)

はじめに

機能追加・改修

月別カレンダー機能/簡易リストカレンダー機能の追加

予定被り情報ページの追加

国内大会/国際大会公式ページのリンクリストの追加

可読性向上のための分野カラーリングの変更

リリースノートの追加

軽量化(サイズ・読み込み)

バックエンド面

ページ更新日時設定自動化(Python)

スケジュール表示の横幅調整自動化(Python)

SEO面

GoogleSearchConsoleへのインデックス登録

メタディスクリプション等SEO対策

今後(2023.11以降)の予定

サイトデザイン改良

最新情報ページ更新開始