くろきげんのライブドアブログ

MathJaxを無料ブログで使えることを証明するためにライブドアブログを使い始めました。ライブドアブログで数式を書きたい人は MathJax を使ってみて下さい。

使い始めてわかったのはこのライブドアブログがかなり使い易いこと。ここであれば MathJax で数式を書くことが苦になりません。 MathJax の使い方については「MathJaxの使い方」を見て下さい。
あと「かけ算の式の順序にこだわってバツを付ける教え方は止めるべきである」も読んでもらえるとうれしいです。

東北大学数学教室関係者は東北大学大学院理学研究科 数学専攻臨時ウェブページも見て下さい。
このブログにおける東北大学の大震災被害状況に関する記事は私個人の責任で書いています。問い合わせは私個人宛にして下さい。コメントで質問するのが最も簡単な方法だと思います。

MathJax

Question2Answer で MathJax をリアルタイムプレビュー

Question2Answer の MathJax 対応をやり直し、質問や回答を HTML の直打ちで入力できるようにし、jQuery でリアルタイムプレビューできるようにしてみました。必要なファイルをまとめた ZIP ファイルが次の場所にあります。

http://genkuroki.web.fc2.com/#q2a-20110316 → http://genkuroki.web.fc2.com/Q2A-MathJax.zip

README-j.txt より

Question2Answer の MathJax 対応

このアーカイブに含まれるファイルに著作権は主張しない。
道端に落ちている石ころと同じ扱いでかまわない。
それらのファイルの内容は無保証である。
内容を確認して自己責任で使って欲しい。

インストールの仕方

Question2Answer のバージョンは 1.3.1 であると仮定し、
Q2A をインストールしたフォルダは /htdocs/qa であると仮定する。

1. qa-theme/DEFAULTS/qa-theme.php を /htdocs/qa/qa-theme/DEFAULTS/qa-theme.php 
にコピーすると

(1) LaTeX 方式で数式を書くとMathJaxできれいな数式に変換されるようになり、
(2) Basic editor でリアルタイムプレビューが使えるようになる。

リアルタイムプレビューがうざいならば qa-theme.php から関連の記述を削除する。
そのためには jquery 関係と previewArea 関係の記述を消せば良い。

2. qa-theme/DEFAULTS/qa-styles.css を /htdocs/qa/qa-theme/DEFAULTS/qa-styles.css
に上書きすると、少しだけ質問や回答の表示の幅が大きくなる。質問や回答を入力
するテキストエリアの幅も広がる。

3. ディレクトリ qa-plugin/html-editor/ を /htdocs/qa/qa-plugin/html-editor/ 
にコピーすると、新しいエディター HTML editor を使えるようになる。
これは本質的に Basic editor と同じもの。
余計な変換をせずに HTML を直接入力できるようにしただけ。
qa_html_sanitize してあるので危ないタグは削除される。

上のリアルタイムプレビューは打ち込んだ内容を単純に HTML で表示しているだけ
なので HTML editor を使わないとプレビューと実際の投稿結果が違った結果に
なってしまう。

HTMLに不慣れなユーザーのために「段落の最初に <p> を入れて欲しい」というような
コメントを表示するようにしておいた方が親切かもしれない。 <p> だけがあれば
段落の終わりの </p> は自動的に挿入される。

本家 StackOverflow は (MathOverflow も) はMarkdown記法でQ&Aを書くようになっています。そのためには WMD editor のようなものを使わないといけません。

Q2A は WMD editor ではなく CKeditor に対応しています。CKeditor のデモを見ると相当にすごい感じなのですが MathJax 対応でもないし、 MathJax 対応はおそらく簡単ではありません。

WMD の後継としてはリアルタイムプレビューを最初から装備している jquery-markedit が良さそうだと思いました。しかしこれを Q2A に組み込むのも簡単ではありません。 editor の方の対応は簡単ですが、 viewer (記事を表示するための HTML を吐く仕組み) の方が難しい。 WMD editor は JawaScript で整形してくれるのですが、Q2A は PHP で記事を整形する仕組みになっています。整形も JawaScript でやってしまうという手はありますが、色々面倒になります。

それにMarkdown記法では \ がエスケープに使われてしまうので LaTeX と相性が悪い。 (MathOverflow でもそうなのですが。)

色々試みた結果「HTML 直接で書くようにするのが単純で良いだろう」ということにしてしまいました。

MathJax をライブドアブログで使う方法

