雑記帳

このページは下の方が新しい項目です。

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で記述しているからです。

メタデータのススメ

この記事へのリンク

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

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

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

作者について 作者名一例太郎
サイトhttps://www.example.jp/taro/
メールtaro@example.jp
住所東京都中央区中央1丁目2-34
電話00123-456-7890
作品について 作品名無題その5678
キーワードねこみみ,テスト
説明テスト画像ですよ
説明記入者一例太郎
作成日2019-09-01
権利の状態権利保有
権利の情報©︎2019 Taro Ichirei
権利のURLhttps://www.example.jp/taro/copyrights.html

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

Photoshop CC 2019

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

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

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

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

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

PhotoshopでJPEGに埋め込まれるメタデータ
別名で保存書き出し
作者名
サイト
メール
住所
電話
作品名
キーワード×
説明×
説明記入者×
作成日×
権利の状態
権利の情報
権利のURL

GIMP 2.10

GIMP - GNU Image Manipulation Program

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

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

GIMPでJPEGに埋め込まれるメタデータ
作者名
サイト
メール
住所
電話
作品名
キーワード
説明
説明記入者
作成日
権利の状態×
権利の情報
権利のURL

Krita 4.2

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

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

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

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

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

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

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

KritaでJPEGに埋め込まれるメタデータ
通常レイヤーのメタデータ
作者名
サイト×入力欄なし
メール×入力欄なし
住所×入力欄なし
電話×入力欄なし
作品名
キーワード×入力欄なし
説明
説明記入者入力欄なし入力欄なし
作成日××
権利の状態入力欄なし入力欄なし
権利の情報
権利のURL入力欄なし入力欄なし

PaintShop Pro 2020

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

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

PSP メタデータ編集画面2 そして右下の「詳細設定...」でもう一つ画面が開きます。

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

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

PaintShop ProでJPEGに埋め込まれるメタデータ
作者名
サイト入力欄なし
メール入力欄なし
住所
電話入力欄なし
作品名
キーワード
説明
説明記入者
作成日入力欄なし
権利の状態入力欄なし
権利の情報
権利のURL入力欄なし

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

メタデータのススメ(詳細編)

この記事へのリンク

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

各規格でのタグ/プロパティ名
ExifIPTCXMP
作者名ArtistBy-linedc:creator
サイトWeb URL(s)Iptc4xmpCore:CiUrlWork
メールEmail(s)Iptc4xmpCore:CiEmailWork
住所Address
City
State/Province
Country
Iptc4xmpCore:CiAdrExtadr
Iptc4xmpCore:CiAdrCity
Iptc4xmpCore:CiAdrRegion
Iptc4xmpCore:CiAdrCtry
電話Phone(s)Iptc4xmpCore:CiTelWork
作品名Object Namedc:title
キーワードKeywordsdc:subject
説明ImageDescriptionCaption-Abstractdc:description
説明記入者Writer-Editorphotoshop:CaptionWriter
作成日Date Createdxmp:CreateDate
権利の状態xmpRights:Marked
権利の情報CopyrightCopyright Noticedc:rights
権利のURLCopyright Info URLxmpRights:WebStatement

※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「書き出し」

PhotoshopでJPEGに埋め込まれるメタデータ
別名で保存書き出し
ExifIPTCXMPExifIPTCXMP
作者名
サイト × ×
メール × ×
住所 × ×
電話 × ×
作品名
キーワード ××
説明 ×××
説明記入者 × ××
作成日 × ××
権利の状態
権利の情報
権利のURL × ×

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

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

GIMP 2.10

サンプルJPEG画像: GIMP

GIMPでJPEGに埋め込まれるメタデータ
ExifIPTCXMP
作者名××○(type="Seq" が頭に追加される)
サイト×
メール×
住所×
電話×
作品名×
キーワード×○(type="Bag" が頭に追加される)
説明××
説明記入者×
作成日×
権利の状態×
権利の情報××
権利のURL×

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

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

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

Krita 4.2

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

KritaでJPEGに埋め込まれるメタデータ
通常レイヤーのメタデータ
ExifIPTCXMPExifIPTCXMP
作者名○※1○※1× ×
サイト××
メール××
住所××
電話××
作品名× ×
キーワード××
説明○※2○※2× ×
説明記入者
作成日×× ××
権利の状態
権利の情報× ×
権利のURL

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

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

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

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

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

PaintShop Pro 2020

サンプルJPEG画像: PSP

PaintShop ProでJPEGに埋め込まれるメタデータ
ExifIPTCXMP
作者名××
サイト
メール
住所×
電話
作品名×
キーワード×
説明××
説明記入者×
作成日
権利の状態
権利の情報××
権利のURL

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

メタデータは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のみ。表示の日本語が微妙に化ける。 ExifToolGUIの画面の一部

編集/書き込みは日本語でも問題ない。「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)

Catalinaにした

この記事へのリンク

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

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

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

Catalinaのフォント

この記事へのリンク

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

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

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