1年近く前に、複素積分をインタラクティブに行える Web ページ（Web アプリ？）を作ったのだが、ブログでの紹介がまだだった。

たのしい複素積分：https://miz-ar.info/math/singularity/

できること

マウス（またはタッチ操作）で曲線を描いて、それを積分経路とする複素積分を計算できます。

積分する関数は、あらかじめいくつか用意されたものの中から選びます。いつぞやの「複素関数で遊ぼう」とは違って、任意の関数を入力できるようにはなってません。

複素平面上には、関数の特異点の位置が赤丸で示されます。

「曲線を描く」を選んだ状態で描くと始点と終点のある曲線になり、「閉曲線を描く」を選ぶと終点と始点が適当に結ばれて閉曲線になります。積分路が閉曲線の場合はコーシーの定理的に大事ですが、マウスで始点と終点が一致する曲線を描くのは厳しいので後者を用意しました。

「閉曲線を描く」で特異点の周りをぐるっと積分すると、留数が出てくるのがわかります。

一応、非正則な関数として \(\bar{z}\) と \(\frac{z+\bar{z}}{2}\) を用意していますが、よく考えるとどっちも \(\bar{z}\) について線形な関数なので、2つあっても特に面白くないのでした。気が向いたら \(\bar{z}\) についてのもっと面白い関数を追加するかもしれません。

Q & A

推奨ブラウザーは？

技術的理由により、一番のオススメは Firefox で、次点で Safari です。他のブラウザーでも一応動きます。iOS の場合はどのブラウザーを選んでも結局中身は Safari と同じなのでこの Q&A は関係ないです。

積分値の計算はどうやっているの？留数定理とか使ってる？

数値的に計算しています。シンプソン法とかいうやつです。

マウスで曲線を描いている最中と描き終わった後では、計算の精度（区間を分割する個数）を変えています。

好きな関数を追加したい！

ソースコードをいじって追加してください。 index.xhtml.in と ts/AnalyticFunction.ts をいじれば良いはずです。

任意の関数を入力したい！

このアプリでは関数の特異点の位置を表示していますが、任意の関数を入力できるようにすると特異点の位置を表示できないな〜〜〜ということで、任意の関数の入力はナシにしています。

…というのは言い訳で、実際は作者が面倒くさいだけです。本当に必要だったら、甘えたこと言ってないで自分で実装してください。

技術的詳細

数式の表示方法について

以下の理由により、当初は MathML だけでやっていました。

• JavaScript で動的に数式を変更する場合、MathML は普通に DOM をいじるだけでよい。MathJax は API を覚える必要がある。
• MathJax なんか遅くて使えるかバーーーーーカ MathJax は遅い
• MathML が表示されない場合でも、 LaTeX 形式のアノテーションが表示されるようにしているので、最低限意味は伝わるだろう。（Chなんとかの場合はアノテーションだけが表示される。Iなんとか ExplorerだとMathMLの文字列部分とアノテーションの両方が表示された気がする。）

ですが、気が向いたので、 MathML に対応する気のない残念なブラウザーの場合は MathJax を使うようにしました。具体的に言うと、次のようになっています。

• Firefox: 常に MathML を使う。Firefox が推奨ブラウザーな理由はこれです。
• Safari: 静的な部分に MathJax を使い、動的な部分には MathML を使う。
• それ以外：常に MathJax を使う。

MathJax への入力は MathML で与えていますが、この際、 MathML の DOM をいじると自動的に MathJax を更新するような仕組みを作りました。→ソースの dynmml.ts を参照。

複素平面の表示方法について

こういう、ほぼ曲線だけみたいなやつは SVG でやった方がいい気がしますが、 HTML5 canvas でやってます。

マウスで描いた曲線について

昔作った複素関数のやつは、マウスで描いた曲線は折れ線でしたが、こっちはスプライン曲線を使っています。

ファイルサイズを小さくする工夫

ブラウザーから HTML のソースを見てもらえば分かりますが、 XHTML ファイルの余計な空白と改行はすべて削ぎ落としています。読めるソースが欲しい人は GitHub に行って index.xhtml.in を見てください。

JavaScript はもちろん minify してあります。拡張子から .min を削れば minify する前のコードが出てくると思います。でもソースが読みたい人は GitHub に行って TypeScript で書かれたソースを読んでください。

ビルドには古き良き GNU Make を使っています。 JavaScript 界隈のビルドツールだかタスクランナーなんて知りません。

d-poppo.nazo.cc では、元々小さい転送量をさらに削減するため、.htaccess で rewrite rule を使い、事前に gzip 圧縮したものを Content-Encoding: gzip でサーブするようにしています。そのための gzip 圧縮済みのファイル（*.gz）も Makefile のルールで作るようにしています。

ソースコード

誰かから「ソースが見たい」という脳内電波を受け取った気がしたので、ソースコードを公開しました。

https://github.com/minoki/singularity