カテゴリ: Javascript - ページ 3

bit.ly API を試してみる

投稿者 : ： 2013年1月2日 コメントはありません。

短縮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でオブジェクトのディープコピー

投稿者 : ： 2013年1月2日 2 コメント
参照型
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コーディング

投稿者 : ： 2013年1月2日 コメントはありません。

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で画面に表示ということができるので、準備時間があり、ローディング時において画面が瞬間的に点滅したり表示が崩れている様子を隠すこともできます。