スキップしてメイン コンテンツに移動

[javascript][Google App Engine]HTML5のsessionStorageで高速化

はじめて書いたjavascriptを先輩に見せたところ、取得ボタンを連打されてGoogle App Engineに対するリクエストが大変なことになりましたw

ということで、今回はその連打対策を講じてみました。

■変更点
・「取得」ボタンをクリックしたときにGetData()を呼び出すように
・sessionStorageにデータが存在するかチェックしてあれば表示
・なければAjaxでリクエストして結果をsessionStorageに保存したうえで表示

WebStorageのうちセッション単位でデータを保持するsessionStorageと永続的に保持するlocalStorageがあるが、毎日取得するデータが変わるのでsessionStorageを採用した。

同一セッションの同一パラメータ(証券コードと営業日数)の組み合わせの場合にはsessionStorageから取得している。

AjaxHistoricalPrices
http://test-004.appspot.com/html/index.html

「処理時間」には、「取得」ボタンが押されてから表示までの時間をミリ秒単位で表示している。

実際に同一パラメータで「取得」ボタンを2回以上クリックしてもらうと、かなり高速化できていることがわかると思う。

また、画面の「データ取得元」にsessionStorageから取っているか、HTTPで取っているかを表示している。

var startTime = new Date();
var endTime = new Date();
var GetData = function(){
    startTime = new Date();
    var key = document.form.ticker.value + ':' + document.form.days.value;
    var out = sessionStorage.getItem( key );
    if (!out){
        out = Request(key);
        document.getElementById("source").innerHTML = 'HTTP.';
    }else{
        document.getElementById("source").innerHTML = 'sessionStorage.';
        echo(out);
    }
}
var Request = function( key ) {
    var url = 'http://test-004.appspot.com/dlhistorical?ticker='+document.form.ticker.value+'&days='+document.form.days.value+'&type=json';
    var XHR;
    XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function(){
        if( XHR.readyState === 4 && XHR.status == 200 ) 
            var data = JSON.parse(XHR.responseText);
            var out = '';
            for (i in data.Historical){
                out += '';
                for (j in data.Historical[i]){
                    out += '';
                }
                out += '';
            }
            out += '
'+data.Historical[i][j]+'
'; sessionStorage.setItem(key,out); echo(out); }; XHR.open( 'GET', url, true ); XHR.send(); } var echo = function( text ) { endTime = new Date(); var msec = endTime - startTime; document.getElementById("exectime").innerHTML = msec+"ミリ秒かかりました "; document.getElementById("result_div").innerHTML = text; }

コメント

このブログの人気の投稿

[Mac]Time Machineのバックアップ先をWindows共有フォルダに設定する

こんばんは。もっくんです。 2台あったWindowsのデスクトップを1台にまとめるついでに、ずっと放置していたMacのバックアップ環境を構築してみました。Finderでコピペするだけでいいんですが、どうせなら「Mac全体を自動的にバックアップします。」という謳い文句のTime Machineを使いたい。 Apple純正のTime CapsuleやUSBの外付けHDDという手もあったんですが、ノートの機動性を落としたくなかったし、なによりタダでできそうなWindows共有フォルダにネットワーク越しにバックアップする方法を取ることにしました。 実際の流れは下記のようになります。 ネットワーク共有フォルダを作成する 空のディスクイメージを作成する ネットワーク共有フォルダにディスクイメージをコピーする ネットワーク共有フォルダのディスクイメージをマウントする マウントしたディスクイメージをTime Machineのバックアップ先に指定する 1.ネットワーク共有フォルダを作成する この手順はそこまで面倒ではないので、簡単な手順だけ。 Windows全体の設定でファイル共有を有効にする(Windowsで作業) Macと共有(Macから見えるように)したいフォルダを作成する(Windowsで作業) 共有したいフォルダに共有設定をする(Windowsで作業) 共有フォルダに接続(Macで作業) 詳細はこちらの記事が画像付きでわかりやすい。 http://blog.goo.ne.jp/beosound/e/7d6d0d0a8f76035f880001eda06c4247 2.空のディスクイメージを作成する いわばこのディスクイメージがバックアップ先のHDDの代わりとなる。 アプリケーション > ユーティリティ > ディスクユーティリティを起動 画面上部の ファイル > 新規 > 空のディスクイメージをクリック 設定画面の各欄は以下のように設定 名前: TimeMachineVolume(なんでもよい) 保存先: デスクトップ(ローカルのわかりやすい場所) ボリューム名: TimeMachineVolume(なんでもよい) ボリュームサイズ: カスタム ...

[Python]個別銘柄の時系列データをGoogle Financeから取得するプログラム

今日書いたのはこれ。 Google Finance から証券コードを指定して日別の価格情報を取得するプログラムです。 米国市場に上場している銘柄であればCSVでダウンロードでますが、日本の銘柄はできなかったので作りました。 多くの人はYahoo!Japanから取得しているようなので、あえてGoogle Financeから取得してみました。 ちなみに使えるのは東証に上場している銘柄のみです。(おそらく) このプログラムと 日経225構成銘柄一覧取得プログラム を組み合わせれば、日経225構成銘柄の時系列データが取得できてしまいます。 #!/usr/local/bin/python # -*- coding:utf-8 -*- from BeautifulSoup import BeautifulSoup import urllib2,re,datetime,sys class googleFinance2CSV(object): def __init__(self,ticker): ''' 引数で渡されたticker(=証券コード)の時系列データを Google Financeから取得してCSV形式で保持する CSVの列は'Date','Open','High','Low','Close','Volume' ''' self.ticker = ticker self.url = 'http://www.google.com/finance/historical?q=%s&num=200' % str(self.ticker) self.csv = str() soup = BeautifulSoup(urllib2.urlopen(self.url)) tablesoup = soup.find("table", {"class":"gf-table historical_price"}) for trsoup in tablesoup.findAll("tr...

[Python]日経225構成銘柄の一覧を取得するプログラム

今日書いたのはこれ。 日経225の構成銘柄が変更になるといちいち変更が面倒なので作りました。 コメントに書いてある機能しかありませんが、簡単でよし。 ご参考になれば。 #!/usr/local/bin/python # -*- coding:utf-8 -*- from BeautifulSoup import BeautifulSoup import urllib2,re class Nikkei225Profile(object): def __init__(self): ''' 日経新聞のサイトから日経225の構成銘柄の証券コードと証券名称を取得 ''' self.url = 'http://www3.nikkei.co.jp/nkave/about/225_list.cfm' self.profile = dict() soup = BeautifulSoup(urllib2.urlopen(self.url)) tablesoup = soup.find("table") rows = tablesoup.findAll('tr',{'bgcolor':'#FFF5DE'}) rows += tablesoup.findAll('tr',{'bgcolor':'#F0E7D1'}) for row in rows: row_list = [cell.find(text=True) for cell in row.findAll('td')] self.profile[row_list[0]] = row_list[1] def getprofile(self,googlestyle=False): ''' 日経225の証券コードと証券名称をdict()で返す ...