メニューへ

雑記帳

ここの更新は更新記録のページには記載していないことが多々あります。よろしく。

各見出し部分に各記事へのリンクを表示するようにしましたので必要な方はご利用ください。

CSSの収集/phpQuery

この記事へのリンク

古いままのページをなんとかしたいと思って、CSSを収集、解析するスクリプトを組もうとしています。「スクレイピング」ということになるのかな。スクレイピングではPythonを使うのが一般的なようですが、それよりも気楽に書けるような気がするのでPHPを使うことにしました(「気楽」に書けるからといって「容易」に完成するとは限らないのだけど)。

PHPでのスクレイピングではphpQueryがよく使われているようなので、これ(phpQuery-onefile)を使います。

こんな感じ。

<?php
require_once("./phpQuery-onefile.php");
$url = "http://example.jp/foo/bar/hoge.html"; // 取得するHTML
$html = file_get_contents($url);     // 読み込む
$doc = phpQuery::newDocument($html); // 読み込んだHTMLをphpQueryに渡す

// CSSファイルへのリンク
foreach($doc["link[rel$='stylesheet']"] as $tt )
{
	echo pq($tt)->attr("href")."\n";
}

// STYLE要素
foreach($doc["style"] as $tt )
{
	echo pq($tt)->text();
}

// STYLE属性
foreach($doc["*[style]"] as $tt )
{
	echo pq($tt)->attr("style")."\n";
}
?>

このコードでは画面に表示するだけですが、取得できたCSSから必要な部分を抜き出したり、指定された外部CSSファイルを読みに行ったりする処理を加えていくわけです。

さて困ったことがあります。文字化けしたりしなかったりするのです。

phpQueryの中身を見てみると、<meta http-equiv="Content-Type" content="text/html;charset=(文字コード)"> の形での文字コード指定をチェックしている部分がありますが、取りこぼしがあるようです。さらに、この文字コードの指定方法は古いもので、HTML5の書式 <meta charset="(文字コード)"> には対応してないようです。

読み込んだHTMLをphpQueryに渡すのではなく、phpQueryに直接WEB上のHTMLファイルを読みに行かせるとレスポンスヘッダの文字コード指定を見てくれるようですが(たぶん)、皆さんご存知の通りレスポンスヘッダに文字コード指定のない場合が多いので解決にはなりません。

ということで、読み込んだHTMLをphpQueryに渡す前に文字コード変換してやることにしました。そしてphpQueryの方でさらに文字コード変換するとまずいので、META要素を削除しています。

$html = mb_convert_encoding($html, "UTF-8", "SJIS,JIS,EUC-JP,UTF-8");
$html = preg_replace ("/<meta.*?>/i", "", $html );
$doc = phpQuery::newDocument($html);

UTF-8へ変換しているのはもちろんこのPHPスクリプトをUTF-8で記述しているからです。

Inkscape/最適化SVG

この記事へのリンク

久しぶりにInkscapeの「最適化SVG」を使ってみたら結構変わっていたのでメモ。

最適化SVGのオプション項目 項目が増えてタブ3つになってます。