次のコードをマイページ→ブログ設定→デザイン→デザインのカスタマイズと移動して、トップページ、個別記事ページ、カテゴリーアーカイブ、月別アーカイブの </head> の行の直前 (実際にはヘッダ内ならどこでも良い) に次のコードを貼り付ける。

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\\(","\\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

さらにHTMLの直書きを好むならば、ブログ設定→投稿設定と移動して、投稿フォームの形式=シンプルエディタとし、投稿フォームのチェックをすべて外す (改行を反映させない、勝手にリンクを張らない、などなど)。

たったこれだけです。たったこれだけでブラウザ側の設定無しに LaTeX 方式の入力で数式を表示できるようになります。

詳しくは「MathJaxの使い方」を見て下さい。

StackOverflow のクローン Question2Answer に MathJax を組み込む試み

ひとつ前の記事で PHP と MySQL だけで使える StackOverflow のようなフリーソフトを探して、MathJax を使えるようにすれば MathOverflow のようなサイトを自分で作れるんじゃないかという話をしたつもりです。 (はっきりそのように書いたかどうかはもう忘れてしまいましたが。)

実際に Qwench を試してみましたが、いまいちでした。

今度は Question2Answer (Q2A) を試してみました。こちらの方が断然良さそうです。

Qwench の良い点は最初からリアルタイムプレビューを備えていることですが、作り方が雑な感じでいじりにくい。

それに対して Q2A はリアルタイムプレビューの機能を備えていない点がかなり不満なのですが、作り方がより洗練されており、いじりやすい構造になっています。しかも複数の言語 (日本語を含む) にすでに対応済みです。サンプルサイトとして CMS BoxCMS Box Q&A が非常に参考になります。

さて問題は MathJax 対応です。 Q2A には HTML のヘッダに挿入するコードを管理者メニューから簡単に設定できます。そこに MathJax.js を読み込むコードを入れておけば、各ページで MathJax で数式が表示されるようになります。これは簡単。

問題は記事や回答の編集です。 LaTeX のコードは書き間違えることが多いのでプレビュー機能の充実は必要な条件です。

現在の Q2A では CKEditor を採用しています。これを MathJax 対応にすればそれでおしまいです。しかし検索した限りにおいて、MathJax 対応のプラグインの類はまだ作成されていないようです。 (おそらく待っていれば誰かが作ってくれるでしょう。)

まずデフォルトではソースとプレビューのボタンが表示されないようになっているので、 qa-plugin/wysiwyg-editor/qa-wysiwyg-editor.php の 'Bold','Italic' の直前に 'Source','Preview', を追加してみました。これで WYSIWYG ではなく、HTML のソースを直接編集して、プレビューできるようになりました。

そのままプレビューボタンを押しても MathJax 用のコードが含まれていないプレビュー画面が表示されてしまいます。当然数式は表示されない。

この livedoor blog レベルのプレビューができれば個人的に十分だと思うのですが、そのようなカスタマイズは可能なんですかね? 個人的にこの livedoor blog は相当によくできていると思います。 (MathJax 対応も非常に易しいし。)

よくわからないので、この問題を解決する最も汚い方法を試してみました。 ckeditor.js を直接編集する! preview や /head のようなキーワードを検索してそれらしきところを見付けてそこに MathJax 用のコードを挿入してしまう。作業はすぐに終わります。

まあとにかく、一部とても汚いことをやってはいますが、たったこれだけの作業で MathOverflow もどきのサイトが作れそうです。誰かやりませんかね?

StackOverflow のクローン Qwench を MathJax 対応にする試み

MathOverflow は超有名なQ&Aサイト StackOverflow の数学版です。 MathOverflow は MathJax を採用しており、数式を気軽に書くことができます。

MathOverflow に似たサイトを作るためには、StackOverflow のシステムのクローンを見付けて、 MathJax 対応にすれば良いわけです。

StackOverflow クローンはいろいろたくさんあるようですが、 PHP と MySQL だけで使える Qwench をローカルにインストールして試してみました。

まず、MathJax 以前の問題としてコメントの日本語が化けまくる。 sanitize() に問題があるようです。 libraries/shared.php の sanitize() の定義中の comment の項目をいじればコメントの文字化けは回避できます。

Qwench にもリアルタイムプレビューが装備されています。やりたいことはLaTeXコマンドによる数式混じりの文章をリアルタイムでプレビューしながら質問や解答を投稿できるようにすることです。

MathJax を読み込む HTML のヘッダーは view/header.php に書き込んでおけばよいようです。

リアルタイムプレビューでも MathJax が適用されるようにするためには js/wmd.js の pushPreviewHtml(text); の次の行に MathJax.Hub.Queue(["Typeset",MathJax.Hub,"wmd-preview"]); を挿入すればよいようです。

しかし、上で文字化けを回避できたコメントの投稿時に MathJax が自動的に適用されるようにする方法はわかりませんでした。コメント投稿のあとにブラウザでリロードすれば MathJax が適用され数式が表示されますが、コメントを投稿した直後に表示されるコメントは数式に変換されません。

あとQ&Aの投稿時にバックスラッシュを入れるためには二重に入れてエスケープしてやらないといけません。この辺色々問題がありそうです。

他にもたくさん問題がありそうなのですが、この辺で止めにしました。

見た目の感じでは Qwench よりも Question2Answer の方が元祖に近い感じのようです。あ、日本語でQ2A使っている人がいるようですね。

XAMPP を入れてローカルに Qwench をインストールして試してみた後に「Q&Aシステム Qwenchを入れてみたけど・・・」を見ると笑える。

ちなみに XAMPP は現在最新版の 1.7.4 を 64bit Windows に入れるとはまりますが、 1.7.3 を入れると簡単でした。

livedoor blog で MathJax を使う方法

2011年3月10日追記:

自前でウェブスペースを準備して MathJax をアップロードする必要が無くなりました!

詳しくは http://genkuroki.web.fc2.com/ を見て下さい。

以下の説明はすでに古くなってしまっています。


1. どこかにウェブスペースを作る。

仮に http://domain/dir/ 以下が使えるようになったとする。

2. そこに MathJax をインストールする。

http://domain/dir/MathJax/ 以下に MathJax がインストールされたと仮定する。

このような使い方をできるウェブスペースの確保が最大の難関だと思う。

3. カスタマイズする。

適当にデザインを選び「デザインのカスタマイズ」で </head> の直前に以下のコードを挿入する。

<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />
<script src="http://domain/dir/MathJax/MathJax.js">
  MathJax.Hub.Config({
    imageFont: null,     extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js",
                 "TeX/noErrors.js","TeX/noUndefined.js"],     jax: ["input/TeX","output/HTML-CSS"],     tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},   }); </script>

