My Photo

« November 2012 | Main | January 2013 »

December 24, 2012

2013年1月開始アニメ視聴予定

ここここで情報を仕入れて、

ささみさん@がんばらない
たまこまーけっと
生徒会の一存 LV2
這いよれ!ニャル子さんMXテレ東で再放送)

の4つを見ようかと思っている。
あと、
ヤマノススメ
は検討中。
みなみけ ただいま
はとりあえず録画しておく。

「ささみさん」はまず新房監督だということ。そして同じ日日日が原作の「吉永さんちのガーゴイル」が面白かったし。あと大塚芳忠w
「たまこ」は安心の京アニなので。
この2つはたぶんよほどのことがない限り最後まで見そうな気がする。
「ニャル子」は本放送では見てなかったが面白そうだなと思っていたので。2期も決まったようだし。
「生徒会」は一期が結構面白かったような気がするので。はっきり内容を覚えていないが^^;
「ヤマ」はアウトドア系の話っぽいし、メインキャラのCV4人が全部結構好きな声優なので。
「生徒会」と「ヤマ」は面白くないようならすぐ切るかも。「ニャル子」は評判よかったし、大丈夫だろう。

一番期待しているのは「ささみさん@がんばらない」かな。

今期は「新世界より」を1ヶ月で切ってリアルタイムで見たのは2作品。来期は最大5作品でかなり増えるが、来年は大河ドラマを見ないので(綾瀬はるか嫌い)なんとかなる、か?w
「宇宙兄弟」は終わると思っていたが続くんだな^^;

December 23, 2012

JavaScriptメモ002:JSONP

関連する以前の記事:
RESTとは?クロスドメイン通信の禁止とは?

上記の記事を書いたときにJSONPというのは具体的にどういうものなのかわからなかったので調べてみた。

JavaScriptでURLを指定してデータを取得する場合にXMLHttpRequestを使うが、これではセキュリティ上の制約でクロスドメイン通信ができない。
※XMLHttpRequestという名前だがHTTP以外のプロトコルをサポートしている。XML以外のデータも取得できる。
そこでXMLHttpRequestを使わず、ページに

<script src="<WEBサービスのURL>" type="text/javascript"></script>
という感じのscriptタグをJavaScriptを使って動的に加えてデータを取得するという方法が考えられた。それがJSONPである。
上記のタグをみればわかるようにWEBサービスが(たぶん動的に作って)提供するスクリプトを読み込んで実行するので、JSONPに対応したWEBサービスでなければ使えない。
しかし、JSONPに対応していないWEBサービスでもYahoo! Pipesなどを間に噛ませることによってJSONPで利用することができる。

jQueryの getJSON() というメソッドを使えばJSONP対応のWEBサービスを簡単に利用することができる。

$.getJSON(url[, data][, success(data, textStatus, jqXHR)])

引数
url:URL。「url?callback=?」とすることで別ドメインにあるJSON形式のデータを取得できる。
data:サーバに送信するデータ
scccess:コールバック関数
 data:リクエストに対する
 textStatus:リクエストの現在の状態
 jqXHR:XMLHttpRequestオブジェクト

JSONPでYahoo! JAPANの電力使用状況APIを使ってみるサンプル。
まずjQueryを使わないバージョン。
JSONPを利用する場合はパラメータとしてcallbackが必須。callbackがないとJSONPではなくJSONでデータを返すだけのリクエストになる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSONPでYahoo! JAPAN の電力使用状況を取得する</title>
<script type="text/javascript">
<!--
function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var ul = document.getElementById("disp");
  for (key in root) {
    var li = document.createElement("li");
    var str = document.createTextNode(key + ":" + root[key]);
    li.appendChild(str);
    ul.appendChild(li);
  }
}

window.onload = function() {
  var btn = document.getElementById("btn1");
  btn.onclick = function() {       
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?";
    var params = "appid=<アプリケーションID>&output=json&callback=latestPowerUsageCallback";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url + params;
    document.body.appendChild(script);
  };
};
// -->
</script>
</head>
<body>
<input id="btn1" type="button" value="JSONPデータ取得" />
<div>
<ul id="disp"></ul>
</div>
</body>
</html>

