余弦発振　〜さわ狂ぶろぐ〜

　KIEF更新、今回はタカマ小説未来編。
　こっちはユルい展開が多いのでダジャレとか変なサブタイトルがつくことが多いが、今回は際だって適当なタイトルになっている。タイトル相応に展開も相当ユルい。そして回想シーンの合間合間に現在での(大概は無駄な)やりとりが挟まるので展開スピードも緩い緩い。折角主要キャラ4人が揃っているので本筋に関係ないしどうでもいいがいつかやりたかった小ネタを片っ端からぶち込んだ結果こうなった。物語もそろそろ大詰めで小ネタを挟む隙があるか、そして小ネタを挟めるような展開になるかも分からないと言うことで、今のうちに。……大詰めだよな？なんか、まだまだ伸びそうな気はするんだけれども。脱線で。
　今回は砂漠のオアシスでの一幕だ。太陽が降り注ぐ水辺と言うシチュエーションでの、そして男二人旅というホモホモしい展開に彩りを添えるべく、お色気要素投入。今回はいわゆる水着回って奴です。なお、黄昏の方ではそろそろ温泉回ですね。まあ、こっちも水着というよりは温泉回に近いか。最初は水着、着てないし。着せる展開だし。
　この奈南（ナナミ）と言うキャラのネーミングは、ナナミの存在が匂わされた時の話に出てきた攫い屋シンジと言うキャラが名前だけサライの谷村新司をモチーフにしていることに関連して、谷村繋がりの谷村奈南から拝借した名前である。もちろんどちらも名前以外に関連性はない。シンジに至っては字が同じかどうかすら分からんし、こっちはこっちで字面は同じだが読み方が違う。まあ、単純にこの名前を使った時、俺が谷村奈南の読み方を間違って憶えてただけではあるんだけど。
　そんでもってビンガも登場。勾玉がなくなっているので直接言葉を理解することは出来ないが、通訳がいるので意思の疎通は可能に。物語の核心部分で様々な情報をくれるかそういうキャラの橋渡しをしてくれる、ガイド役として活躍してくれるはずだ。

　で。次回は早速そう言った物語の核心からは離れた脱線シナリオに突入である。ナナミちゃんの出番もまだまだ先だ。もちろん、ビンガも。これまでの物語でやり残したネタの総ざらいとかに一応入ってるので、着実に核心に向かって進んで……行く準備は整っている！多分！
　メインシナリオ絡みだけでもやるべき事ちらほら残ってるから……いつになるかは分からないけどな。

　いきなりだが、非常に残念なお知らせ。
　ParadrawのデータとSVGのデータの形式をまあなんとなく把握したことで、座標をどう変換すればいいのかまでは分かった。で、実際に座標を変換してSVGに埋め込むところまでは問題なくうまくいった。しかし、そこまでだった。
　直線で構成されたカクカクした図形なら何ら問題ない。問題は曲線。ベジエコマンドのCもQもSもTも試してはみたんだが、どれをやっても似ても似つかない曲線を描くばかり。
　最初Inkscapeを弄った時に、ベジエの扱い方が違うなとは思っていたが、思っていた以上にベジエ座標の扱い方に差があった。変換したファイルをInkscapeで開いてパスを表示してみれば、その違いは露骨に明白だった。
　SVGでのベジエの座標は線が通過する始点と終点すなわち次の始点までを結ぶ制御点で構成され、制御点は（一直線に並べてなければ）通らないが座標2個なり3個なりごとに始点をリセットするためその座標を必ず通過する。一方ParadrawすなわちFLASHの曲線では曲線に指定した座標は全て制御点のような扱いで、必ずしも通過しない。長方形の角を全部丸めた場合、どの座標も通過しなくなる。
　よって、いくらやっても曲線を完全再現することは無理。まあ、方法はあるのかも知れないが、複雑な計算式を組み上げて補完に必要な座標を追加するより手動の方が楽で確実と言うことが判明した。
　まあ、全部曲線で構成されたパスなんてそんなに多くないし、全部曲線だったとしても大体の座標は入るわけだから手作業で直せばさすがに一から描き直すよりは楽だろうからこの企画を続ける意味まではなくなってないが、まあ残念でした。

