Amazon

ラベル JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル JavaScript の投稿を表示しています。 すべての投稿を表示

2012年6月16日土曜日

Javascriptのグラフモジュール

Javascriptのグラフモジュールを幾つか

○グラフ
- Raphaeljs
動きのあるグラフを作れるモジュール。かなり素敵なグラフが作れるが、もっぱら上級者向け

- flot (jQuery)
jQuery.jsを使ってグラフが作れる。
使い方はこちらを参照

Prototype.jsを使ってグラフが作れる。

- JSCharts (JavaScriptオンリーだけど有料)
他のモジュールなしのJavaScriptでグラフが作れる。が有料


2012年5月2日水曜日

JavaScriptで非同期処理を逐次実行

Titaniumで非同期処理を逐次実行するにはこちらとかこちらを参考にしながらJSDeferredというlibraryを使うこと
JSDeferredの解説はこちら 

他にも、非同期処理を逐次実行にする方法はあるようで、
ここだったり、ここだったり、ここだったり、と。

2011年11月26日土曜日

PythonでJavaScriptのencodeURIと同じことをやるには?

JavaScriptで言うところのencodeURIと同じことをPythonでやるにはurllib.quote()メソッドを使う。

第一引数に変換したい文字列を、第二引数に変換したい文字コードを設定すること。
# -*- coding: utf-8; -*-

import urllib

print urllib.quote('いろはにほへと')
print urllib.quote(u'いろはにほへと'.encode('euc-jp'))
print urllib.quote(u'いろはにほへと'.encode('shift_jis'))
print urllib.quote(u'いろはにほへと'.encode('iso-2022-jp'))
print urllib.quote(u'いろはにほへと')
print urllib.unquote('%E3%81%84%E3%82%8D%E3%81%AF%E3%81%AB%E3%81%BB%E3%81%B8%E3%81%A8')


但し上記の方法だと、GETリクエストのURIは作りにくいので、urllib.urlencode()というメソッドがある。これはクエリにしたいものをリスト形式で記述して、urlencode()の引数に与えてあげる。(辞書形式の場合は順番は保持されない)


# -*- coding: utf-8; -*-

import urllib

urlprefix = 'http://www.google.co.jp/search?'
keyword = u'Python URIエンコード'
lang = 'ja'
encoding = 'utf-8'
query = [
    ('q', keyword.encode(encoding)),
    ('hl', lang),
    ('lr', 'lang_' + lang),
    ('ie', encoding),
    ('oe', encoding),
]

print urlprefix + urllib.urlencode(query)
 
 
参考元はこちら 
 

2011年6月16日木曜日

IEでmixiのsimplepostを使って日記を投稿するとエラー


mixiアプリ作っているときに
simplepostで日記にデータをポストする際、
ブラウザがIE7, 8の場合"Internet Explorer ではこのページは表示できません"というエラーが出てしまうことがある。(いつもではない)

そこでJavaScriptのencodeURIを疑ってみるも、encodeURIComponentを使っても特定の語をエンコードするかしないかの違いでしかないので原因というわけではなさそうだ。

これ関連で調べてたらGETで投げられるURLの長さに制限があることが判明。
しかもブラウザごとに違うというからIEだけで問題が生じるのも納得。

[IE] URL に使用可能な文字数は最大 2,083 文字

しかも漢字1文字は3byte, encodeURIでエンコードするとさらに3倍の9byte
GETで投げられる日本語は250文字前後ということでしょうか。。。


2011年3月29日火曜日

IEでJavaScriptの構文エラーが出たら連想配列の定義を疑ってみる

JavaScriptで連想配列を定義する際に、複数行にわたってコードを記述する時がある。
たとえば
var dictonary={
     key: key1,
     value: value1
}

このとき注意しなくてはならないのが、最後の要素を記述する際に","をつけてはいけないということだ。
少なくともIEでは構文エラーとなって警告が出てしまう。
これはFirefoxやChromeではエラーにならずIEで実行した時だけ警告が出るのでかえってデバッグが難しい。

それとブラウザはコンテンツをある程度キャッシュしてしまうため、直したコードのアプリケーションやサービスそのものをロードしても、読み込むJavaScriptまでロードしてくれるとは限らない。これまた厄介。URLをもう一度叩いて、さらにF5でリロードする。くらいかなぁ。。。

