関数でデザインを設定するSATySFiのクラスファイルについて

これは

の25日目の記事です。

概要

satysfi-class-templateというクラスファイルを作りました。これは

  • タイトル
  • 概要
  • 目次
  • 節構造
  • 参考文献
  • 付録
  • 浮動図
  • 多段組
  • 参照
  • 脚注
  • リンク
  • フォント設定

に対応しています。これにより、現実的なコード量でデザインについて変更することができ、そして高品質な組版をすることができます。具体的には、既存の学会テンプレートを再現することができました。

使い方

インストール

ドキュメントがまだ整備しきれていないため安定リリースはしていませんが、以下のコマンドによりインストールすることができます。依存ソフトウェアはSATySFi, satyrographos, gitです。

git clone git@github.com:puripuri2100/satysfi-class-template.git
cd satysfi-class-template
opam pin add -y "file://$PWD"
satyrographos install

簡単な使い方

ドキュメントファイル冒頭で

@require: class-template/class-template

とすることで読み込むことができ、たとえば以下のようにして使うことができます。詳細はhttps://github.com/puripuri2100/satysfi-class-template/blob/master/doc/demo.satyから見ることができます。

@require: class-template/class-template

open ClassTemplate
in

document (
  default-setting
  |> set-title {タイトル\footnote{title}}
  |> set-author {\@puripuri2100\thanks{\url(`https://github.com/puripuri2100`);} \@puripuri2100\thanks{\url(`https://github.com/puripuri2100`);}}
  |> set-show-toc true
  |> set-title-page false
  |> set-multicolumn 2
  |> set-abstract ('<
    +abstract ?:({Abstract}) <
      +p{Cras bibendum elit vel tellus ultrices vestibulum. Curabitur euismod tempus ex. Aliquam sed lectus at nulla porttitor ornare vitae ac odio. Donec volutpat augue ac quam elementum sollicitudin. Donec ac metus in urna auctor lobortis volutpat dictum quam. Cras id quam sed erat tempor tempor id et leo.}
    >
  >)
  |> set-paragraph-margin-top-ratio 1.5
  |> set-paragraph-margin-bottom-ratio 0.5
  |> set-table-title-fun (fun i -> (let i = i |> arabic |> embed-string in {Table\ #i;:\ }))
  |> set-introduction '<
    +section ?* ?:(true) {はじめに} <
      +p{はじめにです}
    >
  >
  |> set-doc-link-color (1pt, Color.red)
  |> set-url-link-color (1pt, Color.blue)
) '<
  +section {section} <
    +section {sub section} <
      +section ?:(`ref`) ?:(false) {sub sub section} <
        +p{text\ref(`ref`);}
      >
    >
  >
>

以上のコードをPDFに変換すると

デモ

という見た目になり、多段組や様々なデザインの変更ができることが解ると思います。set-*という関数で設定を変更し、実現したいデザインや挙動に近づけていきます。

拡張

これらの関数を組み合わせることで実現していきますが、組み合わせが事前に用意できるものについてはすでに用意しています。具体的には紙面サイズやフォントの設定などです。

読み込みと使用は次のようにします。

@require: class-template/expand

open ClassTemplateExpand

in

document (
  default-setting
  |> set-a0
  |> set-fonts-noto-regular
) '<
  +p{text}
>

高度な使い方

class-templateを下地にした上でコマンドや設定を加えた新しくクラスファイルを作ることができます。これがtemplateの由来です。

具体例としては、自身が現在も使っているレポートのテンプレートがあります：https://github.com/puripuri2100/report-template

今後に向けて

ドキュメントを充実させ、リリースを目指しています。また、拡張を多数用意したいと考えています。

簡単にはなりましたが、コントリビュートをお待ちしています。

好きな地下アイドル2023

はじめに

これはcoins Advent Calendar 2023の2日目の記事です。 1日目は私のSATySFi Conf 2023まとめでした。

好きな音楽の話などをすると良いらしいので、ここ最近好きな地下アイドル曲を紹介していきたいと思います。

地下アイドルとはメディアへの露出というよりもライブやイベントをメインの活動の場としているアイドルで、その特徴から曲もリズムが良くノリやすいものになっており自分は作業中によく聞いてストレス解消にしたり、心が折れそうになった時に元気を出すためなどに聞いています。

今回紹介するのは

の3つになります。

uijin

人が人の上を飛び交う最高で強烈なライブをしてくれるアイドルグループ。

これを見れば雰囲気はわかると思う。

x.com

一度解散したが去年に復活した。本当にありがとう。

001

叫べ！

youtu.be

future

僕はいくよ 存在証明の旅路へと

youtu.be

door

この先も君と見たい未来があるから行こう

youtu.be

ignition

ブレーキなんて最初から壊れてるんだって

youtu.be

neo asia

ああもうきっと止まれない僕らが生きるこの世界で

youtu.be

ppp

パリピッピッピ！！！！！！！！！！

youtu.be

Devil ANTHEM.

デビアンこと、Devil ANTHEM.です！

明るく騒げる歌が多く、ノリノリでコードを書いているときに流して嬉しくなっている。 レーザービームを使った演出があるライブも素敵。

STARLIGHT CIRCUS

月明かりは七色 流れ星のミラーボール

youtu.be

ストレライド

そりゃもうなんていうか語彙力

youtu.be

あなたにANTHEM.

掴みとるよ チャンス一度だけ

youtu.be

ソラシド

デビアンのshow time!

youtu.be

えっとねれみしー

えっとね君のことがなんというか

youtu.be

おんなのこけいさつ

5(6)人合わせてデビアンよ！

youtu.be

yosugala

綺麗な歌詞と曲調が好き。 すべてに向き合う覚悟を決めるときに横に居てくれる。

夜明けの唄

振り向いてふっと笑った

youtu.be

僕に願いを

あふれ出した感情をぶつけたくて

youtu.be

会心の一撃

将来なんか待ってないで今をもっと強く生きたいな

youtu.be

prologue

やってやるんだ できるんだって言い聞かせろ

youtu.be

オヒメサマ？

大胆不敵かかってこいや

youtu.be

indigo

暗闇振り切って行こう

youtu.be

SATySFi Conf 2023まとめ

satysfi satysfiadvent

はじめに

この記事はSATySFi Advent Calender 2023とcoins Advent Calender 2023の1日目の記事です

今年もSATySFi Conf 2023の発表まとめをして振り返っていきたいと思います。

発表の録画の音量が小さかったりノイズが入っているかもしれません。気を付けてください。

発表者は敬称略です。

puripuri2100：「SATySFiで作成する構文解析器」

SATySFiの機能のみを用いて実装したフォーマット解析ライブラリ（satysfi-jsonやsatysfi-xml、satysfi-bibtex-parserなど）についての解説。

gfngfn：「SATySFiエコシステム再考」

SATySFi v0.1.0で追加する予定の機能であるパッケージマネージャについて考えている形式化や実装の方針についての説明。

momeemt：「SATySFiを使って学類新歓冊子を作成した」

SATySFiを使って大学の新入生のための冊子を作成したことの共有。

puripuri2100：「SATySFiの開発についての要望」

なかなかリリースされないSATySFi v0.1.0に関連して、SATySFiのリリースサイクルなどについての提案。

おわりに

発表者が少なく忙しい中の開催になりましたが有意義な意見交換の場になり、とても良かったです。

来年も開催できるよう頑張ります。

学園祭実行委員会で物品管理システムを作った話

はじめに

こんにちは

筑波大学学園祭実行委員会に今年度所属していたpuripuri2100です。 学園祭実行委員会の中でも「内部向けシステムやサイトの運営、映像の作成や生中継」などの情報系を主な職務とする「情報メディアシステム局」という部門で作業をしていました。

学園祭実行委員会は通常学類11年生と2年生が所属するのですが、自分は1年生時には所属せず2年生になった今年度のみ所属するというかなり珍しいことをしていました。これには理由があり、既に情報メディアシステム局に所属して作業をしていた同学年の友人が昨年度末ごろに「今作ろうとしている物品管理システムの進捗が芳しくない」とこぼしていたのを聞き、それをヘルプで入ったためです。既に高校生の時に文化祭の準備委員会で使う物品に一意のIDを振ったうえで貸し出しを管理するシステムとソフトウェア2を作っていたことや、困っている友人を助けたいという気持ち、またグループ開発をしてみたかったという様々な動機がありました

今年度の学園祭の前になんとか物品管理システムを完成させることができ、運用できたためここでその振り返りをしてみたいと思います。 採用してみた技術についてや作るうえでの苦労話、情報メディアシステム局で実際にソフトウェアを作ってみておもしろかったところやしんどかったこと、愚痴などをまとめて成仏させたいと思います。

作成したものについて

システムの概要

物品管理システムの概要

ユーザーが既に存在するLANケーブルやパソコンなどの「物品」に関連付けられた情報を取得したりその情報を更新したりすることができるシステムを作成しました。 ここでの物品に関連付けられる情報とは、例えば

  • 型番
  • 保管場所
  • 貸出があるかどうか
    • いつ
    • どこに
    • 誰が

といったものです。 また、このとき物品とソフトウェアの紐づけのためにIDをひとつずつ振り、QRコードを貼り付けることで物理的に物品にIDが紐づくようにしています。

システムはWebサービスの形で提供しており、次の画像のように様々な操作がブラウザを通じて行えるようになっています。サイトのURLは"https://qr.sohosai.com"です。

ページにあるように、このサービスの名称は"QR"と名づけられています（大変に紛らわしいので以降一貫して「物品管理システム」と記述します）。

物品管理システムのWebページの見た目

システムの目的

このシステムが作成された目的として、既存の物品の管理について下記のような問題点があり解決する必要があったからです。

  • 管理している細々とした物品が大量に存在する
    • 来年度の購入するものを考えるためにも、毎年一日かけてリストとの照合を行っていたが、リストに書いてあるものと現実の物品の対応を取るのが大変
    • 学園祭後の片付けが大変
  • 新歓や学園祭の準備中などに様々な物品を貸し出す必要がある
    • 貸し出しの記録を付けなければならない
    • 物品が移動するため、所在地を概ねでも確認出来ておきたい

そして、もう一つの裏の目的として「システムの開発経験を通じてメンバーの技術力を向上させ、より力を入れなければならない"https://sohosai.com"などの開発のときに使えるようにする」というものがありました。 残念ながらこの目論見は

  • 実は学部生レベルでコードを書ける人は少ない
  • 実は学部生レベルでコードを書こうとする人は少ない
  • 実は学部生レベルでコードを書けるようになろうと努力する人は少ない
  • 毎年引き継がれている出展団体管理システムのメンテナンスで唯一コードを書ける人が忙しくなった

という事情により頓挫し、自分がアサインするまでこのプロジェクトが放置されることになりました。悲しいですね。

使用した技術

を使用しました。使用した技術の多くは情報メディアシステム局で今年度採用した技術を踏襲しつつ、新しいものを取り入れていくようにしました。これは、学習コストの爆発を避けメンテナンスをしやすくするようにし、同時にモダンで使いやすい開発環境を維持していくためです。

情報メディアシステム局では過去に採用した技術に固執することなく、使いやすいモダンではあるものの今後急速に廃れる恐れが少ない技術を積極的に採用しており、とても良い環境でした。また、採用していた技術をより良いもので置き換える場合も合意が取れれば裁量の範囲内で行うことができてとても良かったです。

開発スケジュール

開発スケジュールのガントチャート

自分が参加する前の1月から3月まで教育兼簡単な実装が行われていたらしいです（伝聞）が、前述のとおりこれは中断され放置されていました。また、2月の中旬に物品の確認ついでにQRコードを物理的に貼っていたらしいです（伝聞）。

5月中旬に自分がアサインされたあとは

  • 学園祭実行委員会の雰囲気を掴む
  • 情報メディアシステム局の雰囲気を掴む
  • 情報メディアシステム局のメンバーと交流して誰が何をしているのかを把握する
  • 作成する物品管理システムについて、情報の収集と整理をする

などをしていました。

既に出来上がっている組織に途中から入るとだいぶ大変で、まず人と用語を覚え、次にやって良いところとダメなところの境界を把握することが必要でした。

ここでの感触として情報メディアシステム局は概ね「技術最高！全てを自動化したい！強い思想を発露するぜ！」という感じでだいぶマッチョな雰囲気でした。しかし、この感覚が実は少しだけ間違っていたということを後ほど思い知ることになります。

また、自分の立ち位置が"学園祭実行委員会委員長 > 情報メディアシステム局局長 > ネットワーク部門長 > QR担当長 > QR実装実戦部隊としてのpuripuri2100"という、いわば一番の下っ端の実戦部隊ということになっていることを交流を通じて知ったのですが、ネットワーク部門長もQR担当長もマネジメントを放棄しており自分が全てをやる羽目になることを後ほど知ります。

情報収集としては、1月から3月にかけて多少は実装をしていたにもかかわらず情報が全く整理されていなかったため、

  • そもそもとしての前提知識
  • 今抱えている課題
  • どういう機能があると課題を解決できるのか
  • 実際にその機能を実装するために必要な実装

のそれぞれを大量の断片的な情報からまとめあげてDesign Docを自分の手で作成する必要がありました。そもそもとして要件などを記述したページが

という3つのページについて分散し、しかも一つのページの中でも議論をする箇所と確定した情報を書く箇所が混在しているといった有様でした。とてつもなく読みにくかったです。

大学の課題が落ち着き雰囲気を掴んだ7月頭からバックエンドを作成し始め、リハーサルのある9月中旬までに最低限の機能を実装してフィードバックを受けて11月頭の本番までになんとか機能を拡充する、という感じでした。 でしたが、そもそもとしてフロントエンドも自分が作る必要があることを知ったのが8月中旬であったり、一緒に作業をするはずだった人が何もしなかったために全て一人で実装する必要があったりと地獄のような日々でした。あぁ、大学二年生の夏…………。

というわけでここからはそれぞれの実装フェーズでの話を詳細に書いていきたいと思います。

バックエンドの基本的な機能作成

今回作成したバックエンドは、

  • 外部にはHTTPリクエストで操作を行うことができるAPIをURLの形で公開
  • 各APIはREST APIの形式に則る
  • DBに対して挿入・更新・削除・取得の操作を行う関数を定義し、APIとして公開する
  • データの取り扱いはserdeで自動変換

という感じで実装していきました。

バックエンドの概要

HTTPリクエストとDB操作用関数の結び付けはaxumというWebフレームワークライブラリに任せ、生成するSQL文とDBの結びつけと実際の操作についてはsqlxというDB操作用ライブラリに完全に任せることにしました。

これにより大幅な省力化をすることができ、プロジェクトに本格的にとりかかって学習をはじめてから3週間ほどでAPI実装用のテンプレートを作ることができました。7/26日にいきなり「7月中にバックエンドのテンプレートを作り終えて色んな人にタスクを振ってね」とマネージャー相当から宣言されてから泣きそうになりながら実装していたとしても（やや遅刻しながらも）なんとか対応できて良かったです。本当はそういう無茶ぶりをされたときにブチ切れることが一番良かったのでしょうが……。

実は最初はwarpというwebフレームワークを使って作っていましたが、所有権回りの制約が厳しくDBのコネクションプールを撮りまわしたりするのが難しかったために挫折し、axumに乗り換えるなどしていました。

挫折した時に「help wanted状態になっており自分では解決できないので誰かわかる人が居たら助けてください」と情報メディアシステム局のチャットに投げたのですが誰も反応してくれず、それどころか「君が他の人を教育して、その人と一緒に解決すると良いのではないだろか」とマネージャー相当の人から言われ、頭を抱えていました。自分が教えないとコードが書けないレベルの人間が、自分が解決できない課題を解決できるわけも無いし教育には膨大なコストがかかるということもわかっていないようで本当にどうしたものかと思っていました。「教育なんてやってるよりも自分が解決する方が早い」とちゃんと要望は蹴ったのですが、バックエンドのテンプレートを作るだけでここまでコミュニケーションが食い違っている有様というわけで未来が暗いですね……。

さて、「HTTPリクエストに反応してSQL文を通じてDBを操作する関数」の書き方のテンプレートができたため、必要なDB操作と対応するAPIをリスト化してIssueで作業してくれる人を募集しつつ実装を進めていきました。

切り分けられた大量のタスク

実に22個のタスクがあり、すさまじいことになっています。そしてここまでくるとわかっているようなものだったのですが、結局ほぼ全部自分が解決することになり、これまたすさまじいログになっていました。

自分で解決！

最低限使えるAPIを作成したので、あとはフロントエンドの要請に合わせて仕様を少しずつ弄りつつDockerで固めてデプロイで解決です。デプロイ周りはネットワーク部門長のmomeemtやraspi0124、後輩のappare45にかなり助けてもらいました。一緒に手を動かしてくれる人が居るというのは本当にありがたいことですね。

フロントエンドの基本的な機能作成

自分はバックエンドを担当するだけだと思っていました。あの日までは。

『絶望』

たしかになぜかフロントエンド側の進捗報告が一切無かったと思っていたんですよね～。

この会話をしたのが8/12で、バックエンドに必要な機能をIssue化したのも8/12でした。そのため、フロントエンドの実装を考えつつバックエンドのタスクの巻き取りもしていかないといけないというデスマーチが展開していくことになります。 誰も助けてくれないし頼れる人は居ないということはもはや聞くまでもなく自明でしたので、自分で全部実装しなければならず、しかも学園祭のリハーサルがちょうど一か月後の9月下旬にあるためにそれまでに完成させないといけないというプレッシャーで精神的にかなり追い詰められていました（「物品管理システムは真に望まれて導入しようとしているものですか？」と聞くあたりで察せますね）。

追加のタスクを前にスケジュールの練り直しをする図

システムの作成を諦めて情報メディアシステム局をやめようか悩んでいた瞬間

8月末はつくば市と連携した教育イベントの運営に携わっていたり、母校の中高の部活の夏合宿にお邪魔して自分の学園祭のステージの練習をしつつ後輩に教えてるなどしておりとても忙しかったです。忙しすぎて結局僕の夏合宿にディスプレイを一枚持ち込んで宿でも空き時間にずっとコードを書いていましたし、ちゃんとメンタルも壊れて精神科に駆け込んでいました。

嘆き

さて、実装の話です。既にボタンやテキスト入力フォームのコンポーネントとトップページだけは実装されていたので、気合でエスパーしつつ必要な機能を拡充させていきました。 技術的なスタックとしてはNext.js + Reactの良くある構成で、muiで便利な機能を並べたりQRコードの読み取りにはreact-zxingあたりを使ったりしていました。コンポーネントの動作確認にはstorybookが既に採用されていたのでこれを使いました。はじめて触ったのですが、とても便利でした。

圧倒的才能により9月頭にはQRコードを読み取って貸し出しフォームにIDを自動で入力して貸し出しボタンを押して登録できるようになるまでできていました。他にも用意したデータをもとにして物品の詳細ページ表示もできるようになったりしており、これにて基本機能の実装が終わったので1週間半くらい休んでいました。良かったよかった。

初めて動いた瞬間 感動！！！

リハーサルでのとりあえずの運用

自分にバックエンドをデプロイするサーバーを触る権限が無かったので権限のある人にデプロイ周りを任せていたのですが、結局ギリギリまでやってくれずリハーサル前日に仮デプロイとデプロイ方法のドキュメント化をしてもらいました。まともな接合テストもそこではじめてやったため様々なエラーが出まくってその対応で当日午後まで修正する羽目になっていました。CORSの設定やAPIリクエスト送信のタイミング、データへのアクセス方法など様々に想定外のことがあり、自分の詰めの甘さと開発用サーバーの必要性を実感しました。

実際に物品の片付けのときに使ってもらった結果、コードをどの部屋のどの箱にしまうのかがちゃんと表示されて便利！との声を貰えて本当に嬉しかったです。

バックエンドの機能拡充

リハーサルでの経験などを踏まえて

  • 検索機能の追加
  • 認証システムの追加

を学園祭本番までの間に実装することになりました。

最初、検索機能は単純にSQL文で単語の部分一致だけをやれば良いかと思っていましたが、ちょうど数か月前に買っていた『検索システム ― 実務者のための開発改善ガイドブック』（打田智子・古澤智裕・大谷 純・加藤 遼・鈴木翔吾・河野晋策 共著、ラムダノート社、2022年）をこのタイミングで読み検索エンジンの奥深さに感動した結果、Meilisearchという最近話題の新しい検索エンジンを導入することにしました。 MeilisearchはDocker imageが配布されていてインストール・起動が非常に楽でした。 また、起動した後の操作もHTTPメソッド経由でAPIを叩いたりRustのSDKを通じて関数で操作できたりと非常に便利でした。 初めて思った通りの検索結果が実現できた時は感動がありました。検索エンジンってすごい！

この物品管理システムはCIの枠などの諸事情によりpublicリポジトリになっており、悪い人間に見つかった場合にはAPIを叩かれて遊ばれてしまう可能性があります。 そこできちんと認証システムを載せることにしました。フロントエンド側だけにCloudflareの認証やauth0の認証を載せるような運用だと万が一バックエンド側のURLが破られた時に意味がなくなりますし3、物品の詳細情報と検索などはログインしなくても操作できた方が便利なので認証をかけるところとかけないところを使い分けられるようにした方が良い、といったことから認証システムを作ることにしました（そして個人的に一回は作ってみたかった）。

形式としてはbasic認証でマスターキーをフロントエンドから送信してもらい、バックエンド側で検証をしたのちに一時トークンを発行して返し、フロントエンド側からの操作はその一時トークンをbearer認証で使うようにするというよくある形です。 もちろんマスターキーが割れたらダメなのですが、環境変数で切り替えられるようにしておりブラウザ側への保存はされないようになっているためあまり心配はしていません。 この認証システムを載せるためにエラーハンドリングやリクエストへの応答形式を統一するためのクソでかプルリクエストを作るなどしていました。エラーハンドリングは最初期から導入した方が良いです（学び）。

フロントエンドの機能拡充

バックエンドの機能拡充に対応した検索ページと認証まわりのアップデートはもちろんのこととして、見た目の改善も行いました。

見た目の改善については後輩のMyxogastria0808が「物品管理システムの開発に関わりたいです」と言ってくれたのでお願いしたところ、マジで使いやすいものを作ってくれました。本当にありがとう……。デザインを自分が学ばないといけないことを改めて実感しました。 ここで初めてまともにレビューというものをしてみたのですが、岡目八目が発動して結構ミスなどを発見することができ、レビューというシステムの重要性を感じました。

運用

11月に入り、いよいよ学園祭当日の運用を行いました。

貸出機能は使われず、検索と物品詳細ページがかなり多く使われたという印象です。 配線をするときのスペックの確認や、片付けのときの整理整頓の際にかなり使われていましたし、その時に便利で助かっているとの声をいただけてよかったです。

片付けの時に要望を受けてその場で簡単な機能追加をしましたが、特に壊れることなく使うことができて安心しました。

ドキュメンテーション

学生組織あるあるの困難さとして作成されたソフトウェアのコンテキストがわからない、ということがあります。そこできちんとDesign Docやコメントをその仕様に決定した経緯を含めて記述することにしました。また、それぞれのリポジトリにおいてCHANGELOGを書いておいたりと、一緒に開発する人がすぐに参加できるように、そして未来の人たちが困らないように気を付けて書きました。 結果として途中から開発に加わってくれた後輩や少し手伝ってくれた同級生などからも「ドキュメントがあったから取っ掛かりがあって助かった」と良い評価を貰えました。

cargo doc最高！！！

感想と反省

今回の物品管理システムの作成を通じて抱いた感想です。 良い面も悪い面も含めて「ひと夏の思い出」ということで……。

  • 様々な技術を触ることができた
  • フルスタックエンジニアになってしまった……
    • 「なりたくてなるものではない」という先人の教えは正しかった
    • 聞き取って要件定義するところからマネジメント兼全ての実装、運用と教育まで……
  • チーム開発は難しい
    • 人は信用ならないので期待しないべき
    • 人が助けてくれると素直にうれしい
    • 認識のすり合わせや催促などのコミュニケーションをしっかりと取っていくことがとても大事
  • マネジメントは難しい
    • 自分がまき取る覚悟でタスクを振らないといけない
    • マネージャーのマネジメントをしたときは流石に狂いそうだった
  • 技術系特有のコミュニケーションと普通のコミュニケーションとのすれ違い
    • 「質問とは質問であって説教ではない」とか「できないことは罪ではない」とか「誠実たれ」とかの信条は意外と共通していないのでそこを事前に共有しておくべきだった
    • 人にはプライドがあるのでわからなくても質問できない場面があるということを把握しておくべきだった
    • 対面でのコミュニケーションで柔らかくやっていくのが適切であったのかもしれないが、精神状態や生活リズムによっては大変なことがあるので難しい
  • 信用できるのは手を動かす人だけ
    • 結局ね
    • せめて自分で一回調べてみてから聞いてほしい

おわりに

本当に色々ありましたが物品管理システムの作成と運用ができ、そして学園祭が無事に終わって本当に良かったです。

このブログの公開をもってひと夏の良い思い出として自分の中で決着させたいと思います。

  1. 筑波大学では通常の学部・学科に相当するものを学群・学類と呼称します↩
  2. "dlm"という名で公開しています：https://github.com/puripuri2100/dlm↩
  3. そしてREADMEにバリバリURLを書いていた↩

日本国の裁判所にcontributeしました

要約

裁判所が公開している裁判例検索に「年月日の数字がマイナスになっている」というバグが複数存在していることを発見したため、最高裁判所に報告し修正してもらいました。

存在していたバグ

次の画像では「原審裁判年月日」という項目が「昭和-954年3月25日」という表記になっています。年月日がマイナスになることはありえず、明らかに誤表記です。

昭和-954年というありえない表記

このような年月日にマイナスの値が出現している判例データは複数あり、確認した限りでは以下の7つです。

発見の経緯

裁判例のテキストデータを作成しようと考え、裁判所のホームページをスクレイピングして対象の裁判の情報を抜き取ってデータ化するソフトウェアを作成しました。その一環で、このソフトウェアには和暦の年月日をパースして構造化する機能をつけていました。

2023年1月15日にこのソフトウェアを動かしていたところ、このような不正な値をが含まれるページを解析しようとしてクラッシュしたことにより、発覚しました。

発見時のツイートの様子

本バグを発見した後も引き続き公開されている全ての判例ページのスクレイピングを行い、他に同様な状態になっているページが無いかを調べ、最終的に上記の7つのページで不正な年月日の表記になっていることを確認しました。

バグの報告

このバグはソフトウェア側で対処できるものではなく、放置しておくことは公共の利益を損なうものであることから、裁判所に報告をする必要があると考えました。

裁判所のホームページから辿れるお問い合わせページでは

その他本サイトの利用方法，操作方法等について 最高裁判所事務総局広報課　TEL03-3264-8111(内3156)

と記載があることから、2023年1月16日にここに電話をかけて本バグについて報告をしました。

その結果、電話に出ていただいた職員の方から

たしかにこれは明確におかしいですね。 直せるかわかりませんが担当者の人に伝えます。

との返答を受けました。

修正

報告した数日後に修正されました。例えば

のように、「昭和-861年7月31日」となっていたところが「昭和39年7月31日」と修正されています。

修正前のページのアーカイブが2023年1月16日で、修正後のページのアーカイブが2023年1月18日です。連絡をしてすぐに直してくれたことがわかります。

結末

本バグ発見のきっかけとなったソフトウェアはこちらです。

また、このソフトウェアを使用して作成した判例のデータ群はこちらで公開しています。

Twitter引退の機運がある

APIを有料化するのは良いが、それでサービスが壊れたら元も子もないでしょ

Twitter APIが壊れた図

追記： mstdn.jpでのアカウントはこちら： mstdn.jp

Dicordアカウントはこちら：

Discordアカウント

2022年に触れた技術

はじめに

2022年に身に着けた技術・触れた技術について振り返って軽くまとめたいと思います。

自動車の運転

1月末にMT免許を取りました。それから早くも一年近くがすぎ、すでに総走行距離は2万kmが見えてきています。

ランサーセディアワゴンという車を1.5万km程度乗り、その後日産のティーダという車のMT仕様車に乗り継ぎおよそ0.4万km走りました。

旅程における自由度が時間・空間ともに飛躍的に拡大し、とても良い体験をしています。

つくばという一歩出れば車社会の街にも適合できて非常に良いです。

入院・救急要請関連

適切に医療に接続するようになれました。

2回も入院をするとさすがに筑波大学附属病院のシステムにも慣れ、何が必要かを把握したうえで戸締りをして救急車を待つことができるようになります。

なりたくはなかった。

GUIソフトウェア

GUIツールを作るようになりました。

今までCLIツールだけしか作っていなかったのですが、GUIはこれはこれで便利だな、という感じになれました。

egui

Rustで完結できるGUIフレームワークです。1秒間に60回画面を描画するという特徴を持っており、「文脈に保持したデータから一意に定まる画面を定義すればよい」という非常にわかりやすく、純粋関数型言語とかになじみやすいような感じがあります。

その反面、変化するデータを上手く取り扱うのが難しく、そこら辺の知見を得ることができてよかったです。

実際に使って作ったソフトウェアとしては、自分が撮った画像にメタデータを付けるためのソフトウェアである"photag"があります。

tauri

Rustで実装したElectron likeなGUIフレームワークです。フロントエンドはよくあるWeb appのように作りバックエンドをRustで書き、連携は良い感じにtauriが提供するinvoke関数などを通じてあまり考えずにできます。

便利でした。

Web関連

苦手としていたWeb関連をインターンなどで触る機会があり、徐々に苦手意識も薄れていきました。良かった。

VPS

さくらのVPSを借りてphoto.puripuri2100.siteを動かしたりするなどしています。

借りる自体は2021年の12月くらいにやってはいたのですが、本格的に触りだしたのは結局5月ごろになりましたね。

Vue

最初に触ったフロントエンドフレームワークとなりました。

前述のphoto.puripuri2100.siteもこれで作りました。

まだ細かいテクやデザイン設計などは全然できませんが、直感は得られた気がします。

React

前述のTaruriを使うときにReact + TypeScriptをなんとなくで採用したため、Reactの勉強をやりました。

ところどころOCamlっぽい何かを感じて何か面白かったです。hookの挙動でつまりかけましたが、なんとなく直感は得られたような気がします。

TypeScript

前述の通り、Tauriの流れでTypeScriptも勉強しました。

かっちりした型システムではないものの、実用的には何も困らず、大体のユースケースで適切に型に守られるようになっていて凄く感動しました。

たしかにこれは流行る。

kubernetes

インターンで触らせていただきました。

サービスが無限にスケールする様を体感し、かなりの感動がありました。

Docker含めてこれをもうちょい触れてみたい感じがあります。

バックエンドサーバー

インターンで色々触り、バックエンドサーバーを立てたりしていたため、自分でも立てたりしていました：SLGs

画像生成

Stable DiffusionとWaifu Diffusionを使って適当に画像を生成していたりしました。

特に踏み込むことはせず、すでに触ってはいないのですが、某所で情報の濁流を見るなどして少し世界への認識が変わったような感じがありました。

関連して作ったソフトウェア：rotate_SD

並行並列計算

オライリーの「並行プログラミング入門 ―Rust、C、アセンブリによる実装からのアプローチ」を入院中に読んで値の保護に関するなんとなくの直感を得ました（具体的なアルゴリズムには深く踏み込めませんでした……）。

最近はRustでtokioを使って並列処理を書くようになってきました。

簡単にかけて便利ですね。

ネットワーク関連

ネットワーク関連のバイトをさせていただいており、まったくわからなかったところからなんとなくわかるようになれ、とてもうれしいです。

VPN

実装などは何もわかりませんが、使えるようにはなりました。

速度がやや気になるものの、出先から自宅ネットワークに接続できて便利です。

ネットワーク構築

PCやL3スイッチを入手できるようになったため自宅ネットワークを構築し、ファイルサーバーを立てたり出先からメインPCにsshして計算させたりしています。

物理的なケーブルをごにょごにょしたりするの楽しいですね。

PC構築・解体

様々な理由により、PCの解体や組み立てなどができるようになりました。

想像以上にマザーボードが金属の塊であることを知るなど、面白かったです。

社会の辛さ

依頼されていた仕事が途中でキャンセルになったり、会社都合でインターンが急遽終了したりなど、社会の厳しさを感じる一年になりました。

社会のやさしさ

入院したときにメールをすると課題が猶予されたり色々な人が心配してくれたりなど、社会の優しさも感じられました。

意外とゆるく社会が回っていることを知れたのは精神衛生上非常に良かったです。

おわりに

物理的なネットワーク構築からWebアプリ作成まで幅広くやった一年でした。

かなり楽しく、学ぶ機会をくださった方々に非常に感謝しています。ありがとうございました。

2023年も何かをやっていきたい。