18 Jun 2017, 16:51

MathJax を使って WordPress に org2blog で数式ありの投稿をする

このブログは、org2blog というライブラリを使って、 Emacs org-mode でかかれた文章を HTML に変換して投稿している。

今回、org-mode から HTML へ変換した文章中で 数式を扱う方法を調べてみた。

MathJax をつかう

MathJax とは、javascript でかかれた 数式を表示するためのライブラリ。 Latex なみの数式表現が扱えるようになる。

すべてのブラウザで動作し、表示するクライアント側での設定はいらない。

さらに、MathJax のファイル群のインストールは必要ない。

MathJax は、コンテンツデリバリネットワーク(Contents Delivery Network、CDN)で公開・配信されているので、 JavaScript ライブラリをダウンロードして、サーバーにアップロードといった作業は必要はないのである。

MathJax を使用するには、<html>…</html> タグの中に以下を書く。

<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<body>…</body> の中で、MathJax の記法(MathML、LaTeX、ASCIIMathML)を使って数式を書くと、 数式がレンダリングされる。

org-mode で MathJax をつかう

org-mode は MathJax にデフォルトで対応しているようだ(version. 9.0.5)

なので、org-mode の文章中に 数式を 書いて、org-export で HTML 形式で export すればよい。

これに今まで気づかなかったのは、自分の環境では、#+OPTIONS: TeX:nil を指定していたから。 ここは、Tex t でなければいけない。

Default の設定だと参照する MathJax の version が古いらしく、以下の設定で最新が使える。

(setf org-html-mathjax-options
      '((path "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML")
        (scale "100") 
        (align "center") 
        (indent "2em")
        (mathml nil))
      )
(setf org-html-mathjax-template
      "<script type=\"text/javascript\" src=\"%PATH\"></script>")

org2blog は、html 形式に org-mode の文章を変換してから、WordPress にアップロードする。 org2blog で WordPress に投稿すれば、WordPress 上でも数式が表示される。

Example

\[〜\] で囲んで数式を表示

\[f(a)= \frac{1}{2\pi i}\oint_{\Gamma} \frac{f(z)}{z-a}dz\]

$$f(a)= \frac{1}{2\pi i}\oint_{\Gamma} \frac{f(z)}{z-a}dz$$

\(〜\) で囲んで本文中に表示

\(〜\) で囲んで、本文中に$a$を表示。

参考

あとは、Latex 記法を覚えるだけだ。(これが一番大変)

03 May 2017, 06:20

Jupyter Notebook で書いた ipynb を WordPress の記事にするには jupy2wp が便利

Jupyter Notebook で実行した結果や、matplotlib や seaborn で生成した図を、 そのまま WordPress に表示して、記事にしたいとする。

調べてみると、以下の やり方があるようだ。

  1. gist に アップロードして公開したものを WordPress に 埋め込む。
  2. Jupyter Notebook を html 形式で、ダウンロードする。
  3. .ipynb ファイルを nbconvert で html ファイルにして WordPress に入力する。
  4. jupy2wp を使う。

gist を埋め込む

Jupyter Notebook には、Gist-it という extentions がある。 extentions の有効方法については、以下の README を参照。

これを有効にすると、ツールバーに gist のマークが現れる。 ポチルだけで、gist に ipynb がアップロードされて、公開される。

注意点は、gist-it の設定画面から Github personal access token を入力することだ。 そうしないと、anonymous として gist が公開される。

しかし、この方法は自分は好まない。なぜなら、gist を WordPress に 埋め込んだとき、 コードの高さが固定されてスクロールバーが出てきてしまうからだ。この回避方法がわからなかった。 もし、この問題が回避できれば、gist はいいかもしれない。

どういう仕組みかわからないけれども、図表も表示される。

HTML 形式でダウンロードする

Jupyter Notebook の notebook を開いて、 File > Download as > HTML から html 形式でダウンロードする。

出来た html ファイルを WordPress のテキスト画面に貼り込む

この作戦も、自分は好まない。なぜなら、Jupyter Themes を使っているのだけれども、 Themes が反映された状態で HTML がダウンロードされるからだ。