2011年3月20日日曜日

JavaScriptのtarget.nameはIEでは無効

JavaScriptでクリックされたターゲットオブジェクトを取得するのにev.target.nameをFirefoxでは使うが、これ、IEではダメらしい。代わりにev.srcElement.nameで取得できる。
そこでブラウザがIEかどうかを判定してスイッチするのが手っ取り早い方法

ev.target.name
// ブラウザがIEならtrueを返す
function IsIE() { return (navigator.userAgent.indexOf("MSIE") != -1); }

function click_button(ev)
var tagname = (IsIE()) ? ev.srcElement.name: ev.target.name;
if (typeof(tagname) == 'string') {
switch (tagname) {

こちらを参考にさせていただきました。


}

2011年3月18日金曜日

JavaScriptのencodeURIでの改行

encodeURIでエンコードする際、元となる文字列に改行を入れたい場合は\r\nを入れる。

たとえば

改行を入れた
文字列は
これです。

という場合

encodeURI("改行を入れた\r\n文字列は\r\nこれです。")
とする。

encodeURIComponentでも同じ。

2011年3月10日木曜日

JavaScriptでJSON形式を受け取るには?3

ローカルにjson2.jsを落としてくる。

JSオブジェクトJSON文字列にしたい場合は、JSON.stringify(value, replacer, space)を利用できます。
   
valueはJSオブジェクト
replacerは省略可能で、function(key, value)と言うシグネチャ関数オブジェクトを渡します。JS文字列の変換ルーチンを独自に提供できます。
spaceは、結果の文字列を人間が読みやすくするための、インデントの数を指定します。

その逆に、JSON文字列JSオブジェクトに復元したい場合は、JSON.parse(text, reviver)を使用します。

2011年3月6日日曜日

OpenSocialにおける複数のfriend情報取得方法

OpenSocialアプリケーションで、すでにIDがわかっている複数ユーザーのニックネームやサムネイルURL、プロフィールURLを取得する際にハマッたのでメモしておきます。

もともとやろうとしていたコードが以下。friendIDListは詳細情報を取得したいIDの配列。
function multiFriendRequest(friendIDList){
    for (var i = 0; i < friendIDList.length; i++) {
        var friendID = friendIDList[i];
        var params = {};
        params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.PROFILE_URL];
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest(friendID), "request");
        req.send(function(data){
                var viewer = data.get("request").getData();
                var name = viewer.getDisplayName();
                var url = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
                var purl = viewer.getField(opensocial.Person.Field.PROFILE_URL);
                var html = "<a href=\"" + purl + "\" >" + name + "<br><img src=\"" + url + "\" \/><\/a>";
                document.getElementById("friend" + i).innerHTML = html;
            }
        });  
    }    
}
For文の中にrequestを入れて、複数回リクエストをしようとしたのだが、全てのリクエスト結果がiが最後の値で返ってきた。
たとえば、friendIDList=["friend1","friend2"]
だった場合
friend1
friend2
ではなく
friend2
friend2
となるのだ。

む。。。困ったぞ。
いろいろOpenSocial系のドキュメントを探していたら、リクエストの種類を複数にして1回の問い合わせにする方法が上手くいきそうな感触をつかむ。

そこで直したコードが以下。

funcation multiFriendRequest(friendIDList){
    var params = {};
    params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.PROFILE_URL];
    var req = opensocial.newDataRequest();
    
    for (var i = 0; i < friendIDList.length; i++) {
         req.add(req.newFetchPersonRequest(friendIDList[i]), "request" + i);
    }
    
    req.send(function(data){
        for (var j = 0; j < friendIDList.length; j++) {
            var viewer = data.get("request" + j).getData();
            var name = viewer.getDisplayName();
            var url = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
            var purl = viewer.getField(opensocial.Person.Field.PROFILE_URL);
            var html = "<a href=\"" + purl + "\" >" + name + "<br><img src=\"" + url + "\" \/><\/a>";
            document.getElementById("friend" + j).innerHTML = html;
        }
    });
}

という感じに
req.addで複数人の友達情報のリクエストを格納して一度にリクエストを投げる。とうまくいく。

