[み]Instagram APIを使ってポメラニアン大好き専用の「Pomestagram」を作ってみた

先日、仙台にできたIKEAに行ったら、そこで働いてる友人に「みはら.com見てますよ」と言われ、だいぶ恥ずかしかったです。彼はきっとこれも見てくれるでしょうww

さて、今回は仕事やなんやで辛くなった時に自分を癒すために作ったWebサイトを紹介します。Instagram APIを使ってポメラニアン大好き専用の「Pomestagram」を作ってみました
Pomestagram – ポメラニアン大好き専用Instagram

Nekostagramのオマージュ

PomestagramはNekostagramという、InstagramのAPI使って、ネコの写真とコメントを取ってくるサイトを見て、これのポメラニアン版があったらなーと思って、Google先生に聞きながら作りました。パ○リではありません、オマージュです。
Nekostagram – ねこ大好き専用Instagram

なぜパクリでないかというと、このNekostagramはRubyで書いてるようで、みはらには高度すぎました。ソースを見てもjsonのままなので、みはらにはパクれませんでした…。
Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた – アインシュタインの電話番号

PHPで取得表示 → Masonry

PHPでAPIたたいて、Masonryできれいに並べたかったんですが、どうにもうまくいきません。とくに、コメントの長さがとてもまちまちで、ただ単にfloatさせると、非常にザンネンな見た目になってしまいます。

Facebookの場合だと、うまくできたんですが、InstagramのAPIは勉強不足です。
[み]Facebookページのアルバムの写真をPHPで取得してjQuery Masonryでキレイに並べる方法
FacebookのGraph APIを使って、アルバムの写真を取得してjQuery Masonryを使って表示するサンプル その2

jQueryでやった

といっても、jQueryの書き方なんて、じつはほとんどわかりませんww こちらのサイトを参考にしました。
コピペなしでInstagramの画像を表示するよ! | marimelody.net

ただし、タグのついた写真を表示するだけであれば、access_token は必要なく、client_id だけで大丈夫です。access_token が丸見えというのもどうなのかと思ったので、PHPでやりたかったんです。

それと、Google先生に聞いても、いわゆるページングのところの実装がコードを乗っけてくれているところが見つけられず、とても苦労しました。みはらの書いたコードは、Pomestagramのソースをご覧ください。かなり力技だと思うので、スキルのある方、こうやった方がステキよ!というのを教えてください。

できたPomestagramがこちら

Pomestagram – ポメラニアン大好き専用Instagram
Pomestagram
長いですね… いちおうレスポンシブです。まぁ、いちおうということで。

スマートフォンで見ると、こんなカンジです。
Pomestagram
Pomestagram
ね、レスポンシブでしょww

そして、このPomestagramですが、たたくAPIのURLをちょこっと変えるだけで、量産できますww こんなの欲しいというのがある方、みはらまでご一報いただけたら、すぐに作ります!どうぞよろしく:)
Pomestagram – ポメラニアン大好き専用Instagram

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup