作った

twizora というサービスを作った。

あーーーー、そこのひと、ネーミングを嘲るのはよしていただきたい。こちとら bluesky も、青い鳥文庫も封じられているんだ。この井戸の水はとうに枯れきっている。
当方、小学の時分にゃ黒魔女さんが通る!! のオタクだったので、青い鳥文庫と名が似るのはいささかフクザツなもんがあるんだ。

どんなサービスですか

本って、読めないなあ！
やー読書は好きなんだけど、相変わらずうまく読めない。なんでだろう。脳が Twitter に最適化されてるから？

それじゃない？

じゃ、青空文庫をツイートみたいに表示すれば、スルスル頭に入るのでは？

……といったイキサツで生まれた、青空文庫の Twitter 風ビューアです。選んだ作品を140文字ごとに切って表示します。ツイ廃のみなさまにはぜひ使用していただきたい代物でございます。

中身の話

Next.js で動いています。コードは9割方 GPT-4o が書き (初版公開時点) 、わたしはほぼ CSS のみを担当しました。AI って怖い！
わたしは CSS を書きながら AI をシバくだけなので、開発期間は4日とかだったと思います。GW中だったので、AI をシバき飽きたらゲーセンに行ってしこたま maimai するルーティンを繰り返していました。

というか、なんせわたしは普段 Nuxt ばかり書いており、お恥ずかしながら Next (React) に触れたことがなかったのです。そこで、まずは AI がコードを構築していくところを見守っていれば、構造？しくみ？がなんとなく掴めるのでは？と思った次第でございました。
結果としてはまあまあわかりました。ただ、技術書を数冊読まないと厳しそうな感じはする。正直。

しくみ

青空文庫の作品 (と版) は、以下の3つの ID から特定されます (参照) 。

6桁の人物 ID
桁数指定なしの作品 ID
桁数指定なしの通し番号

特定の作品の本文を取得したいときは、この3つの ID をそれぞれ指定する必要があるわけです。このうち人物 ID と作品 ID については、青空文庫の作家一覧ページからダウンロードできる 作家別作品一覧.csv を参照すれば、対応する値を取得可能です (実際に twizora ではこの CSV ファイルを一部加工後、JSON 形式で書き出して、./data/ に保管・参照しています) 。ありがたし！
これで作品の検索はできるようになりました。

……で、前者2つは難なく取得できるのですが、問題は作品ごとの通し番号でした。これがないと肝心の作品本文が取得できません。
これについては、青空文庫さん公式曰く、

なお個別ファイルで、46340_24939.html というように、作品IDともうひとつ数字がつけられていますが、これは全ファイルの通し番号です。ファイルが更新されるたびに変わりますので、ご注意ください。
(青空文庫編青空文庫FAQ内の「Ｑ：青空文庫の図書カードのアドレスに、規則性はありますか？」の項より。太字筆者)

ただし作品個別のファイルについては、更新されるたびに通し番号（前項参照）が振り直されるため URL が変わります。 直接ファイルにリンクされる際には、ご注意ください。
(同ページ、「Ｑ：青空文庫にリンクを貼ってもいいでしょうか？」の項より。太字筆者)

だそうで、テーブルも公開されておらず、不定期に予告なく更新される値という……いや、運用上はこれでいいと思います、青空文庫さん！
その、わたしが取得するとき、どうしよっかなーって感じなだけで！はい！

だいぶ悩んだのですが、答えがありました。

作品本文のページへは、作品ごとの図書カードのページにあるリンクから飛ぶことができます。つまり、人物 ID と作品 ID から図書カードページのリンクを組み立てて、中身をまるごと取得し、本文のリンクを \.\/files\/(\d+_\d+\.html みたいな感じで探せばいいわけです。
これでだいぶ安定しました。

ツイートのスクショ

当時のツイート。1時間悩んだ

註: 青空文庫さんのページを直接叩くのはアカン気がしたので、GitHub の青空文庫リポジトリから GitHub CDN (raw.githubusercontent.com的な) を経由して取得しています。この方法もまあ、なんかアレなので、一定回数以上アクセスのあった作品はサーバに置くとか、そういった対策を……もしバズったらやります。うん　

表示まわり

本文をそのままぶっこ抜いてきただけでは、まだまだツイートとしての体裁は整いません。
青空文庫のテキストデータには、底本の組版・レイアウトを忠実に再現すべく、適宜ルビや複数改行や、入力時の補注、メタデータの直接の記載などが含まれています。
以上をフィルタしなければ「マジのツイート」には近づけられないわけです。ツイ廃にはこういうリアリティが大事なんです。

それらを正規表現の力で全て消し去ります

バカの実装

もうひとつ

ですが、いちばんの問題が残っており……

今の Twitter の UI がどうなってるかわからない

これです。わたしは Twitter アプリのアプデを2023年7月以降やっていません。 当然 UI も当時のまま、Grok タブだって存在しません。なんなんスかアイツ？
そのため、ナウいツイ廃の脳みそが、いまどんなフォーマットに最適化されているのかリサーチできていなかったわけです。
あ、てか今の Twitter ってなんか変な名前になってましたよね、X？だっけ？知らねー。わたしのスマホはまだ Twitter のままだ。じゃ何、エク廃ってこと？
きも

仕方がないので、X？のWeb版を見に行ったり、それっぽいワードを検索して他人のツイー…ポスト？が晒されてる現場を探したりしました。やり方が終わってようが、とにかくスクショが手に入ればいいんです。
そんなこんなで CSS をこねくり回し、今の形に落ち着きました。あんまり変わってなくてよかった。

UI 、だいぶ Twitter じゃないでしょうか。フォントサイズも可変にしたので、みなさんの「いつもの Twitter」の画面を再現できてると思います。
少なくともわたしの環境ではパーフェクトでございます。

以下余談

構想自体は約1年半前、Twitter のスペースから始まりました。当時は Nuxt で作ろうとして、ツイートのレイアウトだけ組んでまさかの一日坊主をしました。
これは筋金入りの飽き性であるわたしの中でもかなり酷い部類です。
それから今まで、そのリポジトリには一切手をつけませんでした。

理不尽にも時は経ち2025、もう Playboi Carti による I AM MUSIC 出す出す詐欺戦争さえ終結を見たころ、やっとやる気が起こります。
わたしもいい感じのサービスをリリースしたいぞ！と思い立……ったわけではなく、本当に暇だったからなんとなく作ったわけですが、Next の勉強になったからよかったな〜とか思っています。
とりあえず、動的サイトは Nuxt より Next 、と謂われる所以はわかりました。それでもまだまだ Nuxt ラヴァーですけどお…… (書いてて楽しいのは圧倒的にこっちだナ。。。)

まあ、やれることの幅は広がったので、よし！

それではこのへんで……