Instagram APIの使い方メモ
Instagram APIを使ってサービスを作ってみたいと思い、利用の下準備をしたのでメモ。
- Instagram APIの開発者登録をする。
- 画面左側の「Manage」から新規アプリケーション登録。
- 以下の情報を入力して、アプリケーション登録完了。「CLIENT ID」「CLIENT SECRET」情報を取得。
・アプリケーション名
・説明文
・WebサイトURL(取りあえずhttp://localhostにした)
・OAuth認証後のリダイレクトURI(取りあえずhttp://localhostにした)
- 認証URLに「CLIENT ID」「CLIENT SECRET」を埋め込みアクセス。
https://api.instagram.com/oauth/authorize/?client_id=CLIENT ID&redirect_uri=REDIRECT URI&response_type=code
- 以下のURLにアクセスし、アクセス後のURLのパラメータからcode情報を取得。
https://api.instagram.com/oauth/authorize/?client_id=取得したCLIENT ID&redirect_uri=登録したOAuth redirect_uri&response_type=code
- access_token取得。
ターミナルを開いて、以下の内容をコマンドしaccess_token取得。
curl \
- F 'client_id=CLIENT ID' \
- F 'client_secret=CLIENT SECRET' \
- F 'grant_type=authorization_code' \
- F 'redirect_uri=http://localhost' \
- F 'code=CODE' \
例えば、直近の自分の投稿写真情報を取得したい場合は、以下にアクセス。
https://api.instagram.com/v1/users/self/media/recent?access_token=*********
ここまではできたので、あとは取得したJSONデータをパースしてUI設計すれば、サービスできそう。
ここからが難しい。
このサイトを参考にした。
instagramAPI公開!OAuth触りました
InstagramAPIでポピュラー取得
12/19(月) こころを動かす。の見つけ方 〜永谷亜矢子さん〜
電通の岸さんの対談本の公開対談「こころを動かす。の見つけ方」を観覧に行って来ました。
田川さんのパートに続き、行くのは2回目です。
対談相手の永谷亜矢子さんは、東京ガールズコレクション(TGC)を立ち上げた方。
リクルートで社会人生活をスタートされたようで、そこでの業務内容も興味深く聞かせてもらいました。
以下、殴り書きの備忘録。
(岸さん)
- いい商品は先にe-commerce会社に卸される傾向にあるらしい。zozoとか。それほど影響力が大きくなってきている。
(永谷さん)
- F-modeというものでファッションショーやってた。TGCの前身。
- そこでコンテンツが良かったのにPRが弱かったり売りと連動してなかったりといった反省点を踏まえてTGCに活かした。
- プロデューサー視点(お金儲け)とディレクター視点(ディレクション)をうまく同居させながらバランスをとっている。
- TGCはファッションショーでなく、日本の女の子のファッションのトレンドを発信する場所と定義している。
- 多角的なPR、一部の人しか入れないTGCにし、TGCに入ることがステータスになることを目指している。
(岸さん)
- TGCは立ち上げの際にはファッション業界から非難を浴びたらしい。タレントモデルは認めない風潮があった。
(永谷さん)
- たまたまコンテンツがファッション、アパレルだっただけ。ファッションにこだわりはなかった。
- ファッションって正直、気分によってじゃないっすか。
- デザイナーを育てるのか産業を支援するのか
(永谷さん)
- 日本のファッション雑誌はアジアで売れまくってる。アジアでポテンシャルがある。
- そこで売れているのはルミネなどで売れているおしゃれな普段着みたいなもの。(リアルクローズ)
- 手が届くものであって、ファッションショーでやってるようなものではない。
(岸さん)
- 秋元康さんとのお話で、AKBのアジア公演では最初のステージで歌とダンスの下手さに始めは引かれるが、3曲目ぐらいから異常に盛り上げる。楽しみ方をわかってくる。
- 海外用に削ぎ落してスタイリッシュに作ったものが受け入れられるはずがない。成功するとしたらAKBくらいだ、と。
(岸さん)
- 浜崎あゆみとかファッションブランドとかロゴとかは中国に商標を取られている。まずは取り戻すことから始めないといけない。
(永谷さん)
- ファッションが海外で成功するには。
- ファッションは生き物。アパレルは場所をとるし、シーズンで売れないものは在庫リスクがある。コンテンツとしては優秀だが流通障壁が高い。
(永谷さん)
することで読者層がmixするような効果があった。
- 今では普通になっているミックスコーデさせることなども昔は御法度だった。(IQONみたいな?)
(岸さん)
- 10人中8人がいいねするよりも、10人中2人が死ぬほどいいねの方が今ははねる傾向にありそうな気がしている。
(永谷さん)
- お金の使い方が変わってきてる。
- 高価な服より、安価なつけまを買った方がかわいくなれるという傾向。
- ただし、相変わらず美容院にはお金かける。前髪などは少しの違いで印象変わるし。
(岸さん)
- アンケートを取ったことがあるが女子大生が洋服選びで気にすることは1位が、友達とかぶること。
- 女子大生が彼に乗ってもらいたい車は1位がFit、2位がプリウス。
(永谷さん)
- ファッションとは気分によってくる。
- 気分を作ってあげることとは、ちょっとした優越感を作ってあげること。
(岸さん)
- フジテレビの大崎さんとの対談での話。
- 「Fitがいいと言っても、やっぱり高い車がそこにあったらそっちの方に惹かれるだろう。」
- データをそのままに受け取らないこと。
(永谷さん)
- 立ち上げ当初はいかに"お客さんで"かわいい子を集めるかが鍵だった。
- 彼女たちはインフルエンサーだから。ブログ全盛の時期でもあったし。
(岸さん)
- 何をして"気分"を見極めるトレーニングをしているか。
- (岸さん)10数種程度、女性誌を定義購読している。
- (永谷さん)それに加えてどのアイテムがどれくらい着回されているかをみる。"読者モデル"と接点が多かったこともその一因に。(notモデル)
(永谷さん)
(岸さん)
- アイディア発想力。
- 制約と飛躍
- 拡張と選択
- 観察と発見
- 連続と非連続
- 永谷さんは制約をプラスに変えることを結果的にしているように感じる。
(岸さん)
- 岸さんの後輩のエントリーシートを手伝ったことがある。
(永谷さん)
- リリースを先に書く。
- それを営業ツールにして無理に見えることも実現させていく。
(岸さん)
- ソリューションニュートラルなところが共通点と思った。
- 目的のために、手段はなんでもいい。
(岸さん)
- 縦割りの壁を突破するには?
- (岸さん)情熱しかない。
- (永谷さん)責任感と、熱。
(永谷さん)
- 反射的にかわいいと言ってもらえるものを作る。
(岸さん)
- あるPC製品を女の子にモニタしてもらったところ、「このパソコン、女の子は使いません。配線がキモいから。」と言われた。笑
ドットインストール「HTMLの基礎」(2)
ドットインストールの「HTMLの基礎」の全22回が全部終わったので備忘録。
THE・自分だけわかりゃいいブログ。
- html_basic_1.html
http://keito7.lolipop.jp/dotinstall/html_basic/html_basic_1.html
<!DOCTYPE html> <html lamg="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="はじめてのHTMLです。"> <meta name="keywords" content="はじめてのHTMLです。"> <!--"description"は文書の説明、"keywords"はキーワード--> <title>はじめてのHTML</title> <link ref="stylesheet" href="mystyle.css"> <link ref="shortcut icon" href="favicon.ico"> <script src="myscript.js"></script> <body> <!--今回は見出しと本文について学びます--> <h1>見出し<h1> <p>こんにちは!</p> <p>もっと!<br>こんにちは!</p> <p>Google検索は<a href="http://google.com/" target="_blank">こちら</a>から!</p> <!--targetは新しいタブから開いてくれるか否かを指定する--> <img src="http://keito7.lolipop.jp/dotinstall/html_basic/keito7.JPG" width="153" height="153" alt="keito7のプロフ写真"> <!--widthやheightは画像のプロパティの"情報"から見れるので入力しておく。altは画像の説明文--> <h2>香川真司の特徴!</h2> <ul> <li>はやい!</li> <li>うまい!</li> <li>髪型へん!</li> </ul> <!--ulは箇条書きリスト、olは番号付きリスト--> <h3>リーガ得点データ</h3> <table> <tr><th>選手</th><th>2009年</th><th>2010年</th><th>2011年</th></tr> <tr><th>メッシ</th><td>34</td><td>31</td><td>16</td></tr> <tr><th>C・ロナウド</th><td>26</td><td>40</td><td>16</td></tr> </table> <!--thは見出し、tdは実データ--> <h4>お問い合わせフォーム</h4> <form action="contact.php" method="post" enctype="multipart/form-data"> <p>お名前: <input type="text" name="name" size="20" maxlength="5" value="田中さん"></p> <!--nameはどういった名前で処理を渡すか。sizeは20文字分の幅にする、maxlengthは最大値、valueは初期値--> <p>メモ: <textarea name="memo" rows="5" cols="40">メモ</textarea></p> <!--textareaは複数業入力のタグ。rowsは5行、colsは40文字を指定。--> <p>パスワード: <input type="password" name="password" size="20" maxlength="5" value="12345"></p> <!--nameはどういった名前で処理を渡すか。sizeは20文字分の幅にする、maxlengthは最大値、valueは初期値。見えないようになっている。--> <p>ケータイ: <input type="checkbox" name="mobile" value="1" checked> iPhone <input type="checkbox" name="mobile" value="2" > Android <input type="checkbox" name="mobile" value="3" > その他 </p> <!--valueの値がプログラムに送られる。最初からチェックした状態にしたい場合は末尾にcheckedを記載--> <p>性別: <label><input type="radio" name="sex" value="1" checked> 男性</label> <label for "female"><input type="radio" name="sex" id="female" value="2" > 女性</label> <label><input type="radio" name="sex" value="3" > その他</label> </p> <!--選択肢からどれかひとつを選ばせたい場合。最初からチェックした状態にしたい場合は末尾にcheckedを記載--> <!--labelタグはラジオボタンとかチェックボックスの部品とラベルを結びつける役割。選択肢からどれかひとつを選ばせたい場合。書き方は2通りある。ボタンをクリックしなくてもラベルをクリックすればチェックを移すことができる--> <p>言語: <select name="language" size="4" multiple> <option value="ja">日本語</option> <option value="en">英語</option> <option value="fr">フランス語</option> <option value="sp">スペイン語</option> <option value="th" selected>タイ語</option> <option value="kr">韓国語</option> </select> </p> <!--初期値設定はselected。sizeでリストで表示させる行数を指定。multipleで複数選択可能に。--> <p>写真: <input type="file" name="picture"></p> <!--ファイルのアップロードタグ。画像を送る場合は、フォームタグにオプションをつける。enctype="multipart/form-data"--> <input type="hidden" name="user_id" value="555223"> <!--ユーザに認識させないけどデータを送りたい際に使うタグ--> <p><input type="submit" value="送信する!"></p> <!--フォームタグに記載された内容をプログラムに送信--> <p><input type="button" value="汎用ボタン"></p> <!--フォームをsubmitではなく、javascript等で処理をさせたいときに使う--> </form> </body> </head> </html>
- html_basic_2.html
http://keito7.lolipop.jp/dotinstall/html_basic/html_basic_2.html
<!DOCTYPE html> <html lamg="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="はじめてのHTMLです。"> <meta name="keywords" content="はじめてのHTMLです。"> <!--"description"は文書の説明、"keywords"はキーワード--> <title>はじめてのHTML</title> <link ref="stylesheet" href="mystyle.css"> <link ref="shortcut icon" href="favicon.ico"> <script src="myscript.js"></script> </head> <body> <!-- div:汎用ブロック要素 => 前後に改行が入る span:汎用インライン要素 => 前後に改行が入らない ※範囲を指定して、デザインやレイアウトを変えたいときに使う。 id => ページ内に一つだけある要素 class => ページ内に複数ある要素 --> <h1>見出し</h1> <p>こんにちは!こんにちは!こんにちは!<span class="point">こんにちは!</span>こんにちは!</p> <p>こんにちは!</p> <p>こんにちは!こんにちは!<span class="point">こんにちは!</span>こんにちは!</p> <h2>見出し</h2> <p style="color:red; border:1px solid #CCC;">こんにちは!こんにちは!こんにちは!</p> <!--要素自体にstyle属性を指定して試してみることができる。正式にはstyleシートに記述すべき。--> <h3>見出し</h3> <p>pタグは<p>と書きます。</p> <!--タグと衝突する文字は、文字参照と呼ばれ、特殊な書き方をしなければならない。--> <div id="main"> <p>こんにちは!</p> <p>こんにちは!</p> <p>こんにちは!</p> <p>こんにちは!</p> </body> </html>
ドットインストール「HTMLの基礎」(1)
ドットインストールの「HTMLの基礎」の全22回中、取りあえず9回目まで終わったので備忘録。
<!DOCTYPE html> <html lamg="ja"> <head> <meta charset="UTF-8"> <meta name="description" content="はじめてのHTMLです。"> <meta name="keywords" content="はじめてのHTMLです。"> <!--"description"は文書の説明、"keywords"はキーワード--> <title>はじめてのHTML</title> <link ref="stylesheet" href="mystyle.css"> <link ref="shortcut icon" href="favicon.ico"> <script src="myscript.js"></script> <body> <!--今回は見出しと本文について学びます--> <h1>見出し<h1> <p>こんにちは!</p> <p>もっと!<br>こんにちは!</p> <p>Google検索は<a href="http://google.com/" target="_blank">こちら</a>から!</p> <!--targetは新しいタブから開いてくれるか否かを指定する--> <img src="http://keito7.lolipop.jp/dotinstall/html_basic/keito7.JPG" width="153" height="153" alt="keito7のプロフ写真"> <!--widthやheightは画像のプロパティの"情報"から見れるので入力しておく。altは画像の説明文--> <h2>香川真司の特徴!</h2> <ul> <li>はやい!</li> <li>うまい!</li> <li>髪型へん!</li> </ul> <!--ulは箇条書きリスト、olは番号付きリスト--> <h3>リーガ得点データ</h3> <table> <tr><th>選手</th><th>2009年</th><th>2010年</th><th>2011年</th></tr> <tr><th>メッシ</th><td>34</td><td>31</td><td>16</td></tr> <tr><th>C・ロナウド</th><td>26</td><td>40</td><td>16</td></tr> </table> <!--thは見出し、tdは実データ--> </body> </head> </html>
- "description"は文書の説明、"keywords"はキーワード。
- "target"は新しいタブから開いてくれるか否かを指定する。
- "width"や"height"は画像のプロパティの"情報"から見れるので入力しておく。"alt"は画像の説明文。
- "ul"は箇条書きリスト、"ol"は番号付きリスト。
- "th"は見出し、"td"は実データ。
最初なのでごく基礎的なことばっかですが。
んで、できたのがこんな感じ。
レンタルサーバにアップしてみた。
http://keito7.lolipop.jp/dotinstall/html_basic/html_basic_1.html
ドットインストール始めました
はてブとかTwitterで話題になっている「ドットインストール」というサイトに招待してもらったので、ちょっと勉強してみました。
このサイトは、百式やIDEA*IDEAを運営する田口さんが作った超初心者向けのプログラミング学習サイトとのこと。
なんとなんと無料です。
マイページはこんな感じ。
1〜3分ほどの動画がいくつかにまとまってひとつの教材になっています。
「HTMLの基礎」という教材なら全22回ですね。
まずHTMLの教材をさわりだけやってみたけど、わかりやすくていい感じ。
プログラミングを何回も挫折している自分としては、ネット記事とか本を読みながらだとどうしても、
→わからないことが出てきちゃって
→つまってしまい
→解決できず
→モチベーションが上がらなくなり
→エディターを開くのを敬遠し
→やらなくなる
というパターンに陥りがちなのですよね。
でも、動画を見て実際に動かしているのを確認しながら学習ができるのって理解度が深くてかなりいいかも。
また、モチベーションを保つ仕組みとして、他のユーザの進捗が(否が応にも)見えるのもいい。
HTMLもCSSもPHPもJavaScriptもきちんと体系的に勉強してない自分としてはかなり重宝しそう。
ブログのリハビリとしても、ドットインストールで学習したら備忘録として残したいと思います。
まだ招待もできますので是非。
頓挫しているiPhoneアプリもがんばりますです。。
Twitter APIでユーザの画像を取得する方法
Twitterの自分のフォロー・フォロワーの人の画像を使って遊ぶiPhoneアプリを作りたいなー、と思っており、そのためのプロフィールアイコン取得方法を色々とネットで探していたんだけど、なかなか載ってないのですね。
かなり時間をかけて探して、中村洋基さんのBLOGに到達してようやくそれっぽいものが取得出来ました。
●その人がフォローしている人を一覧表示
http://api.twitter.com/1/statuses/friends.xml?screen_name=nakamurahiroki&cursor=-1
→名前やプロフィール、アイコン画像、その人のフォロー数、フォロワー数までとれる●その人がフォローされている人を一覧表示
http://api.twitter.com/1/statuses/followers.xml?screen_name=nakamurahiroki&cursor=-1
→上と同じ
このURLでAPIを叩けば、データを取得できるみたいです。
試しにxml形式で自分のフォローしている人の情報を取得してみました。
http://api.twitter.com/1/statuses/followers.xml?screen_name=keito7&cursor=-1
※Xcodeで扱うときは、json形式の方が勝手がいいらしい。
ただし、API制限がとやらがあるんですね。
何回もリクエストを送っていたら、「1時間で150以上のリクエストを送っちゃダメよ」と言われた。
Rate limit exceeded. Clients may not make more than 150 requests per hour.
ちなみに認証を伴うリクエストは60分間に70リクエストまでしかダメらしい。
http://usy.jp/twitter/index.php?Twitter%20API#id8af6d0
開発者にとっては、結構めんどくさい規制だなあ。
また、"screen_name"と"user_id"の違いがよくわからなかったので調べたところ、
"screen_name"はアカウント名(可変)で、"user_id"はユーザ固有に振り分けられたid(不変)のこと。
"user_id"は「http://twitter.com/users/show/keito7.xml」のURLから確認できます。
アイコン画像の大きさはTwitterで使われる箇所によってサイズがいくつか違うみたいです。
http://pomo.vis.ne.jp/tips/twitter_icon.html
アイコンに使用できる画像ファイルの種類は、gif、jpeg(jpg)、pngの3種類で、
また、公式サイトの推奨サイズはタテヨコ「128px×128px」の正方形です。
それに容量は700kB以下です。
ただし、上記サイトに記載のように「48px×48px」に圧縮された画像が使われるケースが一般に多く、
xmlで取得した画像もそのサイズで、また自分のやりたいことも十分できそうなので、
「48px×48px」の画像をいじることにします。
帰ったら早速Xcodeいじってみよう。
あとは画像処理のロジックを組み立てれば、意外と簡単にアプリできるかもしれない。
9/26(月) こころを動かす。の見つけ方 〜田川欣哉さん〜
電通の岸さんの対談本の公開対談「こころを動かす。の見つけ方」を観覧に行って来ました。
対談相手の田川欣哉さんは、「takram design engineering」の代表を務める方です。
以下、殴り書きの備忘録。
- design engineeringとは?
- デザインとエンジニアに分かれて行う従来の仕事に違和感を持っていた。
- design engineeringという造語
- design:engineering = 理想:現実と言い換えてもいいかもしれない
- design/engineering/software/hardwareのマトリックス
-
- 東芝が白熱球からLEDに専念する宣言をする時の案件
- 使い手である人間がLEDに触れている風景を表現したかった。(新しい技術には不安などがつきもの)
- 人が通ると赤外線センサが反応して、ふわっと灯る
- 触れると鼓動を感じる
-
- ヨーロッパでのプレゼンスを獲得することが必要だった。
-
- 最初のクライアント要件
- 何かインタラクティブなもの
- 電球をテーマとすること(なぜ前の形を引用する必要があるのか?疑問に思った)
- 最初のクライアント要件
-
- 最初の案はシャボンにLED灯を封入してはじけたらひらひら落ちてくる。おばちゃんが回収してまたシャボン製造機に入れる。というものだったが特に理由なく却下された。
-
- 「あかり文化の象徴」としての電球
- 打合せを重ねるうちに、東芝はLEDを作りたい訳ではなく、それによって紡ぎだされるコンテクストなどを表現したかったことがわかった。
-
- オレンジ色
- ふくよかさ
- 食卓を照らすもの
-
- 電球というものの意味合いがわかってきた。が、その表現だけではただの白熱球じゃん(LEDの必然性がない)、となってしまうためコンテクストとものづくりをブリッジするための仕掛けが必要だった。
-
- ガラスは水を通さない、そこで電球の中に2本のフィラメントを通し、過電子の水を作り、人間が近づいた際の電子の動きを検知することで触れることによるインタラクションを実現した。
- プロジェクトの進め方について
- プロトを作るときは特にスピードが大事。何回まわせるか。
- シミュレーションの精度を上げる+特に皆の共通認識をあげるため。同じビジョンを観るため。
- ものづくりとものがたりをインタラクションさせることによって、判断しやすくしている。
- (岸さん)コピーライターとアートディレクターでなく、様々なやり方が出てきている。partyのstyleはクリエイティブディレクター+テクニカルディレクター
- (岸さん)Jobsのapple、A経営者のBのように背景などモノ以外の価値があがっている中でモノだけで圧倒的な価値を持っているものもある。
- ものづくりとものがたりの「融合」と言うより、「テンション」の方がイメージに近い。切れない程度にデザイナーとエンジニア間に緊張を保てる。北極と南極みたいに極を成す。車輪も近づいたら一輪車になって(融合)バランスが悪い。
- (岸さん)広告をはじめ通常のプロジェクトは一度決めたコンセプト(ものがたり)を覆すことが難しいが、ものづくりとものがたりをインタラクションさせる仕組みを作っているのがすごい。嫉妬してる。笑
- アイディアの魅力を因数分解する。
- 人とアイディアが密になりすぎていて、人がいいのかアイディアがいいのかがわからなくなってる。Aさんの考えたアイディアをBさんが分解してプレゼンする。何回か繰り返すことでアンドがとれた部分が抽出され本質が見えてくる。
- ものがたりとものづくりのどちらを先にプレゼンするか。
- MUJI NOTEBOOKはものがたりから入った。時と場合による。
- (岸さん)ものが作れない人にものがたりを与えるのは危ないと思う。同じビジョンを観るときのものがたりの価値は上がっていくと思うが、危うい。
- 事例:虹傘
- 傘と傘の交差した面が虹色になる。
- 傘はパーソナルエリアを明確に決める。
- ものづくりの変遷
- ~1900 Hardware
- ~1980 Hardware + Electronics ※アメリカ日本が強い分野
- ~2004 Hardware + Electronics+Software
- ~2007 Software+Network+Service ※Yahooはここで止まった
- Current Hardware + Electronics+Software+Network+Service
- Future ?
-
- (岸さん)変化のスピードが速くなってきている。学ぶことが多くなりすぎてる。インタフェース部分のEmotion、コミュニケーションをデザインすることに価値を見出すほかないんじゃないか?
- 人を動かすために一番大事なものは?
- 仲間・ユーザ・クライアント間で自由に動けるためのプラットフォームを作ること。余白を作ることでもないと思っている。
- ものづくりのスタイル
- R/GA・・・COPY+ART→STORY×TECHNOLOGY
- tacram・・・ものがたりとものづくり
- PARTY・・・CreativeDirector×TechnicalDirector
- AKQA・・・Idea=Emotion×Function
- tacramの変わった給与体系について
- 自分で自分の給料を決定できるが、それに比例して売上予算がつく。
- 予算を超えて売り上げた場合は、以下の2つが選択できる。
- 超過分の1/3をボーナスとして取得する。2/3は会社に。
- 超過分のすべてを自分の新しいプロジェクトに投資する。
- 給与を高く設定する→売上をより上げる必要に迫られる→仕事が忙しくなる→自分に投資ができない、の循環になり、必然と給与を低く設定する社員が多い。笑
- 所感
- お二人ともとても聡明だなあと思ったのは、抽象的な対象を言語化して自分の言葉で語れる能力を持っていること。わからないものをそのままにしない、思考を止めないこと。
- やっぱり実際にものをつくることが絶対大事だということ。評論家になってはいけない。