日記のサムネイルにflickrの画像は使えないだろうか。という実験。
肝心の写真がイケていないというオチ、ではなくて。
試しにflickrのEmbedスクリプトを出力して埋め込んでみたのだが。読み込み時の画面幅に合わせてスタイルをゴニョゴニョしちゃうタイプのスクリプトになっているので、表示後の画面幅変更に対応できていない。この微妙にレスポンシブじゃない考え方はどこかではメジャーなのかな、海外のテンプレで他にもみた気がする。……良くない。
というか、flickrはきっと思想的には埋め込まれる前提じゃないんだな。狙ってやっているなら潔いようにも思うが、なんとなくだが単に周回遅れ（それも2周くらい）な気がする。この間も買収云々があったりと、flickrはちっとも「イケてる」感じのするサービスではなくなった。とはいえInstagramだって親会社はFacebookになってしまったし、APIの締め付けがキツいしで、操作性云々とは違うところで微妙。
写真共有サービスなんて、儲からないからこんな感じなのかな。使えているうちはいいけれども、どんなサービスであっても、10年後も今とおんなじサービス形態で生き残ってくれる保証はないという201x年。未来はまだか。
Hugoのshortcodesをちまちま増やす
今日もHugoの話をちょっとメモしておくと、上記のflickrもそうだが、shortcodeをいくつか自作している。といっても、PCで埋め込みたいタグを書いたものと、AMP対応のためにそのタグを書き直したもの、という簡単な出し分けをしているだけであるが。
現時点では
- flickr
- amazon
- img
- iframe
の4つができた。
たとえば <img> タグをそのまま書くのではなく、
< img src="***" width="160" height="120" alt="テスト" >
↓
{{< img src="***" width="160" height="120" alt="テスト" >}}
としておく。
これをPCでは、
<img
src="{{ .Get "src" }}"
alt="{{ .Get "alt" }}"
{{ with (.Get "width") }} width="{{ . }}"{{ end }}
{{ with (.Get "height") }} height="{{ . }}"{{ end }}
/>
AMPでは、
<p>
<amp-img
src="{{ .Get "src" }}"
alt="{{ .Get "alt" }}"
{{ with (.Get "width") }} width="{{ . }}"{{ end }}
{{ with (.Get "height") }} height="{{ . }}"{{ end }}
layout="responsive"></amp-img>
</p>
てな感じに。至極簡単な置きかえを行うことで、なんとなくAMP対応ができる。
車輪を再発明している感は否めない。