論語を全文Webアプリにしてみた

論語を全文、原文・書き下し文・訳文の3点セットで読めるWebアプリを作りました。必要にかられて、ではなく、純粋に「あったらいいな」と思ったので作りました。

少し前に、学研「漢文名言辞典」の全文テキスト（asahi-netの個人サイト）を見つけました。論語の原文（白文）・書き下し文・現代語訳が、全512章ぶん、ひたすら並んでいる。大変な労作です。

ただ、フレーム分割＋Shift_JISの古典的HTML構成で、スマホではほぼ読めない。検索もできない。「学而時習之」の訳文をパッと引きたいときに、512章をスクロールして探すのは現実的じゃない。

というわけで、このデータをJSONに整形し、検索可能なモダンなSPAに組み直しました。

左に編・章のナビゲーション、右に本文。タイトル通りの構成です。以下、特徴をざっと。

原文・書き下し文・訳文を横断して検索できます。Ctrl+Kで検索バーにフォーカスが飛ぶので、キーボードだけでサッと引けます。

たとえば「巧言令色」で検索すると、該当の章が一発で出ます。原文の該当箇所はハイライト表示されるので、「どの章に出てきたっけ」がすぐ解決します。

各章は「原文（白文）」→「書き下し文」→「訳文」の順に表示されます。

編全体を縦読みするか、特定の章にフォーカスして前後に移動するか、両方のモードがあります。

ヘッダーのサイコロボタンを押すと、512章からランダムに一章を取り出して表示します。何の脈絡もなく「不患人之不己知」が出てきて、その日一日の心構えが決まる、みたいな使い方。

論語というコンテンツの性質上、派手なUIは避けました。カラーパレットは墨色・朱色・生成りの3色。朱色（#c73030）は朱肉の色をイメージしています。

見出しや原文にはNoto Serif JP（明朝体）、訳文にはNoto Sans JP（ゴシック体）を使い分けています。原文のブロックは左に朱色のラインを入れて、書き下し文より一段上に感じられるような視差をつけました。

訳文ブロックには引用符をあしらって、「誰かの語り」であることを視覚的に暗示しています。エフェクトやアニメーションはほぼゼロ。フェードインだけ、控えめに。

とりあえず動く形にはなりましたが、以下は手をつけていません。

必要を感じたら順次やります。

論語は2500年前のテキストですが、「学びて時にこれを習う」とか「過ちては改むるに憚ることなかれ」とか、今読んでも普通に刺さる言葉があります。アプリにしたのは自分が読みたかったからというのが一番の理由で、同じように「ふと論語の一文を引きたい」という人がいたら便利に使ってもらえればと思います。

データの出典元であるasahi-netのサイトには改めて感謝を。ああいう個人の地道なテキスト化の積み重ねが、今回のような二次利用を可能にしています。

というわけで、論語アプリの紹介でした。興味があれば https://t-empire.com/rongo/ からどうぞ。