　と。こういう結論を出せるくらいには変換も出来てるって言うことだ。ではその変換のプロセスを解説。
　まあ、至ってシンプルよ。データのうち座標部分は分かってるんだし、他の部分も直せるところは直して当てはめるだけ。共通しているパラメータは少ないから当てはめる部分も多くはない。
　そうそう、最初にParadrawのデータを調べた時に分からなかったのでスルーしたパラメータの一つが、いくつかのデータを見ているうちに判明したんだっけ。パスのパラメータの最初の数字がノードの数-1、というか0ベースのノード数だった。うん。変換に使わないね。
　結局、変換で必要になりそうなのはパレットと座標データだけだ。と言うことで、変換作業で行うことはパレットを16進数に直し、1ピクセルがいくつか分からない感じの倍率が掛かっている座標を適当に縮小してやれば終了だ。全て、エクセルで数式書いておけば後は貼り付けるだけ。まあ、エクセルに貼り付ける時に形式指定したり、エクセルから貼り付ける時に要らん改行を消したりするのが面倒なくらいだな。この辺はエクセルのシートをいくらでも改良できそうだけど、改良するほど頻繁に使う予定もない……。それに、そのファイルをInkscapeで読み込んで保存すると勝手に修正されると思う。絶賛放置で。
　さあ、手順が分かったところで図形を一つ変換してみようか。
　引用と図形が嵩張るから次回、最終回でな！

　では早速、前回ラストで見るのを保留にした四角形のタグを見てみようか。

＜rect id="rect817" height="29.319" width="49.736" y="58.283" x="24.698" fill="#ececec"/＞

　……ああ、そうね。そうなるよね。Paradrawみたいに四角も丸も同一形式のパス扱いじゃないんだもんね……。こんな感じで機能が幅広い分、仕様も色々あって複雑そうだから、SVGの仕様書とか見ないでどうにかしようと思ったんだけどな。
　ま、とりあえずさくっとパス化してもう一度。

＜path id="rect817" fill="#ececec" d="
m24.698,58.283,49.736,0,0,29.319-49.736,0z"/＞

　これはまあまあ解りやすいんじゃないかね。こっちはfillがあるのと……えーと、出力した時は気にしてなかったけど、この四角はアウトラインないな。ストローク系のパラメータが一切ないや。ま、引き続き気にしない。
　ひとまず、またmが出てきた。しかも最初に。これはつまり、パスの始まりを表す記号なのかな。他のSVGファイルを見てもパスの始まりは一通りmになってるし。で、目を引くのがラストのzだが、これはパスを閉じる記号だろう。座標を見た感じだとコの字型で止まってるからこれで始点に戻していると思われる。あと、全ての座標がカンマのみで区切られている。カンマはやっぱりシャープノードなのかねえ。

