Catalinaにアップグレードしてから一部のサードパーティ製アプリの文字の表示がちと変になった。以前と違うフォントで表示されている。

これはFireAlpaca最新版2.1.21の環境設定ダイアログ。比較のため旧OS版を並べた。手元に前バージョンMojaveがないのでその前のHigh Sierraを使ったが、Mojaveと変わらない...と思う。

Catalinaではヒラギノ角ゴProがなくなったようなので、その影響かも。見たところ中国語フォントが使われているっぽい(拗音・発音の小さいかなの字(「ッ」や「ィ」など)が上下方向の中心に来ていることから)。元々使っていたフォントが見つからずに別のフォントが使われているんだろうけど、なぜ中国語フォントなんだろう。

Catalinaにしたよ。事前に情報収集してなかったので、アクセス制限の厳しさにびっくりしているところ。許可がないアプリはデスクトップや外付けHDDのファイルにアクセスできない。普通はその場で確認のダイアログが出るのでOKすれば、アプリが許可リストに登録されて問題ないのだが、GIMPなんかは許可リストに登録しても拒否られる。多分普通のアプリとはファイルアクセスの仕組みが違うのだろう。制限のかからないフォルダでは問題ないので当分はそこで作業をすることでしのぐ事になるだろうな。

続いてApache。バージョンアップの際には必ず設定ファイルの変更があるのだが、今回は前の設定ファイルが「場所が変更された項目」というフォルダに隔離されている(デスクトップにエイリアスができるのですぐにわかる)。diffコマンドで違いを表示させて設定を書き換えてApacheを再起動。そうしたら「403 Forbidden」でローカルサイトが表示されない。サイトのファイルのありかが外付けHDDなので、アクセス制限に引っかかってたわけね。これはApacheの実体、/usr/sbin/httpd を許可リストに登録する事できれいに解決できた(Finder の「移動 > フォルダへ移動...」で /usr/sbin を開き、httpdをリストの中へドラッグ&ドロップ)。

そしてフォント。「ダウンロードできるフォント」の位置が変わっている。/System/Library/Assets/.. から /System/Library/AssetsV2/.. へ変わった。それで前に書いたスクリプトが対応できなくなったので修正版を書いた。 Catalina対応版ダウンロード 使い方は前と同じ。

絵をJPEGファイル化するときにメタデータを埋め込もうぜ!という話です。

画像ファイルには作者名や画像の説明などのメタデータを埋め込むことができます。昔はペイントツール系ではPhotoshopくらいしかメタデータを扱えるものがなかったのですが、最近は他にも扱えるツールが出てきていますので見ていきましょう。

今回チェックしたツールは Photoshop、GIMP、Krita、PaintShop Pro の4つ。このような情報を埋め込むとしましょう。

住所や電話番号を公開している人は少数派かもしれませんが例として入れています。

Photoshop CC 2019

→Adobe Photoshopの購入 | 最高の写真、画像、デザイン編集ソフト

メニューの ファイル > ファイル情報... でダイアログが開きます。メタデータの種別ごとにタブが分かれています。

PhotoshopではJPEGで保存するには「別名で保存...」か「書き出し...」を使います。(他に「Web用に保存(従来)」もありますがここでは割愛)

「別名で保存...」はメタデータも一緒に保存されます(メタデータを保存しない選択はありません)。

「書き出し...」でメタデータも一緒に保存するには、メタデータ欄の「著作権情報および問い合わせ先」を選びます。

GIMP 2.10

→GIMP - GNU Image Manipulation Program

メニューの 画像 > メタデータ > Edit Metadata でダイアログが開きます。メタデータの種別ごとにタブが分かれています。 スクリーンショットには写っていませんが、IPTCタブのWebsite(s)欄の下には作成日の欄があります。

JPEGファイルにメタデータも一緒に保存するには、「Save Exif data」「XMPデータの保存」「Save IPTC data」の項目にチェックを入れておきます。

Krita 4.2

→Krita | デジタルでのお絵描きと創造の自由を

メタデータは、「作者」と「画像」の2つに設定個所が分かれています。

「作者」の情報は、Preferenses(Kreitaの設定)の中にあります。 最初は「Anonymous」の設定しかないので、「+」ボタンを押して新しい作者の情報を作ります。 Contact(連絡先)の項目は「Add Contact info」ボタンを押すと追加できます。最初は「Homepage」になってますが、プルダウンメニューになっていて、クリックして選ぶことができます。

