2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  
無料ブログはココログ

パソコン・インターネット

2018-10-27

TeX

PCをXPからWINDOWS10 にしたので、最近の TeX を インストールしようと思ったのだが、面倒くさく、つい[改訂第7版]LaTeX2ε美文書作成入門を購入した。
for you で、手順の整形をしているのだが、やはり、図面と違って組版がむずかしい。時間をかけた割には得るものが少ないのであった。
やはり、餅は餅屋ということで、 手順、解説はTeXで組版するのがいいのだろう。
どこかに、うまくやる方法が転がっていないだろうか?

2018-05-22

svg で 駒が動く

svg では、簡単なアニメーションができる。下の図の三角をクリックすれば、駒が動き始める。

と飛歩香香 銀歩桂 持駒 なし

しかし、動かないプラウザ(IE など)があるようだ。

対象駒の 3個には、増分とタイミングのペアを与えている。それ以外は前回と同様。

7手詰だから、0.1 で初手 0.2 で2手目 0.3で3手目のタイミングとしている。 

玉は、 同じタイミングで増分を 2値 指定している。ジャンプしているように見える。

桂は、取られたときに、表示外へジャンプさせている。

馬は、0.05 ずれたタイミングなので、移動がみえる。

対象駒が 3個で、手数も短い。また「成」や「持駒の使用」もないので、データ作成は簡単だった。 もっと複雑になってくると面倒だ。

<svg width="300pt" height="300pt" viewBox="0 0 11 13"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<path id="start" stroke-width="0.08" stroke="#c44" fill="#fee"
     d="M5 10 l1.73 1 l-1.73 1 v-2 Z"/>

<g stroke="brown">
  <path stroke-width="0.08" 
    d="M0.95 0.18 h9 v9 h-9 v-9 Z" fill="none" />
  <path stroke-width="0.02" 
    d="M0.95 1.18 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9
        m-8 -8 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9" >
</g>

<g font-size="0.9" font-family="serif monospace" >
<text x="3 1 6 5 8" y="3 5 8 9 9" >と飛歩香香</text>
<text x="6 6 6" y="3 4 6" rotate="180" transform="translate(0.9,-0.64)">銀歩桂</text>
<text x="10 10 10 10 10" y="5 6 7 8 9">持駒 なし</text>

<text x="5" y="4" rotate="180" dx="0.9" dy="-0.64" >玉
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
  values="0; 0; 1 1; 1 1; 2 2; 2 2; 2 3; 2 3"
  keyTimes="0; 0.2; 0.2; 0.4; 0.4; 0.6; 0.6; 1"
  type="translate"/>
</text>

<text x="7" y="6" >桂
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
   values="0; 0; -10 -10; -10 -10"
  keyTimes="0; 0.4; 0.4; 1"
  type="translate"/>
</text>

<text x="5" y="8" >馬
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
  values="0; 0.3 -1; -3 -3; -3 -3; 1 -7; 1 -7; 4 -4; 4 -4; 1 -1; 1 -1"
  keyTimes="0; 0.1; 0.15; 0.3; 0.35; 0.5; 0.55; 0.7; 0.75; 1"
  type="translate"
  />
</text>



</g>
</svg>
>

2018-05-21

svg で 将棋盤を書く (シンプル)

前に挙げたのは、共通部分を再利用するというようなことであったらしいのだが、もっとシンプルな書き方をしてみた。図枠は path を使って書いて、駒は svg の座標を使って書き、玉方の駒は回転して移動した分だけ動かすということだった。なにも、将棋の座標にこだわらなくてもいいわけだった。

<svg width="300pt" height="300pt" viewBox="0 -1 11 13"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<g stroke="brown">
  <path stroke-width="0.08" 
    d="M0.95 0.18 h9 v9 h-9 v-9 Z" fill="none" />
  <path stroke-width="0.02" 
    d="M0.95 1.18 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9
        m-8 -8 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9">
</g>

<g font-size="0.9" font-family="serif monospace">
<text x="3 1 7 5 6 5 8" y="3 5 6 8 8 9 9">と飛桂馬歩香香</text>
<text x="6 5 6 6" y="3 4 4 6" rotate="180" transform="translate(0.9,-0.64)">銀玉歩桂</text>
<text x="10 10 10 10 10" y="5 6 7 8 9">持駒 なし</text>
</g>
</svg>

と飛桂馬歩香香 銀玉歩桂 持駒 なし

2018-05-20

svg で 将棋盤を書く( ソース)

以下に svg のソースを上げておく。前の説明とはすこし違っている 。

グラデーションを付けているし、polygon でなく rect を使っているし、ベースラインは 0.85 だ。 昔のソースを貼り付けてしまったようだった。