確かにコード実行速度とAPIリクエストのタイミングは随分差があるのと、そんなに無駄にリクエストするのを防ぐために一回にまとめる方法はスマートですね。

【参考】 
Opensocial入門を読んで見た(第五章)

2011年3月5日土曜日

JavaScriptでJSON形式を受け取るには?2

前回に引き続きJavaScriptでJSON形式を送受信するには。


prototype.jsを読み込んでいれば、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" charset="UTF-8"></script>

JSON形式に出力する場合はstr.toJSON()かObject.toJSON(var)
JSON形式のデータを解釈するにはjsonStr.evalJSON()かevalJSON(jsonStr)

が使える。

Postのテスト用JavaScript

以下をHTMLのheadの下に追加。
<script type="text/javascript">
<!--

function submitForm(){
    var form = document.createElement('form');
    document.body.appendChild(form);
    var input = document.createElement('input');
    input.setAttribute( 'type' , 'hidden');
    input.setAttribute( 'name' , 'name' );
    input.setAttribute( 'value' , 'Nanashi' );
    form.appendChild( input ); 
var input = document.createElement('input');
 var array = ["f0001","f0002","f0003"];
    input.setAttribute( 'type' , 'hidden');
    input.setAttribute( 'name' , 'array' );
    input.setAttribute( 'value' , array ); 
var input = document.createElement('input');
 var listArray = [{key11:"value1",key12:"value2"},{key21:"value21",key22:"value22"}];
    input.setAttribute( 'type' , 'hidden');
    input.setAttribute( 'name' , 'listArray' );
    input.setAttribute( 'value' , listArray );
    form.appendChild( input );
 var input = document.createElement('input'); 
 //配列の配列
var arrayArray = [["p1","p2","p3"],["p3","p5","p1"]];
    input.setAttribute( 'type' , 'hidden');
    input.setAttribute( 'name' , 'arrayArray' );
    input.setAttribute( 'value' , arrayArray );
    form.appendChild( input ); 
// 以下のPOST先は適宜変更
form.setAttribute( 'action' , 'http://localhost:8080/request/post');
    form.setAttribute( 'method' , 'post' );
    form.submit();
}

</script> 
        <body>
      
   
<input type="button" value="doPost" onClick="JavaScript:submitForm()" />
<a href=“JavaScript:submitForm()”>クリックしたら値POST送信</a>


        </body>
      
</html>

2011年2月27日日曜日

JavaScriptの非同期通信でハマる。

OpenSocialアプリ開発においてJavaScriptでの非同期通信をよく理解していなかったのでハマった。

例えば

initializeData(){
initializeMyInfo()
initializeFrinedInfo()
setInfo()
}
という初期化メソッドがあるとする。
ここでinitializeMyInfo()は自分の情報を, initializeFriendInfo()は自分の友達の情報を
req = opensocial.newDataRequest()
で取得してくるとする。
そしてsetInfo()では取得したそれぞれ自分の情報、友達の情報を加工するとする。


ここで問題が発生する。
initializeData()はinitalizeMyInfo()->initializeFriendInfo()->setInfo()というシーケンシャルに呼び出されるので通常はinitializeMyInfo()、initializeFriendInfo()で確実にデータが取得できてsetInfo()が実行されるはずだ。
しかし、req = opensocial.newDataRequest()でデータを取得するのは非同期通信なので、setInfo()が呼び出されるタイミングで、initializeMyInfo()およびinitializeFriendInfo()がデータを取得できているかは保証がない。

非同期通信が裏目に出る結果となる。

仕方ないので、それぞれのrequestのコールバック関数内でシーケンシャルにメソッドを呼ぶことで回避する。JavaScript1.7からyeild()というメソッドで非同期通信を同期通信にすることができるようだけど、今回は時間がないのでとりあえずこれで。

