SVG最適化マクロ-2008 [花子]
定番になってきたSVG最適化マクロの最新版である（補足すると、花子のデータをSVGを介してIllustratorに読み込ませるうえで、花子が書き出すSVGを最適化させてみよう、というお話）。頭の悪いところはそのままに透明度の最適化を行う。
さて、本題に入る前に。熱烈な要望を出したのが功を奏したのか、2008になってSVG出力したときに透明度がちゃんと反映されるようになった。
さて、適当なブラウザで実際に表示させてみると、確かにちゃんと透明度が反映されている。ちょっと感動である。Illustratorで読み込んでも、確かにちゃんと透明度が反映されている。やはり感動である。
さて、ここでちょっと注意しなければならない点がある。Illustrator cs3 に読み込んだSVG、表示は確かに透明になっているのだが、透明なはずの図形の不透明度が100%になっている。
これでは、Illustratorに読み込んだ後に（ちゃんと表示されているが）ちゃんと透明度を編集できないということになってしまう。これまでか、というとそんなことないわけで。
花子が吐き出すSVGとIllustratorが吐き出すSVGのソースを比較すれば解決法は一目瞭然。花子のSVGに記述されている「fill-opacity」を「opacity」に書き換えれば（どういうわけか）良さそうだというのが分かる。実際に試してみると、
不透明度がちゃんと25%になっている。というわけで最適化マクロも透明度周りを調整するようさっそく改変。
肝心のコードは以下。
透過編集 [花子]
JUST Suite 2008 の発売まで１週間を切っている。
今さら的だが、ふと、こんな機能があったら良いなぁ、というのを。
一太郎で、ちょっと複雑な図形の編集をしたいとき、花子透過編集という機能を使う。花子も持っている人限定の機能だが、（大雑把に言うと）一太郎の中に一時的に花子の機能を重ねるような使い方ができる。
で、花子に「一太郎透過編集」なんていう機能が付いたらかなりすごいんじゃないか、なんて思ったのだがどうだろう。
花子は文字の処理に関して改良を続けているが、それでもまだまだ機能的には貧弱である。かといって、一太郎並みの機能を盛り込んでしまったら、今度は一太郎の立ち位置が「？」になってしまうだろうし、花子的にも、「図形プロセッサなのにそこまでそういうコストをかけるのもどうよ？」ということになりそうだし、それはそれでうまくないのかもしれない。
で、いっそのこと、花子の文字枠に対して、（当然一太郎も持ってる人限定で）一太郎でできる処理がほぼ全てできる透過編集機能が使えれば、両者の立ち位置はあまり崩さないまま（安価で手軽な）レイアウトソフトに早変わり、になっちゃうんじゃないだろうか。図形主体のドキュメントを作りたい、だとか、レイアウトに凝りたい、というときには花子を使って一太郎透過編集で。文章主体で、ところどころちょっと凝った図形処理をしたい、というときには一太郎を使って花子透過編集で。みたいな。
そんな調子で三四郎も透過編集できるようにしたりして、スイート全体をシームレスにし、使うソフトの組み合わせ次第で機能が拡張される、なんていうふうになったら、ちょっとすごいんじゃないかなぁ、なんて思うんだが。いや、そうなったら少なくとも私はかなりありがたい。
回転 [花子]
恥ずかしながら、ヴァレラ（バレーラ）が2001年に亡くなっていたというのをつい先日知った。
あらためて思い返してみると、自分、ベルタランフィ読んでないぞ。
円高なのとAmazonでキャンペーンやってるのをいいことに英訳版のコミックスを十冊単位で注文している場合ではない。
ちょこちょこ使っている機能なのだが、これもあまり大々的には書かれていない。
図形を回転させるとき、「変形」→「回転」を使うことも多いが、単純に、図形を選択した後に、四隅に表示される□マークをドラッグすることで回転させることもよくある。前述の「図形スナップ」とシームレスに使えるため、手軽にピシッと回転させることができて非常に楽である。
図形の選択には「図形の選択（回転・せん断）」と「図形の選択（拡大／縮小）」の２タイプがあり、どちらでも四隅のマーク（前者は○マーク、後者は□マーク）のドラッグで回転させることができる。
↑「図形の選択（拡大／縮小）」でも回転させられる
「図形の選択（回転・せん断）」では回転の中心を指定することができるため、より自在に回転させることができる。
一方、「図形の選択（拡大／縮小）」で回転させるときは、通常、図形の中心が回転の中心となる。
ここまでは良い。
回転させるとき、ALTキーを押しながら回転させると、回転の中心が図形の中心ではなく、ドラッグしている□マークの対角線上の□マークが回転の中心になる。これがちょこちょこ使っている機能なのだが、よっぽどヘルプを読み込んでいるか、いろいろなキーを試しに押して機能を探るような人でもないかぎり（わたしは後者）、あまり知られていないんじゃないかという気がちょっとする。ふとしたときに何かと便利。
↑「図形の選択（拡大／縮小）」で選択後ALTを押しながら回転させる
ズームイン [花子]
そんなこんなでキーボードを新調。確かにスムーズ。
今までずっと安いモノを使っていたこともあってか、初日は妙な力が入って逆に肩が凝ってしまったわけだが。それがいつの間にか馴染んでいる感じ。ふと気がつくと無意識にキーを叩いている。どこに指を置いていても妙にフィットするし、小指で叩くときにも意識して力を入れるような必要がない。微妙な傾斜も絶妙。インターフェイスの境界感がほとんどないくらいとにかく軽快で、そこはさすがに言われるだけのことはある。
東プレ Realforce108UH 静電容量無接点変荷重108USBキーボード(白) SA0100
- 出版社/メーカー: 東プレ
- 発売日: 2007/03/28
- メディア: エレクトロニクス
焦らずじっくりタイミングを計ると割と安価に購入できる。
ついほんの一昔前まで、ディスプレーというと15～17インチが主流で、19インチというとかなり大きい感じだった（ような気がする）。最近になって、液晶、特にワイド液晶もかなり当たり前になってきて、19インチも珍しくない、どころか、あるいは小さいくらいの感覚になってきているような気もする。当の私も現在は21.1インチワイドを使っているのだが、ここで思わぬ問題が出てくる。
花子は従来、画面の表示倍率がMAX800%だった。後にMAX3200%まで拡大表示できるようになったが、現状、一部インターフェイスやマクロが完全には追従していないところがないでもない。画面左下にある「表示倍率切替」は800%までしかなく、ささっと拡大したいときにちょっと不便だったり、 DisplayRatio( )は800%を超えた値を指定できない。
で、何が問題かというと、画面が大きく解像度が上がったぶん、表示倍率800%でも図面がたいして大きく見えない。それ以上の倍率にするには、たとえば「任意倍率」で直接数値入力するとか、スクロールの「＋」をぽちぽちクリックするとかする必要がある。
で、そんなときに「ズームイン（虫眼鏡に”＋”のマークのあるアイコン）」を使うと便利なわけだが…。
拡大したいところの中心をぽちぽちクリックたびに、そこを中心に拡大されていく。という操作法はいろいろなところに表示されるが、
拡大したい範囲をくいっとドラッグすることで、その領域を画面いっぱいにサクッと拡大表示させることもできる（こういう機能は別に珍しいものではないが）。もちろん倍率はMAX3200%までいける。
ぽちぽちクリックするより、くいっとドラッグして拡大する方がずっとスムーズで楽なのだが、この機能、あまり大々的には説明されていない。画面下のステータスラインに「領域で拡大します」と表示されるだけだし、ヘルプにもちょっとしか書かれていない。とてももったいないような気がする。
図形スナップとスマートガイド [花子]
世間は三連休だったのね…。
最近ジョウビタキを見ないなぁと思っていたが…。
ちょっと塗装したいものがあり、屋外でシャコシャコ水研ぎしていたら近くに寄ってきた。
与太ついでにもう一つ与太。
小型軽量最重要視でE-410を選択したわけだが、E-510、こないだのファームアップで手ぶれ補正機能が恐ろしく向上したらしい。ちょっとくやしい。中古で6万。くそぅ。
先日公開した簡易版ネズミの折り図に関連して…。
前々から何かと花子で作図していたうえ、花子からIllustratorにデータを移す方法をあれこれやっていたことからも容易に想像できるように、この図は９割５分方、花子で作っている。それをIllustratorに持ってきて、花子では処理しきれない諸々の調整をし、InDesignでまとめてAcrobatで最終調整する、という、ほとんど無駄とも言えるようなオーバースペックかつ冗長な流れの末にできたものである。このへんは、いずれ簡素化されたりすることもあるだろうが、まぁ、あれこれ実験的な意味も含めて試行錯誤しているわけである。
いじってみて感じるのは、Illustratorがやたら強力なのは言うまでもないことだが、花子は花子ならではの強みがあるなぁ、ということである。もちろん、どちらが使える／使えないという類の話ができるほど両者を熟知しているわけではない。私の知らないテクニックが山ほどあるだろうことも、単に慣れの問題もあるだろうことも、重々承知の上での話である。
たとえば、Illustratorの「スマートガイド」は図形の位置合わせに便利だし、複雑に重なった図形を選択することにも重宝する。何よりあの視認性の高さは頭抜けている。
なのだが、折り図を描く際、花子の「図形スナップ」は、それ以上に小回りがきいてくれる。視認性に難があるものの、ファンクションキーとの併用で、位置合わせから正確な作図までさくさく動いてくれる。かつて、私が花子で作図しているところを見たある方が「速い…」と漏らしたことがあったが、そのへんの操作性の高さあってこそ、である。
使い込んで初めて分かるがカタログからでは分からない操作性、というのは、なかなか宣伝もしにくいところだろうし、実際わたしもどういうときにどう使えるかうまく言葉で説明できないところではあるのだが、ともかく、花子にはIllustratorとは異なった使い込みようがありますよ、という、ようはそんなような話である。
プレーンとレイヤー [花子]
Gigantocypris agassizii、どういうわけか「ギガントキプリスアガッシィ」と表記されているのを多く見かけるのだが、普通に「ギガントキ（キュ）プリス・アガッシズィイ」じゃないのか？しょこたんが起源、なのかなぁ。まあ、どうでも良…くない…。スカシカシパンとかギガントキプリスとか、突いてくるところが「いかにも」で美味しいぶんちょっと惜しい。
気づいたらamazonにOTAKUストア
まれに「花子にはレイヤーは無いんですか？」というような質問がある。
これに対する一般的な回答は「花子ではプレーンという名前で呼ばれているものがレイヤーに相当します」というものである。
が、これは厳密には正確ではない。レイヤーもプレーンも、表示／非表示を切り替えたり編集の可否を切り替えることができるなど、かなり近いものがある。が、両者は本質的なところに違いがある。
花子のプレーンはオブジェクトの上下関係とは無関係であり、むしろ複数のオブジェクトをグループ化しているようなものである。
たとえば、様々な図形が描かれているうち、一番下と一番上に矢印が描かれているとして、花子のプレーンではこの2つの矢印をその上下関係を保持したまま1つのプレーンに置くことができる。たとえばこのプレーンに「矢印」という名前を付けて管理する、というような使い方をするイメージである。このプレーンを非表示状態にすれば、上に描かれていようと下に描かれていようと関係なく図面中のすべての矢印を非表示にすることができる。矢印の線種だけをすべて変えたい、なんていうようなシチュエーションの際にも重宝する。
逆に、プレーンの順番を変えても、図形の上下関係は全く変わらない。そもそも、図形の重なりを調整するための機能ではないのだから、当然と言えば当然である。
レイヤーが、重なり順に基づいて図形を扱う、言うならばビジュアル面を扱うものに対して、プレーンは、図形を目的や種類で分けて管理する、言うならば意味を扱うもの、という感じだろうか。レイヤーはレイヤーで便利だしプレーンはプレーンで便利だもんで、花子とIllustratorを行き来していると、どちらもレイヤーとプレーン両方を搭載してくれないかなぁ、と切に感じることがままある。のだが、たぶんインターフェイスがものすごく煩雑になって逆にわけ分からなくなるんだろうなぁ、とは思う。
何かこぉ、うまい手はないものだろうか。
SVG最適化マクロ－その２ [花子]
少し改良、なのか？
やっていることは相当に頭が悪いが、従来の「SVGファイルをメモ帳で開いて文字コードを変えて上書き保存」といういちいち面倒な操作を含めて自動化。
どこがどう頭が悪いのか、というと、文字コードを変更する行程を、本当にメモ帳で開き、WSHのSendKeysで実際に操作する、というあたり。鈍くさいにも程がある。
前回詳しく触れなかった「一部コメントアウトしている部分は私用に付けた処理」というのは、花子では扱えない細かいパターンの線種に変更する、カスタム設定な部分。
http://blog.so-net.ne.jp/t-usuda/2007-03-22
ようは↑の処理をするところ。
細かいところだが、花子が出力するSVGには、用紙全面と、マージンを除いた印字全面それぞれの枠が非表示の状態で含まれている。これはこれで編集するときに便利なので、あえて表示されるように書き換えるようにしてみた。
肝心のコードは以下。
SVG最適化マクロ [花子]
花子の図面をIllustratorに読み込ませたいとき、SVGを使うと良さそうだ、というのは既出の通り。
しかし、実際に花子でSVGで出力し、そのファイルをIllustratorで「配置」させると、一見して図面がぼろぼろになっているように見えるというのも既出の通り。
そして、一見してぼろぼろになっているように見えるものの、実際は線幅が太く読み込まれているだけ（のよう）で、線幅を細くしてやれば、かなり正確に読み込まれる、というのも既出の通り。
さて、Illustratorに読み込ませることを前提に、花子が出力したSVGを都合の良い形に整形する作業が自動化できたらうれしい。うれしいって、もちろん私が。
どうにかうまくいかないだろうか、と実験していたのだが、とりあえず線に関しては変換できたので、ひとまずアップしてみた。
なお、あくまで実験の延長ということもあり、手順もコードもやたらと鈍くさいことをあらかじめ断っておく。
以下、手順（とりあえずメモ程度）。マクロ本体は既に登録したものとして話を進めると…
- 花子で作った図面をSVGで保存する
- できたSVGファイルをメモ帳で開く
- 「名前を付けて保存」で文字コードを「ANSI」にしてそのまま上書き保存
- マクロを起動、いま上書きしたSVGファイルを指定する
- 一瞬で最適化が終わる（勝手に上書き保存されてる）
- 最適化されたSVGファイルを再びメモ帳などで開く
- 「名前を付けて保存」で文字コードを「UTF-8」にしてそのまま上書き保存
- Illustrator上で、いまできたSVGファイルを「配置」する
肝心のコードは以下。やっていることは、線幅、線種パターンを1/40にし単位mmを付ける、という、ただそけだけ。一部コメントアウトしている部分は私用に付けた処理なので無視してOK
花子2Illustrator－その３ [花子]
以前、花子で出力したSVGをIllustratorに読み込ませると線幅が10倍になるというようなことを書いた。今回はその訂正である。
結論から言うと、10倍ではなく、もっと太くなっている。
いろいろいじっていたため、何をどう換算したのかその過程は自分でもよく覚えていないのだが、SVGに記述されている線幅を1/40にし、単位としてmmを付けることによって正確に読み込まれるようである。
たとえば
<path fill="none" stroke="#000000" stroke-width="8" stroke-linecap="round" d="M 400,400 L 800,400" id="Fig_0" jsh:plane="A" jsh:type="line">
というもののうち、
stroke-width="8"
を
stroke-width="0.2mm"
と書き換えることで正確に読み込まれるようになる。
このへんはSVGをちゃんとやっている人やDTPをやっているような人であれば常識以前の話なのかもしれないけれど、ptとかmmとかqとか、私のような門外漢にはややこしい話である。
で、線種はどうなるのか、というと、実はいまいちよく分からないところがある。色々とテストしているのだが、どうも一部に妙な変換がされることがあるような気配があり、詳細を探っている段階である。
花子で出力したSVGをIllustratorに読み込ませるために最適化させる計画は、そんなわけで現在50%ほどのところで停止している。
端っこで店を広げる
鳥の骨探
ちょっとお手伝い
森の野鳥を楽しむ一〇一のヒント
共著
玉川大学公開講座
折り紙講座ございます