TikZ の学習1-2 携帯版

Abstract.

この文書は, TeX-like なテキスト文書を LaTeXML 0.7.0 で変換したものです. この文書の image 画像をクリックすると SVG 画像に切り替わりますが, この SVG 画像は Inkscape 0.48 の textext 0.4.4 で作成し, Inkscape 形式で保存したものです. なお, エディタは gedit 2.30.4 で, LaTeX Plugin 0.2,外部ツールプラグインを使用. さらに外部ツールとして以下の Shell スクリプトを入れました.

LaTeXML → 携帯xhtml (F4)

#!/bin/sh

BASENAME=${GEDIT_CURRENT_DOCUMENT_NAME%.*}

latexml --dest=$BASENAME.xml $BASENAME

rm -r $BASENAME

latexmlpost --dest=$BASENAME/$BASENAME.xhtml --css=../theme-blue.css --css=../mycss.css --nodefaultcss $BASENAME

これは, はっきり言って手抜きなんですが, まあ携帯用 css ファイルを考えるのは今は無理なので今後の課題ということです.
もうひとつパソコン用と違う点は, 通信量の制限のため？携帯935SHの扱えるSVGの大きさは 100KB までなので圧縮された（ままの）SVGを使っています.
したがってパソコン用ブラウザではここのSVGは「パースエラー」となり見れないので注意してください.
なお, Opera (元来携帯用？かどうか知らないが)なら使えます.

→LaTeXのlistingsパッケージ, LaTeXML, textext, geditのLaTeX Pluginおよび外部ツールプラグイン, pdf2svg, Inkscape
→圧縮SVGについて

§ 2. Karl の教材作成

Karl はハイスクールの数学と化学の教師です.

§ 2.1. 問題提起

Karl は現在, 正弦と余弦について教えているところで, 次のような図を描きたいと思っている.

日本語に訳してみた.

§ 2.2. tikzpicture 環境

TikZ コマンドは, tikz パッケージが必要で tikzpicture 環境の中に書きます.

TikZ コマンドは, バックスラッシュ(\)で始まり, セミコロン(;)で終わります.

Listing 1. 簡単な座標軸

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);% x 軸

\draw (0,-1.5) -- (0,1.5);% y 軸

\end{tikzpicture}

単位については「”1cm” は ”35.43307px”（したがって 35.43307 利用単位）に等しい」となっているのだが, SVGの例では切りのよい数字を使っています.（TikZの1cmに対してSVGでは便宜上100px）
パスデータに単位がつけれないからなあ。。。
SVGの例： path要素
<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <path d="M -150,0 L 150,0" />
    <path d="M 0,-150 L 0,150" />
  </g>
</g>
</svg>
SVGの例： line要素
<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g stroke="black">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
</g>
</svg>
path要素のほうが, TikZコードに近いと思うが？

ちなみに, Inkscape の Tex Text でのプリアンブルは

Listing 2. プリアンブルの例

\usepackage{amsmath,amssymb}

\usepackage{tikz}

\usepackage{xltxtra}

\setmainfont[BoldFont=TakaoExゴシック]{TakaoEx明朝}

\setsansfont{TakaoExゴシック}

\setmonofont{TakaoExゴシック}

\XeTeXlinebreaklocale "ja"

\parindent=1em

としている.

§ 2.3. 直線

draw コマンドで, 点の座標を -- でつなぐと線が引けます.

また, ２つの線引きコマンドで, 片方の終点ともう一方の始点が同じときこれらを連結してひとつのコマンドにまとめることができます.

例えば,

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (1.5,0) -- (0,-1.5);

\end{tikzpicture}

SVGの例： line要素を使うと後が続かない。。。

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g stroke="black">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
    <line x1="150" y1="0" x2="0" y2="-150" />
  </g>
</g>
</svg>

SVGの例：ここは, path要素を使うとよい！

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <path d="M -150,0 L 150,0" />
    <path d="M 0,-150 L 0,150" />
    <path d="M 150,0 L 0,-150" />
  </g>
</g>
</svg>

これなら, 同じように話が進められる.