投稿設定で投稿フォームをシンプルエディターに設定し、HTMLタグの直接入力で記事を書くようにする。

4. 使ってみる。

$ $\( \)$$ $$\[ \] で LaTeX で書かれた数式を囲めば表示されるときに自動的に数式に変換される。

例:方程式 \(y^2=x^3+ax+b\) が定める曲線を楕円曲線と呼ぶ。

数式に変換されない人は CromePlus を使ってみたり、 STIX フォント を OS にインストールしてみる。

5. リンク集

以下のサイトやブログで MathJax を使っている。

個人的には FC2 のブログよりもこちらの livedoor のブログの方が使い易いと思った。

6. 雑感

MathJax のおかげで ウェブやメール (by GmailTeX) で気軽に数式が使える環境が整いました。 美しい内容を持つ数式をいつでもどこでも美しく書けるというのは本当にうれしい!!!

ブラウザとウェブが誕生したのは1990年頃です。 コンピューターネットワークの歴史はもっと古いです。 私がずっと不満に思って来たことは 「コンピューターネットワーク上でのコミュニケーションから数式の扱いが阻害されている」 ということでした。 メールでもウェブでも画像、音楽、動画を貼り付けることは誰にでも簡単にできます。 しかし、数式を書くことはかなり面倒な作業になります。 数式混じりの文章を配布する最も簡単な方法は LaTeX で書いて PDF ファイルに変換して配布することでした。 しかし PDF ファイルにしてしまうとウェブの様々な機能が使えなくなってしまいます。 たとえばメールや掲示板やブログなどで行なわれているような気軽なコミュニケーションは不可能になってしまいます。

しかし、ついに MathJax の登場によって ウェブやメールで数式を使った気軽なコミュニケーションが可能になりました。 特にウェブを使った開かれた情報交換に数式を自由に使える社会的メリットは大きいでしょう。 我々の生活がこんなに豊かなのは技術革新のおかげです。 (ここで技術革新はいわゆる科学技術だけではなく、仕事の効率を上げたり、 今までできなかったことを可能にするあらゆる工夫を意味している。) 原始時代から技術革新は情報交換によって加速されたことがよく知られています。 インターネット上で数式を使ったコミュニケーションが盛んになることは あらゆる分野での技術革新を加速することになるでしょう。

数式をウェブ上で気軽にがんがん使う人が増えることを祈っています。 (そうなると楽しい!)

livedoor プロフィール
記事検索
カテゴリ別アーカイブ
QRコード
QRコード
  • ライブドアブログ