2017年5月11日木曜日

フルHDのモニターを仮想的なWQHDで使用中

※自己責任でお願いします。出来ない方はそっ閉じしてください。

前置き

27インチのフルHDモニターを縦長で利用していたけど横幅が1080では狭いと感じるようになった。横置きに戻してみるといわゆる「縦が足りない問題」が当然の如く発生した。そもそも横より縦が欲しくて縦長で使っていたことを思い出した。WQHDモニターを購入する資金の調達ができないので諦めていたが、ふと「あれをああしたらどうなるか」と思いつき、試行錯誤していたらできたという話。

続く »

2017年4月15日土曜日

SVGを正しくタイル表示するブラウザーはEdge（訂正あり）

タイルパターンのSVGをChromeでプレビューしている際に継ぎ目がおかしいことに気が付き色々試した。おそらくブラウザに起因しているものだと思われる。

上の画像は左からGoogleChrome、MicrosoftEdge、MozillaFireFox。MSEdgeのものが私の期待している結果。SVGのViewBox内部のみをタイルで表示している。ChromeとFireFoxではViewBoxの外まで表示しているため継ぎ目がおかしくなっている。

ということで今のところSVGをタイル表示させるならEdgeでということになった。アンチエイリアスも少し綺麗にかかっている感じがする。

訂正(2017/4/16)

ブラウザ云々ではなかった。下の画像はViewBoxのサイズでRectを作ってタイルパターンにして継ぎ目だけを500％で比べてみたもの。

左からChromeでwidthが整数の場合、Chromeでwidthが小数を含む場合、Edgeで整数の場合、Edgeで小数を含む場合。

SVGの幅と高さをアドリブで決めており、小数が混ざっていたために繋ぎ目がおかしくなっていただけ。ChromeやFireFoxではそれが極端に出現しているだけ。Edgeでも発生しているが他と比べて影響が小さいだけ。

また、継ぎ目がおかしくなる小数とならないものがあり、そのあたりはよくわからない。とりあえず整数を使えば間違いないのでそうする。既存のものは気になるものだけ修正していく。

あとEdgeのアンチエイリアスが綺麗だと表現したが、強くぼかしているだけ。好き嫌いの分かれるところ。

2017年3月31日金曜日

採掘時にグラボの負荷を下げたい

仮想通貨に興味を持ち少し採掘をしてみたのですがGPUを100%働かせるのでながらマイニングができない。そもそも本気で採掘している人はそれ専用のハードを用意して100パーセントパワーで稼働させていると思うので関係ない話ですが、ながら作業できるように負荷を下げてマイニングしたい方のための話。Windows＋GeForce用。

続く »

2017年3月23日木曜日

ornament2

制作時に利用したガイドラインを付けて。

幅をそろえてみたけどメリハリがない感じ。

RPGの武器みたい。

初期設計が悪いとゼロからやり直すことになる。ただ設計段階で完成を頭に描くのは経験とセンスが必要となるのでなかなか大変。

2017年3月22日水曜日

オーナメント習作

Handbook of Ornamentなるパブリックドメインのオーナメント集を教えてもらった。昔から描き方が気になっていたものが収録されていたので早速挑戦。

収録されているものすべてに挑戦して自分の技術として取り込みたい。

2017年3月21日火曜日

あふでSVGを表示するために四苦八苦

SVGはブラウザでプレビューできるので画像表示ソフトなど必要ありません。しかしファイル名から中身が思い出せず、ちょっとだけ確認したいファイルが大量にあるとブラウザでは少し不便です。SVG用のSusieプラグインがあったのですがあふから利用できませんでした。

諦めてかなりたつのですが、VSCODE内部でSVGをプレビューするという記事を発見、SVGを画像ではなくHTMLで扱うという目から鱗の解決方法を頂きました。

あふ内でブラウザを扱えるafxbrwsというプラグインが存在するのでこれを展開。設定の空いているキー定義に、

相対パスOR絶対パス $P\$F
<例>afxbrws.exe $P\$F

として表示させたいSVGファイルにカーソルを合わせてショートカットを押すと、

おおっ！拡大縮小(CTRL+－)程度しかできないけれどプレビューだけなら必要十分です。ありがたやー。

追記：常駐モードだと動作しなくなる場合がありタスクマネージャーからafxbrws.exeを終了させる必要があります。気になる方は非常駐モードにするとよいでしょう。iniファイルの説明には非常駐モードは2にとなっていますが2だと常駐しているみたいで、0だと非常駐になりました。