オプションタブ
Number of significant digits for coordinates: (範囲:0-10 初期値:5)
座標の数値の精度の指定。数値の有効桁数が指定の数より大きい場合に小数点以下を切り詰めます(四捨五入)。3を指定した場合、3.14159 が 3.14 に、123.4567 が 123 に、9876.5432 が 9877 になります。
カラー値を短縮する (初期値:ON)
色は#RRGGBBAA という形(#+16進数8桁)で記録されていますが、不透明度100%(AAがff)の場合は#RRGGBBに、さらに可能な場合は#RGBの形に短縮します。
CSS属性をXML属性に変換する (初期値:ON)
style要素やstyle属性の指定をXML属性に変換します。また省略可能なもの(デフォルト値と同じ指定)は削除するようです。
Collapse groups(グループの整理) (初期値:ON)
使われていないグループを削除し、その中身を親グループに移します。これには「Remove unuse IDs」も有効になっている必要があります。
同じ属性用のグループを生成する (初期値:ON)
共通の1つ以上の属性を持つ要素をまとめるグループを作ります。
エディターデータを保持する (初期値:OFF)
エディター用の特定の要素・属性を削除しません。現在対応しているのはInkscape、SodipodiとAdobe Illustrator用のデータです。(OFFにすると削除します)
Keep unreferenced definitions (初期値:OFF)
使われていない要素定義を削除しません。
レンダリングバグを回避する (初期値:ON)
いくつかのよく知られているレンダリングバグ(主にlibSVGのもの)を回避します。その代わりSVGのファイルサイズが大きくなります。
SVG出力タブ
Documennt options
Remove the XML declaration (初期値:OFF)
XML宣言(必ずしも必要ではないが、SVG内で特殊文字を使っている場合は必要)を削除します。
メタデータを除去する (初期値:ON)
著作権情報や作者情報、SVG非対応ブラウザ用の情報など全てのメタデータを削除します。
コメントを除去する (初期値:ON)
全てのXMLコメントを削除します。
Embed raster images(ラスター画像の埋め込み) (初期値:ON)
PNGやJPEGなどのラスター画像を外部から読み込んでいる場合、Base64エンコードでテキスト化してSVG内に取り込みます。ファイルサイズは取り込まない場合(SVGと外部画像の合計)よりも大きくなりますが、ファイルが1つにまとまるので取り扱いが楽になります。
viewBoxを有効にする (初期値:OFF)
SVGのページサイズを縦横100%(つまり表示領域いっぱいに表示される)にするとともに、描画領域をviewBox属性に設定します。(これは機能していない気がします)
Pretty-printing(ソースの画面表示用)
Format output with line-breaks and indentation (初期値:ON)
ソースに改行とインデントを入れて整形します。SVGをテキストエディタで修正するつもりがないなら、このオプションをOFFにした方がファイルサイズが小さくなります。
Indentation characters: (スペース/タブ/None 初期値:スペース)
インデントに使う文字の指定です。「None」の場合はインデントをなしにします。このオプションは、上の「Format output with line-breaks and indentation」がOFFの場合は効果がありません。
Depth of indentation: (範囲:0-10 初期値:1)
インデント量の指定です。例えば2を指定するとそれぞれ2つ分のスペースかタブでインデントされます。
Strip the "xml:space" attribute from the root SVG element (初期値:OFF)
ルートSVG要素のxml:space属性を削除します。その結果、連続した空白は1つの空白にまとめられます。(xml:space属性がない場合は、これがOFFでも連続した空白は1つになります)
IDsタブ
Remove unused IDs (初期値:ON)
使われていない全てのIDを削除します。これらはレンダリングに必要ありません。
IDを短縮する (初期値:OFF)
小文字のみを使ってIDを最小の長さにして、よく使われる順に短いIDを割り振ります。例えば、"linearGradient5621"というIDが一番使われているなら、これは"a"になります。
Prefix shortened IDs with:
短縮IDの頭につける文字の指定です。
Preserve manually created IDs not ending with digits (初期値:ON)
#arrowStart や #arrowEnd、#textLabelsのような手作業でつけたわかりやすいID(数字で終わってないもの)をそのままにします。Inkscapeを含む多くのSVGエディターが生成する数字で終わるIDは削除または短縮化します。
Preserve the following IDs:
そのままにしたいIDをカンマ区切りで指定します。
Preserve IDs starting with:
指定した文字で始まるIDをそのままにします。例えば "flag"を指定すると、"flag-mx"、"flag-pt"などがそのままになります。

全ての項目を確認したわけではないので、理解が間違っているところがあるかも。

Inkscape@MacPortsで最適化SVG

この記事へのリンク