　俺の灰色の脳細胞がフル回転しても、結論は白黒つかずのグレーのままである。ここまで見事にさっぱりではさすがにお手上げなので、諦めて仕様書を紐解くことにする。頼むぜGoogle。
　えー。path要素はSVGのキモであり多用されることを考慮し、表記を簡略化できるようになっているそうだ。だろうね、だからさっぱりなんよ。パスデータすなわちd要素に於いてコマンドは1文字で表記され、状況によって省略可能。
　で、コマンド。今の所毎回見かけるmはmovetoコマンドで、描画ポイントを設定するそうだ。全てのコマンドは大文字で絶対座標、小文字で相対座標を示す。確かにサンプルはどっちも座標にマイナスがあって相対座標だったし、コマンドはどれも小文字だった。Paradrawのデータは絶対座標だったから相対座標に計算し直さなきゃならないかと思ったが、コマンドを大文字にするだけで良さそうだな。
　zはclosepathコマンド。パラメータ無しなので大文字で書いても小文字で書いても動作に変化無し。現在の位置とパスの始点を結んでパスを閉じる。
　今の所直接登場していないが、線を引くコマンドはl,Lのlineto。直接登場していないものの、mで始まった後に更に座標が続くと暗黙の了解としてlコマンドに切り替わる。つまり、四角形のデータならば最初の2個だけがmの座標設定に与えられた座標で、それ以降は暗黙のlコマンドと言うことだ。垂直線並びに平行線を引くパラメータ一つのv,V,h,Hコマンドもあり、それぞれが何なのかはそれぞれを英語で何と言うかとか書いた順番とかで推測してくれ。
　c,Cはcurvetoコマンドで、三次ベジエ曲線を描く。二次ベジエのq,Qもあり、またそれぞれにベジエの制御点の一つを現在位置に固定してパラメータの数が一つ減るs,Sならびにt,Tと言うコマンドがある。
　Inkscape使い始めた時にParadrawと曲線の引き方が随分違うことに少し戸惑い、その違いの一つに頂点から二方向に伸びるベジエ引っぱり線で頂点間にS字を描けることだったが、これがつまり三次ベジエって事か。つー事は、Paradrawのデータには二次ベジエを適用すると良さそうだ。楕円弧コマンドなんてのもあるが、Paradrawに該当するものは無いし個人的に使うことも少なそうなのでスルー。まあ、aとだけ言っておく。
　よし、パスデータについては必要なことは把握した。じゃあ、これからどうするか考えるところで丸ごと保留しつつ次回。

　懸念した通り、前回の画像が早速背景画像のせいで見づらくなったが気にせず。どうせ月が変われば見やすい白バックに戻るんだ！で、PDRをSVGに変換して再利用できないか探るプロジェクト第2回目。
　いやさ。SVGに関してはネットを探せば仕様を書いた資料くらいいくらでも見つかると思うから、わざわざ自力で解読しようとしなくてもいいんじゃねって話になるだろうけど。俺は俺が使う範囲の使用だけ分かればいいんだから手元にあるデータだけでなんとかした方がきっと早いと思うの。
　と言うわけで、早速前回と同じ図形のSVGをみてみよう。同じと言っても、まったく同じものが用意できるんだったら変換プロジェクトなんか要らない。手作業で、ざっくりと似たような形を書いただけだ。大した図形でもないからな。
　SVGファイルには一番余分な部分が省かれた最適化バージョンでも宣言文とかメタデータとかがたっぷり含まれているが、そこら辺はスルー。コピペしただけで記事が終わりそうなのでサンプルも無し。変換の際にテンプレートとしては使えそう＆使いそうだが、まあ精々折を見て要らないの割愛するくらいで変更する必要はなさそうだし、細かい内容はどうでもいいや。、
　その下にgって言うタグで挟まれた部分があるが、これがHTMLで言うところのbodyに相当するみたい。その中にそれぞれの図形を現すタグがある。まずは上の線を表すタグを見てみよう。

＜path id="path815" stroke-linejoin="miter" d="m17.36,25.195,27.722,14.24c20.723,4.1101,32.428 -7.529,42.398 -22.198,25.189,0.78132,23.357,16.046,24.461,29.737" stroke="#000" stroke-linecap="butt" stroke-width="0.14462669px" fill="none"/＞