2017年2月27日月曜日

SVG画像がFlexBox内に収まらなかった話

SVGに対してmin-heightプロパティを設定した時、FireFoxとChromeで挙動が異なったので覚書。

下の結果は二つのブラウザで挙動が異なる。タイプミスとか微調整で手間取ってインデックスが多くなってしまった。

同じ挙動にするにはSVGに設定しているmin-heightをコンテナに対して設定する。

.container {
  min-height : 200px;
}

svg {
  width: 100%;
}

上記で横方向は同じ挙動になる。しかし、今度は縦方向で挙動が変わってしまう。SVGをさらにラップするとか、flexにmin-heightを設定するとかで何とかできるが、それぞれに挙動が違って悩ましい。

2017年2月15日水曜日

またmarginが悪戯した話

当ブログのCSSを編集している際に謎の横スクロールが発生した。一応レスポンシブにしているのでスマホでの表示を確認しようとして発見。ページ内のすべての要素は収まっていてはみ出している要素は見つからないのに横スクロールバーが出てしまう。原因は世のウェブデザイナーを悩ませているmargin。

Bloggerで画像を挿入する際に一部の画像を中央に配置しているが、その画像に対して（勝手に）挿入されていた

  style="margin-left: 1em; margin-right: 1em;"

が悪さをしていた。画像をすべて調べて消すべきだが手間なので

.separator a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

で退治（多分出来ているはず）。.separatorが他で利用されていると問題が再発するかもしれない。

ここで嘆いている人がいるが、本当にmargin-boxが欲しい。

続く »

2017年2月13日月曜日

Houghton, Michigan, July 1889.

CC0

2017年2月8日水曜日

妄想雑誌の表紙

※この表紙は架空の雑誌のものであり、実在材する人物・団体とは関係ありません。

InkscapeでDTPをしてみたいと思ったが勉強不足でままならない。オリジナルファイルは見せられないレベルで汚い。ガイドをたくさん引いたのだがあんなに必要だったのか？現場の作業を見てみたい。

素材（敬称略）

2017年2月6日月曜日

Inkscapeで漫画用枠線を作ってみる

普通に枠線を引くのであれば漫画用アプリで十分な機能は備わっていますが、

少し変わり種を使いたい場合、ドローツールの自由度には敵わないと思います。

新しい表現を模索していてInkscapeにたどり着いた方に向けて、まずは普通の枠線を引く手順を解説していきたいと思います。

続く »

2017年2月3日金曜日

paint-order...もう少し早ければ...

概要

Inkscape独自命令ではなくSVGに追加されたものなのでWebサイトでもそのまま使えるのがGood。

paint-orderがなかった頃は上図のような太めの縁取りをしたい場合にひと手間必要だった。単に縁取りをすると下図のように文字がつぶれてしまったからだ。

以前までは下図のように縁取りオブジェクトにフォントオブジェクトなどを重ねる必要があった。

この方法だと手間がかかる上に画像サイズが2倍になってしまう。両方解決できて一石二鳥。フィルストロークダイアログのストロークのタブの順番の項目にあるコレ。このアイコンをクリックするだけで簡単。

グループには無効

残念ながら左図のようになる。古の手法で乗り切るしかない。ただし、色が同じならパスを結合で解決（右図）。単調ならグラデーションでがんばれる。

サイズ

うっかりするかもしれないストロークの幅に関して。

  • 左...ストロークの幅は設定どおりだがオブジェクトがストロークの幅分小さくなる。
  • 中...オブジェクトはそのままだがストローク幅が半分になる。

となるので、オブジェクトをそのままで表示したくてストローク幅が決められている場合は右のようにストローク幅を2倍に設定する必要がある。

以前描いていた系統のイラストなら多用していてたであろう機能。今はこれでは物足りない。あと、某イラレみたく一つのパスに複数のストロークや塗りを適用できるようにすればよかったのにと思う。Inkscape独自でなくSVGの規格として。

2017年1月31日火曜日

オブジェクトダイアログ

概要

すべてのオブジェクトを表示し、それらに対して様々な操作を行うことができる。レイヤーの操作もできるので従来のレイヤーダイアログの上位版と言える。付随する諸機能も便利。

