跳慮跋考

興味も思考も行先不明

最速の LaTeX 数式入力支援ウェブアプリ "TypeMath"

これは TeX & LaTeX Advent Calendar 2014 の 11 日目の記事です。昨日は tattsan さんで、明日は doraTeX さんです。

「このパッケージがスゴイ!」とは全く以て関連せず恐縮ですが、ここでは快適な LaTeX 数式入力に特化したウェブアプリ TypeMath を紹介させて頂こうと思います。

経緯

蓋し記録媒体としての紙は、これでもかと言うくらい原始的です。ベタでシーケンシャルな構造しか用意されておらず、探索のサポートは完全自主性で、本来の情報量からすればどこまでも冗長な形式なのです。
よって世の大学生が電子媒体にノートを作成したいと思うのは至極当然の成り行きと言えましょうが、ここで問題となるのが数物分野です。
数式を使う場合、標準的には LaTeX で書く事になるでしょうし*1、コマンド定義を多用してそれなりに対応も出来ましょうが、行列や可換図式となると大分苦しいものがあります。LyX という GUI 環境もありますがどうも快適でない。あと証明図入力も碌なアプリケーションが無いですね。
そこで「ぼくのかんがえたさいきょーの LaTeX 数式入力アプリ」として、この TypeMath を開発するに到ったという次第です。

機能

さて こちら がその TypeMath であります。
f:id:quinoh:20141209211822p:plain:w480
私の知る限り Windows 8.1 上の Firefox 34.0、Opera 26.0、Chrome 39.0、IE 11 及び Mac OS X 上の Safari 6.1 ではちゃんと動くと思います。この図は Firefox です。
以下では現在実装されている機能について説明して行きたいと思います。

基本操作

基本的に通常の文字入力と同じ感覚で使えるよう心掛けていますが、Space は割と色々な場面で「次へ」という機能を担うので、取り敢えずこの入力方式に慣れて頂ければ軽快な数式入力を体験できるかと思います。また Shift+Space は逆に「前へ」となっております。
コマンドの \ は無くてもよい、と言うより打たない事前提で作っています。ここには私の「だって frac とか lim みたいな積なんてそうそう書かないでしょ?」という想いが籠っています。もし書く場合は途中で Space を押下して下さい。

自動補完

高速な入力を目指す以上は必須でしょう。
↑/↓ キーで候補を選択、Enter で確定、Tab では赤枠内が補完されますが記号にはなりません。また Space を押すと、赤枠のコマンドそのものずばりが存在すれば記号になりますが、そうでなければ変数の並びと解釈されます("fra" は "frac" などと完全には一致しないので単に f r a となる)。
f:id:quinoh:20141209212622p:plain:w285

記号

括弧類、例えば ( は Space だと普通の ( ですが、Enter だと \left( になります。Enter の時はコマンドとして解釈するという気分です。
/ はなんとなく打つと \frac と解されます。
\bar や \tilde 等のアクセントは後に続けて修飾する文字を打って下さい。
\mathbb や \mathfrak 等もサポートしていますが、ブラウザの(フォントの?)問題で表示されなかったりしますね(あまりよく調べていません……)。

範囲選択

Shift を一度押すと選択モードになり、紫で選択範囲が示されます。もう一度押すと戻ります。また数式上でカーソルをドラッグすると、緑枠が出て矩形選択が出来ます。
選択範囲は Ctrl+C でコピーしたり Ctrl+X で切り取って Ctrl+V で貼り付ける事が可能です。
f:id:quinoh:20141209213559p:plain:w225

マクロ登録

適当な数式を選択して Ctrl+M を押すと範囲が水色に替わります。
例えば下の様に \frac{\partial}{\partial x} をマクロ化してみましょう。
f:id:quinoh:20141209214408p:plain:w312
水色状態では #1 を挿入したり x を #2 に書き換える事で、引数に置換される部分を指定できます。書き替えても登録完了すれば戻るのでご心配なく。
f:id:quinoh:20141209214434p:plain:w312
もう一度 Ctrl+M を押し、名前を入力すれば完了です。
f:id:quinoh:20141209214648p:plain:w500

取り込み

Ctrl+L で生の LaTeX が書けて、もう一度 Ctrl+L で取り込みます。TypeMath 自身が出力する限りのコードは解釈できる筈です。

行列

matrix と打つとサポートされている各種行列環境が分かります(但し \xymatrix は次の可換図式です)。行列環境では Ctrl+↓ で行を、Ctrl+→ で列を追加でき、また Ctrl+↑ や Ctrl+← でそれぞれ削除が出来ます。
行列上でも範囲選択等はサポートされています。
f:id:quinoh:20141209215719p:plain:w250

可換図式

XY-pic の \xymatrix の一部機能ですが対応しています。
これに関してはかなり事項が多いので、usage を御参照頂ければと思います。
移動は行列とほぼ同様なのですが、セルの中を編集するモードとセルの外(フレームや矢印)を編集するモードがあるので、そこは Enter で行き来する様になっています。
個人的には波線矢印とラベル機能がこだわりポイントです。
f:id:quinoh:20141209220752p:plain:w504

証明図

proof mode をチェックすると証明図モードになります。パッケージとしては proof.sty を想定しています。証明図モードとは具体的には、\infer のレイアウトがちゃんとして、∧と∨が \wedge と \vee ではなくて \land と \lor として下に出、また \infer の上側では Space が「次へ」ではなく &(前提の区切り)になります。
f:id:quinoh:20141209223342p:plain:w504

自動保存

autosave にチェックを入れると、入力がローカルに保存され、ウィンドウを何の前触れもなく閉じてもデータが失われません。多分。
HTML5Web Storage を使用していますが、データの永続性が保証されている訳ではないので、飽く迄も補助機能としてお使い下さい。

計算

つい出来心で……。
最後に = を置いて Enter を押すと何か計算してくれるかも知れません。実装が適当過ぎて多項式の整理も碌にやってくれませんが。
f:id:quinoh:20141209225021p:plain:w328

実装

何故ウェブアプリなのか、と言うとブラウザが一番手軽なクロスプラットフォーム環境だからです。それと私はブラウザを常時開いている人間なので、タブ一つを開く方がソフトウェア一つを起動するよりも多少心理的コストが低い(めんどくない)って点もあるかと思います。
JavaScript 生では流石にアレなので、MS の TypeScript というものを使ってみました。TypeMath という安直な名前はこれに掛かってたりします。
ソースは kinoh/TypeMath · GitHub にて公開&管理。まぁ私しかコード書いてませんが。app.ts とかぐっちゃり感が哀しいのでどうにかしたいところではあります。
数式については Unicode 文字と CSS を全力で使っていますが、大きい括弧等のいい感じに出来ないところではこっそり見えない Canvas でグリフを作ったりしています。
開発上の副産物として LaTeX 記号と Unicode 文字の対応表 を作る羽目になりました、これ凄く誰かが作ってそうな気がするのですが。

今後

どうせなら簡易文書プロセッサにすればいいのでは、と自分でも思うのですが、最近ノートを取る機会が無くなった為にモチベーションが死んでいたりします。WolframAlpha に投げるとか、.. で適当な *dots を推測とか、カテゴリから候補を探すとか、色々とやりたい事もあるのですが。利用者が増えてくれればやる気が出るものでしょうか?
まあ兎にも角にも、この記事により世界が少しでも最適化される事を願って已みません。

*1:Microsoft Word の数式エディタは最近かなり素敵になっていますが、貧乏な学生の PC には Office など入っていないという事が得てして起こり得るのです。Windows がお嫌いで? それは失礼。