　1行に纏まってるせいで絶望的に見づらい。しかも桁数も不揃いの小数がカンマやスペースで区切られてるんだからますますだ。一番ごちゃごちゃしたdパラメータがメインの座標一覧なのは分かる。お楽しみは後に残し、あるいは面倒なものは先送りにして分かりやすそうな周りのパラメータを見ていくことにする。
　PDRと違ってその値がなんなのかちゃんと書かれてるから“ここは”分かりやすくて助かる。strokeってのは線の色、fillが"none"で塗らないことを宣言。線の太さのパラメータもあり、他にも線の繋ぎ目と端っこの形状についてのパラメータが見受けられるがどうでもいいな。
　では本題となる座標だが……。見づらいので、バラした上で桁数も揃えて整理してみる。
d="
m17.36 , 25.19,
27.72 , 14.24
c20.72 , 4.11,
32.42 -7.52,
42.39 -22.19,
25.18 , 0.78,
23.35 , 16.04,
24.46 , 29.73"

　おおう。想像以上にワケ分かんねえ……。とりあえず、ざっと見た感じで分かるのは、マイナスがあると言うことで座標の指定が相対座標なんだなと言うことだな。で、区切りがカンマだったりスペースだったりする。最初はx,y x,y……みたいにカンマで区切られた座標がセットでそれをスペースで区切ってるのかと思ったが、どちらのあとにもカンマがあったりなかったりするじゃねーか。とりあえず、図形の形状的にマイナスになるのは線が上に進む部分だけだからxyはこの並びであってるはず。
　んー、でもよく見ると行末にカンマがないのはcの直前だけか。これはcがカンマの役目も果たしてるだけだな。じゃあ問題はそもそもそのcとか冒頭のmとかなんなのって事だが。ノードがスムースかシャープか(角が丸いかとがっているか)を示しているんだとしても、尖ってるノードは2個あるんだから数が合わん。むしろ、スペースで区切られている座標セットがスムース……でもないよな。やっぱワケ分からん。
　サンプルが少ないからこういうことになるんだ。と言うわけで、四角形の方の記述を見てみることにする……が。長くなったのでまた次に。

　KIEF更新、今回はラブラシス機界編。
　肝試しエピソードが始まった時は夏だったが、いい感じで季節外れの真冬に続いてしまった。どちらかというと今回の方が本番だし。
　ラブラシス機界編はバルキリーと呼ばれているロボを中心にいろんな人を描く形にすることにしており、このエピソードではチームヘンデンビルにスポットが当たっている。
　スポットを当てるにあたり、中央からの逃亡時に名前を呼ばれる程度だったキャラ達もしっかり登場。しかもそれぞれ出番がそれなりにあるのでキャラ付けもされた。だがしかし、今後出番あるんだろうか。物語の舞台がまたこの辺になれば自ずと出ることにはなると思うが……。って言うか、しっかりキャラがついてる分、元々のバティスラマ勢すなわち主要でない男キャラは名前くらいで個性の設定さえなく、一言言葉を発したきりくらいのキャラがほとんどの連中よりは使いやすいよな。まあ、その辺は今最初の方で進んでいる書き直し次第でもあるんだけど。そっちで出番が増えてキャラも立つかも知れないからな。
　で。バルキリーに人型モードが加わってみんなのペット状態からヒロインっぽくなってきたわけだが。ようやくだよ！
　そう言えば、書き直しとバルキリーで今の所バルキリーと呼ばれているロボの『本体』をフレイアと呼ばせるのを早める、と言うかタイミングを逃しまくってたのをなんとかする予定もある。ブログの看板娘名表記では使われ出している固有名・イリスってのもあるし、呼び方が変わるスパンを広げたい。
　そんな感じで女の子の姿をゲットした、まあやっぱり今の時点ではバルキリーとした呼べないそれなんだが……。次回では早速出番がなくなります。
　そして、書き始める直前くらいまで俺すら想像もしていなかった展開に。これまで無名のやられ役として生け捕りにされてきた青の人、黒の人、そしてプラスもう一人の野郎三人がまさかのパート主役に。意外な新敵対陣営が出現する次回からの将校三人編が始まるよー。
　ヤベえ、色気も華もなさ過ぎなんだけど、どうしよう。
　ちなみに、書き直しを決めた理由の一つにこの三人と言うか青黒の二人が、あとから追加された個性に沿ってないし、そもそも今述べた通り名前さえ無しの扱いだったのもあったんだよな。
　なんにせよ、そこまで書き直すのにどれだけかかるかって言う。最初の方はホントにちょこちょこ加筆したり削ったりしてるだけだったのに、なんか途中から丸ごと書き直しになってるって言う。当然、書き直したところとその後がちゃんと繋がってないし、そのせいできりのいいところまで更新ってのがしにくいし、そもそも話が1本増えちゃってるんですが。ええー……。

