WordPressで数式を表示しよう

このブログのように、理系ネタが多いブログでは数式の表示が必須です。
今回はWordPressで数式を表現する方法、とりわけMathJaxについて紹介します。

スポンサーリンク

数式の表現の方法とメリット・デメリット

数式の表現の方法としては、

1. がんばって文字で表現する
2. LaTeXで数式を作り画像を張り付ける
3. LaTeXでPDFを作りファイルをダウンロードしてもらう
4. QuickLaTeXを使ってTeX数式を画像に変換する
5. MathJaxを使ってTeX数式を変換する

などなど、いろいろあります。

①については、論外です。
例えば、2次方程式の解の公式

x = (-b ± √(b^2-4ac))/(2a)

これ、書くほうもめんどくさいですし、見るほうもわかりにくいですよね。
数式の中身の理解に時間をとるべきで、表現の読み解きに時間を割くべきではないです。

②については、量が多いと数式の作成・貼り付けなど手間がかかります。
加筆修正する際にも、再度画像を作成する必要があるなど、管理も大変です。
うちのブログのようなほとんど数式みたいなところには向きません。

③はよくある選択だと思います。
ただ、数式を表現したいだけなのに全体をLaTeX（PDF）にするのはいかがなものでしょうか。
ページの表現はWordPressのようなCMSを使ってうまくやりたいですよね。
PDFファイルの中身はWordPressの検索にヒットしません。

また、これも加筆修正の際にTeXソースを探してきて、修正して、PDF化して、アップロードして、と手間がかかります。
これだけ手間だと、ちょっとした間違いだと放置しちゃいがちになっちゃいますよね。

④当サイトはもともとこれでした。
理由は、WordPress上で編集できて、結果をすぐに見れるからです。
またMathJaxの描画の遅さが気になって、画像化できているほうが早いだろうという目論見があったからです。

しかし、使っているうちに、

• キャッシュがないときの画像生成がめちゃくちゃ遅い
• 日本語が使えない
• 画像が荒いことがある

ここらへんの欠点が目に付くようになってしまいました。

⑤MathJaxもWordPress上で編集でき、結果をすぐに見れる利点は④と同様です。
描画の遅さも1ページに表示する数式を極力抑えることで解決できます。
日本語も使えますし、デバイスに合わせて表示するのでどのデバイスで見ても綺麗に表現できます。
今回は、MathJaxをWordPressに組み込む方法を紹介します。

同じ数式をQuickLaTeXとMathJaxで表現すると、
QuickLaTeXバージョン

$\newcommand{\lnl}{\\[8pt]}$ $\newcommand{\Lnl}{\\[18pt]}$ $\newcommand{\delt}{\mathrm{d}}$ $\newcommand{\comb}{\mathrm{C}}$ $\DeclareMathOperator*{\ssum}{\Sigma}$ $\DeclareMathOperator*{\sprod}{\Pi}$
mathjaxバージョン

どっちが綺麗か一目瞭然ですよね。

MathJaxをWordPressに導入しよう

MathJaxをWordPressに導入するためには、プラグインを使うのが王道のようですが、ずっとメンテナンスされていないようです。
ここでは、JavaScriptを使って導入する方法を紹介します。

まずは導入

MathJaxを導入するのはとても簡単です。
下記コードを数式を使う前に記載するだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

途中に改行など入れてしまうと自動的にWordPressに整形され意図通りにならないことがありますので、注意ください。
上記を書いたあとに、記事中にTeX形式で次のように書くと該当部分が数式化されます。
（事情によりアスタリスクを全角で書いています。実際は半角で記載ください。）

二次方程式$ax^2+bx+c=0(a\neq 0)$の解の公式は、
\begin{align＊}
x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}
\end{align＊}

簡単ですね。

コードスニペット(ショートコード)化

毎回、上記のようにスクリプトを張り付けるのは大変です。
スニペット化しましょう。
私はCode Snippetsというプラグインを使っています。
導入の仕方は他の記事に譲って、MathJaxを使うためのスニペットについて解説します。

①WordPressの管理画面からSnippets→「Add New」を選択します。

②Add New Snippetのページが表示されます。