<svg width="400pt" height="400pt" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<symbol id="grid" stroke="black">
    <defs>
        <linearGradient gradientUnits="userSpaceOnUse" id="lg0" x1="9" y1="1" x2="1" y2="9" spreadMethod="pad">
            <stop offset="0%" stop-color="lightgreen"/>
            <stop offset="100%" stop-color="aqua"/>
        </linearGradient>
    </defs>

  <rect x="1" y="1" width="9" height="9" stroke-width="0.08"  fill="url(#lg0)" />
  <g  stroke-width="0.02">
    <line x1="1" y1="2" x2="10" y2="2" />
    <line x1="1" y1="3" x2="10" y2="3" />
    <line x1="1" y1="4" x2="10" y2="4" />
    <line x1="1" y1="5" x2="10" y2="5" />
    <line x1="1" y1="6" x2="10" y2="6" />
    <line x1="1" y1="7" x2="10" y2="7" />
    <line x1="1" y1="8" x2="10" y2="8" />
    <line x1="1" y1="9" x2="10" y2="9" />
    <line x1="2" y1="1" x2="2"  y2="10" />
    <line x1="3" y1="1" x2="3"  y2="10" />
    <line x1="4" y1="1" x2="4"  y2="10" />
    <line x1="5" y1="1" x2="5"  y2="10" />
    <line x1="6" y1="1" x2="6"  y2="10" />
    <line x1="7" y1="1" x2="7"  y2="10" />
    <line x1="8" y1="1" x2="8"  y2="10" />
    <line x1="9" y1="1" x2="9"  y2="10" />
  </g>
  <g fill="black" stroke-width="0.08" >
    <circle cx="4" cy="4" r="0.04" />
    <circle cx="7" cy="4" r="0.04" />
    <circle cx="4" cy="7" r="0.04" />
    <circle cx="7" cy="7" r="0.04" />
  </g>
</symbol>

<symbol id="K" >
<text x="10" y="0.85">玉</text>
</symbol>

<symbol id="R" >
<text x="10" y="085">飛</text>
</symbol>

<symbol id="B" >
<text x="10" y="0.85">角</text>
</symbol>

<symbol id="G" >
<text x="10" y="0.85">金</text>
</symbol>

<symbol id="S" >
<text x="10" y="0.85">銀</text>
</symbol>

<symbol id="N" >
<text x="10" y="0.85">桂</text>
</symbol>

<symbol id="L" >
<text x="10" y="0.85">香</text>
</symbol>

<symbol id="P" >
<text x="10" y="0.85">歩</text>
</symbol>

<symbol id="D" >
<text x="10" y="0.85">龍</text>
</symbol>

<symbol id="M" >
<text x="10" y="0.85">馬</text>
</symbol>

<symbol id="Z" >
<text x="10" y="0.85">全</text>
</symbol>

<symbol id="Y" >
<text x="10" y="0.85">圭</text>
</symbol>

<symbol id="X" >
<text x="10" y="0.85">杏</text>
</symbol>

<symbol id="T" >
<text x="10" y="0.85">と</text>
</symbol>

<symbol id="k" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">玉</text>
</symbol>

<symbol id="r" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">飛</text>
</symbol>

<symbol id="b" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">角</text>
</symbol>

<symbol id="g" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">金</text>
</symbol>

<symbol id="s" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">銀</text>
</symbol>

<symbol id="n" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">桂</text>
</symbol>

<symbol id="l" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">香</text>
</symbol>

<symbol id="p" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">歩</text>
</symbol>

<symbol id="d" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">竜</text>
</symbol>

<symbol id="m" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">馬</text>
</symbol>

<symbol id="z" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">全</text>
</symbol>

<symbol id="y" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">圭</text>
</symbol>

<symbol id="x" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">杏</text>
</symbol>

<symbol id="t" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">と</text>
</symbol>

<use xlink:href="#grid" />

<g font-size="1" font-family="serif" fill="black">
<use xlink:href="#l" x="-1" y="1" />
<use xlink:href="#s" x="-4" y="2" />
<use xlink:href="#k" x="-1" y="2" />
<use xlink:href="#S" x="-3" y="3" />
<use xlink:href="#p" x="-1" y="3" />
<use xlink:href="#p" x="-4" y="4" />
<use xlink:href="#d" x="-2" y="4" />
<use xlink:href="#p" x="-2" y="5" />

<use xlink:href="#B" x="0" y="6" />
<use xlink:href="#B" x="0" y="7" />
<use xlink:href="#S" x="0" y="8" />
<use xlink:href="#S" x="0" y="9" />
</g>

</svg>

2018-05-18

svg で 将棋盤を書く

まず、svg の座標系は 座標原点は左上隅で、x は右方向に増加し、 y は下方向に増加する。

盤面は(x,y)=(1,1)から(10,10)に書くとする。

盤縁は

    <polygon points="1 1 10 1 10 10  1 10" fill="none"/>

と、polygonで書いておく。線で書いてもいいのだが角に段がつくので始末が面倒。

升目は、横線と

    <line x1="1" y1="2" x2="10" y2="2" />

縦線で

    <line x1="2" y1="1" x2="2"  y2="10" />

必要分繰り返す。

星は

    <circle cx="4" cy="4" r="0.04" />

といった具合。

