画像の切り貼りは出来るようになった

簡単な画像の切り貼りはいいのだが、複雑な形はメゲてくる。
20220129a.jpg

一問毎に解答を見たりすると、次の答えが目に入って見えてしまうという事を避けるのは、紙面の制約から出来なかった。しかし画面でみる場合は、ページ数が多くなることは問題とならないので、一問一答 というレイアウトが可能な訳だった。そして、複雑な切り取り方が必要となった。
1ページに答えが納まっている場合は、まだいいのだが、

20220129b.jpg

のような、編集者の手抜きという組み方で、複数ページに表示されているのを見ると腹がたつのだった。1行くらい、追い込めよ! 

スポンサーサイト



今日も日が暮れた

今日も、 html や CSS の試行錯誤で日が暮れた。 思考しないでの試行錯誤ではイカンナー。
結局、何時間かは、 { の脱落が原因だった。試行錯誤の意味がまるで無かった。やはり、CSS HTML Script の統合環境を使えるようにならないと、リンクなどを張り巡らすのは無理なのかもしれないなー。

風さんの処で、LaTeX の記事が再開されたが、期間が空いたせいか、awk について勉強したことはどこかに行ってしまったような感じで、ソースを眺めている。誰か Python で、書き直してくれたら、 Python の勉強も出来て、一投二鳥なのだが。 

統合環境といえば、柿木将棋とSAKURA エディターを開いてそれらしくしてみた。

20220127.jpg

左側が、柿木将棋のエリアで、右上が中間図用、そして、右下が作業場で、これを、なんとかすれば、 HTMLのソース または LaTeXのソース が一丁出来上るとか、なれば面白いのだが、夢のまた夢だろう。

風さんの LaTeXのソース、あれで実際に本が作られているのだから凄いな。 ちゃんと稼働しているシステムは好いシステムだ。

今昔詰将棋の brush up 続続続

詰将棋の単行本も電子化されているが、結局は紙と同様な使い方しかできない。自分で単ページの画像を作ってしまえば、将棋世界の付録と同様な使い方ができるのだった。
で、試しに作ってみると、400ページを超える本でも、読み込みに時間もかからないのだった。20年程前なら、到底実用化できなかったマシン性能だ。

20220123a.jpg

20220123b.jpg

これで、出題図と解説のページを何遍も行き来しなくても済む。ようやく、昭和のやりかたから解放されるのかもしれない。

データの蓄積が進めば、いろいろと面白い仕掛けが可能そうだが、まだ html はハンドアッセンブルなので進まない。まあ、エクセルのオートフィルを使っているのだから、そんなに時間はかかる訳ではないのだが。
最近エクセルの調子がおかしい。まだ、excel2013 を使っているからか。

今昔詰将棋の brush up 続続

将棋世界の付録、通常は、1図/1ページ なのだが、2図/1ページ の場合がある。

1図/1ページ の場合は、問題図をクリックすれば、問題図と解説が見開きで現れるようにしたのだった。
しかし、2図/1ページ の場合、解説ページは

202201226.jpg

のように、該当部分のみを表示するのがいいと思われた。
clip-path: を使って表示することになったのだが、 パラメータの指定を間違っていたためにエラい苦労をした。コンマで区切るものだとばっかり思っていたら、スペースとコンマの組み合わせだった。delphi での プログラムに慣れているので、デリミタは、1種類と思い込んでいた。
css のソースは
img.clipSouth{
  width: 100%;
  clip-path: polygon(0%  50%, 100% 50%, 100% 100%, 0% 100%);

また、問題部分でも、ページの上部と下部に、別のリンクを張るのがまたワカラナかった。
Net で調べても、usemap を使うとか JQuery を使うとかばかりでよくわからなかった。時間ばかり掛かって埒があかないので基本から考えてみたら、あまりに簡単に実装できた。独学の無駄な時間だった。

まあ、topmenu が表示出来なくなってしまうことがあるが、またの機会にしよう。

20220122a.jpg

ちなみに、問題部分の html のソースは以下のようにシンプル

  <div class="diaArea">
    <img class="wd100" src="41.jpg" >
    <a href="#p41n"> <div class="north" id="o13"> </div></a>
    <a href="#p41s"> <div class="south" id="o14"> </div></a>
</div>
<a href="#p43"><img class="wd100" id="o15" src="43.jpg"></a>

今昔詰将棋の brush up 続

引き続き、将棋世界の付録の部をイジってみる。
冴えんなー。時間ばかりが無為に流れていく。

20220120.jpg

今昔詰将棋の brush up

今年になってから、いろいろと Brush up している。どこからも、res が流れてこないので、結局は自分で作って、自分で遊ぶだけに終わるのかな。

20200116.jpg

画像ファイルから、PDF にしてしまうと、ただ、本を画面で見るだけで、紙で読んでいるのとあまり変わらないで終わってしまう。
電子化することによって、紙とちがって面白いことはいろいろと出来そうなのだが、如何せん新しい技術は修得するのが難しい。
ハンドアッセンブルで html を作っていては、時間がかかって仕方がない。 1ファイル 10 分として計算すると、ウソのような時間が取られるのだった。 

画像で参照ができると、名前が少々間違っていても、どうっと言うことはなくなるのだった。ということで、入力するデータが多少間違ってもいいから、漏れなく拾っておこうという方針は今となってはあまり、間違ってはいないのかもしれぬ。データの誤りが多いことの excuse ではあるのだった。

(1/17) いやー、名前間違っているやん。

長手数はアニメーションを分割

CSS のテストを兼ねて endgame の紹介をしている。

Chess の動きをhtml で 再現するのは、script ファイルと PGN ファイルを用意すれば出来るようだ。
しかし何が行なわれているかを理解出来ないのは気分がいいものではない。

こんな初期配置を指定していいものか?そういったこともワカラナイ。

今日の図は、"THE AMAZING CHESS ADVENTURES of BARON MUNCHAUSEN" Amatzia Avni, 2011 より、
元図の情報( by F. S. Bondarenko (Feenschach, 1960).)

この初期配置から 62 moves 後の局面が、

White to play

とのことだが、その手順を求める訳ではない。

1週目の手順を作ったらコピーして、 一寸手を加えると 2週目の手順の html ソースはできあがる。

アニメーションは 20 ply までしか対応していないので分割はやむを得ない。

詰将棋に、こんなのあったかな?

今日の図は、"THE AMAZING CHESS ADVENTURES of BARON MUNCHAUSEN" Amatzia Avni, 2011 より、元図の情報( S.Varov and S. Kasparyan 1st-2nd honorary mention, Birmov MT 1991. The first four moves of the study were omitted.)

White to play and win

王手の連続なので、簡単だ。

図面を並べて表示するのはどうするのか?結局は安易に table を使ってしまうのだった。




駒のアニメーションを作っていく

R.Réti の図、作ったのは1921だが、発行を許可したのは1922とのことだ。 (Investigation by J.Selman, Schach-echo, 1967)

R.Réti
Kagen's Neueste
Schachnachrichten iv-vi. 1922

Draw

まず、手順の表記を作ってしまう。


<p class="手順">

1 ♔g7!  h4 <br />

2 ♔f6!  ♔b6 <br />

3 ♔e5!  ♔xc6 <br />

4 ♔f4!  Draw

</p>


さて、駒のアニメーションを作っていく。


<div class="駒h8">♔</div><div class="駒c6">♙</div>

<div class="駒a6">♚</div><div class="駒h5">♟</div>


<div class="fade_1_   駒g7">♔</div>

<div class="fade_2_   駒h4">♟</div>

<div class="fade_3_   駒f6">♔</div>

<div class="fade_4_   駒b6">♚</div>

<div class="fade_5_   駒e5">♔</div>

<div class="fade_6_   駒c6">♚</div>

<div class="fade_7_   駒f4">♔</div>


初期の駒配置の次に手順の骨組みを作る。

この時点では、駒が現れるだけ。


ply 1 では、♔が初期配置 h8 から動くので、見やすく、移動させ、ply 1 で消える class とする。


<div class="駒c6">♙</div>

<div class="駒a6">♚</div><div class="駒h5">♟</div>


<div class="fade_1_   駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

...


ply 2 では、♟が初期配置 h5 から動くので、見やすく、横に移動させ、ply 2 で消える class とする。


<div class="駒c6">♙</div>

<div class="駒a6">♚</div>


<div class="fade_1_   駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

...



ply 3 では、♔が ply 1 g7 から動くので、ply 1 の class を ply 1 で現れ ply 3 で消えるclass とする。


<div class="駒c6">♙</div>

<div class="駒a6">♚</div>


<div class="fade_1_3  駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

<div class="fade_3_   駒f6">♔</div>

...


ply 4 では、♚が 初期配置 a6 から動くので、見やすく、横に移動させ、ply 4 で消える class とする。


<div class="駒c6">♙</div>


<div class="fade_1_3  駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

<div class="fade_3_   駒f6">♔</div>

<div class="fade_4_   駒b6">♚</div><div class="fade_0_4  駒a6">♚</div>

...


ply 5 では、♔が ply 3 f6 から動くので、ply 3 の class を ply 3 で現れ ply 5 で消えるclass とする。


<div class="駒c6">♙</div>


<div class="fade_1_3  駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

<div class="fade_3_5  駒f6">♔</div>

<div class="fade_4_   駒b6">♚</div><div class="fade_0_4  駒a6">♚</div>

<div class="fade_5_   駒e5">♔</div>

...


ply 6 では、♚が ply 4 b6 から動くので、ply 4 の class を ply 4 で現れ ply 6 で消えるclass とする。

また、♙ 初期配置 c6 が捕られるので、見やすく、横に移動させ、ply 6 で消える class とする。


<div class="fade_1_3  駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

<div class="fade_3_5  駒f6">♔</div>

<div class="fade_4_6  駒b6">♚</div><div class="fade_0_4  駒a6">♚</div>

<div class="fade_5_   駒e5">♔</div>

<div class="fade_6_   駒c6">♚</div><div class="fade_0_6  駒c6">♙</div>

...


ply 7 では、♔が ply 5 e5 から動くので、ply 5 の class を ply 5 で現れ ply 7 で消えるclass とする。


<div class="fade_1_3  駒g7">♔</div><div class="fade_0_1  駒h8">♔</div>

<div class="fade_2_   駒h4">♟</div><div class="fade_0_2  駒h5">♟</div>

<div class="fade_3_5  駒f6">♔</div>

<div class="fade_4_6  駒b6">♚</div><div class="fade_0_4  駒a6">♚</div>

<div class="fade_5_7  駒e5">♔</div>

<div class="fade_6_   駒c6">♚</div><div class="fade_0_6  駒c6">♙</div>

<div class="fade_7_   駒f4">♔</div>





1 ♔g7! h4
2 ♔f6! ♔b6
3 ♔e5! ♔xc6
4 ♔f4! Draw