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

簡単な画像の切り貼りはいいのだが、複雑な形はメゲてくる。
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