作者情報の設定ができたら、メニューの 設定 > アクティブな作者プロフィール でその設定を選びます。

「画像」の情報は、メニューの ファイル > ドキュメントの情報 でダイアログが開きます。ここにも作者の欄がありますが、こちらでは編集はできません。

レイヤーが1枚だけならば、レイヤーメニューにある「メタデータを編集...」が使えます(レイヤーが複数ある場合、レイヤーごとにメタデータを設定できますが、JPEGに書き出す際はレイヤーが統合されてメタデータのない新しいレイヤーができる形になるようです)。ここにデータがある場合は、「作者の情報」「画像の情報」よりもこちらが優先されます。

JPEGファイルにメタデータも一緒に保存するには、JPEG保存時のダイアログのメタデータタブ内の「アノニマイザー(匿名化ツール)」のチェックを外し、他はチェックありにします(「ツールの情報」はお好みで)。

PaintShop Pro 2020

→PaintShop Pro：Corel 写真編集ソフトウェア

メニューの 画像 > 画像情報(n)... でダイアログが開きます。情報の種類でタブが分かれていて、そのうちの「作成者情報」を開きます。

そして右下の「詳細設定...」でもう一つ画面が開きます。

JPEGファイルにメタデータも一緒に保存するには、「名前を付けて保存(A)...」か「コピーに名前を付けて保存(Y)...」を使い、オプション画面を開き「EXIF情報の保存(E)」にチェックを入れます。

オプティマイザーやウイザードを使うと、メタデータは保存されません。

ツールによって埋め込めるメタデータの項目に違いがありますが、埋めたい情報を扱えるツールを使っているなら積極的にメタデータを埋め込んでいきましょう。

書き出されたJPEGファイル内のメタデータをもう少し詳しく見てみよう。メタデータはExif、IPTC、XMPの3種類に分けることができる。(XMPはExif、IPTCをはじめ他のメタデータも取り込んでいるので境界はあいまいではある)

※Exifの「ImageDescription」は、Exif規格書では「画像タイトル」と明記されているが、XMP規格書のExifの項目では「画像の説明」とされ、PhotoshopやKritaなどはこれに従っているようだ。それでここでも「画像の説明」とした。

ちなみに各規格書については以下のところで入手できる。

Exif

CIPA 一般社団法人カメラ映像機器工業会: CIPA規格類 リストの一番上に「Exif 2.32」と「Exif2.31 metadata for XMP」がある

IPTC

IPTC Photo Metadata Standard 2017.1

XMP

XMP仕様書(PDF)

では、exiftool(後述)などのメタデータ用ツールで確認してみよう。

Photoshop CC 2019

サンプルJPEG画像: Photoshop「別名で保存」 / Photoshop「書き出し」

○:あり　×:なし　—:入力欄がない　／:規格にない

通常の保存(「保存」「別名で保存」)では、編集履歴やサムネイルなど多くの不要な情報も記録されてしまうので注意が必要。 「書き出し」では、編集履歴やサムネイルは保存されないものの、キーワードや説明などが保存されない。

GIMP 2.10

サンプルJPEG画像: GIMP

○:あり　×:なし　—:入力欄がない　／:規格にない

権利の状態はPhotoshopと同じくプルダウンメニューからの3択であるが、なぜか情報が保存されず、ダイアログを閉じた時点で初期値の「Unknown」に戻ってしまう。

GPS情報も編集できるのだが、削除する機能はなく、メタデータを保存すると(JEPG保存時のオプション項目「Save Exif Data」にチェックを入れて保存すると)一緒にGPS情報も記録される。もともとGPS情報を持たない画像の場合は初期値の緯度0・経度0・標高0という嘘情報が記録されることになる。

Krita 4.2

サンプルJPEG画像: Krita(通常) / Krita(レイヤーのメタデータ欄を使用)

○:あり　×:なし　—:入力欄がない　／:規格にない

※1 後ろにContactInfoの1番最後の項目が追加される

※2 後ろにキーワードが追加される

「作者」と「画像」のメタデータは、入力してもJPEGファイルに保存されない項目が多すぎる(kraファイルには全て保存されるが)。

一方、「レイヤーのメタデータ欄」は、レイヤーごとにメタデータが入力できるが、kraファイルには保存されず、レイヤーが複数ある画像をJPEGで保存するとどのレイヤーのメタデータも保存されない(レイヤーが1枚だけなら保存される)、という謎な仕様。

PaintShop Pro 2020

サンプルJPEG画像: PSP

