2016-11-02

数式画像を配信するサービスをつくった

このブログの記事中に数式を書こうと思っても、残念ながらmarkdownにはそういう機能がない。 なのでオンラインで画像を生成してくれるサービスかなんかからダウンロードしてきて、それを自前で配信しなきゃいけない。うーん。ちょっとめんどくさい。

なので小さなサービスを作った。

MathIMG

数式をURL-safeなBASE64形式で与えると、それをコンパイルした数式画像をSVG形式で配信する。長いURLになった時のためにURL Shortenerを使えるようにした。これでこの記事中に数式を気軽にかけるようになった。

markdownの標準的な機能では画像のサイズを変更できない。なのでサイズを変えたい時は<img />タグを使うことになる。

<img src='https://mathimg.com/r/7taw' width='360' />

とすると、

となって、大きく表示できる。

もともとはURLに直接LaTeX形式で書いて使えるようにしたかった。placehold.itlorempixelみたいなのを作れればよかったんだけど、特殊な文字を多分に含むLaTeX文でそれは使い勝手が悪い。 バックスラッシュやスペースを含むURLは、ブラウザによっては勝手にエスケープしたり通常のスラッシュに置き換えられたりする。要するに安全な文字だけにエンコードして、それをサーバー側でデコードできればなんでもよかった。そういう用途だとBASE64はちょうどいい。URLsafeになるよう文字を選択した仕様も定義されており、末尾の詰め文字(=)が省略できたり文字数の制限もなかったりと便利に使える。

Vue.jsのバージョン2が先日公開された。ずっとalpha版だったので様子見だったが、今は立派にstableリリースになったので練習がてら使ってみた。ほとんど変わることはなかったけど、それなりに多用していたdebounce機能がなくなっていたことに気づく。lodashに同じ機能があるけど、Vue.jsで作ったフォームから気軽に使えるのが嬉しかったのに…

最初はAzure Functionsで作ろうと思ったんだけど、Dynamic Tierではカスタムドメインが使えなかった。Azure FunctionsはAWS Lambdaと違い、API Gatewayを挟まないでいいので簡潔で便利ではあるが機能はまだ劣っている。仕方ないので普通にExpress.jsを使ってAzureのWeb Appにデプロイした。Web AppはHerokuやElasticBeanstalkのように使える便利なサービスなんだけど、Windows上で動いていることもあって動作にくせがある。今回はネイティブモジュールもないシンプルなアプリなので簡単にデプロイできたが、webpackのビルドもWebApp用のデプロイスクリプトを通じて行わせたりするためには、自分でビルドスクリプトを書く必要がある。しかし公式のドキュメントが古すぎて現行のCLIツールと挙動が一致せず途中で諦めた。Azureはサービスは悪くないのにドキュメントやライブラリが不親切極まりないのが厳しい。

SVGファイルは軽量なので容量は大したことはないが、一応CDNを通じて画像を配信している。だが、残念ながら愛用のCloudflareはMIMEを読まず、単純に拡張子でファイル形式を判定しているのでキャッシュはされないようだ。うーん、とりあえず拡張子を付加したファイルを配信しておこう。まぁそれは転送量が問題になった時に考えよう。そんな日がくるとは思えないけど…。

追記(2016/11/04):
「Azure Functionsで独自ドメインは使えないのか」とTwitterでつぶやいたら、MS社でAzure Functionsのプロダクトマネージャーをしている人から直接返信があった。ややわかりにくい場所にあるものの、独自ドメインの設定はちゃんと存在するらしい。UXが悪く最初は見つけづらいというのは製作者も認識しているようで、今後改善するとのことだ。素敵な企業だと思う。いつかこんなところで働けたらいいな。

何らかの疑問が技術的な内容だったりするときは、英語でツイートすると製作者が回答してくれる場合がある。つぶやきを拾ってもらえ、さらにちゃんとした回答までいただけるのは嬉しい。どうもありがとう。