カテゴリー「パソコン・インターネット」の23件の記事

2019年12月 5日 (木)

ディラック定数の表記 \(\hbar\) vs. \(\hslash\)

プランク定数を \(2\pi\) で割ったものはディラック定数と言うそうですが、そのディラック定数の記号に何か違和感を覚えていました。私の記憶ではディラック定数は「\(\hslash\)」なのですが、インターネットで見かけるのは「\(\hbar\)」ばかり。2つを良く見て下さい。横棒が微妙に違ます。記憶が間違っているのかと、幾つか本を調べてみたら以下のようになっていました。発行された年代によって傾向が有るような気もするのですが、未検証です。

  • \(\hbar\)
    • 量子力学(ランダウ・リフシッツ小教程)
    • 場の量子論(Umezawa)
    • ゲージ場の量子論入門(近藤慶一)
  • \(\hslash\)
    • 量子力学演習(コンスタンチネスキュ・マギアリ)
    • 場の量子論(中西襄)
    • 量子電磁力学(横山寛一)
    • 相対論的量子力学(西島和彦)

インターネットで \(\hbar\) が多いのは、ディラック定数は「えっちばー」と言われることも有るので hbar である \(\hbar\) になっているのかなぁと思っています。

2019年9月29日 (日)

MathJax がバージョンアップしたけれど、当ブログでは使えない

