2016-09-07

instagramの埋め込みコードを書き込んでも画像が表示されない問題をなんとか解決

はてなブログに複数のinstagram埋め込みコードを書くと表示されない場合が多いけど、ブログの貼り付け機能を使用するとこの問題は発生しない。でもこれだとキャプションが表示されない。何かバッティングしてるのか？コードを削れば何とかなるんじゃないのか？

ちなみにこんな内容が書かれてます。一枚目はブログ連携させた自分の投稿、サイドバーから貼り付け可能です。

<p><a class="http-image" href="https://www.instagram.com/p/BJpAOCPAJ3x/" target="_blank"><img class="http-image" src="https://www.instagram.com/p/BJpAOCPAJ3x/media/?size=l" alt="https://www.instagram.com/p/BJpAOCPAJ3x/" /></a></p>
<p><a href="https://www.instagram.com/p/BJpAOCPAJ3x/">葛桜売り切れ… 12:00頃でも遅いのか…！田楽餅のみたらし、ごま、あんこ</a></p>

葛桜売り切れ… 12:00頃でも遅いのか…！田楽餅のみたらし、ごま、あんこ

<p><iframe class="instagram-iframe" src="//www.instagram.com/p/BJpAOCPAJ3x/embed/" frameborder="0" scrolling="no" data-entry-image="http://www.instagram.com/p/BJpAOCPAJ3x/media/?size=l"></iframe><cite class="hatena-citation"><a href="https://www.instagram.com/p/BJpAOCPAJ3x/">www.instagram.com</a></cite></p>

www.instagram.com

(画像とリンクの間が不自然に離れてますね)

ということで検索。

検証した結果だと、
blockquote
a
script
の3つの情報があれば表示は出来るので、これでもOKです

Instagram 埋め込みコードの構造を解析してみた - Qiita

http://qiita.com/h5y1m141@github/items/403dee38e88570185949

</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

%%URL%%のところにinstagramのURL入れて埋め込んでみるとすべて表示されました。@@@のところにはキャプションが書かれているのですが削除してもちゃんと表示されますし全く違う文字を書き込んでも問題ありません、元のページから取得します。

気になるのが[data-instgrm-version="5"]今回はバージョン5でしたが最新の埋め込みコードを見ると7です、今後そちらをベースに最小限まで削った埋め込みコードも自分で探してみたいと思います。

◆表示されない
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="7">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 62.4537037037% 0; text-align: center; width: 100%;"> </div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BJobBX0jU5P/" target="_blank">We are here in the US! I found a copy of @nylonmag in Los Angeles!!!!!! Can't believe we are on this magazine. Thank you so much NYLON!!!! It's soooo cool! From a-chan #perfumetour2016</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Perfume Officialさん(@prfm_official)が投稿した写真 - <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-08-28T00:04:32+00:00">2016 8月 27 5:04午後 PDT</time></p>
</div>
</blockquote>
<script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"></script>

We are here in the US! I found a copy of @nylonmag in Los Angeles!!!!!! Can't believe we are on this magazine. Thank you so much NYLON!!!! It's soooo cool! From a-chan #perfumetour2016

Perfume Officialさん(@prfm_official)が投稿した写真 - 2016 8月 27 5:04午後 PDT

◆ちゃんと表示される埋め込みコードのURLだけ変更してみたら表示された、キャプションに注目、読み込んだ画像のものに書き替わる。
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 658px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-version="7">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 60.9259259259% 0; text-align: center; width: 100%;"> </div>
<p style="margin: 8px 0 0 0; padding: 0 4px;"><a style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" href="https://www.instagram.com/p/BJobBX0jU5P/" target="_blank">Our CEO backstage with Perfume at their Los Angeles show! #amuse #perfume #pentatonix photo credit: world famous filmmaker @ryuhei_kitamura</a></p>
<p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Bang Zoom! Studiosさん(@bangzoom)が投稿した写真 - <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2016-08-28T00:01:55+00:00">2016 8月 27 5:01午後 PDT</time></p>
</div>
</blockquote>
<script src="//platform.instagram.com/en_US/embeds.js" async="" defer="defer"></script>