○:あり　×:なし　—:入力欄がない　／:規格にない　△:文字化け?

メタデータはExifToolではIPTCでのみ保存されているように見える(しかも文字化けしている)が、ほかのPhotoshopなどのツールでは全く認識されない。

メタデータを扱える様々なツールで見てみると、文字化けしている部分がところどころある。そこで疑問が出てくる。「日本語(漢字やかな)を使ってもいいのか？」——

XMPはデフォルトエンコーディングがUTF-8で漢字・かなは問題なし、IPTCはよくわからなかったが、文字コードを明示すれば問題ないようだ。Exifはユーザーコメント以外では直接多バイト文字を使えないが、XMPマニュアルのExifのところを見るとASCII以外はURLエスケープするとあるので、これでExifで漢字やかなを使えるようだ。

また、「メタデータの内容として日本語(漢字やかな)でいいのか」という疑問もある。これは読んでほしい対象をどう考えるかによる。対象が「主として日本語を使う人」ならば当然日本語で書くのがいいことになる。

項目によっては言語別に複数の内容を書けるものもある。XMPの dc:description(作品の説明) 、dc:rights(権利の情報) 、dc:title(作品名) がこれにあたる。ただし、ペイント系グラフィックツールで言語別に書ける機能を持つものはまだ存在しないようだ。

ペイント系ツールでJPEGに書き出すときに完全なメタデータをつけられないなら、後でメタデータを追加する方向で考える。

Exifしか扱えないものではなく、Exif、IPTC、XMP全てを扱えるものを探そう。

ExifTool

→ExifTool by Phil Harvey

この方面ではほぼ最強のツール。例えばdc:descriptionをデフォルト言語(ここでは日本語)・日本語・英語の3通り設定するには次のようにする。

exiftool -xmp:description='テスト画像ですよ' -xmp:description-ja='テスト画像ですよ' -xmp:description-en='This is a test picture.' hoge.jpg

または書き込むメタデータをXMPファイルで用意して次のようにする。

exiftool -tagsFromFile hoge.xmp hoge.jpg

見ての通りコマンドラインツールなので、慣れない人には難易度は高い。なので、GUIでくるんで使いやすくしたツールがいくつかあるのだが、なかなかよいものがない。

ExifToolGUI

→ExifToolGUI

上記のExifToolをGUIでくるんだツール。動作環境はWindowsのみ。表示の日本語が微妙に化ける。

編集/書き込みは日本語でも問題ない。「dc:descriptionをデフォルト言語・日本語・英語の3通り設定する」こともできる(が、書き込む準備が必要。初期状態では書き込める項目が限られているので欄を増やす作業をまずしなければならない)。

XnView MP

→XnViewMP · Image Resizer |Batch Photo Resize | XnView.com

ビュワー機能を中心としたフリーウェア(企業での利用は有料)。動作環境:Win、Mac、Linux。

残念ながらメタデータの編集/書き込みは限られた項目のみだが、表示の方は優秀で、ExifToolでは化けてしまう文字コード指定のないIPTCメタデータもちゃんと表示できる。またExifToolを内蔵していて、ExifToolでのメタデータ表示もできる。

おまけ・ExifToolとCSV

EixfToolはXMPファイルとして用意したメタデータをJPEGファイルに書き込めることは既に述べた。ただ、XMPでは扱えないタグ/プロパティもあるようだ。一方、CSVファイルを使っても同じようにできて、こちらはタグ/プロパティの制限はないようだ。

ということでCSVでのメタデータのサンプルを作ってみた。次のようにしてExifToolで処理する。(参考:exiftoolを使って画像のIPTC情報をcsvでまとめて設定する - Qiita)

exiftool -csv=meta.csv -codedcharacterset=utf8 -charset iptc=latin2 meta-csv.jpg

CSVファイルはテキストエディタでも編集できるが、やはり表計算ソフトを使うのが確実だろう。表計算ソフトで開くと、上の行にタグ名が並び、下の行には対応する中身が並ぶ形のデータになっている。また、CSVファイルの中に処理するJPEGファイル名を明記しておかないといけない点に注意。

メタデータ用CSV / サンプルJPEG画像(ExifTool+CSV)

古いままのページをなんとかしたいと思って、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」を使ってみたら結構変わっていたのでメモ。

項目が増えてタブ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で最適化SVGを使って保存しようとするとエラーが出るわけですよ。MacPortsでインストールしたInkscapeです。

ダイアログの文章を読んでみると、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が使えるようになりました。