さて、Inkscapeで最適化SVGを使って保存しようとするとエラーが出るわけですよ。MacPortsでインストールしたInkscapeです。

Failed to import Python module 'scour'. Please make sure it is installed (e.g. using 'pip install scour' or 'sudo apt-get install python-scour') and try again. Details: No module named scour ダイアログの文章を読んでみると、Pythonにscourというモジュールがインストールされていないのが原因のようです。

PythonがOS付属のものを使うようになっていたので、MacPortsのものに切り替え。これはInkscapeをインストールした時に一緒に入ってるはずです。

sudo port select python python27

そして、Python27用のpip(パッケージ管理ツール)をインストール&選択。

sudo port install py27-pip
sudo port select --set pip pip27

それからようやくモジュールのインストール。

sudo pip install scour

これで最適化SVGが使えるようになりました。

イラストSNS

この記事へのリンク

現在登録しているところのおぼえがき。

DAとpixivはサイズが違うだけで同じカバー絵なのですが、DAの方は大画面向けのセッティングらしく、カバー絵の周囲が切り取られた形の表示になってます。

GALLERIAのカバー絵は、サイズ関係のことが全く説明になく困りました。CSSの指定を見ると、横は最小1200ピクセル、縦は最大345ピクセルになってたので、1200x345のサイズで作りました。横幅が1200ピクセルぴったりのウィンドウで見ない限り、右側か下側が切り取られた表示になります。

ハーフトーン

この記事へのリンク

絵の背景によく水玉模様を使ってます。これはグレー地(キャラのシルエットをぼかしたり、円形のグラデーションだったり)をハーフトーン処理して作ります。Photoshopならカラーハーフトーンフィルター、GIMPなら新聞印刷フィルターですね。

元のグラデーション
元のグラデーション
Photoshop
Photoshop カラーハーフトーン
GIMP(丸)
GIMP 新聞印刷(丸)
GIMP(線形)
GIMP 新聞印刷(線形)
GIMP(ダイヤモンド)
GIMP 新聞印刷(ダイヤモンド)
GIMP(四角)
GIMP 新聞印刷(PS四角(ユーグリッド点))
GIMP(PSダイヤモンド)
GIMP 新聞印刷(PSダイヤモンド)

Photoshopカラーハーフトーンの設定は、最大半径20pixel、角度が各45。GIMPの方は、セルサイズ20、分離方法RGB、角度が各45、オーバーサンプル4です。

最大半径やセルサイズの数字を大きくすれば、水玉が大きくなるわけです。

さて、模様が丸だけ(GIMPでは四角や線も使えますが)というのはちょっとつまらないですね。ということでここからが本題です。星型やハート型でハーフトーン処理してみましょう。

任意のパターンで処理する方法については叶精作さん(パソコン通信の昔から積極的にノウハウを公開している偉い人)が解説しています。かいつまんでいうと、元絵の上にパターンを通常モード40%とスクリーンモード70%で重ねて統合、トーンカーブをいじって白黒はっきりさせる、というところです。

さっそくスクリーンパターン用のSVGデータを作りました。星型とハート型のパターン (ダウンロード:星型 / ハート型)

GIMPでの手順はこんな感じ。

  1. 元絵 元絵を用意する。
  2. SVGの読み込み パターンを新規画像として読み込む。ここでは10x10ピクセルのサイズとした。
  3. 開いた画像を全選択してコピー。するとパターンのリストにコピーしたものが登録されるので、それをクリック。GIMPのパターンダイアログ
  4. GIMPの新しいレイヤーダイアログ 元絵の上にパターンを敷き詰めた新規レイヤーを作る。レイヤーメニューから「新しいレイヤーの追加...」を選ぶか、レイヤーダイアログのレイヤー追加ボタンを押すとダイアログが開くので、塗りつぶし色をPatternにして作成。
  5. 作ったレイヤーを複製。下のレイヤーをNormalモード/不透明度40%、上のレイヤーをScreenモード/不透明度70%にして画像を統合(「画像」メニュー > 「画像の統合」)。統合後
  6. トーンカーブ(「色」メニュー > 「Curves...」)を調整。左下の点を右へ、右上の点を左に寄せるトーンカーブ処理。 左寄りにすると白っぽくトーンカーブ処理、右寄りにすると黒っぽくなるトーンカーブ処理ので、ちょうどよい所を探す。
  7. 完成 完成。