黒背景を使っているので、真っ黒な画面になった、よくない。

nbconvert をつかう

以下のサイトで紹介されている方法。

1.Jupyter Notebook でコンテンツを作り、Save する 2.nbconvert で html ファイルに変換する

[sourcecode language=”sh” title=”” ]
$ jupyter nbconvert –to html –template basic 出来たファイル.ipynb
[/sourcecode]

3.出来た html ファイルを WordPress のテキスト画面に貼り込む 4.Wordpress の CSS ファイルに最後に示した CSS を追加する。

これはいいかもしれない。しかし、もっといい方法を見つけた。

jupy2wp を使う

jupy2wp というツールを使う。

インストール方法は README 参照。ちょっとコマンドオプションが長いけれども、以下のように使う。

[sourcecode language=”bash” title=”” ]
python -m jupy2wp.jupy2wp –xmlrpc-url http://futurismo.biz/xmlrpc.php –user username –password hogehoge –nb titanic-cnn.ipynb –title “Kaggle: Titanic 問題データ分析” –categories [Python, 統計] –tags keras
[/sourcecode]

こうすると、下書きの状態で、ipynb で表示されていた内容がそのまま記事として投稿される。

さらに、画像は、/upload フォルダ配下に自動でアップロードされて保存される。これはいい。

08 Dec 2016, 12:06

[未解決] 賢威7で SyntaxHighlighter Evolved が動かなくなった

賢威7で SyntaxHighlighter Evolved が動かなくなった。

この前まで動作していた気がしたのだが、気のせいか?

暫定対処

取り合えず、問い合わせフォームに質問を投げた。解答待ち。

 それまでは、以下で暫定対処中。base.css に以下を追記。

pre{
        border:1px solid black;  /* 黒枠線 */
        background-color: #ccc;  /* 背景を灰色 */
        padding : 0px 10px;      /* 余白 */        
}

これで、<pre> ~ </pre> で囲まれたソースの背景が灰色になって、見栄えがよくなった。

なんとかならないものか?解決できたら更新します。

追記

質問の回答きた。

お問い合わせいただいた件ですが、プラグインの動作については大変申し訳ございませんがサポートの対象外となります。 参考 URL のお返事の際は、css が衝突していたことが原因でしたが、今回の場合はサイトを確認したところ css が原因ではないように思われます。 お手数ではございますが、プラグイン開発者様にお問い合わせいただいてご対応いただくか、異なるプラグインで代替してご対応いただければと思います。

そんなあ。。。。(´・ω・`)

02 May 2015, 11:19

ブログテーマを更新しました

ゴールデンウィークなので, やりたかったことをば.

このブログのデザインを変更してみました.

上記のとおり, オシャレでイケイケなサイトを目指そうと思ったのだけれども,い つもの自分らしく途中で諦めて,

結局このザマですよ. (_‘Д`)

見やすさを意識した今回の改造

以下の点にこだわった.

  • 背景を明るくする
  • テーマ色を赤めにする
  • シングルカラムにする
  • 文字を大きくする

今までは小さな文字でチマチマと細かく文章を書いていたのだが, 思い切ってシングルのカラムにして, スペースを広くつかうようにした.

いろいろなサイトを参考にしてみたが, Web デザイナー系のサイトは,シングルカラムが多いように見えた.

このブログの色を赤に決めた. 統一感を出したかったから. その裏には, 挑戦 , 情熱 といった意味を込めた.

サイトのテーマを github で管理

自分の修正を github で公開するようにした.

このリポジトリに以下を貯めていくことで, 知識を集約する.

  • コードスニペット
  • 開発ノウハウ
  • プラグイン覚書

公開する理由は, Emacs のように設定ファイルを管理して public に公開したかったから.

Futurismo は 有料の Wordpress テンプレート 賢威 を利用している.

そのため, テンプレートは自分で手を入れた部分のみをモジュール化して, 公開することにする.

くれぐれも, 賢威の部分は公開しないようにする.

