顧自記

　Webページに数式を埋め込みたい場合、これまでにもいくつか手段があった。
　愚直にHTMLで書く、画像を埋め込む、MathMLを使うなど。しかし、HTMLなどほとんどの数式を書けないし、画像は面倒だし、MathMLはあまりに普及が遅く可読性が低い。

　そんなわけで、数式を表示したいならMathJaxを入れて全て解決させよう。
MathJax
GitHub - mathjax/MathJax: Beautiful math in all browsers

　やり方は公式ドキュメントにもあるし、日本語情報もザクザク出てくる。
Getting Started — MathJax 2.7 documentation
MathJaxの使い方（「黒木玄のウェブサイト」より）
MathJaxの使い方（「ギルバートハウス」より）
LaTeX のような web ページの数式 :: MathJax（「Yamamoto's Laboratory」より）


　MathJaxがなぜ最強かと言えば、入力形式として\(\TeX\)や\(\LaTeX\)、MathML、AsciiMathに対応しており、出力形式としてHTML+CSS三種、SVG（Scalable Vector Graphics）画像出力、ブラウザ実装のMathML出力に対応しているため。
　つまり、ページを作る側は簡単に数式を記述できるし、見る側では好きに数式のレンダリング方法を選択できる（数式を右クリック->Math Settings -> Math Rendererから）。

　しかも、導入が簡単。HTMLファイルのheadタグの間に、一行挿入するだけ。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>

　これまで、src属性に指定するjsファイルは、https://cdn.mathjax.org/mathjax/latest/MathJax.jsが通常であった。しかし、2017年4月30日をもって、サーバが閉鎖するため、URLを変更しておく必要があるため注意すること。
MathJax CDN shutting down on April 30, 2017. <br> Alternatives available.
　それに伴い、バージョン更新の際には手動でURLを変更する必要が生じている。

　ここで、?config=のあと（今回「TeX-AMS_CHTML」としている所）は以下のページを見て、自分に合ったものに設定する。
Combined Configurations — MathJax 2.7 documentation

　極簡単にいうと、アンダーバーの前が入力形式の設定、後が出力形式のデフォルト設定。
　入力形式のTexはそのまま、MathMLならMML、AsciiMathならAMが付く。TeXの後のAMSは、アメリカ数学学会の提供するパッケージを意味している。
AMSの数学記号 [物理のかぎしっぽ]
　出力も同様に、Common HTMLならCHTML、HTML+CSSならHTML、SVGはそのまま。これは閲覧者が任意に変更もできるので、v2.6以降で標準のCHTMLで良いと思う。

　入力形式の選択は好みなのだが、AsciiMathがずいぶん簡単に数式を表現できる。かなり難しい数式を書くとか、TeX以外では数式を書けないとか、そんな事情がある場合以外はAsciiMathで良さそう。
　例えばこんな行列を記述することを考える。
\[ \left[ \begin{array}{cc} a & b\\ c & d\\ \end{array} \right] \]
　TeXなら、こう書けばよい。

\left[
  \begin{array}{cc}
    a & b\\
    c & d\\
  \end{array}
\right]

　一方のAsciiMathだと、[[a,b],[c,d]]だけで済むらしい。pythonと違って入れ子が多重になりすぎることも無いので、便利だろう。
　それでも、マクロや表示の柔軟性、慣れなどでTeXの方が使いやすい場合もあろう。よって、好みか宗教で決めればよい。


　導入することで、ページの表示速度はどれほど遅くなるか、という話も述べておく。
　条件は、MathJax導入前と導入後。ページ内には数式なし。

計測1：　サイト表示スピード測定 | サーバレスポンス時間測定
　jsファイルをscriptタグでぺたぺたする前が45 ms at 17/4/20 18:59で、ぺたぺたした後が30 ms at 17/4/20 20:25。よって、MathJaxの導入により15 ms早くなった。

計測2： SRC速度測定 ページが重い原因を調べる
　MathJaxのjsファイル（https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML）は79。単位は不明。


　Xboxのブログパーツが893とか、謎のfacebookが約600とか。youtubeの埋め込みは142。

