取得するフィードの設定
http://dotinstall.com/lessons/basic_google_feed_api/9104
を参考に実践
フィードの中身を取得できたので、
今度はリンクをつけてみる
なので、
<div id=”feed”></div>
から
<ul id=”feed”></ul>
というようにリスト要素にする
こうなると div 関連の処理はいらないので
コメントアウト、もしくは削除
var div = document.createElement(“div”);
div.appendChild(document.createTextNode(entry.title));
代わりに
var link = document.createElement(“a”):
で
aタグ作成
さらに、
link.href= entry.link;
とする
また、リンクのところをつくるので
var li = document.createElement(“li”);
li.appendChild(link);
container.appendChild(li);
ここまで記述すると
リンクできるようになる
次にデフォルトで表示件数が4件なので
これを設定する
var feed = new google.feeds.Feed(‘http://www.ideaxidea.com/feed’);
で
feed と取ってきたあと
fedd.setNumEntries(8);
というようにすると8件ずつになる
また、10件なのに、もっとたくさん表示したいというときには
feed.includeHistoricalEntries();
とすれば、過去のデータも取ってこれるようになる
~
~
月別: 2013年5月
外部フィールドの内容を表示
外部フィールドの内容を表示
http://dotinstall.com/lessons/basic_google_feed_api/9103
を参考に
Google Feed API の実践
https://developers.google.com/feed/v1/devguide?hl=ja#resultJson
で
Google Feed APIで取得されるJSONデータにどのようなものが含まれるか確認できる
まずは、前回作成したものを実行
java script console を使うので
chrome で実行する
実行したときには何も表示されないけど
気にせずに
Ctrl + Shit + i で
java script console を起動して
一番右の
Console タブをひらく
k.(anonymous function).o
と表示されているので
左側の▼をおすといろいろと出てくる
この中の feed->entries
ここに、実際に Feed に対する
タイトル
URLなど、様々な情報が格納されている
このデータを使って
feed のタイトルを表示する
まずは表示領域の設定
var container = docment.getElementById(“feed”);
これで 要素を取得
また、表示する領域は
HTMLで div で作成する
今回なら
<div id=”feed”></feed>
となる
そしてfor で処理
for(va i=0; i<result.feed.entrues.length;i++){
}
こうすれば、中身のぶんだけ繰り返す
あと、内部処理のところで
var entry = result.feed.entries[i];
としているのは
長いから entry という変数に格納している
var div = docment.createElement(“div”);
これでプログラム側で div タグをつくれる
さらに、div.appendChild(document.createTextNode(entry, title));
今回はテキストを表示するだけなので
entry, title にしている
そして、
container に追加するので
container.appendChild(div);
とする
Google Feed API
Google Feed API
ドットインストールを参考に
Google Feed API を使ってみます
http://dotinstall.com/lessons/basic_google_feed_api/9102
を参考に開始
公式サイトは
https://developers.google.com/feed/?hl=ja
feed API はサイトの更新情報を取得できる
JSON XMLなどで取得できる
サンプルは、公式サイトの
Google Feed API Developer’s Guide
https://developers.google.com/feed/v1/devguide?hl=ja
を参照
そしてやることは
1、feed api のためのライブラリ読み込み
2、次に設定
3、ページが読み込まれたときに行う処理を記述
まずはライブラリの読み込み
<script src=”https://www.google.com/jsapi”></script>
google.load(“feeds”, “1”);
でロード
1 はバージョンになる
google.setOnLoadCallback()
で読み込まれたら実行する関数を指定
今回は
google.setOnLoadCallback(initialize);
この initialize は
function initialize(){
}
として作成する
この中の処理が実際に行う処理になる
まずは、何のフィールドを読み込むかURLで指定する
var feed = new google.feeds.Feed();
で設定
今回は
http://www.ideaxidea.com/feed
なので
var feed = new google.feeds.Feed(‘http://www.ideaxidea.com/feed’);
となる
読み込みは
feed.load();
でOK
このときに、読み込んだあとに実行することを関数で指定
今回は
feed.load(function(result){
});
となる
この function(result){}
の中でやるのが、まずはエラーチェック
if(!result.error){
console.log(result);
}
これで !result.error なので
エラーがないなら結果を表示するようになる
短縮URLの利用統計取得
短縮URLの利用統計取得
これは公式サイトの
Look up a short URL’s analytics
で確認可能
https://developers.google.com/url-shortener/v1/getting_started#url_analytics
curl ‘https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&projection=FULL’
というようにアクセスすることで
“shortUrlClicks”: “3227”,
というように、統計をみることができる
今回はGETでアクセス
ソース部分は
$url =’https://www.googleapis.com/urlshortener/v1/url?shortUrl=http://goo.gl/fbsS&projection=FULL’;
さらに apiKey を付けるので
$url =’https://www.googleapis.com/urlshortener/v1/url?shortUrl=’.$shortUrl.’&projection=FULL&key=’.$apikey;
というように、最後にベースURLに&をつけて
apiKey を追加
また、
http://goo.gl/fbsS
はサンプル部分なので、
これを変数にかえます
この部分は短縮URLなので
$shortUrlへ変更しています
あとは、この$url の中身を取得したいので
$res = file_get_contents($url);
とする
でも、返ってくる値はJSON形式なので
デコードするので
$res = json_decode(file_get_contents($url));
というように
json_decocde() をつかう
この状態で一時確認したいのなら
var_dump($res);
exit();
とすれば結果を見れる
確認できたら、この2行はコメントアウト
そして、クリックされた数は
$clicks = $res->analytics->allTime->shortUrlClicks;
で取得結果を
$clicks へ格納している
クリック数自体は
$res->analytics->allTime->shortUrlClicks;
にある
ここまでできたら表示する
いちおうエスケープしておくので
h() をつかっておく
echo h($clicks);
で表示できる
また、短縮URLに
+ をつけると統計ページにとぶことができる
これは a要素を使うことでできる
<a href=”<?php echo h($shortUrl) . ‘+’; ?>” target=”_blank”>詳細</a>
というようにすれば
短縮URL+
というようになる
http://dotinstall.com/lessons/basic_google_url_api/10408
ではいろいろと解析結果がでていたけど
ローカル開発環境の場合だと
クリックが反映されないようです
facebook アプリのときにもローカル開発環境では
iframe がなくなったりしたので
公開開発環境で行ったほうがよいのかもしれません
エスケープ処理とクリックイベント
エスケープ処理とクリックイベント
http://dotinstall.com/lessons/basic_google_url_api/10406
を参考に、短縮URL表示の続き
今回はエスケープ処理から
h()関数はPHP のネイティブ関数htmlspecialchars()の短縮表記
PHP h() などで検索するとわかりやすいかも
function h($s){
return htmlspecialchars($s, ENT_QUOTES, “UTF-8”);
}
ENT_QUOTES を指定することで、シングルクオートも エスケープ出来る
これについては
ENT_QUOTES 意味
で検索するとでてくる
今回は
http://phpspot.org/blog/archives/2008/01/phphtmlspecialc.html
を参考にしました
これができたら
echo $longUrl;
を
エスケープ処理したいので
echo h($longUrl);
というように変更する
h() の中に変数を入れている
次に、よくあるクリックすると全部選択状態になって
URLがコピペできるような状態にする
これは
input タグの中で
onclick=”this.select();” とつければOK
なので、input のところが
<input type=”text” value=”<?php echo h($shortUrl); ?>”>
から
<input type=”text” value=”<?php echo h($shortUrl); ?>” onclick=”this.select();”>
というように、最後にonclick がついている
this.select();
で全部選択という意味になる
短縮URL表示
http://dotinstall.com/lessons/basic_google_url_api/10405
を参考に、短縮URLの表示
curl_close();
ではオプションで
curl_close($curl);
というようにしないとエラーとなる
なお、最近Ubuntu デスクトップでもできるように
設定をしてみました
ソースの記述には
Eclipse + PDT プラグインで行っています
サーバー機能を追加したので
sudo apt-get install apache2
sudo apt-get install php5
sudo apt-get install php5-curl
でインストールしておきます
PHP がインストールされていないと
ソースが表示されるだけです
そして、続き
string(19) “http://goo.gl/B2vaF”
というように、返ってきた値が短縮URLになっている
これをHTMLへ表示する
[“longUrl”]=> string(33) “http://localhost/google/index.php” }
となっているのが
短縮前のURL
短縮URLは
$res の中の id に入っているので
これを変数へ格納する
$shortUrl = $res->id;
結果をHTMlで表示するには
echo を使う
$longUrl = ‘http://’ . $_SERVER[‘HTTP_HOST’] . $_SERVER[‘REQUEST_URI’];
というように変換前のURLをだしたいのなら
Original <?php echo $longUrl; ?>
というようにして
短縮URLを表示したいのなら
ShortURL <?php echo $shortUrl; ?>
というようにする
また、出力は入力欄の中にすることも可能
<input type=”text” value=”<?php echo $longUrl; ?>”>
というようにすれば
入力欄に
変換前URLを表示することができる
URL短縮実践
URL短縮実践
http://dotinstall.com/lessons/basic_google_url_api/10404
を参考にURL短縮の実践
なお Eclipse のPDTプラグインをいれて
ソースを書くと、入力コードを減らせるのでおすすめ
オプションは
json形式でわたす必要がある
これは
json_encode() を使って json へ変換する
そして、変数へ格納している
$params = json_encode(array(‘longUrl’=>$longUrl));
次に、curl をつかう
curl はソースからPHPをインストールしていると
パラメータにつけていないと使えないことがあるので注意
XAMPP とか CentOS なら yum で
インストールしていると、有効化されている
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
これで curl にURLをわたす
curl_setopt($curl, CURLOPT_HTTPHEADER, array(‘Content-Type: application/json’));
これは
Content-Type: application/json
をわたす
この部分は、リファレンスのコピペになる
curl_setopt($curl, CURLOPT_POST, 1);
これで
POST形式になる
curl_setopt($curl, CURLOPT_POSTFIELDS, $params);
これで、JSON形式データをPOSTでわたす
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
これで
返ってきたデータを文字列で受けとる
そして
これらのレスポンスを受けとるのが
curl_exec()
データはJSON形式なので
json_decode() を使い、それを変数に格納する
ソースにすると
$res = json_recode(curl_exec($curl));
これであとは curl を閉じるので
curl_close();
とする
結果をみたいのなら
var_dump($res);
とすれば結果をみることができる
Google 短縮URLデモ作成
Google 短縮URLデモ作成
http://dotinstall.com/lessons/basic_google_url_api/10403
を参考に作成
まず、API key は変数へ格納
そして、今回短縮するのは
今アクセスしているURLとするので
今アクセスしているURLを取得するなら
$_SERVER[‘HTTP_HOST’]
$_SERVER[‘REQUEST_URI’]
でとってきて
.
で連結する
そして、変数に格納
.で連結するのはPHPでよく行われる
java script で + で連結と近いかんじ
ソースにすると
$longUrl =’http://’. $_SERVER[‘HTTP_HOST’]. $_SERVER[‘REQUEST_URI’];
となる
短縮方法は
公式サイトをみたほうがわかりやすい
今回は
https://developers.google.com/url-shortener/v1/getting_started#shorten
の
Shorten a long URL
を使っている
要約すると
POST で
https://www.googleapis.com/urlshortener/v1/url
にアクセスし
{“longUrl”: “http://www.google.com/”}
というようにオプションを与える
アクセス形式は
Content-Type: application/json
となっているので
json でアクセス
そしてアクセスURLを変数へ格納する
$url = ‘https://www.googleapis.com/urlshortener/v1/url?key=’ . $apiKey;
Google URL短縮API API key 取得
公式サイトは
https://developers.google.com/url-shortener/
これは、名前の通り長いURLを短縮表示するためのもの
また、短縮されたURLのクリック数の統計を得ることも可能
利用したユーザーごとの履歴の取得も可能
これを使うには
HTML
CSS
PHP
が必要
これをつかうには API key が必要なので
https://code.google.com/apis/console/
へアクセスして
API key を取得する
この時の手順は
http://dotinstall.com/lessons/basic_google_url_api/10402
の動画を参照するとわかりやすい
ただ、私の場合
違う画面がでてきました
原因はおそらく以前Google Maps API を使ったり
その他いろいろと使っていたためだと思われます
とりあえず、
I agree to these terms へチェックをいれ
Accept
これで
Google apis のログイン画面になっているので
Services をクリックして
一覧を表示
Ctrl + f で
ページ内検索できるようにして
URL
と入力すればすぐにでてくるので
URL Shortener API
をONにします
またしても規約に同意するか聞かれるので
I agree to these terms
にチェックをいれ Accept
これで Overview をクリックすれば
有効化されているのを確認できる
API key の確認をするには
API Access をクリックして
Simple API Access のところに
API key:
というところに書かれているので
これを使います
developer tools で Ajax デバッグ
developer tools で Ajax デバッグ
参考サイトはドットインストールの
Ajaxのデバッグをしてみよう
http://dotinstall.com/lessons/basic_chrome_dev/7112
そして、実践するには
http://samples.dotinstall.com/basic_jquery/522/
を利用
これを使い、デバッグの練習
ajax はバックグラウンドで動くので動きが見えにくい
そんなときには
developer tools の network タブを使う
そうすると
HTML
jQuery が使われているのがわかる
そして、この状態で
Ajax ボタンをおすと
check.php が呼ばれるため
Networks タブのところに check.php が追加表示される
表示された check.php をクリックすると
さらに詳細をみることができ
Headers タブをみると
どのようなデータをわたしたのかをみることができる
今回の場合なら
Form Data のところになる
このとき返された結果が
Response タブのところに表示される
何を渡したのかというのが
Headers
返したものは
Response
というように調べることが可能
また
source タブで
jquery 圧縮版
つまり min.js のほうをつかっていると
見えにくいソースで表示される
これは、圧縮版がコードを少なくするため
改行などをしていないため
これをみやすくしたいのなら
画面左下にある
{}
というマークをクリックすると
コードが整理され、とても見やすくなる
ただし、見る専用になるため
この状態のときには編集ができないので注意