nocblog

  • bit.ly API を試してみる

    短縮URLといったら

    bitly
    https://bitly.com/

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

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

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

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

    create account のところをクリック
    20120802033214

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

    20120802033248

    右上メニューからSETTINGS

    20120802033601

    APIキーを取得

    20120802033601

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

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

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

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

    ここまでJavascriptコードにする

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

    結果

    “http://bit.ly/Qflg0g”

    API制限について詳しくはこちら

    bit.lyのAPI制限は開発者にやさしい？
    http://ken.quoit.jp/2011/02/10/bit-ly%E3%81%AEapi%E5%88%B6%E9%99%90%E3%81%AF%E9%96%8B%E7%99%BA%E8%80%85%E3%81%AB%E3%82%84%E3%81%95%E3%81%97%E3%81%84%EF%BC%9F/

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

    参照型

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

    var a = [1, 2, 3 ];
var b = a;
b[0] = 100;
alert(a);Code language: JavaScript (javascript)

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

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

    JSON

    var a = [1, 2, 3 ];
var b = JSON.parse(JSON.stringify(a));
b[0] = 100;
alert(a);Code language: JavaScript (javascript)

  • idとclassを使用しないjQueryコーディング

    idとclass

    通常HTMLとJavascriptの関係といえば、予めHTML要素としてidまたはclass属性を指定しておき、その属性に対してjavascript側からidやclassを指定して要素を特定しますが、jQueryを使うことによってidやclassを一切かかなくてもjavascriptで操作することが可能になるみたいです。

    jQueryで要素を作成

    よくある方法として、

    var hoge = $(document.body).append('<div>test</div>');Code language: JavaScript (javascript)

    のようにして要素を追加をするやり方がありますが、これだとhogeには要素の追加先であるdocument.bodyの要素が参照されます。

    しかしこれだと追加した要素を操作することができないためidかclass属性を使用するか $(“document.body:last”)というスマートじゃない方法を使用するしかないです。

    これを解決するには、こうします。

    var hoge = $('<div>test</div>');
$(document.body).append(hoge);Code language: JavaScript (javascript)

    やってることは上と一緒ですが、このやり方だとhogeにはjavascriptによって操作したい要素がそのまま参照されるので、このhogeを自由に書き換えることができます。しかも、javascriptで準備してから、appendで画面に表示ということができるので、準備時間があり、ローディング時において画面が瞬間的に点滅したり表示が崩れている様子を隠すこともできます。