Instagram

仕事でInstagram APIを使うことになったので、勉強がてら以前から作ってみたかった「おうちごはんカレンダー」を作ってみました。 １年以上も前の記事です。情報が古くなっている可能性があります。 できたもの ・我が家のおうちごはん（JavaScript版） ・我が家のおうちごはん（PHP版） ・みんなのおうちごはん APIの仕様変更に伴い、上記サイトは削除しております。ご了承ください。 我が家のおうちごはん ２つは、どちらも私が@mei331のアカウントで投稿している写真の中から#おうちごはんタグのついたものだけを抽出してカレンダー状に表示しているものです。 みんなのおうちごはん はInstagramの写真すべてから、#おうちごはんタグのついたものだけを抽出し、並べています。 Instagram APIについて Instagram APIを使う場合、Instagram Developer に登録する必要があります（※Instagram Developerへの登録にはInstagramアカウントが必要です） また、登録の際に携帯の電話番号が必要になります（SMSで認証番号が届きます） Developer登録をすると、アプリケーション登録が可能になります。 アプリケーション登録→クライアントID、クライアントシークレットを取得→アクセストークンの取得 までできて、ようやくAPIを使用することができます。 少し面倒ですが、一度Developer登録をしてしまえば、アプリケーション登録はすぐにできますし、アクセストークンの取得もスムーズにできます。詳しい登録の仕方は以下を参考にしてください。 Instagram APIでwebサービスを作りたい全ての人に向けて書きました 我が家のおうちごはん（JavaScript版）解説 Instagram APIをJavaScriptで使えるようにするjQueryプラグインなどもありますが、ソースを見たらクライアントID、クライアントシークレット、アクセストークンが丸見えになってしまうという危険性があります。安全な方法として、JavaScriptでアクセストークンなどの書かれたPHPを叩く→PHPが結果を返す→PHPの返した結果をJavaScriptで受け取る、というやり方があります。JavaScript版はその方法で制作しました。 以下で書かれている方法がとても参考になります。 コピペなしでInstagramの画像を表示するよ！ | marimelody.net JavaScript（jQuery）でPHPにデータを渡す方法 今回制作したカレンダーでは、指定した年月のデータを取得して表示させています。Instagram APIでは、ユーザーのデータを期間を指定して取得できますが、アクセストークンなどと一緒にリクエストする必要があります。なのでPHP側にどの年月を指定したか情報を送る必要があったので、以下のような方法をとりました。 JavaScript（jQuery） PHP jQueryの$.ajaxをつかって、data:{name:value}の形でPHP側にデータを送ることができました。 我が家のおうちごはん（PHP版）解説 解説と言っても、参考サイトのサンプルをベースに制作したので「Instagram APIの使い方まとめ(サンプルコード付)」をぜひ参考にしてください。 UNIX TIMESTAMP（エポック秒）の変換について Instagram APIでは日付がすべてUNIX TIMESTAMP（エポック秒）で格納されているので、変換には少しコツが要ります。 PHPの場合 JavaScriptの場合 JavaScriptは日付周りがすこし複雑なので、以下のサイトを参考にしてください。 JavaScript による日付・時刻・時間の計算・演算のまとめ – hoge256 blog みんなのおうちごはん 解説 みんなのおうちごはん の方は、Instagram全体からハッシュタグで検索した結果を返します。 ハッシュタグを検索する ハッシュタグで絞り込む場合は、ハッシュタグが存在するかどうかをまず確認します。以下の方法でハッシュタグを検索できます。 実行結果はこちら ハッシュタグで絞り込むときはエンコードする 実際にハッシュタグで絞り込む場合、リクエストURLにタグ名を含むため、日本語の場合はURLエンコードしてください。 画像をさらに読み込むには 最初にデータを取得した際、一番最後のメディアIDを取得しておき、さらに読み込む場合はmax_tag_idを指定すればOKです。 ユーザー絞り込み 指定されたユーザーの画像の中からおうちごはんタグのついたものだけを表示しています。しかし、これにはちょっとコツが要ります。 Instagramにはユーザーを示す名前が3種類あります。日本語などで表記される名前（full_name）、urlなどに使われるユーザーネーム（username）、そして内部で処理するのに必要なユーザーID（id）です. ユーザーIDは内部処理用のため、普段は分からないようになっています。なので、ユーザー名で絞り込む場合はユーザーネームからユーザーIDを調べる必要があります。 今回利用したjQueryプラグイン 今回は、ソーシャルボタンに「jQuery.socialbutton」を使用しました。かなり便利でラクチンです。すばらしい。使い方は以下を参考にしてください。 SNSのボタンをまとめて配置する【jQuery連載08】 | HTML5でサイトをつくろう もう一つ。画像のキャプションの長さがバラバラなので、打開策として画像の高さに合わせてスクロールすることにしたんですが、通常のスクロールバーではすごくださいので、「Perfect Scrollbar」を採用しました。とてもよいです。使い方は以下を参考にしてください。 [JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar | コリス さいごに やはり、勉強するには何かを作るにかぎるなぁと思います。今回つくったサイトはいつか作りたいなぁと思っていたものだったので、ちょうどよかったです。特にみんなのおうちごはんは、夕飯メニューが決まらないときに見ると、すごく参考になると思います。ぜひ使ってくださいね。 みんなのおうちごはん さーこれでInstagram APIを使う案件もばっちりだ！仕事しよー。 ＊参考サイト ・コピペなしでInstagramの画像を表示するよ！ | marimelody.net ・Instagram APIの使い方まとめ(サンプルコード付) ・jQuery：Ajaxを使用してPOST送信でデータ取得 | raining ・javascriptでクエリ文字列を取得する - Qiita ・JavaScript による日付・時刻・時間の計算・演算のまとめ – hoge256 blog

Instagram

PCからInstagramへ写真を投稿する時に一番カンタンな方法

Instagram APIでおうちごはんカレンダー作ってみた

Author

Operation