×
Namespaces

Variants
Actions
Revision as of 05:38, 9 December 2011 by hamishwillee (Talk | contribs)

Webサービスを使用した株情報Widgetを作成する方法

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Translated:
By fnjwikimng
Last edited: hamishwillee (09 Dec 2011)


Contents

はじめに

本稿では、Webサービスから株式コード(Stock Symbol)情報を取り出し、それを画面上に表示します。図1は、Widgetの作業手順を示した図です。

Diagram.png
図1

HTML/フォーム要素を作成する

<body bgcolor="#ffffff">
<form name="htmlForm" method="POST" action="javascript:formSend();">
Enter Stock Symbol:<br />
<input type="text" name="sendField" value="" /><br />
<input type="submit" value="Send" /><br />
<br />
Stock Details:<br />
<p><b>Name: </b><span id="name"></span><br />
<b>Current: </b><span id="current"></span><br />
<b>Change: </b><span id="change"></span><br />
</body>

フォームの作成は簡単です。しかし重要な注意点として、<div> タグの代わりに <span> タグを使用するというのがあります。全ての <span> タグには、IDが割り当てられています。後でデータを置くために、このIDを使用します。<span> タグと <div> タグについては、<div> タグが改行を追加するのに対し、<span>タグは、本Widgetが必要とするのと同じに結果を表示するだけで、その機能は同じです。

CSS - スタイルシート

body {
background-color: rgb(0, 120, 0);
}
 
 
#name {
font-size: 0.8em;
color: Black;
}
 
#current {
font-size: 0.8em;
color: Black;
}
 
#change {
font-size: 0.8em;
color: Black;
}

Webサービスへのアクセスとデータの抽出 (JavaScript)

var xmlhttp;
function formSend() {
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Mozilla, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5, IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
var httpReq = null;
httpReq = new XMLHttpRequest();
httpReq.open("GET", "http://www.webservicex.net/stockquote.asmx/GetQuote?symbol="+document.htmlForm.sendField.value, true);
httpReq.send(null);
 
httpReq.onreadystatechange = function()
{//Call a function when the state changes.
if(httpReq.readyState == 4)
{
if(httpReq.status==200)
{
//Server response - responseXML -> XML, responseText -> Text
var response = httpReq.responseText;
//String manipulation
var temp = response.indexOf("Symbol&gt;"); //location of <Symbol>
var temp2 = response.indexOf("&lt;/Symbol"); //Location of </Symbol>
var str = response.substr(temp+10,temp2-temp-10);//<Symbol>?</Symbol>
document.getElementById('name').innerHTML = str;
 
temp = response.indexOf("Last&gt;"); //Location of <Last>
temp2 =response.indexOf("&lt;/Last"); //Location of </Last>
str = response.substr(temp+8,temp2-temp-8); //<Last>?</Last>
document.getElementById('current').innerHTML = str;
 
temp = response.indexOf("Change&gt;"); //Location of <Change>
temp2 =response.indexOf("&lt;/Change"); //Location of </Change>
str = response.substr(temp+10,temp2-temp-10); //<Change>?</Change>
document.getElementById('change').innerHTML = str;
}
else
{
alert("Error - Server May be Down" );
}
}
}
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}

XMLHttpREquest (XHR) は、JavaScriptその他のWebブラウザ用スクリプト言語で、Webサーバ - ブラウザ間で、XMLその他のテキストデータを転送するのに使うことができます。XMLHttpREquestは同期取り出しを行うことが可能ですが、UIレスポンスを良くするため、多くの場合それは非同期です。XMLの他に、XMLHttpRequestはHTML, JSON, プレーンテキストといったフォーマットでデータを取り出すのにも使うことができます。ここではデモ目的のため、データをプレーンテキストとして抽出し、JavaScriptの文字列操作機能で示します。

document.GetElementById('ID').innerHTML 中にある ID は、HTML中の特定の場所におけるデータ置き場として使われます。ここでは、データ置き場として <span> ID を使用します。

最終的な出力結果

Finaloutput.jpg

ソースコードのダウンロード

ソースコードファイルは、以下のサイトからダウンロードできます。 Media:StockWidget.zip

68 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×