一番目の終点と三番目の始点が同じなので, 上の３つのコマンドは次の２つに

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0) -- (0,-1.5);

\draw (0,-1.5) -- (0,1.5);

\end{tikzpicture}

さらに, この２つも連結して

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0) -- (0,-1.5) -- (0,1.5);

\end{tikzpicture}

というふうに, この場合は３つのコマンドを一つにすることができます. そしてコマンドが一つなら, tikzpicture 環境を使わずに

\tikz \draw (-1.5,0) -- (1.5,0) -- (0,-1.5) -- (0,1.5);

あるいは, 括弧をつけて

\tikz{\draw (-1.5,0) -- (1.5,0) -- (0,-1.5) -- (0,1.5);}

と記述しても構いません.

SVGの例：

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <path d="M -150,0 L 150,0 L 0,-150 L 0,150" />
  </g>
</g>
</svg>

この場合, d=”M -150,0 150,0 0,-150 0,150” と書いてよい. また,

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <polyline points="-150,0 150,0 0,-150 0,150" />
  </g>
</g>
</svg>

というように, polyline要素を使う手もある.

§ 2.4. 曲線

draw コマンドに続いて

始点の座標 .. contols 第一制御点の座標 and 第二制御点の座標 .. 終点の座標

を書けば, ある種の曲線が得られます.

この曲線の始点での接線は第一制御点に向かい, 終点での接線は第二制御点を通ります.

\begin{tikzpicture}

\filldraw [gray] (0,0) circle (2pt)

(1,1) circle (2pt)

(2,1) circle (2pt)

(2,0) circle (2pt);

\draw (0,0) .. controls (1,1) and (2,1) .. (2,0);

\end{tikzpicture}

SVGの例：
課題

ということで, Karl は半円を

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (-1,0) .. controls (-1,0.555) and (-0.555,1) .. (0,1)

.. controls (0.555,1) and (1,0.555) .. (1,0);

\end{tikzpicture}

単位については「”1pt” は ”1.25px”（したがって 1.25 利用単位）に等しい」
SVGの例： path要素

<svg width="300" height="300" viewBox="-50 -210 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="gray">
    <circle cx="0" cy="0" r="7" />
    <circle cx="100" cy="100" r="7" />
    <circle cx="200" cy="100" r="7" />
    <circle cx="200" cy="0" r="7" />
  </g>
  <g fill="none" stroke="black">
    <path d="M 0,0 C 100,100 200,100 200,0" />
  </g>
</g>
</svg>

ということで, Karl は半円を

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (-1,0) .. controls (-1,0.555) and (-0.555,1) .. (0,1)

.. controls (0.555,1) and (1,0.555) .. (1,0);

\end{tikzpicture}

SVGの例： path要素

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
<!--
    <path d="M -150,0 L 150,0" />
    <path d="M 0,-150 L 0,150" />
-->
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
  <g fill="none" stroke="black">
    <path d="M -100,0
             C -100,55.5 -55.5,100 0,100
             C 55.5,100 100,55.5 100,0
    " />
  </g>
</g>
</svg>

やっぱり, line要素かな？

§ 2.5. 円・楕円

draw コマンドに続いて

円の中心座標 circle (円の半径)

楕円の中心座標 ellipse (x軸方向の半径 and y軸方向の半径)

\tikz \draw (0,0) circle (10pt);

\tikz \draw (0,0) ellipse (20pt and 10pt);

\tikz \draw[rotate=30] (0,0) ellipse (6pt and 3pt);,

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (0,0) circle (1cm);

\end{tikzpicture}

SVGの例：４つまとめて描く. circle（円）要素 , ellipse（楕円）要素

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
  <g fill="none" stroke="black">
    <circle cx="0" cy="0" r="35" />
    <ellipse cx="0" cy="0" rx="70" ry="35" />
    <ellipse transform="rotate(30)" cx="0" cy="0" rx="20" ry="10"  stroke="red" />
    <circle cx="0" cy="0" r="100" />
  </g>
</g>
</svg>

どちらも半径ですね.

§ 2.6. 矩形

draw コマンドに続いて

ひとつの頂点の座標 rectangle その対角の頂点の座標

