397 Views
May 23, 14
スライド概要
http://developer.yahoo.co.jp/webapi/box/
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
Yahoo!ボックスAPI Hackday資料 Yahoo! JAPAN ヤフー株式会社 スマートデバイス戦略室 スマートデバイス開発本部 開発2部 瀬川 秀樹
本日の内容 1.Yahoo!ボックス紹介 - サービス紹介 - デベロッパー様へご案内 2.付録:1.アプリケーションの開発はじめの一歩 - アプリケーションIdの取得から アクセストークン取得のフロー 3.付録:2.ボックスAPIを使ってみよう - サンプルコードによるボックスAPIの使い方解説 1
Yahoo!ボックスサービス概要 Yahoo!ボックスとは 写真や文書など、あらゆるファイルをサーバ上に置 いて管理できるサービスです。置いてあるファイルは ネット全体に公開して共有することもできます。 2
1000万人突破! ユーザ数 3
堅牢性の高い設計で 何重にもデータをバックアップ 4
国内サーバ+バックボーンの回線が同業他社に比べて 圧倒的 5
そんなYahoo!ボックスがAPIを 公開 6
APIを使えばオンライン上のファイルの アップロード、ダウンロード、 コピー、移動、削除、公開 などができます 7
本日デベロッパーの皆さまに お伝えしたい事 8
ボックスAPIを使って サービスを 作ってみませんか!? 9
Yahoo! JAPAN ID所有者全てに リーチ出来るアプリを開発できる! 10
デカイIDを持つプラットフォームが あるんだからそれに 乗っかっちゃってください 乗らない手はありません 11
今回のテーマは 未来のテレビの楽しみ方 皆さんは何を作りますか? 12
テレビの楽しみ方 必ずしも テレビ単体で楽しまれている訳ではない 実況 検索 テレビを中心としながら それに付随する情報で 盛り上がる 投稿&参照 ながらながら・・・ 13
翌日学校や会社で話題になる時代から リアルタイムでLINEやTwitterでシェア される時代へ 例えばオリンピックの個人実況など・・・ スピードが上がっている 14
Yahoo!ボックスAPIを 使っていただければ 15
Twitterのつぶやきなどの テキストデータ 16
写真や動画
ドキュメント 18
ファイルの公開・共有 19
あらゆるデータを自由に保存・ 引き出すことができます 20
端末のストレージ領域に縛られることなく オンライン上にあるファイルを使った 自由な発想 21
! なサービス 22
デベロッパーの皆さまにも ! なサービスを作ってほしい 23
それでは楽しい開発を! ご静聴ありがとうございました 24
ここからはサンプルコードを 含めたデベロッパー向け解説ページです 25
アプリケーションの開発 はじめの⼀一歩 26
アプリケーションIDの取得 アプリを開発するためにはアプリケーションIDが必要です。 Yahoo!デベロッパーネットワークで取得してください。 はじめて開発する方はこちら すでにアプリケーションIDを 持っている方はこちら 27
認証を通して使用するAPIの決定 アプリケーションIDにスコープ(アプリが使用する機能) を設定します。 利用するスコープに 「ボックス参照・更新機能」を入れてください。 28
アプリケーションIDの確認 アプリで使うので控えておきます 29
アクセストークンの取得⽅方法 30
YConnect YConnect OAuth2.0の仕様に準拠した認可機能 http://developer.yahoo.co.jp/yconnect/ アプリがWebAPIへアクセスするための 「アクセストークン」を取得するための認可フロー 31
YConnectユーザ認可の取得(ユーザからの見え方) 認証コード このアプリがユーザーに対して Yahoo!の各リソースへアクセスする 許可を求める画面です。 32
トークン、リフレッシュトークンの取り方(authorization)
// 1.認証コードを取得画⾯面を表⽰示
$appid = 'dj0zaiZpPTZqSVJ5TW80NHh-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒-‐‑‒';
$url = ʻ‘https://auth.login.yahoo.co.jp/yconnect/v1/authorizationʼ’;
$params = '?response_̲type=code+id_̲token&client_̲id='.$appid.'&redirect_̲uri=oob&scope=openid&nonce=aaddeeff';
$url .= $params;
header(ʻ‘Location: ʼ’.$url); // アプリケーションでYahoo!の認証画⾯面にリダイレクト
// 2.トークン取得エンドポイントにリクエストしてトークン、リフレッシュトークンを取得する
$appid = ʻ‘YJDNで取得するアプリケーションIDʼ’;
$secret = ʻ‘YJDNで取得するシークレットʼ’;
$code = ʻ‘1.で取得してユーザに⼊入⼒力力させた認証コードʼ’;
$url = ʻ‘https://auth.login.yahoo.co.jp/yconnect/v1/tokenʼ’; // トークン取得エンドポイント
$params = 'grant_̲type=authorization_̲code&';
$params .= 'code=ʻ‘.$code;
$params .='&redirect_̲uri=oob';
$headers = array(
'Content-‐‑‒Type: application/x-‐‑‒www-‐‑‒form-‐‑‒urlencoded;charset=UTF-‐‑‒8',
'Authorization: Basic '.base64_̲encode($appid.':'.$secret),
);
$curl = curl_̲init();
curl_̲setopt($curl, CURLOPT_̲URL, $url_̲token);
curl_̲setopt($curl, CURLOPT_̲POST, true);
curl_̲setopt($curl, CURLOPT_̲RETURNTRANSFER, true);
curl_̲setopt($curl, CURLOPT_̲POSTFIELDS, $params);
curl_̲setopt($curl, CURLOPT_̲HTTPHEADER, $headers);
curl_̲setopt($curl, CURLOPT_̲VERBOSE, true);
$result = curl_̲exec($curl);
curl_̲close($curl);
33
トークン取得エンドポイントのレスポンスの例
string(1249)
"{"access_̲token":"6GMsysoGhJvbEry5lYWU2ea3XsE7T4_̲xDq0tfAA1_̲AY5KiciO4QCCZEvrHUYUxySI43Vg4
rbdaQsdHrB0SmRDvjM.v4vBmWA8rmeX4qZzkqbt9BO9vZdoyfCYfDveBKN2ob8aatXQVECksRTH3WOQDFj
CcmRwnlgWCq0vyn.
1qs2Lm4OABpvyJ60bNclYp4bYnLnfg_̲2CWlSasQMzZFNddtRjd5HawBfe9nKUUfUOrybyqdefOKqR8B8lyHXT
92X1OL8w9vmEbsEA2wmYHek3yzM93RuhpstpEANARSI_̲JYX.vZLDrYuugFoP8S.Nr6rilL.
8SNyAI5XnSJ8vnjKl5q8Y_̲ly9kLKxWW1q8ftj60v1uK.hHVn21iV8hVy.LXuX8LcHYhKr2OBB4PHfJBRGCvbPay
rY3mmOL63C92Duo_̲Tnwqwymf6SQxWQu6O4KA8S0OgVJWFIsVaSxOtEcQwTJIc.RL1bvr6pQuysvEce5ZM
PWZi.U_̲6XqTFNLval1.OnqKWYSe0RQHK8Cj05GmoWRe7X7pCzwG2_̲pr0RLwjhlDkem.QXBDVpTahiLPEYK
C1O3s4rcuDVk4bPK4VaSX05EHnXHUn0oy5mjTZMaYULicpVw68K1nR5rpZ28VSR1BRiIPKcfCDdkTFx831p
B8CAALH67sKFJqGnvSonj6xoSwHDUoltpdBusP.Tw6okLb9HcpHEPLLFIweQwHyrg_̲A7SC8E7_̲VVBsG_̲H7h
DLjpq0Yo5gltrkE","token_̲type":"bearer","expires_̲in":"3600","refresh_̲token":"AJ5F3lI20AJ.
0kMFVZbABthjxGgNawjRERcbid5JFvhDdDsDovfP","id_̲token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.ey
Jpc3MiOiJodHRwczpcL1wvYXV0aC5sb2dpbi55YWhvby5jby5qcCIsInVzZXJfaWQiOiJTVlE2WlI3V1lMUFlUTj
NPVEtURVROMkdEUSIsImF1ZCI6ImRqMHphaVpwUFRacVNWSjVUVzgwTkhoTlZTWnpQV052Ym5OMWJX
VnljMlZqY21WMEpuZzlOVFEtIiwiaWF0IjoxMzkwOTA0NTE3LCJleHAiOjEzOTMzMjM2ODQsIm5vbmNlIjoiYW
FkZGVlZmYifQ.H0qnX_̲1PuxbmD4F_̲YLa1IA-‐‑‒GCNqw5byLiciSM9VXxwQ"}“
acess_̲tokenとrefresh_̲tokenは保存しておく。
access_̲tokenの有効時間は3600s
その後はaccess_̲tokenが無効になるので、保存しておいたrefresh_̲tokenでaccess_̲tokenを更更新する。
refresh_̲tokenの期限切切れの場合はやり直して両⽅方を新規取得する。
34
トークンを使用してユーザのGuidを取得する ・Guidとは Yahoo! JAPAN IDをサービスで使わない(表⽰示しない)ために Yahoo! JAPAN IDに「⼀一対」になった代替ID (変わることはない) ・どうやって取るか YConnectで⽤用意されているUserInfoAPIへリクエストして取得する http://developer.yahoo.co.jp/yconnect/userinfo.html 35
取得したトークンでUserInfoAPIへリクエスト
・リクエスト(GET)
<?php
$access_̲token = ʻ‘取得したアクセストークンʼ’;
$httpHeader = array(
ʻ‘GET /yconnect/v1/attribute?schema=openid HTTP/1.1ʼ’,
ʻ‘Host: userinfo.yahooapis.jpʼ’,
ʻ‘Authorization: Bearer ʻ‘ . $access_̲token,
);
$curlSetOptArray = array(
CURLOPT_̲URL => 'https://userinfo.yahooapis.jp/yconnect/v1/attribute?
schema=openid',
CURLOPT_̲HTTPHEADER => $httpHeader,
CURLOPT_̲VERBOSE => true,
CURLOPT_̲SSL_̲VERYFYPEER => true,
CURLOPT_̲HEADER => true,
);
$ch = curl_̲init();
curl_̲setopt_̲array($ch, $curlSetOptArray($ch, $curlSetOptArray);
$result = curl_̲exec($ch);
curl_̲close($ch);
36
UserInfoAPI:レスポンス ・レスポンス {“user_̲id”:“SVQ6ZR7WYLPYTN3OTKTETN2GDQ” Guid(user_̲id)が返ってきます。(後ほど使います) 37
ボックスAPIを使ってみよう 38
ボックスの仕様 Sid(StorageID) ユーザに紐づくストレージ上の領域ID UniqId 各ファイル・フォルダに振られる ユニークID Sid+UniqIdの組み合わせでストレージ上の オブジェクトを指定する 39
ボックスの仕様:公開について 公開URL 見せたいファイルを 公開状態にする 40 公開URLから いつでも参照できる
ボックスの仕様:公開のポイント ・継承公開 上位フォルダに公開設定をするとその配下全ての ファイル・フォルダも「継承公開」として公開状態になる仕様。 継承公開されているかどうかは 「PublicInherited」フラグで判断することができる。 ・コピー コピーすると、コピー先での予期せぬ公開を防ぐためコピー先 ファイル・フォルダの全ての公開情報がリセットされる。 ・移動 移動は公開状態が維持されたまま移動される。 Sid UniqIdは変わらない。 41
ボックスの仕様:継承公開について 公開 継承公開 継承公開 継承公開 継承公開 公開 継承公開 継承公開 42
ボックスAPIの使い方 サンプルコードを通してAPIの基本的な使い方を解説します。 フォルダ作成やアップロードなどの結果は実際にボックスを 確認しながら行ってみてください。 ユーザ情報取得 作成したフォルダ にアップロード フォルダ作成 43 アップロードした ファイルを公開する
ボックスユーザ情報取得:リクエスト <?php $access_̲token = ʻ‘取得したアクセストークンʼ’; $guid = ʻ‘取得したGuidʼ’; $url = ʻ‘https://ybox.yahooapis.jp/v1/user/fullinfo/ʼ’ . $guid; $httpHeader = array( ʻ‘Host:ybox.yahooapis.jpʼ’, ʻ‘Authorization: Bearer ʻ‘ . $access_̲token, ); $curlSetoptArray = array( CURLOPT_̲URL => $url, CURLOPT_̲HTTPHEADER => $httpHeader, CURLOPT_̲RETURNTRANSFER => true, CURLOPT_̲VERBOSE => true, CURLOPT_̲HEADER => true, ); $ch = curl_̲init(); curl_̲setopt_̲array($ch, $curlSetoptArray); $result = curl_̲exec($ch); curl_̲close($ch); 44
ボックスユーザ情報取得:レスポンス <?xml version="1.0" encoding="UTF-‐‑‒8"?> <User> <Guid>NG33XHXZ5GMCQBYUHODK5IFENQ</Guid> <isService>true</ServiceStatus> <isSuspend>false</ServicesSuspend> <QuotaOver>false</QuotaOver> <Sid>box-‐‑‒l-‐‑‒e7q4pp5kzdohdpe7vvheelgpce</Sid> (ユーザのSid) <RootUniqId>d9b6ed3f-‐‑‒3826-‐‑‒4f3b-‐‑‒a47f-‐‑‒5e09a73cbe69</RootIUniqId>(ユーザのルートデ ィレクトリ「/」(マイボックス)のUniqId) <Quota> <Max>53687091200</Max> 使⽤用できる容量量(Byte) <TotalUsed>2242518</TotalUsed> 現在使⽤用している容量量(Byte) </Quota> </User> 次:ルートディレクトリ「/」(マイボックス)のUniqIdが取得出来たので、ルートディレクトリにフォルダを作成する 45
フォルダ作成:リクエスト
$sid = ʻ‘ユーザのSidʼ’;
$uid = ʻ‘ルートディレクトリ「/」のUniqIdʼ’;
$access_̲token = ʻ‘取得したアクセストークンʼ’;
$url = 'https://ybox.yahooapis.jp/v1/file/' . $sid . '/'.$uid;
// フォルダ作成のボディ
$body = ʻ‘<?xml version=“1.0” encoding=“UTF-‐‑‒8”?><Object><Name>作成したいフォルダの名前</Name></Object>ʼ’;
$httpHeader = array(
'Host:ybox.yahooapis.jp',
'Authorization: Bearer ' . $access_̲token,
);
$curlSetoptArray = array(
CURLOPT_̲URL => $url,
CURLOPT_̲HTTPHEADER => $httpHeader,
CURLOPT_̲RETURNTRANSFER => true,
CURLOPT_̲VERBOSE => true,
CURLOPT_̲HEADER => true,
CURLOPT_̲POST => true,
CURLOPT_̲POSTFIELDS => $body,
);
$ch = curl_̲init();
curl_̲setopt_̲array($ch, $curlSetoptArray);
$result = curl_̲exec($ch);
curl_̲close($ch);
46
フォルダ作成:レスポンス
<?xml version="1.0" encoding="utf-‐‑‒8" ?>
<Object>
<Sid>box-‐‑‒l-‐‑‒svq6zr7wylpytn3otktetn2gdq-‐‑‒1004</Sid>
<UniqId>17c80ee0-‐‑‒612e-‐‑‒481b-‐‑‒b73b-‐‑‒3afaf59f1aa6</UniqId> 作成されたフォルダのUniqId
<Path><![CDATA[/作成したいフォルダの名前]]></Path>
<ModifiedTime>2014-‐‑‒02-‐‑‒06T19:56:32+09:00</ModifiedTime>
</Object>
次:フォルダにファイルをアップロードする
47
フォルダ作成されたか確認する ボックスWebを開いてフォルダが作成されたかどうか確認 48
アップロード:リクエスト
<?php
$token = ʻ‘アクセストークンʼ’;
$sid = ʻ‘ユーザのSidʼ’;
$uid = ʻ‘アップロードするフォルダのUniqIdʼ’;
$file = ʻ‘/tmp/test.jpgʼ’;
$file_̲name = ʻ‘test.jpgʼ’;
$body = file_̲get_̲contents($file);
$headers = array(
ʻ‘Authorization: Bearer ʼ’ . $token,
ʻ‘Content-‐‑‒Type: multipart/form-‐‑‒dataʼ’,
ʻ‘Content-‐‑‒length: ʻ‘ . filesize($file),
ʻ‘box-‐‑‒obj-‐‑‒sid: ʻ‘ . $sid,
ʻ‘box-‐‑‒obj-‐‑‒parentuniqid: ʻ‘ . $uid,
ʻ‘box-‐‑‒obj-‐‑‒filename: ʻ‘. $file_̲name,
ʻ‘box-‐‑‒obj-‐‑‒md5: ʻ‘ . Md5($body),
);
$url = 'https://upload.ybox.yahooapis.jp/v1/upload';
$curl = curl_̲init($url);
curl_̲setopt($curl,CURLOPT_̲HEADER, true);
curl_̲setopt($curl,CURLOPT_̲HTTPHEADER, $headers);
curl_̲setopt($curl,CURLOPT_̲POST,true);
curl_̲setopt($curl,CURLOPT_̲RETURNTRANSFER, true);
curl_̲setopt($curl,CURLOPT_̲POSTFIELDS,$body);
curl_̲setopt($curl,CURLOPT_̲VERBOSE,true);
$result = curl_̲exec($curl);
if(!curl_̲errno($curl)){
$response_̲header = curl_̲getinfo($curl);
}
curl_̲close($curl);
var_̲dump($result);
49
アップロード:レスポンス
<?xml version="1.0" encoding="utf-‐‑‒8" ?>
<Object>
<Name>test.jpg</Name>
<Sid>box-‐‑‒l-‐‑‒svq6zr7wylpytn3otktetn2gdq-‐‑‒1004</Sid>
<UniqId>0c703d7c-‐‑‒3e10-‐‑‒4af2-‐‑‒bccc-‐‑‒4539492a5c18</UniqId>アップロードされて発⾏行行された
UniqId
<Etag>"5ddf0bde1391418521237985"</Etag>
<ModifiedTime>2014-‐‑‒02-‐‑‒03T18:08:41+09:00</ModifiedTime>
<Path>/作成したいフォルダの名前/test.jpg</Path>
<Url>https://yoctfs.jp/res/box-‐‑‒l-‐‑‒svq6zr7wylpytn3otktetn2gdq-‐‑‒1004?
account=storage&expires=1391418642&uid=0c703d7c-‐‑‒3e10-‐‑‒4af2-‐‑‒
bccc-‐‑‒4539492a5c18&signature=NzY2ODkyM2MyNzc5YmQ1YWRmMmY1N2YxZWQ3NTh
kMWEyZDJmYjYyMg-‐‑‒-‐‑‒</Url>
</Object>
次:アップロードしたファイルを公開設定する
50
アップロードされたか確認する ボックスWebを開いてファイルがアップロードされたか確認 51
ファイル公開:リクエスト ・リクエスト:公開したいファイルのUniqIdを指定してリクエスト(PUT) $sid = ʻ‘ユーザのSidʼ’; $uid = ʻ‘公開したいファイルのUniqIdʼ’; $url = 'https://ybox.yahooapis.jp/v1/file/public/'.$sid.'/'.$fuid; $httpHeader = array( 'Host:ybox.yahooapis.jp', 'Authorization: Bearer ' . $access_̲token, ); $curlSetoptArray = array( CURLOPT_̲URL => $url, CURLOPT_̲HTTPHEADER => $httpHeader, CURLOPT_̲RETURNTRANSFER => true, CURLOPT_̲VERBOSE => true, CURLOPT_̲HEADER => true, CURLOPT_̲PUT => true, ); $ch = curl_̲init(); curl_̲setopt_̲array($ch, $curlSetoptArray); curl_̲exec($ch); $response_̲header = curl_̲getinfo($ch); curl_̲close($ch); 52
公開されたか確認してみる ボックスWebを開いてファイルが公開状態になっているか確認 53
参考資料 •Yahoo!デベロッパーネットワーク(YJDN) http://developer.yahoo.co.jp/ •ボックスAPI http://developer.yahoo.co.jp/webapi/box/ •YConnect http://developer.yahoo.co.jp/yconnect/ •Yahoo!ボックス http://info.box.yahoo.co.jp/index.html 写真素材:©株式会社データクラフト 54