Discord で再編集可能な数式を記述する

最近は技術系 Web サービスや SNS において、TeX 式が記述できることが多くなってきて嬉しい。

しかしながら Discord では対応していないのでなんとかしたい。

あれこれ試してなんとかなりそうな方法が3つ。

- Web ブラウザ拡張を使うやり方
- texclip サービスを使うやり方
- diagrams.net を使うやり方

# Web ブラウザ拡張を使うやり方

以下の拡張があります。

「LaTeX in Discord」
https://chrome.google.com/webstore/detail/latex-in-discord/bejfcabcmhackmcaaclgiocgfpmpnaml


これを使うと、Discord 中に `$$f\left( x\right) =\sqrt {ax^{2}+b}$$` と記述したものが以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ae9ca35d-eaea-47b1-31d8-2f8cebb43bc9.png)

当然ながら、拡張が有効になってないと見えません。例えば Discord アプリだと以下のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/47464915-6472-915c-9787-cb361781f1b1.png)

なお、拡張としてこちらもありましたが、試してみても動きませんでした。
「Discord TeX」
https://chrome.google.com/webstore/detail/discord-tex/jiengimpehefbjodikggbepdbeljegga/related?hl=ja



問題点 

- PC版Chrome ブラウザが必要。Discord アプリや、Android上のWebブラウザなどでは使えない。
- インストールしていないと数式が見えない
- 複雑な数式だとクラッシュしてしまう

最後の問題は、` $$f\left( x\right) =\sqrt { f(x,y)s_{i}}$$ ` 
$$f\left( x\right) =\sqrt { f(x,y)s_{i}}$$


これが記述できる数式の限界でした。

ちょっと実用にはならない感じ。


# texclip サービスを使うやり方

「Texの数式を画像として取得できるWebサービス」
https://qiita.com/nszknao/items/8aac0f2ef4d86249618b

で紹介された texclip を使ってみました。

`{\sum ^{n}_{i=1}f\left( x_{i},y_{i}\right) s_{i}}`

$$ \sum ^{n}_{i=1}f(x_i,y_i)s_i $$

これを texclip で入力します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/087c5ae6-9745-40d9-e217-b3c94e38eade.png)


Discord のために、「White on Black」のチェックをつけておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/016adf11-1773-1b2e-1ab2-155d82807dca.png)

できた画像を保存せずに、画像アドレスをコピーして Discord に貼り付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ec703109-2d6f-428e-43d0-ddec93c2dd0a.png)

コピーしたURLはこの通りです。

```
https://texclip.marutank.net/render.php/texclip20221226184328.png?s=%7B%5Csum%20%5E%7Bn%7D_%7Bi%3D1%7Df%5Cleft(%20x_%7Bi%7D%2Cy_%7Bi%7D%5Cright)%20s_%7Bi%7D%7D&f=c&r=300&m=p&b=f&k=t
```

再編集するには、URLをちょっと変えて、以下のようにします。

```
https://texclip.marutank.net/#s=%7B%5Csum%20%5E%7Bn%7D_%7Bi%3D1%7Df%5Cleft(%20x_%7Bi%7D%2Cy_%7Bi%7D%5Cright)%20s_%7Bi%7D%7D&f=c&r=300&m=p&b=f&k=t
```

変更したURLを開くと、texclip で再度編集できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/d88bdcbb-cb15-d355-c8f1-f5054ac63112.png)





問題点 

- このやりかたは画像参照が多ければ texclip サーバに負荷がかかる?
- Discord でキャッシュを持ってくれているのである程度軽減?
- 複雑な数式はGETパラメータが長くなる Discord の投稿は2000文字までなので注意
- 数式と文章を一緒に投稿するとURLが丸見えになり、数式が一番下になる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/34542d6c-afac-6f48-2b75-0865911cb194.png)

なので数式と文章は別にするのがいいかな。

# diagrams.net を使うやり方

「diagrams.net を使って Qiita / Discord / 他に再編集可能な図を貼り付ける」
https://qiita.com/nanbuwks/items/6bd2af7f2607d2c7dea8

では diagrams のデータを埋め込んだ png ファイルを使うやりかたを紹介しましたが、同様の方法です。

diagrams.net では 数式を使えます。
「拡張」-「数式組版」をONにしておいたうえで、
書き方は   `$$ ~ $$` の記述で数式をブロックで配置する方法、 `` `  ~   ` ``  や ` \( ~ \) `  の記述で数式をインラインで配置する方法があります。

diagrams.net で以下のように記述し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/dd2a9ed4-e3f2-5d1f-5aaf-ee6fe63335dc.png)
できた数式を

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/a0326da2-de35-fb5c-a9ce-2c125a558c91.png)

png にエクスポートして貼り付けます。このファイルはdiagrams.net でファイルインポートして数式が再編集可能になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/38dc672a-aa93-1639-c6c7-1939e9e54efe.png)

ファイル経由のエクスポート・インポートがめんどくさいですが、図といっしょに貼り付けることができるのがメリットです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/134dadf1-3cf2-bfd1-bd6d-17ccb579f33f.png)

しかしながら、場合によってはズレが出ました。ちょっとコツがいる感じ?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/af3d0813-8521-afb4-c5a4-f921d10d2547.png)


# 宣伝

毎週月曜日夜に、相対性理論の読書会をやっています。今回の記事はこの読書会に活かす技術として調べたものです。
「「一般相対性理論を一歩一歩数式で理解する」 読書会 第12回」
https://akbrobot.connpass.com/event/271065/
興味のある方、どうぞお気軽にご参加ください。