Titleの部分は好きに書いてください「例：MathJax利用コードスニペット」
Codeの部分に次のように書いてください。

function MathJax_code(){
return <<<EOD
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\\\(","\\\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

EOD;
}
add_shortcode('usemath','MathJax_code');

③「Save Changes and Activate」ボタンを押して登録してください。

④数式を使いたい記事で、次のように[usemath]を記載してから先ほどと同様にTeX形式を使うことができます。

[usemath]
二次方程式$ax^2+bx+c=0(a\neq 0)$の解の公式は、
\begin{align＊}
x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}
\end{align＊}

スマホ対応(横スクロール対応)する

これで気持ちよく数式を書く環境が整ったと思います。
しかし、スマホから数式入りのページを見るとどうでしょう。
長い数式がはみ出てかっこ悪いですね。

そこで、長い数式を横スクロールできるようにしましょう。

手作業

長い数式を

<div style="overflow-x: auto;">長い数式</div>

のように、overflow-x:auto;スタイルを付けたdivで囲むことで簡単に横スクロール対応できます。
はみ出すほど長くない場合は、このスタイルは無視されます。

しかし、全てをこのように囲むのは大変です。
はみ出すやつのみ囲もうと思っても、たまたま自分のスマホでははみ出さなかったら、対応漏れしそうですね。
そこで自動化を考えます。

自動化

先ほどのスニペットをこのように書き換えます。