ハッカー未来派宣言の署名ボタンを設置

ハッカー未来派宣言.

このブログの立ち上げ時に執筆してから 3 年が経った. いまだ隠しページのような存在だ.

この宣言文はこのブログの本質にある思想なので, これをもっとアピールするために,シェアボタンをつけた.

なんか, アジャイル宣言やリアクティブ宣言のようじゃないか?

これから

実は, 5 月は病院に入院するので, その間にもう一度サイトの修正をしてみようと思う.

モダンイケイケの本質はなにか?

それは, 動きのあるサイト な気がする.

つまり, JQuery を利用したサイトが,自分にとって, カッコいいと感じる.

そのため, 次は JQuery を導入してみようと思う.

23 Nov 2014, 15:29

WordPress の埋め込み gist のスタイルシート (CSS) の設定メモ

はじめに

最近すごく気になってたのだが, ブログでの gist の表示が崩れまくっている ので, 直し方を調べたのでメモする.

以下の過去記事も参照.

CSS の調べ方

要素を調べる

ブラウザのツールを利用して, CSS の要素を調べる.

  • Chrome ならばディベロッパーツール,
  • firefox ならば右クリックから要素を検索

編集画面で該当箇所の css に辿り着いたら, そこを編集する. すると, リアルタイムで変更が確認できる.

class=“gist” class”gist-file” で囲まれている

調べてみると, gist では, <div class=“gist”> などで囲まれていることがわかる.

以下のような StyleSheet に追加する.

/* for gist */
.gist {
    font-size: 16px;
}
.gist-file div{
    background-color: black!important;
}

.gist-file .pl-vo{
    color: white!important;
}

.gist-file .highlight{
    color: white!important;
}

BookMarks

17 Aug 2014, 03:46

2014 WordPress テーマを 賢威 6.2 にバージョンアップしました

1 年ぶりにサイトデザインを変更しました.

このブログをはじめて 2 年経ち, 2 度目のテーマ変更です.

ScreenShot

Futurismo

Futurismo wiki

Motivations

1 年前のテーマはやりっぱなしテーマ

一年前に, ブログカスタマイズを熱心にやっていた.

賢威 6.2 を導入

このブログは, 開設当初から 賢威テーマを採用している.

この賢威テーマは有料なのだけれども, いいところは毎年無料でバージョン アップができるところ. 賢威 6.0 は一年半前のテーマなので, やや古さを 感じてきた.現在は, 6.2 なので, バージョンアップしたかった.

ダークなテーマに変更したかった

自分の普段の PC 環境が, 黒系を中心にまとめるようになった.

よって, ブログもまるで Emacs の Dark Themes のような色にしたかった.

もちろん, その色は SEO 的には悪い気がする.暗くジメジメしたようなイ メージをあたえかねない.

しかし, 自分のブログなど, 深海 5000m に潜む深海魚のような存在でいい んだ! 深海魚だって, ひとにみられていなくたって, 驚くような進化を遂 げているのだ!

テーマカスタマイズ

賢威テーマは毎年バージョンアップをするために, そのたびごとにテーマ をカスタマイズしていたら, 面倒だ. そのため今回は, 今後のメンテナン スがしやすいような工夫をした.

Docker 導入

簡単に ローカルでの WordPress カスタマイズ環境を手に入れるために, Docker を利用した.

以前は, Windows 上で カスタマイズしていたけれども,これに比べればものすごく簡単だった.

git で版数管理

版数管理をしながら PHP ファイルや HTML ファイルを編集した.

移行前と移行後の差分を git を利用して見ることで, 修正部分がとても分か りやすくなった.

まとめ

ブログのカスタマイズを毎年することが恒例行事になってきた.

そして, 年を重ねるごとに自分のスキルが上がっていることに気づく.1 年 前では考えつかなかった方法で, カスタマイズをしようとする.こういう発 見を重ねることは楽しいことだ.