　これらの結果から、ページ内に数式が無い場合の悪影響は、無視できるレベルと考えられる。
　一方、ページ内に数式がある場合、レンダリングまでに人が分かる程度のラグが生じる場合がある。とはいえ、ページ全体はいったん表示されるし、閲覧に問題を生じるラグでは無いと思われる。


　最後に、いくつか数式の表示例を示しておく。元の入力書式が見たい場合、数式を右クリックしてShow Math Asを選べばよい。

コーシーの積分公式
\[ f(a)=\frac{1}{2\pi i} \oint_{\gamma} \frac{f(z)}{z-a}dz \]
ただし、 \( a,z \in \mathbb{C} \)

実関数\(f(x)\)の微分
\[ \frac{df}{dx} = \lim_{\Delta x \to 0} \frac{f(x+\Delta x)-f(x)}{\Delta x} \]

実ベクトルの微分
\[ \frac{\partial}{\partial\boldsymbol{x}}(\boldsymbol{x}^{\rm T}\boldsymbol{Ax}) = (\boldsymbol{A} + \boldsymbol{A}^{\rm T}) \boldsymbol{x} \]
ただし、\( \boldsymbol{x} \in \mathbb{R}^n, \boldsymbol{A} \in \mathrm{M}(n,n; \mathbb{R}) \)

シグモイド関数
\[ \varsigma_{a}(x) = \frac{1}{1+e^{-ax}} = \frac{\tanh(ax/2)+1}{2} \]

ド・モルガンの定理
\[ \lnot(p \land q) = \lnot p \lor \lnot q \]
\[ \lnot(p \lor q) = \lnot p \land \lnot q \]

命題
\[ \exists f \in \{ {\rm formula} \}, \ f = {\rm good\ example} \]
何か良い例は無いかな

　諦めていたものが、調べたらひょっこり出てきたので。

　AIMPは音楽プレイヤー、MiniLyricsは歌詞表示ソフト。MiniLyricsは再生音楽と同期して歌詞をスクロール表示できるのが良い。
　AIMP以外にも多々音楽プレイヤーはあるうえ、MiniLyricsは多くの代表的なソフトに対応している。よって、こだわりが無ければわざわざ面倒な作業をする必要も無い。
　ただ、ずっとAIMPを使っていた身としては変えたくも無い。でもAIMP3なんて、一年以上前に終わって4へ移行してるし、いい加減アップデートしておきたいし……。などという、頑固なのか優柔不断なのか分からない人向けの記事。

　不確定情報ではあるものの、双方最新版を入れておけば、多分余計な設定なしでもそれなりには動くはず。AIMP4を起動して、手動でMiniLyricsを起動すれば、きちんと歌詞の同期表示はできていた。
　ただ、ここで述べる設定を行うとAIMP4を起動するだけで、MiniLyricsも同時に立ち上がるようになる。そのほかに設定で得られる物は、プラグインとして認識されているという安心感くらいだろう。

設定方法

　肝心の設定方法は、なんと動画で紹介してくれている人がいる。



　これを丸ッとそのまま行えば、だいたい設定完了。一応ステップごとの日本語情報も残しておく。

　1, 2, 3: まず書かれているのは、AIMP4とMiniLyricsそれぞれのインストール。これは普通に行えばよい。インストール場所（フォルダパス）は覚えておくこと。ソフトの起動はまだ100年早い。勝手に起動したという場合には即座に終了して反省をすること。
　4: 次に、AIMPのインストール先フォルダにあるPluginsフォルダを開く。その中に、新規でgen_MiniLyricsフォルダを作成する。
　5: MiniLyricsのインストール先には、Player-Pluginsフォルダがあり、その中にgen_MiniLyrics.dllが存在する。これを先ほど作成した、gen_MiniLyricsフォルダにコピペする。
　6, 7: それから、gen_MiniLyricsフォルダにMLPlugin.iniファイルを作成する。ファイルの中身は以下のテキストデータ。

[MiniLyrics]
WorkingFolder=DirectoryPath

　ただし、DirectoryPathにはMiniLyricsのインストール先フォルダの絶対パスを入力する。=（イコール）の左右にはスペースを入れないこと。
（例）
WorkingFolder=C:\Program Files (x86)\MiniLyrics

