×
Namespaces

Variants
Actions

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

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


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

This page was last modified on 8 May 2013, at 00:00.
52 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.

×