次にjQuery版。スクリプトの部分以外は上のサンプルと同じなのでスクリプトの部分だけ。
注意としてURLの後ろに必ず"?callback=?"をつけなければならない。サンプルコートのparamsの方に移動してはいけない。"callback"の部分はWEBサービスのAPIによって異なる。"=?"の部分は必ずこの通りに書く。実際のコードに合わせて"callback=<実際のコールバック関数名>"みたいに書いたりしてはいけない。

function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var tmp = "";
  var tmp2 = "";
  $.each(root, function(key, value) {
    if ($.isPlainObject(value)) {
      $.each(value, function(key2, value2) {
        tmp += "<li>" + key + ":" + key2 + ":" + value2 + "</li>";
      });
    } else {
      tmp += "<li>" + key + ":" + value + "</li>";
    }
  });
  $("#disp").html(tmp);
}

$(function() {
  $("#btn1").click(function() {
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?callback=?";
    var params = {
      appid:	"<アプリケーションID>",
      output:	"json"
    }
    $.getJSON(url, params, latestPowerUsageCallback);
  });
});

参考文献:jQueryによるWebサービス活用ワザ実践サンプル集 Chapter1 1.1 Webサービスとは

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践
徳丸 浩

ソフトバンククリエイティブ 2011-03-03
売り上げランキング : 4070

Amazonで詳しく見る
by G-Tools

参考ページ:
[Javascript] フォートラベルAPI(REST) JSONP形式
jQuery . getJSON( url [, data] [, success( data, textStatus, jqXHR )] ) - jQuery API 日本語リファレンス:
jQuery.isArray(obj) - jQuery API 1.4.4 日本語リファレンス - StackTrace: JSON - JavaScriptプログラミング解説:
jQuery.getJSON()で別ドメインのJSONPなデータを読み込む時の注意 - kanonjiの日記:

December 22, 2012

新ノートPC到着

先週注文したノートPCが今日届いた。
買ったのはエプソンのNA601E。

これまでPCを用途によって使い分けていた。
デスクトップPCは
・(今はやってないが)FF11
・ネットを見る。
・家計簿の記帳
ノートPCは
・プログラミング
・図書館で使う
となっていた。
しかし、FF11をやらなくなったのでビデオカードを挿せるデスクトップPCは必要ない。それにノートPCは画面が15.6インチ、重さが2.4kgあって図書館に持って行くには重いと思っていた。
そこで新しいPCを買う機会に、これらを一本化しようと思った。

新PCは
・重量2kg以内。
・Windows7。8はやだ。
・SSDでサクサク動く。容量はできれば256。
というのを考えて機種を探した。自分が金持ちなら迷うことなくLet's noteなんだが^^;
色々検討して、エプソンのNA601Eにした。14型ノングレア液晶で重量が1.76kg。値段と重さのバランスを考えてこの機種にした。今時ノングレア液晶ってのもプラスポイントだ。
値段を抑えるためにHDDモデルを注文して自分でSSDに換装することにした。SSDはSAMSUNGの256GBのTLCのSSDを購入済み。
まあ、年末年始の休みの間にゆるゆるとSSD換装&環境設定をやっていこうと思う。

December 08, 2012

RESTとは?クロスドメイン通信の禁止とは?

関連する以前の記事:
RESTとは?クロスドメイン通信の禁止とは?

上記の記事を書いたときにJSONPというのは具体的にどういうものなのかわからなかったので調べてみた。

JavaScriptでURLを指定してデータを取得する場合にXMLHttpRequestを使うが、これではセキュリティ上の制約でクロスドメイン通信ができない。
※XMLHttpRequestという名前だがHTTP以外のプロトコルをサポートしている。XML以外のデータも取得できる。
そこでXMLHttpRequestを使わず、ページに

<script src="<WEBサービスのURL>" type="text/javascript"></script>
という感じのscriptタグをJavaScriptを使って動的に加えてデータを取得するという方法が考えられた。それがJSONPである。
上記のタグをみればわかるようにWEBサービスが(たぶん動的に作って)提供するスクリプトを読み込んで実行するので、JSONPに対応したWEBサービスでなければ使えない。
しかし、JSONPに対応していないWEBサービスでもYahoo! Pipesなどを間に噛ませることによってJSONPで利用することができる。