また, まとめといいつつ, ブログのテーマ移行はまだ半分くらいしか終わっ ていない. このまま中途半端で 1 年が過ぎる可能性がある. ここでおわっ てしまっては, 完全にレベルダウンだ. . :(

29 Jul 2013, 07:48

jQueryでGoogleカスタム検索をさくっとカスタマイズ

jQueryを使って、Googleカスタム検索をカスタマイズしました。

検索窓にフォーカスしているときはメッセージは消す、フォーカスしていないときは、メッセージを表示するようにしました。

デフォルトのコードはこんな感じで取得できるると思います。

<form action="http://www.google.co.jp/cse" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="*****" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="20" />
    <input type="submit" name="sa" value="検索" />
  </div>
</form>

<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

ここで、type=“text”に操作するためのclass を追加します。

<input type="text" class="focus" name="q" size="20" />

jQueryのコードはこんな感じで書きます。

$(function(){
     $(".focus").val("サイト内検索");
     $(".focus").focus(function(){
          if(this.value == "サイト内検索"){
               $(this).val("").css("color","#f39");
          }
     });
     $(".focus").blur(function(){
          if(this.value == ""){
               $(this).val("サイト内検索").css("color","#969696");
          }
     });
});

最後に、デフォルトでの表示を灰色にするために、CSSに色の宣言をします。

.focus{color: #969696}

jQueryでサクッとかけました。jQuery、便利ですねー。

完成!

28 Jul 2013, 13:17

WordPressで処理をファイル分割する方法を調べてみました

WordPressで処理をファイル分割する方法を調べてみました。

wordpressのコードをいじっていると、だんだん長くなってきた。

そこで、責務が独立できそうな部分を、別ファイルとして独立させる方法を調べてみた。

get_template_part()をつかう

header.phpやfooter.phpなどの、WordPressで決められた名前のファイルは、専用のinclude関数が用意されている。(get_header(),get_footer()など)

自前で作ったファイル(hogehoge.php)を読みこむには、get_template_part()を利用する。

get_template_part('hogehoge');

例えば、前回の記事で、固定メニューバーをheader.phpから独立させたい場合は,以下のようにすればよい。

  1. header-sticky.phpというファイルを新規作成
  2. 処理をファイルにカット & ペースト
  3. header.phpのカットした場所に以下の行を追加

.

<archives/hp get_template_part('header-sticky'); ?>

ファイル名は、.phpをつけないところがミソ。

28 Jul 2013, 07:15

WPプラグイン「qTranslate」で記事を新規投稿すると403 Error(wp-admin/post.php)

WordPressの多言語化プラグインqTranslateを入れて、記事を投稿しようとすると、403エラーとなり、記事が投稿できなくなったので、解決方法を調べました。

wp-admin/post.phpにはアクセス権がないと怒られます。

原因

ロリポップサーバで動作している、WAFが原因でした。

WAFとは 「Webアプリケーションファイヤーウォール」 ワフ: – IT用語辞典バイナリ

WAFとは、外部ネットワークからの不正アクセスを防ぐためのソフトウェア(あるいはハードウェア)であるファイアーウォールの中でも、Webアプリケーションのやり取りを把握・管理することによって不正侵入を防御することのできるファイアウォールのことである。

解決方法

ロリポップの管理ページから、Webツール -> WAF設定を選択。

WAF設定が有効になっているので、無効に設定。

5分から10分ほどすると、設定が反映されて、無事投稿できるようになりました。

Reference

14 Jul 2013, 03:58

賢威6 でgistが表示できないときの解決方法

WordPress 賢威6テンプレートで gistを表示しようとすると、ウマク表示できない。

具体的には、行番号とコードが等間隔に表示される。

これは、スタイルシートに原因があった。design.cssを除くと、以下の部分がコメントアウトされているのでコメントを外す。

/*「table」の1行目に「colspan」を利用する場合は「auto」を指定する*/
#main-contents table{ table-layout: auto; }

これで、gistが正しく表示された。

ちなみに、ブログの横幅が狭い時も、レイアウトが崩れる。これは対象方法がわからないが、スクロールバーがでないときは大丈夫なので、ひとまずいかの方法でフォントを小さくして回避した。

#main-contents .gist{font-size:12px;}