MathJax のページの NEWS ではアナウンスされていませんが、バージョン V3.0.0 が公開されています。下記に説明が有ります。

  • Getting Started
  • MathJax Documentation
  • この何日かは英語と格闘して使い方を調べていました(Google の翻訳頼みでしたが)。今までの V2.x.x の場合、バージョンアップの対応はバージョン番号を書き換える程度で良かったのですが、 V3 からは大きく変わったようです。 そのため、V3 を使用するには次の3点を解決する必要が有ります。

    1. ローディング方法
    2. 動的な使用方法
    3. XyJax 使用方法

    1. のローディング方法は上記 Getting Started にも有るのですが、今回は別ページの Configuring and Loading MathJax を参考にしました。

    2. の動的な使用方法に関しては MathJax のドキュメントで説明を見つけることが出来なかったので、 MathJax の Live Demo のソースを参考にしました。

    3. の XyJax に関しては解決していません。使用不可なのかも知れません。

    下記コードで MathJax のプレビューが可能です。これは、動的使用の一例です。

    <!DOCTYPE html>
    <html>
    <head>
        <title>MathJax Preview</title>
        <script>
            MathJax = {
                tex: { inlineMath: [['$','$'], ['\\(','\\)']]},
                //	V2 では下記1行で XyJax が使用可能だった
                //	TeX: {extensions: ['http://spacelike.in.coocan.jp/misc/xypic.js']}
            };
        </script>
        <script type="text/javascript" id="MathJax-script" async
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
        <!-- tex-svg.js の代わりに tex-mml-chtml.js の選択肢も有る -->
        <script>
            function makePreview(){
                var code = document.getElementById("MathInput");
                var output = document.getElementById("MathPreview");
                //output.innerHTML = code.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
                output.innerHTML = code.value;
                //V2 では下記1行で動的に使用出来た
                //MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
                MathJax.texReset();
                MathJax.typesetClear();
                MathJax.typesetPromise([output]);
            }
        </script>
    </head>
    
    <body>
        <span style="font-weight:bold">MathJax コードを入力して、変換ボタンをクリックして下さい</span><br />
        <textarea id="MathInput" cols="120" rows="20">\[&#10;&#10;\]</textarea><br />
        <button type="button" onclick="makePreview()">変換</button><br />
        <div id="MathPreview"></div>
    </body>
    </html>
    

    V3 は XyJax が使えない(使い方が判らない)ので当ブログでは使えませんが、実は、当ブログで使えない理由は他にも有ります。当ブログでは MathJax 設定用のファイルを読み込むことで MathJax を使えるようにしています。その設定ファイルはココログに置いているのですが、今年春のココログ改悪により設定ファイルの類いを新たに保存することが出来なくなっています。すなわち、 MathJax の設定ファイルを変更することが出来ません。そんな訳で当分は V2.7.5 のままになります。

    ココログのファイル操作に関しては、今後も現状のままなのだろうか?

    ところで、 V2 では、ディスプレイモードの時は「\\」で改行できていたのですが、 V3 ではディスプレイモードというだけでは「\\」での改行は出来ないようです。複数行にするには、例えば align などの環境にしないといけないようです。

    2019年5月 3日 (金)

    サイトマップの文字コード

    今までにも、このブログのサイトマップを Google に送信しようとしたことは有るのですが、ことごとく失敗に終わっています。何かヒントは無いかと検索もしてみたのですが、解決には至っていません。

    実は、このブログとは別に FlatTable 公開用のサイトを開設しているのですが、今までは、そちらのサイトはサイトマップの作成方法を知らなかったこともあり、サイトマップ無しのままでした。しかし、クロールの効率化になればと思い、最近になってその方法を調べてサイトマップを作成してみました。サイトマップには幾つか種類が有るようですが、最も簡単なテキスト形式(.txt)のものにしました。これは必要な URL を1行に1つずつ記述するだけなので簡単です。

    作成して、いざ送信。しかし、結果は「取得できませんでした」。このブログのサイトマップと同じ結果です。ファイルの条件は、文字コードが UTF-8 で、拡張子が .txt なのですが、そのサイトマップは Shift-JIS で作成していました。これは、知らずにやった訳ではなくて、どうせ使用する文字は ASCII 限定なので、 Shift-JIS も UTF-8(BOM無し) も同じデータのはずだから、敢えて Shift-JIS で作成したのです(エディタのデフォルトが Shift-JIS)。しかし「取得」に失敗したので、ファイルを UTF-8(BOM有り) で作成し直して再度送信したら、今度は「成功しました」。

    かつて、 FlatTable の公開にあたり、 .htaccess ファイルを BOM 有りの UTF-8 で作成したら SVG ファイルを正しく扱ってもらえなかったことが有ったので、今回も BOM 無しが良いと考えたのですが、それが間違いだったようです。

    FlatTable のサイトマップ送信が成功したので、当ブログのサイトマップがどうなっているか調べてみました。サイトマップを直接ダウンロードすることは出来ないので、一旦、サイトマップにアクセスし(ブラウザに表示)、それを「名前を付けて保存」しました。得られたファイルの文字コードは Shift-JIS でした。このココログが改悪される前ならば、 BOM を追加したファイルをサイトにアップロードすることも出来たのですが、改悪された現在、その手段が有りません。一応、サポートに報告はしたのですが、どうなることやら・・・。

    と、ここで話しは終わらず。ブラウザ(Chrome)経由で「名前を付けて保存」したファイルは、元のファイルと同じになるとは限らないようです。幾つか、同じ手順で保存したファイルを見てみると、ファイルによって文字コードがマチマチです。それも、元のファイルとは文字コードが違うこともあります。したがって、ココログのサイトマップが Shift-JIS だったのは、ブラウザ経由の「保存」だったからなのかも知れません。

    ついでに、もう1つ。(Chrome では)テキストファイルをブラウザに表示させて、それを「保存」しようとしたら失敗しました。出来ないんですか?

    訳の分からんことだらけ。

    P.S.:ココログは、以前のように、任意のファイルを任意のディレクトリにアップロード出来るようにして欲しいものです。今回のこともそうですが、 MathJax の設定ファイルをココログに置いているのに、それのメンテナンスも出来ません。ココログのバカ~!←大好きって意味だよ

    2017年10月18日 (水)

    Mathjax が サーバー変更してバージョン指定が煩わしい

    ちょっとタイミングを外した話題ですが、 Mathjax の CDN (Content Delivery Network) は今年4月に終了しています。現在は

    https://cdnjs.cloudflare.com/ajax/libs/mathjax/バージョン/MathJax.js?config=TeX-AMS_HTML

    を利用することになっています。ここにバージョンは MathJax のバージョンです(例:2.7.5)。なお、 XyJax との相性の関係で config は TeX-AMS_HTML にしています。

    終了の情報は4月上旬に知っていたのですが、設定は暫くそれまで通りにしておき、数式の整形がエラーになるのを確認してから設定変更することにしていました。しかし、何か月も表示が正常なままなので不思議に思っていたら、今までのサーバーを指定しても、上記サーバーにリダイレクトしているとのことでした。いつまでもリダイレクトという訳にも行かないだろうから、今は上記サーバーに変更しています。

    ところで、今までのサーバーだと、 MathJax のバージョンは latest にしておけば自動的に最新バージョンに対応してくれていたのですが、現行のサーバーだと、バージョンを明確に指定しなくてはなりません。サーバーが変更になった時点では、バージョンが 2.7.0 だったのが、現在は 2.7.2 になっています。その都度、アクセス先を修正するのは面倒です。困ったものです。

    2016年9月11日 (日)

    HTML の <p> は paragraph ではない

    HTML のタグ <p> について以前から気になっていることが有ります。この <p> に関する HTML での挙動が、私の期待している(こうあって欲しいと思っている)ものと違うのです。それは <p>~</p> の間に <div> やリストの <ol> などを入れると、その <div><ol> の直前に </p> が挿入されたのと同じ振る舞いをするということです。その結果 <p>~<p> の範囲が意図と違うものになってしまいます。因みに、このような振る舞いは <p>~</p> にブロック要素を挟むことは出来ないことが原因です。

    ところで、この <p> は paragraph から来ているわけですが、 paragraph とはどういうものでしょうか? それについては パラグラフと段落パラグラフの構造 に説明が有ります。それから、ページが変な構造になっていて直接リンクを貼りにくいのですが、 日本語ライティング 内の「パラグラフの重要性と書き方」にも paragraph の説明が載っています。一言で言えば、1つのトピックについて述べた文の集まりが paragraph です。(トピックについての説明は割愛します。)

    あるトピックについて述べている paragraph の中でリストを記述したいことが有ったとしても、現状ではそれは出来ません。例えば次のような記述は出来ないのです。

    <p>                              <!-- ここから -->
        パラグラフは3つの要素から成っています。
        それは以下の通りです。<br />
    
        <ol>
            <li>トピックセンテンス</li>
            <li>サポートセンテンス</li>
            <li>コンクルーディングセンテンス</li>
        </ol>
    
        サポートセンテンスは必要に応じて複数の
        センテンスで成り立っています。コンクルー
        ディングセンテンスは省略されることが
        あります。
    </p>                              <!-- ここまでを paragraph としたい -->
    

    <ol> の直前に </p> が挿入され、宙ぶらりんになった最後の </p> の直前にも <p> が挿入されます。これでは、私の意図した paragraph とは違ったものになってしまいます。

    残念ながら、 HTML はそういう仕様なのだから、 <p> に対する考え方を変え、 <p> は paragraph ではないとしてブログ等を作成するしかないのでしょう。

    ところで、以前は1つの paragraph に複数の空行を入れて(見た目は段落が複数有るようにして)いたのですが、現在は一塊で表示しています。かつてウェブが世間に広まる前、いわゆるコンピューター通信と言っていたころ(例えば @nifty ではなく、 NiftyServe だったころ)は、コンピュータ画面の解像度があまり高くなく行間が狭かったため、 paragraph を一塊として表示すると窮屈になって読み難いものでした。それで当時は、本来は1つの paragraph になっているトピックについて記述する時でも、小まめに空行を入れて1つの paragraph を複数の塊りに分けることを心がけて書いていました。ある人は、内容に関わらず3行ごとに空行を入れている例も有りました。しかし現在は、印刷物と同程度に行間を空けて表示できるので、私の場合、1つの pargraph は途中に空行を入れずに一塊で表示するようにしています。

    2015年6月14日 (日)

    XyJax は SVG 表示方式にするとエラー発生

    MathJax のレンダリングは HTML-CSS や MathML など幾つか方式が有りますが、それを SVG 方式にして XyJax を使用するとエラーが発生しました。 Chrome のデベロッパーツールでエラーメッセージを確認すると

    Uncaught TypeError: Cannot read property 'Get' of undefined
    
    となっていました。また、発生個所は xypic.js の 5208 行目でした。

    MathJax.Hub.Register.StartupHook("Device-Independent Xy-pic Require",function () {
        ・・・
        ・・・
      HUB.formatError = function (script, err) {
        if (err.xyjaxError !== undefined) {
          ・・・
          ・・・
        } else {
          throw err;    // ←エラー箇所
          hub_formatError.apply(HUB, [script, err]);
        }
      }
    

    ただし、ここはエラーを throw した箇所なので、本当の発生個所ではありません。エラーメッセージによると、オブジェクトが undefined なので Get を読み込むことが出来ないということです。そこで xypic.js で Get を探したのですが、見つけることが出来ませんでした。これでは、何が undefined なのか判りません。エラーの原因を見つけるには、デベロッパーツールでステップ実行して動作を追跡する必要があります。そのうち気が向いたらすることにして、今日のところは置いておきます。

    なお、 XyJax のサイトによると、 SVG 表示方式には対応済みとなっていますが、そうでもなかったということでしょうか?

    ところで、 MathJax は、その表示箇所を右クリックして表示方式を変更することが出来るようになっていますが、今回のエラーが発生すると、表示方式の変更が出来なくなります。たとえページを再読み込みしても変更は出来ません。ブラウザーにも依るのかも知れませんが、 Cookie をクリアしないと元の表示に戻りません。

    2015年6月 6日 (土)

    SVG に MathJax を被せる

    球の衝突図

    以前に書いた「アニメーション機能の実装、その前に」で png 形式の左図を使用していますが、文字が気に入らないので、これを MathJax で表示することを試してみました。ついでに、画像を SVG で作り直しました。

    1
    \(v_0\)
    \(v_1\)
    \(u_1\)
    \(\require{color}\textcolor{blue}{\alpha}\)
    \(\textcolor{blue}{\beta}\)
    それが左図です。

    コードの概略は次のようになっています。

    <div style="float:left; position:relative; margin-right:5px">
        <svg
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="280"
            height="210"
            viewBox="0 0 200 150">    <!-- width, height が viewBox と異なるのは画像の表示サイズの調整のため -->
            ・・・
            ・・・
        </svg>
    
        <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
        <div style="position:absolute; top:110px; left:130px">\(v_1\)</div>
        <div style="position:absolute; top:60px; left:150px">\(u_0\)</div>
        <div style="position:absolute; top:77px; left:185px">\(\require{color}\textcolor{blue}{\alpha}\)</div>
        <div style="position:absolute; top:110px; left:180px">\(\textcolor{blue}{\beta}\)</div>
    </div>
    
    ここに図の右側の文章が来る
    <div style="clear:both"></div>
    
    図と文字を合わせて div タグで囲い、 それを position:relative にした後、文字の位置は position:absolute にして次のように指定します。
        <div style="position:absolute; top:75px; left:110px">\(v_0\)</div>
    
    他のサイトで、 foreignObject タグを使用して SVG 内で MathJax の数式を表示している例を見たことが有るのですが、ブラウザによっては対応していないのも有るので、上のような方法にしました。

    2014年9月23日 (火)

    数式を動的に変える(プレビューの応用)

    MathJax の記事を検索していたら、下記のサイト
    web 上での数式表示方式の比較
    で、 web 上の幾つかの数式表示方式を比較した記事が有りました。その記事では、比較項目の例10「問題や解答の数値を動的に変えること」が MathJax では出来ないとなっていますが、 JavaScript を併用すれば可能です。実際、その例10は MathJax を使って以下のように実装できます。

    例10の MathJax による実装

    2次方程式の解を求めます.
    正負の整数を入力して[解を求める]ボタンを押してください.

    \((\) \()x^2+(\) \()x+(\) \()=0\)

    \[x=\]

    このように、問題や解答の数値を動的に変えることが出来ました。なお、簡単のため、エラー処理などはしていません。また、解の根号内が負のときでも、虚数単位 \(i\) を表示するようにはなっていません。因みに、上記実装はMathJax のプレビュー と同じ手法を使っています。

    2014年6月23日 (月)

    MathJax のプレビュー

    \(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

    MathJax で数式を書く時は、試験的に簡単なページを書いてファイルに保存し、それをブラウザで表示して確認するということをしていました。しかし、複雑な式だと何度も修正して、その度にファイルに保存することになり、あまり気が進みません。インターネット上には、プレビュー用のページが幾つか公開されていますが、それらは XyJax (\(\xypic\)) には対応していません。そこで、それらを参考にして、プレビュー用のページを自作することにしました。自作したページをローカルに置いて、そこへアクセスして数式をプレビューします。

    参考にしたページでは jQuery を使用しているのですが、あまりライブラリは使用したくないので(もちろん MathJax や XyJax は別です)素の JavaScript で作成しました。それが下記です。

    <!DOCTYPE html>
    <html>
    <head>
      <title>MathJax Preview</title>
      <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
          tex2jax: { inlineMath: [['\\(','\\)']]},
          TeX: {extensions: ['XyJax の URL']}
        });
      </script>
      <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
      <script>
        function makePreview(){
          preview.innerHTML = code.value.replace(/</g, "&lt;").replace(/>/g, "&gt;");
          MathJax.Hub.Queue(["Typeset", MathJax.Hub, "preview"]);
        }
      </script>
    </head>
    
    <body>
      <span style="font-weight:bold">MathJax コードを入力して、変換ボタンをクリックして下さい。</span><br />
      <textarea id="code" cols="80" rows="20">\[&#10;&#10;\]</textarea><br />
      <button type="button" onclick="makePreview()">変換</button><br />
      <div id="preview"></div>
    </body>
    </html>
    

    textarea に MathJax コードを入力して [ 変換 ] ボタンをクリックすると、そのボタンの下( preview 領域)に整形された数式が表示されます。

    textarea に入力したデータを参照するのに、始めは code.innerHTML を試したのですが、うまく行きませんでした。いろいろ検索をして、 code.value で参照できることが分かりました。逆に、 previewpreview.value ではダメでした。

    code.value.replace() しても、 code.value 自体は replace されないようです。したがって

          code.value.replace(/</g, "&lt;");
          code.value.replace(/>/g, "&gt;");
          preview.innerHTML = code.value;
    
    のように3行に分けて書いたらダメで、 preview.innerHTML には replace() の戻り値を代入しないといけないようです。

    2014年6月15日 (日)

    状態遷移図を描きたい

    \(\def\xypic{\mathrm{X\!_{\Large Y}\!{\tiny \boldsymbol -}pic}}\)

    このブログで採り上げている FlatTable は SVG で作成していますが、 SVG 版以前に Flash 版が出来ていました。その Flash 版では、ダブルクリックの判定を自前で行っています。これをプログラミングする時、状態遷移の把握が難しくてプログラミングがはかどらないので、 Excel で状態遷移図を作成し、それを見ながらコーディングしていました。その1つが下図です。

    状態遷移図

    その後、これを状態遷移図としてもっとマシなものにしたくて状態遷移図ツールを探したのですが、気に入る物が見つかりませんでした。

    しばらくして MathJax で CD (可換図式)が書けるようになりました。しかし、CD 環境では斜めの射線が引けないので、斜め射線に対応しているものを探したところ MathJax で使える \(\xypic\) 拡張として XyJax というものの有ることが分かりました。この XyJax (即ち \(\xypic\)) は斜め射線だけでなく曲線も引けます。これを使えば状態遷移図が描けそうです。ただし、 XyJax は MathJax の正式な機能ではないので、アクセス先を MathJax とは別に用意しなければなりません。将来、 XyJax が MathJax に取り込まれた場合の変更が煩わしいので、 MathJax で正式に取り込まれるのを待っていたのですが、待ち切れなくて XyJax を利用することにしました。 XyJax は以下から入手できます。

    http://sonoisa.github.io/xyjax/xyjax.html

    XyJax を使って作成した状態遷移図は以下の通りです。

    \[\xymatrix{ & & & & *+[F:<3pt>]\txt{null\\MakeArw\\Accept} \ar@/_10pt/[llld]^<>(0.4){Accept,stopDrag}_<>(0.6){[move]} \ar@/_40pt/[llld]^<>(0.3){MakeArw,stopDrag}_-{[release]}\\ \ar[r]^<{[start]} & *+[F=:<3pt>]\txt{Press\\(*)\\null} \ar[rrr]^-{[press]}_-{Press,startDrag} & & & *+[F:<3pt>]\txt{(Press)\\Release\\MvDetect} \ar[u]^-{[release]}_-{Release} \ar[d]^-{MvDetect}_-{[move]}\\ & & & & *+[F:<3pt>]\txt{(Press)\\Accept\\null} \ar@/^20pt/[lllu]^-{Accept,stopDrag}_{[release]} }\]

    因みに、 XyJax のサイトには次のような状態遷移図の例が載っていました。

    \[\xymatrix { *\txt{start} \ar[r] & *++[o][F-]{0} \ar@(r,u)[]^b \ar[r]_a & *++[o][F-]{1} \ar[r]^b \ar@(r,d)[]_a & *++[o][F-]{2} \ar[r]^b \ar `dr_l[l] `_ur[l] _(.2)a[l] & *++[o][F=]{3} \ar `ur^l[lll] `^dr[lll]^b [lll] \ar `dr_l[ll] `_ur[ll] [ll] }\]