jQueryの getJSON() というメソッドを使えばJSONP対応のWEBサービスを簡単に利用することができる。

$.getJSON(url[, data][, success(data, textStatus, jqXHR)])

引数
url:URL。「url?callback=?」とすることで別ドメインにあるJSON形式のデータを取得できる。
data:サーバに送信するデータ
scccess:コールバック関数
 data:リクエストに対する
 textStatus:リクエストの現在の状態
 jqXHR:XMLHttpRequestオブジェクト

JSONPでYahoo! JAPANの電力使用状況APIを使ってみるサンプル。
まずjQueryを使わないバージョン。
JSONPを利用する場合はパラメータとしてcallbackが必須。callbackがないとJSONPではなくJSONでデータを返すだけのリクエストになる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSONPでYahoo! JAPAN の電力使用状況を取得する</title>
<script type="text/javascript">
<!--
function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var ul = document.getElementById("disp");
  for (key in root) {
    var li = document.createElement("li");
    var str = document.createTextNode(key + ":" + root[key]);
    li.appendChild(str);
    ul.appendChild(li);
  }
}

window.onload = function() {
  var btn = document.getElementById("btn1");
  btn.onclick = function() {       
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?";
    var params = "appid=dj0zaiZpPU45bTA4ZmhTelBIVSZkPVlXazlNRXd5U1dGTU5IVW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9OGE-&output=json&callback=latestPowerUsageCallback";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url + params;
    document.body.appendChild(script);
  };
};
// -->
</script>
</head>
<body>
<input id="btn1" type="button" value="JSONPデータ取得" />
<div>
<ul id="disp"></ul>
</div>
</body>
</html>

次にjQuery版。スクリプトの部分以外は上のサンプルと同じなのでスクリプトの部分だけ。
注意としてURLの後ろに必ず"?callback=?"をつけなければならない。サンプルコートのparamsの方に移動してはいけない。"callback"の部分はWEBサービスのAPIによって異なる。"=?"の部分は必ずこの通りに書く。実際のコードに合わせて"callback=<実際のコールバック関数名>"みたいに書いたりしてはいけない。

function latestPowerUsageCallback(data) {
  var root = data.ElectricPowerUsage;
  var tmp = "";
  var tmp2 = "";
  $.each(root, function(key, value) {
    if ($.isPlainObject(value)) {
      $.each(value, function(key2, value2) {
        tmp += "<li>" + key + ":" + key2 + ":" + value2 + "</li>";
      });
    } else {
      tmp += "<li>" + key + ":" + value + "</li>";
    }
  });
  $("#disp").html(tmp);
}

$(function() {
  $("#btn1").click(function() {
    var url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?callback=?";
    var params = {
      appid:	"dj0zaiZpPU45bTA4ZmhTelBIVSZkPVlXazlNRXd5U1dGTU5IVW1jR285TUEtLSZzPWNvbnN1bWVyc2VjcmV0Jng9OGE-",
      output:	"json"
    }
    $.getJSON(url, params, latestPowerUsageCallback);
  });
});

参考文献:jQueryによるWebサービス活用ワザ実践サンプル集 Chapter1 1.1 Webサービスとは

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践
徳丸 浩

ソフトバンククリエイティブ 2011-03-03
売り上げランキング : 4070

Amazonで詳しく見る
by G-Tools

参考ページ:
[Javascript] フォートラベルAPI(REST) JSONP形式
jQuery . getJSON( url [, data] [, success( data, textStatus, jqXHR )] ) - jQuery API 日本語リファレンス:
jQuery.isArray(obj) - jQuery API 1.4.4 日本語リファレンス - StackTrace: JSON - JavaScriptプログラミング解説:
jQuery.getJSON()で別ドメインのJSONPなデータを読み込む時の注意 - kanonjiの日記:

« November 2012 | Main | January 2013 »

March 2017
Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

日本blog村

  • にほんブログ村 IT技術ブログへ
  • にほんブログ村 アニメブログへ
  • にほんブログ村 サッカーブログ アルビレックス新潟へ

好きな音楽家

メモ

XI-Prof