と記述すれば矩形（四角形）が描けます.

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (0,0) circle (1cm);

\draw (0,0) rectangle (0.5,0.5);

\draw (-0.5,-0.5) rectangle (-1,-1);

\end{tikzpicture}

SVGの例： rect要素

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
  <g fill="none" stroke="black">
    <circle cx="0" cy="0" r="100" />
  </g>
  <g fill="none" stroke="black">
    <rect x="0" y="0" width="50" height="50" />
    <rect x="-100" y="-100" width="50" height="50" />
  </g>
</g>
</svg>

SVGの場合, ４つの頂点のうちx座標,y座標ともに最小の点の座標と幅と高さの４つの数字の指定になっている. 一方, TikZの方は互いに対角となる２頂点の座標の指定でこちらも４つの数字の指定だ. SVGの例： path要素

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="black">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
  <g fill="none" stroke="black">
    <circle cx="0" cy="0" r="100" />
  </g>
  <g fill="none" stroke="black">
    <path d="M 0,0 50,0 50,50 0,50 Z" />
    <path d="M -50,-50 -50,-100 -100,-100 -100,-50 Z" />
  </g>
</g>
</svg>

指定する数字が多い…

実は, 背景にグリッド（格子）を入れたくて。。。マス（四角形）をたくさん描けばいいですね。

でもやっぱり面倒。。。はみ出した部分も描きたいしということで, 結局 Karl は４本の縦線と４本の横線でグリッドにしました. しかし, TikZにはもっと簡単にグリッドを加える方法があるんだが。。。

§ 2.7. グリッド

draw オプションに step 幅を指定（xstep,ystepでx方向,y方向のstepを別々に指定することもできる）し, gridを描く領域を矩形指定（rectangleの代わりにgrid）で示せばよい.

とりあえず, Karl は次のようにグリッドを描けるようになったが。。。

\begin{tikzpicture}

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (0,0) circle (1cm);

\draw[step=.5cm] (-1.4,-1.4) grid (1.4,1.4);

\end{tikzpicture}

グリッドは補助的なものなので色を薄く, 太さも細くし, さらに背景にするためgridコマンドを一番最初に書くことにしました.

\begin{tikzpicture}

\draw[step=.5cm,gray,very thin] (-1.4,-1.4) grid (1.4,1.4);

\draw (-1.5,0) -- (1.5,0);

\draw (0,-1.5) -- (0,1.5);

\draw (0,0) circle (1cm);

\end{tikzpicture}

SVGの例：残念ながら, gridは４本の縦線と４本の横線で作りました.

<svg width="300" height="300" viewBox="-150 -150 300 300" >
<g transform="matrix(1,0,0,-1,0,0)" >
  <g fill="none" stroke="gray" stroke-width="0.2pt">
    <line x1="-100" y1="-140" x2="-100" y2="140" />
    <line x1="-50" y1="-140" x2="-50" y2="140" />
    <line x1="50" y1="-140" x2="50" y2="140" />
    <line x1="100" y1="-140" x2="100" y2="140" />
    <line x1="-140" y1="-100" x2="140" y2="-100" />
    <line x1="-140" y1="-50" x2="140" y2="-50" />
    <line x1="-140" y1="50" x2="140" y2="50" />
    <line x1="-140" y1="100" x2="140" y2="100" />
  </g>
  <g fill="none" stroke="black" stroke-width="0.6pt">
    <line x1="-150" y1="0" x2="150" y2="0" />
    <line x1="0" y1="-150" x2="0" y2="150" />
  </g>
  <g fill="none" stroke="black" stroke-width="0.6pt">
    <circle cx="0" cy="0" r="100" />
  </g>
</g>
</svg>

しかし線が細い気がするのだが。。。

TikZ の学習1-2 携帯版

Abstract.

§ 2. Karl の教材作成

§ 2.1. 問題提起

§ 2.2. tikzpicture 環境

§ 2.3. 直線

§ 2.4. 曲線

§ 2.5. 円・楕円

§ 2.6. 矩形

§ 2.7. グリッド

§ 2.8. Adding a Touch of Style