　8: 保存の際には、iniファイルであってtxtファイルで無い事を確認すること。「メモ帳」を使う場合、保存ダイアログの「ファイルの種類」を「テキスト文書(*.txt)」としている場合に、拡張子がtxtに書き換えられる可能性がある。「すべてのファイル(*.*)」とするか、別のテキストエディタを用いることを推奨する。


　ここまでの作業を行うと、AIMPフォルダ -> Plugins -> gen_MiniLyricsという階層構造のフォルダ内に、gen_MiniLyrics.dllおよびMLPlugin.iniが存在している状態になる。これで設定完了、AMIPを起動してみる。

　動画ではMiniLyricsが自動で起動しているが、そうは問屋が卸さない！という人もいたはず。
　起動時にエラーメッセージが出てきて、「Can't find MiniLyrics.exe, Please reinstall MiniLyrics.」と言われた人は、本当にMiniLyricsのインストールがダメだったか、もしくはMLPlugin.iniファイルの内容が間違っている。間違いを探せ！ということである。

　一方、エラーも何も無い人は、おそらく設定は問題ないはず。設定からプラグインのアドオンタブを見てみると、MiniLyricsが現れているはず。



　表示されていないなら、gen_MiniLyrics.dllが読み込まれていないと考えられる。フォルダ名、dllファイルの存在を確認すべし。
　表示されていれば、一度MiniLyricsを手動で起動してやる。すると再生ソフトの選択ダイアログが表示される。



　AIMP3で選択してやれば、無事起動し、歌詞表示機能も使えるはず。そして、次回以降はAIMP起動と同時にMiniLyricsも起動する。


　以上、書き下したせいでステップとしては分かりづらいが、手順通りに行えば多くの場合、問題なくできるはず。それでもできない、という場合には当方でのサポート、質疑応答は出来かねるのでご了承を。

---

　ちなみに、AIMP4のスキンに「なんじゃこりゃ！？　使いづらい！　元に戻せ！！」と発狂した人はもうこのスキンを使うしかない。
Pandemic v1.71

　まんますぎて、ソフトはAIMP4なのに、タイトルバーの表示がAIMP3に見えるほど。プレイリストの表示が左に偏っているのが不満ではあるものの、他に選択肢が無い。妥協できるか、お試しあれ。

目次

1. HTML段落タグ付加スクリプト
2. 段落スタイルのCSS設定例
3. textarea内の改行コード検証

HTML段落タグ付加スクリプト

　ホームページを更新するときに地味に面倒なのが、HTMLタグの挿入。
　HTMLの基本は開始タグと終了タグでテキストを挟むもので、これが文章の構造や意味を示します。


　あまり意識してる人はいないかもしれませんが、日本語の文章をただひたすら書く場合でも、HTMLタグは付ける必要があります。
　言い換えると、タグで挟まれていない範囲に文章を書くべきでは無い。HTMLを使う意味が無くなってしまいますからね。

　リンクはaタブ、画像ならimgタグなんてのは嫌でも使いますが、普通の段落はpタグで挟んで明示するのが標準。
　例えばこんな感じ。

<p>
	段落その1の文章内容をつらつらと述べつつ無駄な長さの文となってしまった今日この頃。
</p>
<p>
	段落その二、にんにく、くじら、らっぱ、ぱんだ、だいこん
</p>

　これをHTMLファイルに書くことでこんな表示になります。

段落その1の文章内容をつらつらと述べつつ無駄な長さの文となってしまった今日この頃。

段落その二、にんにく、くじら、らっぱ、ぱんだ、だいこん

　きちんとした文章を書く上では、段落をタグで定義するというのは分かりやすいです。ネットの文章の書き方は改行を入れまくるのが普通ですが、これは本来の文章の書き方では無いですからね。

　とはいえ、毎度毎度段落用のタグを入れるのは非常に面倒。ちゃんとした日本語の文章を多く書いているなら尚更です。


　そんなときに！　このツール！

段落つき文書のHTML化

　日本語文章にHTMLタグを勝手につけてくれる代物です。
　打ち込んだ日本語文章の段落を判定して、pタグをつけてくれます。ついでに、段落途中での改行にはbrタグ（改行タグ）を入れます。

　使い方は簡単、上のテキストボックスに日本語の文章を入れるだけ。字下げや空行を段落区切りと判定して、pタグで囲みます。字下げ文字には半角スペース、全角スペース、タブ文字を含めました。
　変換後、字下げや空行は全て消去する仕様です。行間や字下げはスタイルシートで定義すれば済む話ですからね。念のため、そのスタイルの設定方法を示します。