トーンカーブの調整のほか、描画モードや不透明度を変えると仕上がりが変わってきます。

ちなみに冒頭のグラデーションを処理したらこんな感じ。

星型で処理
星型。パターンの大きさ28ピクセル。
ハート型で処理
ハート型。パターンの大きさ28ピクセル。

さて、よく見るとパターンの形がいびつになっているところもあります。パターンのサイズが大きく、元絵に明るさが大きく変化する部分があるとそれが顕著になりますね。
完成 同じ写真をパターンサイズ64ピクセルで処理したものですが、右上の明るい部分に接している星の形がいびつになってます。

では別の道具でこの問題を回避してみましょう。Inkscapeのタイルクローン機能を使います。

  1. 元絵読み込み 元絵を読み込み、45度回転させる(「オブジェクト」メニュー > 「変形」の「回転」タブ内)。
  2. パターン用オブジェクト作成 新規レイヤーにパターン用のオブジェクトを1つ作る(今回はフォントを利用)。敷き詰める矩形領域(元絵を全部覆う四角)の左上になるように配置する(ガイドを利用すると楽)。
  3. タイルクローンダイアログ パターン用オブジェクトを選択した状態で「編集」メニュー > 「クローン」 > 「タイルクローンを作成...」を選択。ダイアログが開く。
  4. タイルクローンダイアログ設定 「トレース」タブを開き、一番上の「Trace the drawing under the clone/sprayed items」にチェック。「1.画面から採取するもの:」の「L」(明るさ)を選択。「3.抽出値の適用対象:」の「サイズ」にチェック。「Apply to tiled clones:」の「幅、高さ」を選択、必要なサイズを入力。「保存したタイルのサイズと位置を使用する」のチェックを外す。
  5. タイルクローン作成 「作成」ボタンを押す。(作成されるクローンの数に応じて時間がかかる)
  6. タイルクローン調整 できた各クローンの大きさが小さめなので拡大する。クローン元のオブジェクトが選択されているので、45度回転させたのち、拡大処理をする。(クローン元のオブジェクトをいじると全クローンに影響するので、クローン元だけ処理すればよい)
  7. タイルクローン回転 全選択して(元絵は選択しない)逆方向に45度回転させ、元の方向に戻す。
  8. 元絵非表示 「Objects」リストで元絵の目玉を閉じ、非表示にする。
  9. エクスポート 「ファイル」メニュー > 「PNG画像にエクスポート...」でダイアログを開く。「エクスポート領域」に「ページ」を選択、「画像サイズ」と「ファイル名」を適宜変更して「エクスポート」ボタンを押す。
  10. 完成 完成。(透明部分をGIMPで白くしてある)

手順の中でも書きましたが、生成クローン数が多くなるほど処理時間がかかるようになるので注意が必要です。(100や200ぐらいなら問題ないはず)

ではまとめです。

カラーハーフトーン/新聞印刷フィルター
簡単
パターンが丸のみ(新聞印刷ではプラス四角と線)
自作スクリーン
自分でスクリーンパターンを用意すればいろんなパターンが使える
フィルターに比べ手順が多くめんどくさい
トーンカーブなど調整部分をきちんとやらないと綺麗に仕上がらない
Inkscapeタイルクローン
パターンの歪みがない綺麗な仕上がり
フィルターに比べ手順が多くめんどくさい
オブジェクト数に気をつける必要あり

用途に応じて使い分けましょう。