　ネタがないので変なことを始めてみる。
　FLASHが終了したことで色々ばたばたしているというかじたばたしている所だが、これまでにFLASHとして作ったものをFLASH以外にするのがそのじたばたの大部分だ。
　逆if証拠品もFLASHのASからJSに切り替えたが、見た目を支える画像のほとんどはParadrawからPNG出力、その後リサイズする形で作成している。
　基本的にこれだけでほぼ用は足りると思う。これから編集したいと思ったらParadrawで編集してPNGにすればいい。一部Suzukaでパーツを寄せ合わせた大規模プロジェクト（笑）もあるが、そっちもソフトが使えないわけではないから大丈夫だ。そもそも、前に描いた物をまた使うケースが特に思いつかないし。
　そんなこんなで特にやる必要はないんだが、何せネタがないもので。Paradrawで描いた絵をどうにかしてSVGに変換できないか考えてみる。
　そんなことを考えた理由は、SVGもParadrawのPDR形式も基本はテキストで構成されているから。どちらも座標データ他の羅列であるなら、PDRを手作業でSVGに変換するのだって可能なはず。さあ、やってみよう！
　って言うか、確かにさ。これでPDRをSVGに変換できたとして、だ。そこまでしてSVG化する必要性ってものをまったく感じないんだけど。まあ、大きめのイラストならSVG化してページに貼り付けたりするのも悪くないとは思うし。でもやっぱPNGでいいよな……。

　いいんだよ、ブログのネタが増えりゃ、なんでもさ。
　ってな訳で、まずはそれぞれのデータを見比べてみよー。今回サンプルにするのはこの図形。
　これはPDRのサンプル、Paradrawで描いたバージョン。SVGでもこれと大体同じような図形を用意した。で、PDRファイルの内容はこれ。短いので丸ごとコピペするぞ。
PDR030
300,300,255,255,255,1,60,30,2
0,"",0,0,1,128
2
5,#FALSE#,20,1,-16777216,0,-256,3320,1570,0,.1416016,.1416016,-1,#FALSE#,0,#FALSE#,0
0
0,1000,1100
0,2480,2380
1,3561,1861
0,4000,660
1,5381,1072
0,5780,2260
3,#TRUE#,20,1,-16777216,1,-3342541,3050,4030,0,3.051758E-02,3.051758E-02,-1,#FALSE#,0,#FALSE#,0
0
0,1320,2880
0,1320,5180
0,4780,5180
0,4780,2880

