写真共有SNSとしては押しも押されぬ勢いのinstagram。ソーシャルのツールとして無視できなくなっていますが、このinstagramに投稿した写真をダウンロードしたい、という時がTwitterみたいに「右クリックで保存」みたいなのができなくなっています。これをパパッとやる方法を紹介します。
instagramの写真画像をダウンロード
一応このサイトでもinstagramアカウントは作っています。ちょっとしたものを共有したり、ブログ用素材として使うのにも便利なんですよね、instagram。
例えばスマホで撮影した動画なんかはそのままWordpressに掲載しよう、と思うと「スマホからPCにまず持ってきて、そこからWordpressにアップロード・・？」「普通にタグで貼り付けても重くて見るのが大変かも・・？」とか色々考えちゃいますが、instagramでシェアしてから埋め込みでやってしまえばそのあたり一切考えなくて良くなります。レスポンシブ対応してるし。
普段instagramにアップしている画像も埋め込んでいけばいいのですが、例えばWordpressのサムネイルとかに使いたい、という時に画像だけダウンロードする、というのがかなーり面倒。
まぁinstagramが写真共有SNSであることを考えると当たり前の措置ではあるんですが・・・ポンポン落とされても困りますしね。
けど自分でアップした投稿の画像ぐらい自由に使わせて！ということで手っ取り早くやる方法です。
ちなみに、instagramを経由した画像であれば、事前にエフェクトを掛けていればその効果も反映されていますし、なによりそこそこ大きなサイズで正方形にトリミングされているのが使いやすいですよ。
instagramの画像の取り出し方
前に投稿したこれを使います。
instagramで普通に写真の上で右クリックしても画像の保存は出来ません。Twitterとかは出来るのにね。
じゃぁどうするか・・・次に考えるのは「ディベロッパーツールとかで要素見極めて・・・」とかだと思います。
これ、instagram側も想定しているようで、結構面倒くさいです。
一応範囲指定しながら絞り込めば今のコーディングだとimgタグにsrcとして指定されているようですが・・・
以前はこれ、div要素のバックグラウンドに入れてた気がします。なので取り出すのに相当手間。
OGPにあっさり指定されている
そんな面倒臭いことをやるよりも、まず対象のinstagramの投稿のURLにアクセス。一覧でいろんな画像投稿が見れるところから日時のところをクリックして単一画像のURLにします。
上の例であれば、
このページにアクセスしたら右クリックで「ページのソースを表示」に。
そしてHTMLが表示されたら検索（ctrl+Fとか）で「og:image」を検索します。
すると・・・
<meta property="og:site_name" content="Instagram" />
<meta property="og:title" content="@freesim.tokyoのInstagram写真 • 2017 1月 1 10:24午前 UTC" />
<meta property="og:image" content="https://scontent-nrt1-1.cdninstagram.com/t51.2885-15/e35/15803366_1612750969033626_3007515437018644480_n.jpg?ig_cache_key=MTQxODA2MjcwMjk0OTEyNzkzNg%3D%3D.2" />
<meta property="og:description" content="@freesim.tokyoのInstagram写真をチェック • いいね！1件" />
はい、3行目に普通に入っていますｗ
ここはソーシャルのシェアで使われるOGPのパート部分。facebookなどでURLを貼ると画像やタイトルがちゃんとカードになって出て来るアレです。
instagramだと当然投稿写真を出すしかないのでここにはしっかり投稿写真のURLが指定されています。
これをコピペすれば・・・OKです。
僕は大抵htmlを表示したウィンドウにこのcontent=”のあとをコピペして一旦画像を表示させ保存しています。
ね、楽ちんじゃないですか？