ブラウザLaTeX数式レンダリングアプリTeXportLabの使い方

　LaTeX数式をレンダリングできるWebアプリ「TeXportLab」を作成しました。数式をSVG/PNGとして保存したり、クリップボードにコピーしたりできるWebアプリはすでにありますが、機能ごとに別サイトを使い分ける場面もありました。そこで、普段よく使う機能をひとつにまとめたツールとして自分でアプリを作成しました。この記事では、TeXportLabの基本的な使い方を紹介します。

こんにちは。wat(@watlablog)です。Webアプリ制作の練習でLaTeX数式レンダリングアプリTeXportLabをつくったので使い方を説明します！

　TeXportLabのURLはこちらです。是非皆さんも使ってみてください。使い方はこのページで説明します。
・https://texportlab.com/

　要望やバグ報告は以下のGitHub、もしくはXのDM、この記事のコメント欄等のいずれかでお願いします。
・https://github.com/watlablog/texport-lab

目次（項目クリックでジャンプできます）

TeXportLabをつくったモチベーション

ブラウザでLaTeX形式の式を書く（MathJaxを使う）

　WATLABブログでは信号処理カテゴリや工学カテゴリ、AIカテゴリで頻繁に数式を書きます。また自分の所属している会社の業務でも他の人に処理のアルゴリズムを説明するとき用等に数式を書きます。数式はテキストボックスに書いたり、MS Office製品のデフォルト数式処理機能で書くこともできます。しかし、やはりLaTeX形式の書式が一番カッコいい！
・LaTeX：https://ja.wikipedia.org/wiki/LaTeX

　ブログはWeb上で書いているのでLaTeX風の数式をブラウザで表示するためのJavaScriptライブラリであるMathJaxを使うと便利です。
・MathJax：https://ja.wikipedia.org/wiki/MathJax

　個人開発と職場で環境が異なるのでPCインストール系のツールは敬遠したく、すでに使っているMathJaxを利用するのが個人的最適解です。

自分用にカスタマイズ（イイとこ取り）されたツールとする

　実はMathJaX（またはKaTeX）でつくられたブラウザ用の数式処理アプリは世界中でかなりの数存在します。自分もそれらを使っていましたが、いつも使っている便利なサイトがいつの間にかなくなってしまっていました。また、その場で数式をレンダリングするだけでなく、画像出力機能やクリップボードへのコピー機能も多用していました。

　しかしあのサイトは画像出力はあるけど、クリップボードコピーはない…。あっちはクリップボードコピー機能はあるけど広告（職場で開きたく無い系）がたくさんある…。縦ディスプレイをよく使うけど、こっちは画面サイズ変更時にレイアウトが使いにくい…。と、自分の理想とはちょっと離れたものしか見つかりませんでした。

　ということで、自分のためにイイとこ取りされたWebアプリを自分でつくってしまえばすべて解決されるというのが一番のモチベーションです。

TeXportLabの使い方

数式入力とレンダリング

　TeXportLabの使い方は簡単です。 LaTeX Inputの欄にLaTeX数式コードを入力すると、右側の Preview欄に数式がリアルタイムレンダリングされます。入力毎にボタンを押す必要はありません。

　環境によっては縦長表示になる場合があります。その際は LaTeX Inputと Preview欄は上下に並びます。

数式コードのコピー

　 Copy LaTeXボタンをクリックすると入力された数式コードがコピーされます。レンダリング結果を確認してからブログ等に貼り付けたい人には便利だと思います。

サンプルコード

　 Samplesボタンをクリックすると、色々な数式のコードをレンダリング結果を確認しつつ参照することができます。LaTeX数式の書き方に詳しくなくてもサンプルから選んで小修正することでストレスなく記述を続けることができます。

特に \begin〜 \end系っていつも忘れて調べているので Aligned項目のサンプルは多用すると思います（自分は）。

ギリシャ文字のサンプル

　 Greekボタンはギリシャ文字のサンプルです。これも忘れがちなのでたまに見たくなります（自分は）。

