<img src="/images/entry/IMG_7521-1920.jpg"/>

https://picasaweb.google.com/114431815111528304586/2011128#5683411105636128482

一通りさがして、ないなーと思ったけど、アルバムのページには「HTML を貼り付けてウェブサイトに埋め込む」というのがあって、この中の img は上記のような形式のURLになっているので、不変と思ってよさそうな気がする。

FAQ には

と書いてあって、800px までなら自由に貼れるように読める。たぶん 800px ってのは Google+ が出る前の基準な気がするので (根拠なし)、今は 2048px まで貼れるのかな…… 一応、安全にウェブサイトに貼れるのは 800px までっぽい。

• 容量的
• 借りているサーバーのネットワークスピード

とかがあるので、できればウェブサービスに置いておきたいという要求があり、今のところはてなフォトライフを使っている。はてなフォトライフは無料でも30MB/月で十分だろうというのと、CDN (アカマイ) を経由していて、画像サイズに制限がないのもよい。

Picasa も昔検討したことがあって、そのときは 800px までしか無料でアップロードできず諦めたのだけれど、Google+ のリリースにより 2048px までは容量にカウントされない、すなわち実質的容量無制限になったので、候補にあがってきた。ネットワーク的にも Google の配信なので信頼がおける。

結局 HTML::Parser ではなく HTML::TreeBuilder::LibXML にしたけど、普通に入るモジュールなのでよさそう。

use v5.12;
use LWP::Simple qw($ua);
use URI;
use JSON::XS;

my $uri = URI->new('http://www.lowreal.net/');

my $res = $ua->get($uri);
my $microdata = HTML::Microdata->parse($res->content);

say encode_json $microdata->items->{cho45}->{properties};

package HTML::Microdata;

use HTML::TreeBuilder::LibXML;
use Scalar::Util qw(refaddr);
use Hash::MultiValue;

sub new {
	my ($class, $args) = @_;
	bless {
		items => {},
	}, $class;
}

sub parse {
	my ($class, $content, $opts) = @_;
	my $self = $class->new($opts);
	$self->_parse($content);
	$self
}

sub items {
	my ($self) = @_;
	$self->{items};
}

sub _parse {
	my ($self, $content) = @_;

	my $tree = HTML::TreeBuilder::LibXML->new_from_content($content);
	my $scopes = $tree->findnodes('//*[@itemscope]');
	my $number = 0;
	for my $scope (@$scopes) {
		my $type = $scope->attr('itemtype');
		my $id   = $scope->attr('itemid');

		unless ($scope->id) {
			$scope->id($number++);
		}

		if (my $refs = $scope->attr('itemref')) {
			my $ids = [ split /\s+/, $refs ];
			for my $id (@$ids) {
				my $props = $tree->findnodes('//*[\@id="' . $id . '"]//*[\@itemprop]');
				for my $prop (@$props) {
					my $name = $prop->attr('itemprop');
					my $value = $self->extract_value($prop);
					$self->{items}->{ $scope->id }->add($name => $value);
				}
			}
		}

		$self->{items}->{ $scope->id } = {
			($id ? (id => $id) : ()),
			type       => $type,
			properties => Hash::MultiValue->new,
		};
	}

	my $props = $tree->findnodes('//*[@itemprop]');
	for my $prop (@$props) {
		my $name = $prop->attr('itemprop');
		my $value = $self->extract_value($prop);

		my $scope = $prop->findnodes('./ancestor::*[@itemscope]')->[-1];

		$self->{items}->{ $scope->id }->{properties}->add($name => $value);
	}

	for my $key (keys %{ $self->{items} }) {
		my $item = $self->{items}->{$key};
		$item->{properties} = $item->{properties}->multi;
	}
}

sub extract_value {
	my ($self, $prop) = @_;

	my $value;
	if (defined $prop->attr('itemscope')) {
		$value = $self->{items}->{ $prop->id };
	} elsif ($prop->tag eq 'meta') {
		$value = $prop->attr('content');
	} elsif ($prop->tag =~ m{^audio|embed|iframe|img|source|video$}) {
		$value = $prop->attr('src');
	} elsif ($prop->tag =~ m{^a|area|link$}) {
		$value = $prop->attr('href');
	} elsif ($prop->tag eq 'object') {
		$value = $prop->attr('data');
	} elsif ($prop->tag eq 'time' && $prop->attr('datetime')) {
		$value = $prop->attr('datetime');
	} else {
		$value = $prop->findvalue('normalize-space(.)');
	}

	$value;
}

やりたかったことは以下の通り

• http://www.lowreal.net/ を author ページにして、Googleプロフィールと関連付ける
• http://lowreal.net/ の author を上記にする

で、まず http://lowreal.net/ 以下のページで

<link rel="author" href="http://www.lowreal.net/"/>

をつけた。これで Structured Data Testing Tool  |  Google Developers を確認すると、linked author profile = http://www.lowreal.net/ になる。この時点ではまだ Google プロフィールとは関連づいていないので、Error: Author profile page does not have a rel=me link to a Google Profile とでた。

ついで、http://www.lowreal.net/ に

<a rel="me" href="https://plus.google.com/114431815111528304586">Google+</a>

を追加してみたが、これがうまく行かず。profiles.google.com じゃないといけないのか？ とかいろいろやってみたけれど、変化がなく、Error: Author profile page does not have a rel=me link to a Google Profile が出続けた。

諦めようかなーと思いはじめたが、なんとなく vcard あたりの解釈と衝突している気がしたので、フッタにリンクを移したら、めでたく Verified: Authorship markup is correct for this page になった。よかったよかった。

http://www.google.com/webmasters/tools/richsnippets?url=lowreal.net 見るとメタデータたくさんあって気持ちいいですね。

<span itemscope itemtype="http://schema.org/Photograph">
  <a href="/2011/12/03/1" class="hatena-fotolife" itemprop="url">
    <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/c/cho45/20111127/20111127131949.jpg" alt="photo" class="hatena-fotolife" itemprop="image">
  </a>
</span>

こんな感じにしてある。author については url の先に rel="author" があるので勝手に認識してほしい。