© dkstudio blog All rights reserved.

20146/15

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

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

http://instafeedjs.com

スクリーンショット 2014-06-15 22.06.11 スクリーンショット 2014-06-15 22.25.00

インスタには、美しい写真や動画がたくさんあって、見ているだけでうっとりしてしまいますね。
セレブの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>

完成後はこんな感じになります。
スクリーンショット-2014-06-15-21.45.59

  • このエントリーをはてなブックマークに追加

関連記事

2017.02.10 Zenjiro Show ポスター造りました! New designed !

 いつも挑戦を続ける”コメディアン”の“ぜんじろう”さん 今年は特に大活躍を続けています。  USTREAM「Zenjiro Show」…

A Happy New Year!!!!!! 2017!!!!!

A Happy New Year!!!!!! 2017!!!!! 本年もよろしくお願いいたします。 旧年中は大変お世話になりました。 …

2016.08.06 Zenjiro Show ポスター造りました! New designed !

 いつも挑戦を続ける”コメディアン”の“ぜんじろう”さん 今年は特に大活躍を続けています。  USTREAM「Zenjiro Show」…

第二回、LINE クリエイターズ マーケットでスタンプを作成

 2個目のラインスタンプを作成しました。 タイトルは「昭和なサトコ」。 本日ラインスタンプ承認おりました。  最近は、審査に一週間…

20165/6

新潟市 市営汐見台団地へ散歩

 この団地は1964年(昭和39年)新潟地震の後、避難場所として、関屋分水近くに 建築され、1970年代はかなり子…

未来の仕事ってどう?

☆10年から20年後、約47%の人が現在の職を失う? オックスフォード大学と政府の統計データなどから、10年〜20年で無くなる仕事 …

A Happy New Year!!!!!! 2016!!!!! 本年もよろしくお願いいたします

A Happy New Year!!!!!! 2016!!!!! 本年もよろしくお願いいたします。 旧年中は大変お世話になりました。 …

「Twin strangers」というSNSで自分のそっくりさんを探す!

TwinStrangers(ツインストレンジャーズ)というサイトをしっます? このサイトに登録すると世界中の同じく登録者の中から自分のそっ…

「Zenjiro show new studio set!」ぜんじろうショーポスター造りました!

 番組名「zenjiro show!」 ぜんじろうの自宅から毎週生配信(無料)。 毎週土曜日の深夜12時~(約1時間)の新しいポスターを作…

20155/16

その時がやってきた。Apple Watch

さて、4月20日あたりに予約を入れておいた。(確か?) まさに、おたく歴30年以上になる40のおっさんが始めて手にしてみる「ウェアラブル端…

ページ上部へ戻る
Shares

Contact Us