文字装飾ショートカットボタン

　入力欄で文字を選択（ハイライト）し、上部にあるボタンをクリックすることで文字装飾ができるようにしてみました。ベクトルや行列の太字化や斜体キャンセル等に便利です。これは文字で説明しにくいので動画にしてみました。

　最後の <>はHTMLコードのスタイルラッパーです。HTMLタグでこのような処理をしてあげれば長い数式をブログに貼るときに自動的にスクロールバーが表示されます。主にブログを書く自分用。
　↓こんな感じの長い数式を横にスクロールできるようにさせる処理です。

\[ f(t) = \sum_{n=-\infty}^{\infty}c_n e^{i n \omega_0 t} = \sum_{n=-\infty}^{\infty} \left( \frac{1}{T}\int_{-T/2}^{T/2} f(\tau)e^{-i n \omega_0 \tau}\,d\tau \right) e^{i n \omega_0 t} = \frac{1}{T} \sum_{n=-\infty}^{\infty} \int_{-T/2}^{T/2} f(\tau)e^{i n \omega_0 (t-\tau)}\,d\tau = \int_{-T/2}^{T/2} f(\tau) \left[ \frac{1}{T} \sum_{n=-\infty}^{\infty} e^{i n \omega_0 (t-\tau)} \right]d\tau = \int_{-T/2}^{T/2} f(\tau)\delta_T(t-\tau)\,d\tau \]

数式画像のクリップボードコピー

　 Copy PNGボタンでクリップボードにレンダリング後の数式をコピーできます。画像出力でダウンロードフォルダにファイルを増やしたく無い人に最適です。

　クリップボードにコピーした数式画像は .pngとして扱われ、 Ctrl + Vでペーストできるところならどこでも貼り付けられます。解像度を維持できるので綺麗な数式を貼り付けられます（地味にこれが欲しかった）。XやSlackにも貼り付けられるので是非使ってみてください。

Xでみんなと数学しましょう！

PNG画像とSVG画像の保存

　 PNGボタンで .png画像、 SVGボタンで .svg画像がダウンロードフォルダに保存されます。SVG（Scalable Vector Graphics）はベクター画像なので、サイズ変更をしてもぼやけません。

サイズ変更

　 1x、 2x、 4xのボタンをクリックすると数式のサイズを変更できます（デフォルトは 2x）。用途に応じて使い分けてください。

フォント色と背景色の変更

　 fontと backgroundの色パレットからフォント色と背景色を変更できます。カラーバーで色種類を選択してからマウスでグラデーション上の一点をクリックすることで反映されます。また、RGB値を直接入力しても反映されます。

色入力形式の変更

　RGB欄をクリックすることで色の入力形式を変更できます。RGB（赤, 緑, 青：0-255）以外にもHSL（色相：Hue：0-360, 彩度：Saturation：0-100%, 明度：Lightness：0-100%）、HEX（RGB値の16進数版）を選択できます。

保存画像への背景色適用ON/OFF

　 Apply background color to outputにチェックをつけると保存された画像に背景色が適用されます。デフォルトは未チェックです。チェックが入っていないと背景色は単なるアプリ上の確認用で、透過背景が適用されます。

まとめ

　この記事ではWATLABで自作したTeXportLabというWebアプリについて、主に使い方を紹介しました。このアプリはインストール不要のブラウザのみで動作するMathJaxによるLaTeX数式処理アプリです。様々な環境で使いやすくするための工夫を色々してみましたので、是非使ってみてください。

　ちなみにTeXportLabは、TeX形式の数式をeXportする機能を持ったWATLABブランドのアプリ、という意味で名付けています。読み方はテフポートラボです。

　アプリの要望やバグ報告はいつでも受け付けています。お気軽にこのブログのコメントやGitHub、Xまでお問い合わせください。

自分用にピッタリくるツールを用意すると気持ちが良い！
Xでも関連情報をつぶやいているので、wat(@watlablog)のフォローお待ちしています！

ブラウザLaTeX数式レンダリングアプリTeXportLabの使い方