どれがどのオブジェクトかを知る手掛かりがないので、ラベルを付けるかオブジェクトをメイン画面で選択するか勘で選ぶなどする必要がある。

  • V...表示非表示の切り替え。
  • L...ロックアンロックの切り替え。
  • T...タイプ。レイヤーとして扱うかグループとして扱うかの切り替え。
  • CM...クリップ・マスクアイコン。クリップならこんなアイコンが表示される。マスクは今のところアイコン無し？
  • HL…ハイライト。
  • Label...オブジェクト名。

大体こんな感じ。

T...タイプ

レイヤーもしくはグループに対してアイコンが表示される。クリックすることでレイヤーとして扱うかグループとして扱うか切り替えることができる。選択ツールの手間を省くために用意された機能だと思われるが一長一短。

  • レイヤーのデフォルトアイコン。子オブジェクトを個別に選択できる。
  • グループのデフォルトアイコン。子オブジェクトをまとめて選択できる。

レイヤーだけどまとめて選択することが多いとか、グループだけど個別に選択することが多い場合に切り替えておくと捗る。

HL...ハイライト

パスを操作する時の色を個別に設定できる。色々な色のオブジェクトが混在していてパスの色の選定に悩んでいた方には便利な機能。

オブジェクトを探す際の目印としても利用できる。名前からしてこちらの用途がメイン？

ブレンドモード・ぼかし

機能上はオブジェクトダイアログと関係ないがついでなので。

特別なことはないがこれまでレイヤーだけとかオブジェクトだけにしか適用できなかった（XMLエディタで直接操作するしかなかった）ものが双方に対して適用可能となった。

私の環境では現在ブレンドとぼかしを同時に使うと右のようにレンダリングエラーが発生する（Windows版とLinux版で確認）。ブラウザ上では正常に表示されるのでInkscapeと私のグラボの相性が悪いだけかもしれない。

ここまで、オブジェクトダイアログ。

2017年1月28日土曜日

セレクションセット

0.92で新しく追加されたセレクションセットは既存のグループ化とは似て非なるInkscape独自のグループ化機能です。個人的に欲しいと思っていた、シンプルだけどメリットがとても大きい追加機能です。

何となく解説

従来のグループ化は下図左のような三つの図形の中から三角を挟んだ丸と四角をグループ化すると、

当然右図のように三角の上（または下）にグループ化された丸と四角が配置されます。

しかし場合によっては図形の順番を変えることなくグループ化したい場合があるかと思います。そのような場合に今回追加されたセレクションセットが活躍します。

左のようにセレクションセットに丸と四角を追加すると右のように他のオブジェクトを跨いでのセット化ができます。

メリット

  • 文章構造を破壊しない。
  • 同一レイヤー内のオブジェクトだけでなく、レイヤーを跨いでのセット化が可能。レイヤーを跨げるのはとてもありがたい。

その他デメリットとか希望とか

  • グループ化と異なりまとめて選択するためにダイアログを開く必要がある。ただし、オブジェクト単体を選択する際に階層を意識しなくてよいので一長一短。
  • セット化に対してフィルやストローク等をまとめて設定できないのでファイルサイズの圧縮に寄与しない。現状手作業で行うしかない（はず）のクラスのセットとスタイルシートの編集機能をスウォッチから拡張してもらえたら...
  • グループ化でも同じ振る舞いをするのでそういう仕様なのだろうが、ロックした図形の選択（意図しない編集）が出来てしまう。
  • Inkscape独自の機能なのでプレーンSVGでは無効。JavaScriptから操作する場合は各自でセット機能を実装する必要がある。

2017年1月26日木曜日

グラデーションメッシュ試用

Inkscapeが0.92となり、新しく追加されたグラデーションメッシュを試用してみました。

直線はきれいに出せましたが、sのぐにゃっとした部分はこの手法では無理だと判断して中断しました。

ここまでのノードです。

以下はぐにゃりとした形状に挑戦してみた結果です。

エッジにはアンチエイリアスがかからない模様です。

そのアウトラインです。

元の形状は簡単にトレースできるけれど、きれいに引き延ばすのが難しい。特に入り組んでいるところを外へ引っ張り出すところが。切り分け方に工夫が必要だと思われます。

まとめ

実装されたばかりなのでまだ機能的に不十分だと思われます。これからの拡充に期待しています。

バグ

グラデーションメッシュオブジェクトのクローンを作る。クローン元のノードを編集しようとするとクラッシュする。

調べてみると古くからあるバグみたいですが放置されているようです。自分はたぶん使わないと思うけど、使うときは注意を。

登録: 投稿 (Atom)