initializeMyInfo(){
req = opensocial.newDataRequest()
req.send(function(response){
...
initializeFriendInfo()
});

initializeFriendInfo(){

req = opensocial.newDataRequest()
req.send(function(response){
...
setInfo()

});

あんまりキレイじゃないなぁ。。。

2011年2月18日金曜日

HTMLでレーダーチャートを表示する

○JavaScriptでレーダーチャートを描くなら
HTML5.jp
Apache License, Version 2.0

○手軽にWeb API
Google Graphic API
HTMLのimgタグのsrcにhttp://chart.apis.google.com/chart? であとは各パラメーターを渡すだけ。
但し、一日に250,000回を超えるAPIコールになる場合はchart-api-notifications@google.comまでご連絡を。とのこと。


<img src="http://chart.apis.google.com/chart?cht=r&amp;chd=t:80,30,99,60,50,20&amp;chs=300x200 &amp;chls=3,0,0&amp;chxt=x,y&amp;chxl=0:|Str|Vit|Agi|Dex|Int|Luk|1:|||||&amp;chm=B,FF990080,0,0,5" />

2011年2月8日火曜日

iframe内からiframe外のオブジェクトを操作する方法

iframeで呼び出したページからiframeの親オブジェクトを操作する方法は"parent."を使うらしい。

parent.document.bodyとかparent.document.getElementById["hoge"]とかで。

JavaScriptの連想配列(ハッシュ)でハマる1

JavaScriptの連想配列。
要素数を取得するためには.lengthでは駄目。連想配列のため添え字が無効になるせいのようです
そこで、通常は連想配列に対して
for (var in hash){
       elementNum++;
}
で要素数をカウントするらしい。

【問題】
以下のコードを実行すると幾つが表示されるでしょう?

var hash = new Array();
hash["key1"] = "value1";
hash["key2"] = "value2";
var elementNum=0;
for(i in hash){
      elementNum++;
}
window.alert(elementNum);

【正解】
elementNumは2ではなく40

ここでハマった。連想配列の宣言の仕方を間違えるととんでもないことになる。
今回hashをnew Array()で宣言したため、本来配列が持っているfunction名の"clone"とか"sort"をキーに持ってしまう。なので、keyの数は40という数字になるようだ。

なるほど。だからArray.cloneとかArray.sortなど".functions"で呼び出せるんだね。結局オブジェクトは全て連想配列だと考えればいいのか。

で、正しく連想配列を宣言するときはnew Array()ではなくnew Object()のようです。

2011年2月1日火曜日

JavaScript関連の有用リンク

JavaScript関連の有用リンク

○ 基礎
○チュートリアル
○リファレンス
Core JavaScript 1.5 Guide

○DOM関連 
DOMから始めるJavaScriptモダン・スクリプティング

○jQuery関連
jQuery逆引き辞典

○CoffeeScript
JavaScriptに変換してくれる簡易スクリプトCoffeeScriptのチュートリアル

Ajaxクロスドメイン問題

Think It JSONなんて怖くない! 第3回 Web APIって何?より

"Ajaxで使用するXMLHttpRequestにはセキュリティ上、そのHTMLファイルが置かれているドメインのサーバとしか通信できないという制約があるため、Ajaxアプリケーションから直接これらのWeb APIを利用することはできません."

とのことです。
ちょっと対策考えなきゃ。

2011年1月30日日曜日

JavaScriptのメモ

1. データ型(基本型と参照型)
データ型は基本型と参照型に大別され、それぞれの振る舞いは異なるので注意。
基本型 数値型(number), 文字列型(string), 真偽型(boolean), 特殊型(null/undefined)
参照型 配列(array), オブジェクト(object), 関数(function)

基本型は値を直接参照するのに対して、参照型は参照先(ポインタ)を参照する。
よって、以下のような結果の違いが出る。

- 基本型
var x = 10;
var y = x;
x = 20;
window.alert(y); // 10(コピーされた値を表示)

- 参照型
var x = [0, 1, 2]; // 配列
var y = x;
x[0] = 10; // 配列の先頭の要素を書き換え
window.alert(y); // 10,1,2(参照元の値を表示)




2. 変数のスコープ
クラスやメソッドにてvarをつけて宣言した変数の有効範囲(スコープ)は、そのクラスまたはメソッド内。
逆にvarのついてない変数はスコープ外の変数だと判断される。

- 変数の有効範囲を、その変数のスコープという
- 暗黙的に宣言された変数は、必ずグローバル変数になる
- 関数の内部で暗黙的に宣言された場合でも、グローバル変数になる
- var文で宣言した変数は、ローカル変数になる

Amazon3