SVGファイルの件

スケーラブルベクターグラフィックス形式といって中身はjavascriptの画像形式で、テキストの入ったような資料を貼付けるのに適していると思う。ブログへの貼付けも通常の画像と同様に貼り付けが可能で、図形拡大による劣化がないのが有難い。今後当サイトでも色々使えそうなので調査してみた。

テキストファイルなのでその気があればテキストエディタで作成・編集が可能だが、基本的にはInkscapeの様な画像ソフトで作成する。Inkscapeの使い方を一からおぼえるのも大変なので、他に手段を考えてみる。Inkscapeでは様々なベクタフォーマットをインポート出来るので、慣れたソフトで作成して変換するのもアリでしょう。

使えそうなフォーマットは*.emf(拡張メタファイル)。これはOffice系からも吐き出せるので便利そう。あとフリーの回路図エディタ水魚堂のBschも*.emfファイルを書き出せるので、回路図を貼付けるの良いかもしれない。ということで早速Bsch付属のサンプル回路図を*.emf出力→InkscapeでSVGに変換してみた。

水魚堂Bschのサンプル回路図

良い感じ。

あと*.wmf(ウィンドウズメタファイル)も対応しているため、簡単な図ならOffice系のDrawで作成して、インポートすれば楽勝じゃん!と思ってPowerPointdeサンプル作って実験してみたところ、インポート時にInkscapeが落ちてしまった。。。

何度やってもダメなため、ネットで調べたが同様の症状は見当たらず、まぁWMF使う人は少ないのかなとでも思っておくことにした。

Officeインポート作戦はあきらめて別の方法を調べていたら、なんと!PowerPointから直接SVGファイルが作成出来るじゃないかー。Office系Drawはある程度使い慣れているので、この方が良いかもしれないが、PowerPointはプレゼンソフトなのでキャンバスサイズがスライドサイズとなり、簡単な図形をそのまま保存すると余白が気になることになる。その場合は保存したい図形を選択した状態でシフトを押しながら右クリックすると「図として保存」という項目があり、そこで出力形式をSVGにすると良い。

作成環境:PowerPoint (Office365) 2021/06/11現在

ちなみに、WordpressでSVGファイルを貼付けられるが、メディアファイルにリンクを設定しても画像ポップアップは出来ないようなので、リンクは無しで貼り付けとする

SVGはソースファイルっぽいので右クリックで保存されないようした方が良さそうだけど、、なんとなく。いや、へんな著作権を主張するんじゃなくて、訪問者の安全性を考えて。。一応javascriptみたいなモンだからねー。

ブロックリスト自動生成(番外)

前回のPythonプログラムの補足説明というか、WEBページで図を使って説明するための練習の様な投稿になります。WEBで表示出来るオブジェクトとしては通常段落と画像が主なものになりますが、画像はビットマップ形式が多く説明用の図には向かないかなと思っていたが、よくよく調べるとHTML5からベクタ図形の表示が出来るようになってるんですね。ほうほう。

ということで、SVGについて少し勉強してみることにした。中身はjavascriptのようで、WEBに貼付けるときは普通に画像扱いで良いとか。作成用のツールはInkscapeというフリーソフトがあるので早速インストールして使用してみた。

illustratorとかと同じように使えそうなスグレモノだけど、あいにく自分はillustrator系は使い慣れていないので、一から勉強するよりは、既存のドローソフトで簡単に描いたものをSVGに変換して貰うだけでも便利そうだ。

簡単なものならWMF(ウィンドウズメタファイル)、EMF(拡張メタファイル)も読み込めるのでBschとかで描いた回路図も変換出来そう。

ということで前回のPythonネタの続き

msks = list(map(lambda n: int('1'*n+'0'*(8-n), 2), [8 if (mask - i*8) >= 8 else (mask - i*8) if (mask - i*8) > 0 else 0 for i in range(4)]))

これは、整数値のネットマスク幅を、IPアドレスリストと同じ形式のマスクビット配列に変換する1文となる。(例えば23 → 11111111.11111111.11111110.00000000

[8 if (mask - i*8) >= 8 else (mask - i*8) if (mask - i*8) > 0 else 0 for i in range(4)]

これが1から32までの数字mskに対して、8ビットずつ4分割し、足りない分は余りと、ゼロとする構文。mskを8で割って、配列の上から「商」の数だけ8として、次に「余り」残りをゼロとする。

map(lambda n: int('1'*n+'0'*(8-n), 2), LIST)

上記配列の要素に対し上位を1で埋めたビット表記に変換して、2進数で数値化

例)7 → 11111110 → 0xFE

これを図で説明すると下図の様になる

なんか余計に分かりにくくなったような。まぁ今回は自分で思い出せれば良いか~くらいのつもりでまとめておきます。今後のツール活用に期待で。