Instagram・インスタグラムという画像共有サービス・instafeed.js

メニュー

rss
twitter
facebook
search button
検索ボックス

20146/15

Instagram・インスタグラムという画像共有サービス・instafeed.js

Instagramとは、画像を撮影し、画像編集（フィルター）で写真や動画を加工して、画像を公開共有するサービスのこと。
現在では、ユーザーが急激に伸びているSNSらしい。コダックのインスタマチック、ポラロイドのインスタントカメラの両方に敬意を払い、インスタグラムの画像はすべて正方形で、612ピクセル四方の正方形でされている。
2010年プロジェクトが発足してインスタグラムは、モバイルアプリの中でも非常に成功したアプリのひとつ。米国のテレビでは、ツイッターと並んで、セレブが投稿したインスタグラムの写真やビデオが番組内で引用されることは日常茶飯事となり。
月間アクティブユーザーは１億5000万人を数え、フェイスブックによる買収後も、独立した発展を遂げている。
現在では「Instagram」がほぼ動詞になったことは、数字面での成功以上の出来事と言える。写真を撮影・シェアすることが、モバイルの文化の中で受け入れられ、スタンダード（標準）になったからだ。
殊に最近はTwitterも少し落ち着いてきたところでもあるので、新しいInstagramをはじめてみた。
また自分のサイトやブログに撮った写真が新しい物からアルバムのように自動的に展開してくれたら、とても楽しいし、サイトも色とりどりでいいのではとも考えた。
　まず、Javaスクリプトの公開コードをさがして、いい物を見つけました。｢instafeed.js｣というJavaプログラムです。カスタマイズも簡単で、CSSと組み合わせてポラロイドアルバムのようにしてみようと、試みて、丸一日嫁さんと犬を放置してなんとか完成しました。最近はネットのおかげでいろいろなところに素材があるのでとても仕事が楽になりました。
これから、写真を撮るのが少し楽しみかな。でも僕の場合作り終わると放置してしまうこともあるので、今度は活用していこうかと思います。

http://instafeedjs.com

インスタには、美しい写真や動画がたくさんあって、見ているだけでうっとりしてしまいますね。
セレブのSNSじゃないかとも思ってしまった。こういうの好きだからなあ〜。
さて、作業で手間取ったのが、Instagramのデベロッパーサイトで｢アプリケーション登録｣→｢Authoring取得｣ですかね。
HTMLコードは、下記


↑cssコード
<script type="text/javascript">
var feed = new Instafeed({

get: 'user',
userId: 取得後入力,
clientId: ‘取得後入力,
accessToken: '取得後入力',

limit: 20,
sortBy: 'most-recent',
after: function () {
var images = $("#instafeed").find('a');
$.each(images, function(index, image) {
var delay = (index * 75) + 'ms';
$(image).css('-webkit-animation-delay', delay);
$(image).css('-moz-animation-delay', delay);
$(image).css('-ms-animation-delay', delay);
$(image).css('-o-animation-delay', delay);
$(image).css('animation-delay', delay);
$(image).addClass('animated flipInX');
});
},
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
});
feed.run();
</script>
<title>Instagram</title>
</head>
<body>
<div id="instafeed"></div>

完成後はこんな感じになります。