　1行目はファイルの形式の宣言文だな。メインは2行目からだ。2行目はキャンバスのサイズと背景色のRGB。その後の数字はさっぱりだが無視してよさそう。ちなみに、キャンバスのプロパティをみたらパスの最適化にまつわる設定が60と30だったので、他の数字もキャンバスの設定だろう。
　これまたキャンバスの設定関係だろう数字を2行ほど飛ばして、やたら長い行がパスのパラメータだな。それぞれなんなのかを推理しないとならんな。分かりそうなのは、一つ目のFALSEとTRUE。二つの図形の最大の差である、開いているか閉じてるかだと思われる。次の20は分からんが、その次の1は線の太さじゃないか？マイナスのやたらでかい……いや小さい数は案の定0xff000000でARGB、透明度がffであとは0の線の黒色。その次の0と1は分からん。塗りの有無？次のマイナスも色、今度は塗りだろう。ここからあとはさっぱりだ。小数とか何なの。次の0だけある行も謎だが多分パスのグループ番号とか複合IDとかじゃないかと思われる。まあ、色と座標くらいあれば大体再現できそうだし、わかんなくても別にいいんじゃね。
　さて、いよいよ座標の羅列だが……。キャンバスは300×300なのに1000とか、ましてや5000以上って。整数で表現するために倍率が設定されてるんだろうけど、どう見ても10倍じゃないな。まあ、20倍か、あるいは16倍とかかな。定義の行にあった「3320,1570」あたりも座標っぽい数字だ。パスのパラメータでノード以外に座標って言うと……グラデーション関係かなぁ。
　各行の最初の0と1は明らかにそのノードがシャープかスムーズかだ。座標はさっき書いた通りに何倍かにはなっているがまあ分かりやすくて助かる。
　で、次はSVGだが……。いい加減長くなってるのでまさしく次の機会ってことで。

　ああもう次から次へと！
　FLASH余命宣告を受けてのFirefoxでの取り扱いほぼ打ち切りにつき、JSかを余儀なくされた逆if証拠品。ほっと一息入れていたら今度はAutoPageがSSL導入とかでまた表示できなくなっちゃいましたよ！なんかアナウンスはあった気がするが、関係ないことだと高を括ってたら大騒ぎですよ！
　って言うかそもそもSSLって何。SLなら近所で土日とかにプオオオオオォォ！とか吼えたくりながら写真撮られてるけど。
　SSLとは盗聴・傍受・改竄などを防止するためにデータを暗号化して通信するプロトコルのことで、以前からちらほら見かけていたhttpsで始まるアドレスがそれだそうな。
　AutoPageがSSL導入に踏み切ったのは、恐らくGoogle ChromeがSSLじゃない普通のhttpプロトコルのサイトで「安全じゃない」表示を行うようになったためだと思われる。さらには、httpのページはGoogleなんかでの検索順位がグッと下がるとか。つまりはまたアメリカの連中が自分たちの仕様を押しつけようとしてるって事か。別に表示するだけなら暗号化なんかされてなくたってなんてことないし、入力するったって個人情報を入れるようなフォームじゃなきゃ問題ないと思うがね。
　なお、SSLについて調べていたら2015年6月にSSLの使用は禁止されてそれっきりみたいな記事があって、SSLについては使うべきではない。とまで書かれていてええっとなったが、禁止されたのはセキュリティの問題が見つかった最後のSSLバージョン3.0であり、その後は後継のTLSシリーズが使われているがTLSとはなかなか呼んで貰えずSSL呼ばわりされている模様。あれか、オーストリーと呼んでくださいと発表したのに誰もそう呼んでくれなくて時刻大使館すらオーストリアに戻したのと似たようなもんか？違うか？違うな。むしろナビスコがいつの間にかヤマザキビスケットになったのにいつまでもナビスコのような気がするのと……も違うか。まあいいや。
　で、そのSSLで保護されたページには、インラインフレームで逆ifのスクリプトページが表示できないという訳らしい。
　俺の場合はKIEFを表示してそこからリンクで飛んできているので最初のアドレスはhttpだし、そこからリンクを辿ってブログ内を移動してもhttpのままなのだが、投稿後にブログを表示するボタンを押したり、俺は未確認だがコメント投稿した後などはhttpsの方で表示されてスクリプト部分が空白になる。google辺りから飛んでくる場合もhttpsとして表示されるんだろう。
　AutoPageによるアナウンスを読み返してみたが、どう対応すればいいのかがさっぱり分からん。余所のブログパーツなどを表示している場合はそれが表示できるか確認し、表示されていない場合は提供サービスに対応状況をお問い合わせください、と書かれている。何それめんどくさい。
　なるべく人に頼らずに対応せねば。