June 13, 2017

落穂拾い 2017/06/13

Apple Developer Center

投稿者 MindTo01s
カテゴリー: reference
タグ: 落穂拾い
Leave a comment
June 11, 2017

TikZ Sphinx Extensionを導入のメモその3

tikz_latex_preambleにマクロを書くことで、簡潔にかけるようになった。

マークアップ

conf.pyのtikz_latex_preambleを追加。

tikz_latex_preamble = r'\newcommand{\markUpBox}[3]{\draw[red,ultra thick,rounded corners] (#1) rectangle (#2); \node[draw = red, fill=white, ultra thick,rounded corners, anchor=north east] at (#2) {\textbf{#3}}; }'

以下の表記法で、矩形とラベルを同時に書く。

\markUpBox{左下}{右上}{LabelName}

以下のように書くと、

.. tikz:: マークアップ
   :stringsubst:

   \node[anchor=south west] (image) at (0,0) {\includegraphics[width=10cm]{$wd/source/xcode01.png}};
   %\draw[step=1,lightgray] (0,0) grid (image.north east);
   %\draw[step=10,gray] (0,0) grid (image.north east);
   \markUpBox{0.5cm, 0.7cm}{2.2cm,5.7cm}{A};
   \markUpBox{8.0cm, 0.7cm}{9.7cm,5.7cm}{B};
   \markUpBox{2.5cm, 0.7cm}{7.5cm,5.7cm}{C};

以下のような画像が得られる。

../../../_images/tikz-154c9b51dff795c46e2a026b368c763aee590d84.png

感想

目的も果たせた。簡潔な表記も可能になった。conf.pyの表記が煩雑になるのは気にくわないが、許容範囲に収まった。

プロジェクトファイル

投稿者 MindTo01s
カテゴリー: note
タグ: sphinx, latex
Leave a comment
June 10, 2017

TikZ Sphinx Extensionを導入のメモその2

tikzを使う目的はスクリーンショット画像へのマークアップ。

プロジェクトファイル

html出力の設定

conf.pyのextensionsに以下を設定するだけ。

#
extensions = ['sphinxcontrib.tikz']

pdf出力の設定

作業中に、sphinxのバージョンを1.5系から1.6へアップデートしたら、pdfの生成がエラーで止まるようになった。 色々とググると、sphinx1.6からは latexmk と呼ばれるコマンドを使うようになったらしい。

http://www.sphinx-doc.org/en/stable/builders.html#sphinx.builders.latex.LaTeXBuilder

Changed in version 1.6: Use of latexmk for make latexpdf on GNU/Linux and Mac OS X

latexmkのお勉強は後回しにして、pdf出力は今は諦める。

以下サンプル

単純な描画

../../../_images/tikz-a2b4cec0987802fd3f9b5d9d1fbdd64020e114cb1.png

上記のソースコード

.. tikz:: tikzで描いた図

    \draw[thick,rounded corners=8pt]
   (0,0)--(0,2)--(1,3.25)--(2,2)--(2,0)--(0,2)--(2,2)--(0,0)--(2,0);

画像ファイルの読み込み

既存の画像を読み込むには、フルパスを指定する必要がある。

フルパスの指定は、以下の手順。

  1. オプション”:stringsubst:”を指定する文字列の置き換えを行う宣言をする。
  2. “Makefile”があるディレクトリまでを、文字列”$wd”で示す。
../../../_images/tikz-2233f044a81a15d1b6fd64f95524ca96548daa6a.png

上記のソースコード

.. tikz:: 画像ファイルの読み込み
   :stringsubst:

   \node {\includegraphics[width=10cm]{$wd/source/xcode01.png}};

マークアップの下準備のための、格子の描画

../../../_images/tikz-f5f62616f219e30cbb28290f303f923379302eab.png

上記のソースコード

.. tikz:: 格子付き
   :stringsubst:

   \node[anchor=south west] (image) at (0,0) {\includegraphics[width=10cm]{$wd/source/xcode01.png}};
   \draw[step=1,lightgray] (0,0) grid (image.north east);
   \draw[step=10,gray] (0,0) grid (image.north east);

マークアップ

目的のマークアップ

../../../_images/tikz-84836e56fdcb4b958242bf6d4e0242e62d07612c.png

上記のソースコード。

.. tikz:: マークアップ
   :stringsubst:

   \node[anchor=south west] (image) at (0,0) {\includegraphics[width=10cm]{$wd/source/xcode01.png}};
   %\draw[step=1,lightgray] (0,0) grid (image.north east);
   %\draw[step=10,gray] (0,0) grid (image.north east);
   \node[draw = red, fill=white, ultra thick,rounded corners, anchor=north east] at (2.2cm,5.7cm) {\textbf{A}};
   \draw[red,ultra thick,rounded corners] (0.5cm, 0.7cm) rectangle (2.2cm,5.7cm);
   \node[draw = red, fill=white, ultra thick,rounded corners, anchor=north east] at (9.7cm,5.7cm) {\textbf{B}};
   \draw[red,ultra thick,rounded corners] (8.0cm, 0.7cm) rectangle (9.7cm,5.7cm);
   \node[draw = red, fill=white, ultra thick,rounded corners, anchor=north east] at (7.5cm,5.7cm) {\textbf{C}};
   \draw[red,ultra thick,rounded corners] (2.5cm, 0.7cm) rectangle (7.5cm,5.7cm);

感想

latexのマクロで簡潔に書こうとしたが、そもそもどこに書けば良いのかわからない。latex_elements/preambleはlatexpdf出力の時のものなので、このtikz拡張には関係なし。

tikz_latex_preambleに書けば良いと思い書いたが、バックスラッシュだらけで意味不明になってバグが取れなかった。