段落スタイルのCSS設定例

一例（実行結果確認および設定調整は各自で行ってください）：

p {
	text-indent: 1em;
	line-height: 150%;
	padding-left: 50px;
	margin-top: 10px;
	margin-bottom: 20px;
}

　字下げについては、text-indentプロパティが用意されています。1emを指定することで、1文字分のインデントを入れられます。
参考：em単位 - 値の単位と記述方法 - スタイルシート入門
　全ての行について、行間を調整したいのであればline-heightプロパティを使ってください。
　一方で、段落と段落の間の間隔は、marginやpaddingの調整です。上下と同時に、左側のスペースを設定することでテキスト全体のインデントも指定できます。

　書くまでも無いとは思いますが、各設定については好みの物を皆さん自信で調整し、決定してください。
　また、段落ごとに設定を変えたいのであれば、pタグの中にstyle属性を指定し、その中でstyleを変更してください。
例: <p style="padding-left:15px;">段落の中身ー！</p>


　ただし、例えばインデントが行ごとに異なってくる、空行が意味を持っている、などの場合にはpタグでは無くpre タグを用いるべきです。
　つまり、がむしゃらにpタグを用いるのではなく、必要に応じて適切な要素を用いることが大切です。それが、本来のHTMLの使い方なのです。

textarea内の改行コード検証

　最後に、段落判定のために調べたテキストエリア内の改行コードの仕様について述べます。
　手元の書籍によれば、

　HTML5仕様では、ブラウザーは、テキストエリア内に改行が入っていたら、その改行コードをCRLFに統一することとしています。したがって、HTMLファイルの改行コードがCRだろうがLFだろうが、フォームがサブミットされるとき、テキストエリアの値中の開業は、すべてCRLFに統一されて、サーバーに送信されることになります。近年のブラウザーは、いずれも、これに対応しています。

出典：羽田野太巳, 徹底解説 HTML5 マークアップガイドブック, 株式会社 秀和システム, 第1版, p.476, 2010.

　つまり、単純に考えればCRLFを判定すれば良い。しかし、そう簡単ではないのは、「フォームがサブミットされるとき」という文。
　ああ。テキストエリア内の文章をそのまま拾ってきた場合は、ブラウザ依存じゃないか、と。

　しかし、先に結論を述べると、テキストエリア内の改行をjavascriptで調べたいのであれば、どうあっても'\n'との一致を見れば良い。改行コードはCRに統一されているので、文字数とかブラウザ仕様の意識は不要。


　調べた限り、昔は全く統一されていなかった、というものが出てきます。
文字コード/改行コード について[Apache/CGI/Perl]

Windowsでの改行コード - Windows系OS | 【OKWAVE】

　特に後者の掲示板では、textareaから拾ってきた文章の改行コードが、ブラウザによって異なることが示されています。逆にデータを放り込む場合は'\n'にしておけばうまくブラウザが解釈してくれるらしい。

　改行を拾ってくる場合の仕様の違いの名残は、こんなページでも見られます。

改行の研究

　文字数自体が違い、ASCIIコードに差異がでる。テキストデータにしろバイナリデータにしろ、改行は別物になります。これだと困るわけで、例えばこんな関数が必要になってくるわけです。
JavaScript 改行コード取得関数


　そこで今回、Windows8.1での「Opera 12.18」、「Opera 35.0」、「Internet Explorer 11」、「Google Chrome 48」、「Firefox 44」で改行の研究の文字数とASCIIコードを確かめました。
　結果は、全て文字数21、改行コードは%0Aというもの。
　ページの内容を見る限り、昔は22文字でCRLFだったようなので、ブラウザの仕様が統一されてCRになった、と考えるのが妥当と結論付けました。

　そんなわけで、テキストそのまま使う場合も、コード変換して考える場合も、とにかくCRだけ考えれば良いです。
　他方で検証してませんが、サブミットされれば送られるデータはCRLFになるようなので、そこの混同を無きよう……。

---

こんなもん、クリックしないでいいですよ。
人気ブログランキングへ

FC2 Blog Ranking