月別アーカイブ: 8月 2012 - ページ 3

bit.ly API を試してみる

短縮URLといったら

bitly
https://bitly.com/

Twitterが突発的に流行りだした時に一緒に有名になった短縮URLサービス。bit.ly ちょっとAPI調べて使ってみます。

bit.lyで短縮URL出すにはAPIキーが必要

これAPIリクエストの制限とかあるのかな。

とりあえずアカウント作る

create account のところをクリック

アカウント作ったらトップページへ

右上メニューからSETTINGS

APIキーを取得

当て込んでブラウザのアドレスバーにコピペ

http://api.bit.ly/shorten?version=2.0.1&login=ログインアカウント名&apiKey=APIキー&longUrl=http://www.yahoo.co.jp/

JSONでなんかデータでてくる

<span class="synIdentifier">{</span>
errorCode: 0,
errorMessage: <span class="synConstant">""</span>,
results: <span class="synIdentifier">{</span>
    http:<span class="synComment">//www.yahoo.co.jp/: {</span>
        userHash: <span class="synConstant">"Qflg0g"</span>,
        shortKeywordUrl: <span class="synConstant">""</span>,
        hash: <span class="synConstant">"INPsu"</span>,
        shortCNAMEUrl: <span class="synConstant">"http://bit.ly/Qflg0g"</span>,
        shortUrl: <span class="synConstant">"http://bit.ly/Qflg0g"</span>
    <span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>,
statusCode: <span class="synConstant">"OK"</span>
<span class="synIdentifier">}</span>
Code language: JavaScript (javascript)

ここまでJavascriptコードにする

<span class="synIdentifier">var</span> xh = <span class="synStatement">new</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/XMLHttpRequest">XMLHttpRequest</a>();
xh.open(<span class="synConstant">"GET"</span>, <span class="synConstant">"http://<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>.bit.ly/shorten?version=2.0.1&login=ログインアカウント名&apiKey=<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>キー&longUrl=http://www.yahoo.co.jp/"</span>, <span class="synConstant">false</span>);
xh.send();
<span class="synIdentifier">var</span> obj = JSON.parse(xh.responseText);
<span class="synStatement">for</span> (<span class="synIdentifier">var</span> i <span class="synStatement">in</span> obj.results)<span class="synIdentifier">{</span>
    <span class="synIdentifier">var</span> url = obj.results<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>.shortUrl;
<span class="synIdentifier">}</span>
<span class="synStatement">alert</span>(url);
Code language: JavaScript (javascript)

結果

http://bit.ly/Qflg0g

bit.ly API を試してみる

短縮URLといったら

bitly
https://bitly.com/

Twitterが突発的に流行りだした時に一緒に有名になった短縮URLサービス。bit.ly ちょっとAPI調べて使ってみます。

bit.lyで短縮URL出すにはAPIキーが必要

これAPIリクエストの制限とかあるのかな。

とりあえずアカウント作る

create account のところをクリック

アカウント作ったらトップページへ

右上メニューからSETTINGS

APIキーを取得

当て込んでブラウザのアドレスバーにコピペ

http://api.bit.ly/shorten?version=2.0.1&login=ログインアカウント名&apiKey=APIキー&longUrl=http://www.yahoo.co.jp/

JSONでなんかデータでてくる

<span class="synIdentifier">{</span>
errorCode: 0,
errorMessage: <span class="synConstant">""</span>,
results: <span class="synIdentifier">{</span>
    http:<span class="synComment">//www.yahoo.co.jp/: {</span>
        userHash: <span class="synConstant">"Qflg0g"</span>,
        shortKeywordUrl: <span class="synConstant">""</span>,
        hash: <span class="synConstant">"INPsu"</span>,
        shortCNAMEUrl: <span class="synConstant">"http://bit.ly/Qflg0g"</span>,
        shortUrl: <span class="synConstant">"http://bit.ly/Qflg0g"</span>
    <span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>,
statusCode: <span class="synConstant">"OK"</span>
<span class="synIdentifier">}</span>
Code language: JavaScript (javascript)

ここまでJavascriptコードにする

<span class="synIdentifier">var</span> xh = <span class="synStatement">new</span> <a class="keyword" href="http://d.hatena.ne.jp/keyword/XMLHttpRequest">XMLHttpRequest</a>();
xh.open(<span class="synConstant">"GET"</span>, <span class="synConstant">"http://<a class="keyword" href="http://d.hatena.ne.jp/keyword/api">api</a>.bit.ly/shorten?version=2.0.1&login=ログインアカウント名&apiKey=<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>キー&longUrl=http://www.yahoo.co.jp/"</span>, <span class="synConstant">false</span>);
xh.send();
<span class="synIdentifier">var</span> obj = JSON.parse(xh.responseText);
<span class="synStatement">for</span> (<span class="synIdentifier">var</span> i <span class="synStatement">in</span> obj.results)<span class="synIdentifier">{</span>
    <span class="synIdentifier">var</span> url = obj.results<span class="synIdentifier">[</span>i<span class="synIdentifier">]</span>.shortUrl;
<span class="synIdentifier">}</span>
<span class="synStatement">alert</span>(url);
Code language: JavaScript (javascript)

結果

http://bit.ly/Qflg0g

Javascriptでオブジェクトのディープコピー

参照型

Javascriptでオブジェクトをコピーということは基本的にできないみたい。Javascriptにおけるオブジェクトというのは、DOM要素と配列({} と [])などはオブジェクトとして扱われ、 1 とか “1” は 数値と文字列として扱われる。

<span class="synIdentifier">var</span> a = <span class="synIdentifier">[</span>1, 2, 3 <span class="synIdentifier">]</span>;
<span class="synIdentifier">var</span> b = a;
b<span class="synIdentifier">[</span>0<span class="synIdentifier">]</span> = 100;
<span class="synStatement">alert</span>(a);
Code language: JavaScript (javascript)

こうすると、bの変数の配列を一番目を変更したのにも関わらずaの配列の値が変わってる。これは変数aと変数bに格納されているデータを「参照」しているアドレスが同じ場所になってしまっているからなんだそうです。これを参照渡しと言って、Javascriptではどうあがいてもオブジェクトは参照渡しになってしまう。

ただ、DOM要素や関数が配列内に含まれていなければある方法でオブジェクトをディープコピーできる。

JSON

<span class="synIdentifier">var</span> a = <span class="synIdentifier">[</span>1, 2, 3 <span class="synIdentifier">]</span>;
<span class="synIdentifier">var</span> b = JSON.parse(JSON.stringify(a));
b<span class="synIdentifier">[</span>0<span class="synIdentifier">]</span> = 100;
<span class="synStatement">alert</span>(a);
Code language: JavaScript (javascript)