目的は果たせたが、コレジャナイ感が満載。うーん。

投稿者 MindTo01s
カテゴリー: note
タグ: sphinx, latex
Leave a comment
June 09, 2017

sphinxのadmonition用にstyを書いた

デフォルトの設定のままだと、admonitionのhtml/pdf出力共に味気ない。 cssとstyファイルを書いて、少しだけ見た目を改善した。

html出力例 pdf出力例 プロジェクトファイル

html出力の設定

conf.pyの末尾に以下を設定して、cssを適当にいじる。 前回の sphinxのadmonition用にcssを書いたの続き とほぼ同じ。

# HTMLテーマに独自のCSS/JSファイルを読み込ませてデザイン調整等したい
# http://sphinx-users.jp/reverse-dict/html/custom-css-js.html
def setup(app):
    app.add_stylesheet('custom.css') # ここはhtml用

画像ファイルや、cssは_staticディレクトリ直下へ配置する。

_staticにcustom.cssを配置

.
|-- Makefile
`-- source
    |-- _static
    |   |-- Caution.png    <--- これらは、アイコン用の画像
    |   |-- Danger.png
    |   |-- Note.png
    |   |-- Question.png
    |   |-- Tip.png
    |   |-- Warning.png
    |   `-- custom.css     <--- カスタムcss
    |-- _templates
    |-- admonition.rst
    |-- conf.py
    `-- index.rst

Tip

treeコマンドの出力をそのまま使うと、pdf出力で文字化けしてしまった。 tree --charset=C とオプションを指定することで、文字化けしない文字だけで構成することで回避できる。

custom.cssでは、以下のようになっている。

/* -- div.admonition ------------------------------------------------------ */

/*アイコンの下に付くように、タイトル文の表示位置の設定*/
div.admonition p.admonition-title {
    width: 65px;
    padding-top: 65px;
    text-align: center;
    font-weight: bolder;
    font-size: 18px;
    float:left;
    margin-left: -18px;
}

/*タイトル以外の文をアイコンを避けるように配置*/
p.last {
    padding-top: 0px;
    padding-right: 9px;
    padding-left: 100px;
    text-align: left;
    margin-top: 0px;
}
/*アイコンの配置と背景色の設定*/
div.caution{
    background: url(Caution.png) no-repeat;
    background-position: 9px 9px;
    background-size:64px 64px;

    border-radius: 10px 10px 10px 10px;
    background-color: #ededed;
    min-height: 110px;

    border: none;
}
.
.
.

pdf出力の設定

カスタム設定をまとめる、*.styファイルを作り、読み込ませる。

_staticにcustom.styを配置

.
|-- Makefile
`-- source
    |-- _static
    |   |-- Caution.png
    |   |-- Danger.png
    |   |-- Note.png
    |   |-- Question.png
    |   |-- Tip.png
    |   |-- Warning.png
    |   |-- custom.css
    |   `-- custom.sty     <--- カスタムsty
    |-- _templates
    |-- admonition.rst
    |-- conf.py
    `-- index.rst

_static/custom.styとアイコン群ををconf.pyのlatex_additional_filesを使って、build時にlatexが読み込める位置コピーさせる。 conf.pyに以下の設定を書き足す。

# preambleに長々と書きたく無いので、custom.styへ外出ししたものを読み込むようにする。
latex_additional_files = ['_static/custom.sty',
                          '_static/Caution.png', # admonitionで使用するアイコン画像群
                          '_static/Danger.png',
                          '_static/Note.png',
                          '_static/Question.png',
                          '_static/Tip.png',
                          '_static/Warning.png'
                          ]

custom.styを読み込むために、latex_elements/preambleに設定。 passoptionstopackagesを追加しているが自分はよくわかっていない。おそらく、tcolorboxがxcolorを要求するのだと思っている。 conf.pyに以下の設定を書き足す。

latex_elements = {
        .
        .
        .
        .
    'passoptionstopackages': r'\PassOptionsToPackage{dvipdfmx}{xcolor}',

    # 同じディレクトリにあるcustum.styを読み込む。
    'preamble': r'\usepackage{custom}',
}

custom.styでは、admonitionのマクロの置き換えを行なっている。

  • 灰色の囲いは、tcolorboxパッケージを使って描画している
  • admonitionのマクロは、sphinx.styの中で定義されている以下のマクロを再定義して、実装している。
  • cautionはsphinxcautionマクロ、dangeはsphinxdangerがマクロ定義されている。
\usepackage{tcolorbox}

% sphinxadmonitionを一部上書きするためのHelperマクロ。アイコンと文字列を指定して囲みを作る。
\newenvironment{sphinxadmonition_helper}[2] % アイコン画像名, タイトル文字列
{
    \begin{tcolorbox}[colframe=white ,sidebyside, lower separated=false, lefthand width=1.6cm, arc=5mm]
        \center
        \includegraphics[width=1.6cm]{#1}\\
        \bf #2
        \tcblower
}
{
    \end{tcolorbox}
}

% ".. caution::"の対応。sphinx.styのsphinxadmonitionの中から呼び出されるマクロを上書きしている
\renewenvironment{sphinxcaution}[1]
{\begin{sphinxadmonition_helper}{Caution.png}{#1}}{\end{sphinxadmonition_helper}}

% ".. danger::"の対応。
\renewenvironment{sphinxdanger}[1]
{\begin{sphinxadmonition_helper}{Danger.png}{#1}}{\end{sphinxadmonition_helper}}

        .
        .
        .
投稿者 MindTo01s
カテゴリー: note
タグ: sphinx, tinker
Leave a comment
— ブログアーカイブ —