function MathJax_code(){
return <<<EOD
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">    
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: {
               Macros: {
                        bm: ["\\\\boldsymbol{#1}", 1]},
               extensions: ["AMSmath.js","AMSsymbols.js","color.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\\\(","\\\\)"] ],
                   displayMath: [ ['$$','$$']], 
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>

EOD;
}
function change_math_into_div($text){
    $replace = array(
        //'変更前' => '変更後',
        '
\begin{align}' => '<div style="overflow-x: auto;">
\begin{align}',
        '\end{align}
' => '\end{align}
</div>',
        '
\begin{align*}' => '<div style="overflow-x: auto;">
\begin{align*}',
        '\end{align*}
' => '\end{align*}
</div>',  

    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}
add_filter('the_content', 'change_math_into_div');
add_shortcode('usemath','MathJax_code');

これは、簡単に言うと記事本文中の文字列を置き換えてくれるというものです。
横に長くなる数式は￥begin{align}￥end{align}で囲むようにすれば、対応忘れなく横スクロール可能になります。

まとめ

以上、WordPressで数式を表現する方法でした。
参考にしていただければ幸いです。

The post WordPressで数式を表示しよう(MathJax) first appeared on My Interests.

Office2016では游フォントがデフォルトになっています。
Windows7または8でOffice2010/2013がインストールされていれば游フォントを無料でインストールすることができます。
誰かが作った資料が游フォントを使っている可能性があるので、インストールしておいて損はありません。

スポンサーリンク

インストールできる条件

ダウンロードページのシステム要件に以下のように書かれています。

サポートされるオペレーティング システム
Windows 7, Windows 8
Office 2013/2010, Windows 8/7

これから、解釈すると以下の表のOKに該当する人がインストール権利を持っていると考えられます。

※は今回の方法ではNGですが、Windows8.1にアップグレードすることで游フォントを使うことができます。

ダウンロードとインストール

ダウンロードとインストールはとっても簡単です。
マイクロソフトの公式ページからインストーラーを入手してインストールするだけです。

The post 游フォントをWindows7にインストールする first appeared on My Interests.

リモートデスクトップで接続する際に、下記の警告に遭遇することがよくあります。

ほとんどの人が無視して接続していると思いますが、なりすましに気づけないなど好ましい状態ではないのでLet’s Encryptで作った証明書を使ってエラーを出なくしましょう。

スポンサーリンク

証明書の入手

こちらを参考に入手してください。p12形式への変換も行い、そのファイルをWindowsへファイル転送しておいてください。
＃上記ではワイルドカード証明書を作っていますが、通常の形式でも問題ありません。

証明書のインポートと適用

自動化も見据えてPowerShellでやってみます。

PowerShellを管理者権限で起動

スタートメニューでPowerShellを検索し、右クリック、「管理者として実行」で起動します。

証明書インポート

以下のコマンドでインポートできます。
“password”は証明書をp12形式にした際に指定したパスワードに置き換えてください。
証明書ファイルのパスも実際のパスに置き換えてください。

PS C:> certutil -p password -importpfx .\certfile.p12
証明書 "CN=*.example.com" がストアに追加されました。

CertUtil: -importPFX コマンドは正常に完了しました。

インポートした証明書をRDPで使うように設定する

まずは、証明書のフィンガープリントを取得します。

PS C:> dir cert:\LocalMachine\My


    ディレクトリ: Microsoft.PowerShell.Security\Certificate::LocalMachine\My


Thumbprint                                Subject
----------                                -------
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX  CN=*.example.com

上記のXXXXXX…の部分がフィンガープリントです。
複数あるものは有効期限（NotAfter）が最大のものを選ぶ必要があります。
上記の出力ではわからないので下記コマンドを使用してください。

PS C:> dir cert:\LocalMachine\My


    ディレクトリ: Microsoft.PowerShell.Security\Certificate::LocalMachine\My | Format-List

Subject      : CN=*.example.com
Issuer       : CN=Let's Encrypt Authority X3, O=Let's Encrypt, C=US
Thumbprint   : XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
FriendlyName :
NotBefore    : 2018/07/16 10:04:30
NotAfter     : 2018/10/14 10:04:30
Extensions   : {System.Security.Cryptography.Oid, System.Security.Cryptography.Oid, System.Security.Cryptography.Oid, S
               ystem.Security.Cryptography.Oid...}

Subject      : CN=*.example.com
Issuer       : CN=Let's Encrypt Authority X3, O=Let's Encrypt, C=US
Thumbprint   : YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY
FriendlyName :
NotBefore    : 2018/04/21 17:20:13
NotAfter     : 2018/07/20 17:20:13
Extensions   : {System.Security.Cryptography.Oid, System.Security.Cryptography.Oid, System.Security.Cryptography.Oid, S
               ystem.Security.Cryptography.Oid...}

使う証明書のフィンガープリントがわかったら、下記のコマンドを実行します。
XXXXX…部分を上記で取得したフィンガープリントに置き換えて実行してください。

PS C:> $cert = @{SSLCertificateSHA1Hash="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"}
PS C:> $path = (Get-WmiObject -class "Win32_TSGeneralSetting" -Namespace root\cimv2\terminalservices -Filter "TerminalName='RDP-tcp'").__path
PS C:> Set-WmiInstance -Path $path -argument $cert
__GENUS                                : 2
__CLASS                                : Win32_TSGeneralSetting
__SUPERCLASS                           : Win32_TerminalSetting
__DYNASTY                              : CIM_ManagedSystemElement
__RELPATH                              : Win32_TSGeneralSetting.TerminalName="RDP-Tcp"
__PROPERTY_COUNT                       : 20
__DERIVATION                           : {Win32_TerminalSetting, CIM_Setting, CIM_ManagedSystemElement}
__SERVER                               : ServerName
__NAMESPACE                            : root\cimv2\terminalservices
__PATH                                 : \\ServerName\root\cimv2\terminalservices:Win32_TSGeneralSetting.TerminalN
                                         ame="RDP-Tcp"
Caption                                :
CertificateName                        : *.example.com
Certificates                           : {0, 0, 0, 0...}
Comment                                :
Description                            :
InstallDate                            :
MinEncryptionLevel                     : 3
Name                                   :
PolicySourceMinEncryptionLevel         : 1
PolicySourceSecurityLayer              : 0
PolicySourceUserAuthenticationRequired : 0
SecurityLayer                          : 1
SSLCertificateSHA1Hash                 : XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
SSLCertificateSHA1HashType             : 3
Status                                 :
TerminalName                           : RDP-Tcp
TerminalProtocol                       : Microsoft RDP 6.1
Transport                              : tcp
UserAuthenticationRequired             : 0
WindowsAuthentication                  : 0

出力結果のCertificateNameが設定した証明書であり、SSLCertificateSHA1Hashが先ほど取得したものであることを確認して終了です。

おまけ1）RDPでどの証明書が使われているか確認

リモートデスクトップで対象のサーバに接続します。
全画面表示にした際にでてくる、上部のバーの鍵マークをクリックして出てくるダイアログBOXの証明書の表示をクリックします。

おまけ2）フィンガープリント確認と証明書適用を一緒にやる

さらに自動化を見据えてこういう風に書けばコマンドの書き換え不要で流し込んで実行することができます。

PS C:> $cert = dir cert:\LocalMachine\My | 
 where{$_.Subject -match "CN=\*.example.com$" } |
 sort NotAfter -Des | Select -First 1 |
 Foreach{@{SSLCertificateSHA1Hash=$_.Thumbprint}}
PS C:> $path = (Get-WmiObject `
-class "Win32_TSGeneralSetting" `
-Namespace root\cimv2\terminalservices  `
-Filter "TerminalName='RDP-tcp'").__path 
PS C:> Set-WmiInstance -Path $path -argument $cert

参考リンク

参考にさせていただきました。
http://www.atmarkit.co.jp/ait/articles/1309/20/news036.html

The post Let’s Encryptで作った証明書をリモートデスクトップの証明書に使う first appeared on My Interests.

Let’s EncryptでDNS認証を用いてワイルドカード証明書を発行します。
発行に使ったOSはCentOS7( CentOS Linux release 7.4.1708 (Core) )です。

スポンサーリンク

certbotのインストール

公式にあるとおり、yumコマンドで簡単にインストールできます。

[user@websv1 ~]$ sudo yum install epel-release
[user@websv1 ~]$ sudo yum install certbot

証明書発行

開始する前に、以下を準備してください。
・メールアドレス（有効期限が近付いた際に通知が来ます）
・DNSの管理アクセス権（当たり前ですが、DNSにレコード登録できないとこの手順は実行できません）

以下のコマンドを打ちます。
メールアドレスとドメインは正しいものに書き換えて実行してください。

[user@websv1 ~]$ sudo certbot certonly \
 --manual \
 --server https://acme-v02.api.letsencrypt.org/directory \
 --email example@example.com \
 --agree-tos \
 --manual-public-ip-logging-ok \
 --preferred-challenges dns \
 --domain *.example.com

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator manual, Installer None
Starting new HTTPS connection (1): acme-v02.api.letsencrypt.org
Obtaining a new certificate
Performing the following challenges:
dns-01 challenge for example.com

-------------------------------------------------------------------------------
Please deploy a DNS TXT record under the name
_acme-challenge.example.com with the following value:

sQYXginymMXXXXXXXXXXXXXg8RFjTQ

Before continuing, verify the record is deployed.
-------------------------------------------------------------------------------
Press Enter to Continue

ここで、Enterを押す前に指定されたレコードをDNSに登録します。
この例では[_acme-challenge]というTXTレコードを[example.com]に作ってください。
レコードに指定された「sQYXginy….」という値を登録します。

反映に時間がかかるかもしれないので、少し待ってからEnterを押してください。

Waiting for verification...
Cleaning up challenges

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/example.com/privkey.pem
   Your cert will expire on 2018-07-20. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot
   again. To non-interactively renew *all* of your certificates, run
   "certbot renew"
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

/etc/letsencrypt/live/example.com/ に作成された証明書と秘密鍵があります。

おまけ）p12形式への変換

WindowsやIISで使うために、p12形式に変更します。
・opensslが入っていなければyumでインストールしてください。
・/etc/letsencrypt/live/example.com/　への読み書き権限のあるユーザで作業してください。

[user@websv1 ~]$ cd /etc/letsencrypt/live/example.com/
[user@websv1 example.com] openssl pkcs12 -export -out certfile.p12 -in cert.pem -inkey privkey.pem
Enter Export Password: (任意のパスワードを入力)
Verifying - Enter Export Password: (再度上記と同じパスワードを入力)

これで、/etc/letsencrypt/live/example.com/にcertfile.p12ができました。

The post Let’s EncryptでDNS認証によるワイルドカード証明書の発行 first appeared on My Interests.