Our CEO backstage with Perfume at their Los Angeles show! #amuse #perfume #pentatonix photo credit: world famous filmmaker @ryuhei_kitamura

Bang Zoom! Studiosさん(@bangzoom)が投稿した写真 - 2016 8月 27 5:01午後 PDT

2016-09-07

Flickrからオリジナルサイズの画像をダウンロードしてみた

Webサービス

Flickrの画像サイズはa-z全て試してみた結果oがオリジナルサイズだが全く違うURLが設定されており一部を一気に書き換えて取得することは出来ない。zipファイルで一括ダウンロードは可能。PCサイトではオリジナルサイズを開けなかったのでモバイルページで行った、オリジナルサイズ画像の個別URL取得は大変。

モバイルページ
https://m.flickr.com/#/photos/asiapacificartsmagazine/29111505480/

以下3パターンのサイズ

29111505480_9800ebe596_b.jpg (1024×683)
https://farm9.staticflickr.com/8474/29111505480_9800ebe596_b.jpg
29111505480_9800ebe596_c.jpg (800×533)
https://farm9.staticflickr.com/8474/29111505480_9800ebe596_c.jpg
29111505480_9800ebe596_h.jpg (1600×1066)
https://farm9.staticflickr.com/8474/29111505480_9800ebe596_h.jpg

こちらのページ左下の"View more info about this photo..."→"View all sizes"ここでオリジナルサイズを選ぶ。

https://m.flickr.com/#/photos/asiapacificartsmagazine/29111505480/

オリジナルサイズのURL
29111505480_7d4e85c806_o.jpg (4752×3168)
https://farm9.staticflickr.com/8474/29111505480_7d4e85c806_o.jpg

zipでまとめてダウンロード。

Download 19 photos
These photos may have one or more license types or their rights may be reserved. Prior to downloading this album, please visit the individual photo pages to understand the designated license type for each image.

Cosmic Explorer Tour 2016: Perfume | Flickr
https://www.flickr.com/photos/asiapacificartsmagazine/albums/72157673205090126

f:id:hiro88x:20160907092455p:plain

2016-08-06

Perfume: A Gallery Experience 2016.08.06

Perfume ライゾマティクス

2015年タワレコで開催されたPerfume展+2013年ライゾマ展のSoL衣装展示という内容っぽい。

国内でも開催されるかな？どうかな？今度は東京以外で。

Perfume: A Gallery Experience Supported by Rhizomatiks https://t.co/gxd0Noo0Y1
ニューヨーク 9月3-4日 #prfm #Perfume_um pic.twitter.com/m15SK7x4W6
— hiro:)P.T.A.大阪①② (@hiro88x) 2016年7月26日

Perfume A Gallery Experience Supported by Rhizomatiks告知動画
Perfume (パフューム) | Facebook https://t.co/RfXi4Bhmxj pic.twitter.com/93DZMwLY3X
— hiro:)P.T.A.大阪①② (@hiro88x) 2016年7月29日

ノートとペン欲しい。ドームの隅っこは狭すぎるかな、タワレコ Space HACHIKAI ならOK?
Perfume: A Gallery Experience
◎1447×2048https://t.co/ogf6WzYiiV pic.twitter.com/ZOAgobpW71
— hiro:)P.T.A.大阪①② (@hiro88x) 2016年7月31日

「Perfume: A Gallery Experience Supported by Rhizomatiks」ロンドンに続き、ニューヨークでも開催決定！｜Perfume Official Site

PERFUME stage a special gallery exhibition in London this weekend. J-Pop Go went along: https://t.co/XgWMeknX7i @Perfume_um @Perfume_Staff
— J Pop Go (@JPopGo) 2016年8月5日

PERFUME Gallery Experience – J-POP GO
http://www.jpopgo.co.uk/perfume-gallery-experience/

IMG_9397.jpg (1000×750)

IMG_9375.jpg (1000×791)

IMG_9384.jpg (1000×750)

IMG_9396.jpg (1000×831)

IMG_9409.jpg (1000×750)

IMG_9393.jpg (1000×750)

IMG_9400.jpg (1000×750)

IMG_9383.jpg (1000×750)

IMG_9380.jpg (1000×750)

IMG_9381.jpg (1000×750)

IMG_9387.jpg (1000×750)