解決済み

KaTexの実装についての質問です。数学に関するWebサイトを制作している高校生なのですが、数式表示のためにヘッダ部分に添付画像のように記述していますが、これではjavascriptがブロックされたときに数式が正しく表示されません。

当方で試してみたところ、『高校数学の美しい物語』はjsを無効にしていても数式が組まれるようです。差し支えなければどのように実装しているのかわかる方がいらっしゃいましたら教えていただけますでしょうか。

ベストアンサー

ベストアンサー

こんにちは、高校数学の美しい物語のWEB開発者です。


KaTeXをサイトで利用するためには、KaTeXパッケージを読み込む必要があります。


以下、ざっくりとしたイメージとして捉えてください。

KaTeXがブラウザで表示されるまでは2つの過程があります。

過程1: KaTeXの文法をHTMLに変換する

過程2: KaTeXのフォント・CSSを読み込む

→表示される


JavaScriptの仕事は過程1です。過程2は関係ありません。


そこでまずは JavaScript を動作させ、過程1を達成したいと思います。


その方法には大きく分けて二種類あります。

①ブラウザで読み込む( https://katex.org/docs/browser.html

②Node.js サーバーで読み込む( https://katex.org/docs/node.html


質問者さんが現在実装されている方法は①です。

ブラウザからJavaScriptを読みこんで、過程1を実行しています。

この場合、ブラウザがJavaScriptを無効にしていると数式は読み込まれません。


[質問者さんの場合]

サーバーがKaTeXの数式文法を含んだHTMLをブラウザに送信する

ブラウザがKaTeXのJavaScript,CSS,フォントを読み込む

ブラウザがKaTeXを解釈してHTMLを書き換える

表示される


一方、②の場合、ブラウザではなくサーバーで数式のレンダリングが完了しているため、ブラウザがJavaScriptを無効にしていても読み込むことができます。


[高校数学の美しい物語の場合]

サーバー(Node.js)がKaTeXを解釈して、KaTeXの数式文法を解釈してHTMLに変換し、そのHTMLをブラウザに送信する

ブラウザがKaTeXのCSS,フォントを読み込む

表示される


イメージとしては、JavaScriptを無効にしていてもただのHTMLファイルやCSSファイルは何ら不都合なく読み込めるのと同じ原理です。ブラウザはKaTeXの文法を解釈していないのです。ですから、あらかじめフォントやCSSを配置しておけば数式が表示されるという原理になっています。


方法②をとれるのであれば、そうするのが一番手っ取り早いでしょう。


現実のところ、現在のWEBサイトの多くはJavaScriptを利用して動いています。今後もその時代の流れが止まることはまずあり得ません。


ですので、JavaScriptを無効にしていると正常に閲覧できないWEBサイトというのは、実は多数あります。学びTimesもJavaScriptベースのプログラムで書かれています。


このようなご時世でJavaScriptを「あえて」無効にしているユーザーには「それなりの理由」があると考える方が自然ですので、彼らへの数式表示をどこまで頑張ってサポートするかというのは一つ考えどころですね。


質問者からのお礼コメント

質問者からのお礼コメント

開発者様直々に回答いただき本当にありがとうございます。


github pages で作っており、またサーバ関連は疎いのでとりあえず現行のままでいこうと思います。

サイトを閲覧した友人に「googleで閲覧すると数式がちゃんと表示されないことがある」と言われたので js がブロックされているのかと疑ったのですが、後日自分の環境で試してみたら「初回表示時はうまく変換されず、リロードするとうまくいく」というケースだったのでjsとは別の問題のようでした。単なる勘違いの質問にお手数をかけてしまい失礼しました。


まだまだ未熟ですが、貴サイトのようなホームページを目指して精進させていただきます。

https://mtm9-math.github.io

そのほかの回答(0件)

関連する質問

もっとみる