で、盤面内の駒だが、盤面の右上、将棋の座標でいったら、(0,0) に作っておいて必要に応じて表示する

攻め方の駒は

    <symbol id="K" >

    <text x="10" y="0.87">玉</text>

    </symbol>

ここで、yの値に 0.87 という中途半端な数値は、文字の大きさを 1.00 とした場合の参照位置(ベースライン)を試行錯誤で決めたもの、以前は 0.85 にしていたが、少し下げて 0.87 とした。

受け方の駒は

    <symbol id="k" >

    <text x="11" y="-0.13" transform="rotate(180, 11, 0)">玉</text>

    </symbol>

将棋の座標(-1,-1) に作っておいて (x, y) = (11,0) を中心に 180度回転させると将棋の座標(0,0)にめでたく、逆立ちしたものができる。

12玉の配置なら

  <use xlink:href="#k" x="-1" y="2" />

とする。

持駒は、将棋の 0 筋に表示するとして

<use xlink:href="#B" x="0" y="6" />

とするか、SVGの座標を使い

<text x="10" y="8">四</text>

とするかだ。

2018-05-17

svg

XP のときは出来なかったが、新しいブラウザになったし、もしかして出来るのかもと、SVGで作った図面をはりつけてみたところ、以下のようにウマク行った。

無駄にグラデーションを付けているのは、お愛嬌。

 

2018-05-16

Delphi 10.2 続

やはり、無料版ということもあり、制限されていることも多いのだった。

メソッドの自動作成の無いのも痛いが、リファクタリングも見当たらないようだ。
まあ、そんなものかな。 
あと windows API も エラーになるものがあり困ったなー。
Shift-Jisでとりあえずいいかと考え、 Delphi 7 を インストールしてみたらエラーが出て新規作成が出来ない。これまた困ったものだ。
昔のソースを見ていると、今よりチャンと書いているのではないか!。力ずくでやろうと思わないでシンプルに書いていくのがいいのだろうと、改めて気がつく今日この頃だった。

2018-05-15

FireMonkey 3

大分弄っているのだが、OnPaint ハンドラーが期待通りに動かない。こういう基本的な所でつまずくと、やる気が出てこない。なんか間違っているのだろうが、その原因が皆目見当も付かないのだった。 やはり、色々なターゲットの理解がないとだめなのだろう。

そもそも数が多い詰将棋の図面と格闘するにはスマホの画面は小さすぎるのだった。
作るとすれば、サムネイルやリストから図面を一つ呼び出し、情報が確認でき、手順が表示され、駒が動き、解説も見れる。といったものぐらいであろうか。
それにしても、Delphi 10.2 のプログラミングに慣れることが先なようだった。前はDelphi の本もよく出版されていたが、最近はどうなのだろうか? amazon で検索してみても見当たらない。困ったものだ。

2018-05-12

FireMonkey 2

プログラムを作るときには、入出力の部分から作り始めるのが常道で、特に出力が出来なければならないのだが、ネックとなるのは、文字の回転。
画面に回転した文字を表示させるのは、容易だったが、印刷は簡単にできそうにない。
ドキュメントをよんでも、ちんぷんかんぷん、だったが、「デブキャン」や「ブートキャン」等を見ている内に少しずつ理解はできた。図面を画像にして印刷するのはできそうだが、印刷品質の画像を作ることは簡単なのだろうか?印刷は画面と解像度が格段に違うからなぁ。
そういえば、アメリカ製のOSということで、印刷で使う最小単位が  インチ/100 であるらしい。 240dpi の印刷機、 24ピンのヘッドで、幅 インチ/10 であったころの名残だろう。
インチ/100 は 0.254mm だから、今となっては結構荒いような気もする。 こっちが 0.1mm単位で制御しようと思っても、切り上げや切捨てで思うようにならないようだ。
なんとかやれそうな方法はあると思えてきたが、いざ実装になると、二の足を踏まなければならない。そもそも、IOS や ANDROID 対応にするには、コンパイラに対して数十万円の費用がかかる。
ということで、画面は firemonkey 印刷は VCLでやるのが妥当かなー。

2018-05-11

Fire Monkey

Delphi10.2 には、VCL のほかにFireMonkeyというプラットホームがあって

FireMonkey では、現代のデスクトップ デバイスやモバイル デバイスに搭載されているグラフィックス処理装置(GPU)を利用して、パーソナル環境からエンタープライズ環境までのすべての範囲をターゲットに、複数のプラットフォームで動作する視覚的に魅力のあるアプリケーションを作成できます。

とあるので、使おうとしたが、まだスマホに乗り換えていないせいとも限らないのだろうが、なかなか理解できない。

頭が固くなっているのだろうが、まあ使ってみようと弄り始めたら、 Shift-Jis 以外の文字コードを開く dialog が無いことに気がつく。 VCLの TOpenTextFileDialog に相当するものだ。なんとか解決できたのだが、先が思いやられる。

盤面の画面表示や印刷までたどり着くことができるのだろうか。

より以前の記事一覧