Categories: Lang-JP | JP Web Runtime (WRT) | JP Workshop | JP Widget for S60 | JP How To | JP Code Examples

This page was last modified 08:04, 6 June 2008.

From Forum Nokia Wiki

原文（英語）: How to utilize device resources from a WRT widget

System Info Service APIは、Web RuntimeをサポートするS60端末上における、機能とプロパティへのアクセス手段を、ある限られた範囲で提供します。現在のWeb Runtime実装は、厳重なセキュリティサンドボックス上で実行するようになっていて、それ以外のシステム情報を公開していません。

Web Runtimeのアップデートリリースを待つ間、より多くのシステム情報へのアクセス手段を提供するため、何らかのより深いシステム統合を提供する方法の1つは、端末上でローカルにWebサーバを起動し、スクリプト言語(Python, PHP)またはネイティブのC++アプリケーションを利用し、Web Runtime Widgetと通信することです。

最も簡単なアプローチは、Mobile Web Server [1] または PAMP [2] を使用することです。これらは、作成したスクリプトをホスティングするのに適した環境をWebサーバとして提供します。

本記事における部分コードと例題は、Web Runtime Widgetをサポートするデバイス上で、Eドライブ上にhtdocsフォルダを置き、PAMPがうまくインストールされ、実行できることを想定しています。

Pythonスクリプト

次に示すMWSドキュメント中でのガイドライン[3]に従い、PAMPまたはMWS(Mobile Web Server) Apacheをインストールした上で、Pythonスクリプトをホスティング起動することができます。

S60のプラットフォームセキュリティによる制限により、Apacheインストールした上でスクリプトを実行しても、位置関連の情報にはアクセスできません。

PHPスクリプト

PHPのS60 APIドキュメント[4]は、まだ情報が不十分です。しかし、開発者にとっては良いスタートを切れるといえます。

SMSを送信する簡単なWidgetを作成する

Pythonスクリプトを作成する

下記スクリプトは、HTTPクエリー文字列から受信者の電話番号とメッセージ内容を読込み、SMSメッセージを送信します。

ここでは、コードをtest.pyとして保存しています。次のステップでht.aclファイルを作成する時に、これを念頭に置いてください。

"file test.py" 
 
def handler(req):
  from mod_python import apache, util
  import messaging
  
  req.content_type = 'text/plain'
  req.encoding = "UTF-8"
  
  request_data = util.FieldStorage(req)
    
  try:
  
    number = request_data.getfirst("number")
    message = request_data.getfirst("message")        
    
    messaging.sms_send(number, message)
        
    req.write( "succeeded" )    
  
  except KeyError:
    number = None
    message = None
    req.write("failed")    
   
  return apache.OK

mod_pythonページのハンドラ情報を定義する

以下に示すような内容で、ht.aclファイルを作成します。

AddHandler mod_python .py
PythonHandler test
PythonDebug On 
Options None
 
Order Deny,Allow
Allow from all
 
<FilesMatch "\.(pyc|psp)$">
    Deny from all
</FilesMatch>

各ファイルを、PAMPをインストールするドキュメントルートにコピーする

.pyと.aclの各ファイルを、手動で e:\Data\apache\htdocs\PAMPsmsSender\ にコピーするか、またはそれを行うためにSISパッケージを作成します。

Web Runtime Widgetを作成する

簡単な Web Runtime Widgetを作成する方法についての情報は、Forum NokiaサイトにあるWeb Runtime Widgetのドキュメント [5] をご覧ください。

上記で示したPythonスクリプトと通信するのに必要なJavaScriptコードは簡単です。

ここでは、間もなくリリースされるWRTKit(Web Runtime Kit)バンドルを使います。これは、作成するWidget UIにコンポーネントとコマンドハンドラを追加しますが、自分の好きなUIを普通に実装できます。

作成するPythonスクリプトのURLを定義する

var PY_URL = "http://127.0.0.1/PAMPsmsSender/.py?";

WRTKitのUIマネージャ、メインビュー、その他必要なUIコンポーネント用に定数を導入します。

UIを構成し、Sendボタンへのコマンドハンドラを追加します。

// Reference to the WRTKit user interface manager and main view.
var uiManager;
var mainView;
 
// Reference to controls in the main view.
var sendButton;
var numberField;
var messageField;
 
 
// Called from the onload event handler to initialize the widget.
function init() {
	
    // set tab-navigation mode and show softkeys
    // (only if we are in the WRT environment)        
    
    if (window.widget) {        
        widget.setNavigationEnabled(false);
        menu.showSoftkeys();
    }
    
    // create UI manager
    uiManager = new UIManager();
    
    // create main view
    mainView = new ListView(null, "Send an SMS");
 
    // add a text field to the view
    numberField = new TextField(null, "Recipient");
    mainView.addControl(numberField);
     
    // add a text field to the view
    messageField = new TextArea(null, "Message");
    mainView.addControl(messageField);
     
    // add a button to the view
    sendButton = new FormButton(null, "Send");
    sendButton.addEventListener("ActionPerformed", sendButtonClicked);
    mainView.addControl(sendButton);
	
    // display the main view
    uiManager.setView(mainView);
}
 
function sendButtonClicked(event){
    var number = numberField.getText();
    var msg = messageField.getText();
    if (number.length == "") {
        uiManager.showNotification(2000, "warning", "Enter recipient number!");
    }
    else if (msg.length == "") {
        uiManager.showNotification(2000, "warning", "Enter message text!");
    }
    else {
        sendMsg();
    }
}

Pythonスクリプトへリクエストを発行するコードを追加し、リクエストの進行状況を制御します。

function sendMsg() {
  uiManager.showNotification(-1, "wait", "Sending...", -1);
  var req = createXMLHttpRequest();
  if (req) {
    
    var params = "number="+numberField.getText()+"&message="+messageField.getText();
  
    var url = PY_URL + params;
        
    loadXMLDoc(req, url);
  }
}
 
 
// Creates an XMLHttpRequest object
function createXMLHttpRequest() {
  var req = null;
  try {
    req = new XMLHttpRequest();
    // Make sure that the browser supports overrideMimeType
    if (typeof req.overrideMimeType != "undefined") {
      req.overrideMimeType("text/html");
    }
  } catch (ex) {
    req = null;
  }
  
  return req;
}
 
// Loads target XML document (url) into XMLHttpRequest
function loadXMLDoc(req, url) {
 
  // Register a callback function which gets called when the request state changes
      req.onreadystatechange = function() {
      processStateChange(req);
      };
   
  req.open("GET", url, true);
  // Transmit the request
  req.send(null);
}
 
// Processes state changes of XMLHttpRequest
function processStateChange(req) {
  // Request states are 0 through 4, where 4 equals complete
   
  if (req.readyState == 4) {
        
    if (req.status == 200) {
        uiManager.hideNotification();
        showStatus();
    }
    }
  }
 
 
function showStatus(req) {
  uiManager.showNotification(3000, "info", "Message sending "+req.responseText);
}

ここで実際に行うことは、正しいクエリー文字列でPythonスクリプトにXMLHttpRequestを発行することです。

Inboxフォルダからメッセージを読込む

端末のInboxフォルダのメッセージは、PythonまたはPHPで読むことができます。 Pythonスクリプトは、上記で示したSMS送信の例と同じような形式でインストールできます。

PHPスクリプトは手動でコピーするか、SISファイルを使ったApacheのhtdocsフォルダ下の適切なフォルダへインストールすることができます。

部分コードは若干HTMLのフォーマットを行っていますが、要求により良く応えるため、レスポンスコンテンツを再作成する必要が出てくる可能性があります。

Python

"file test.py" 
 
def handler(req):
  from mod_python import apache
  import inbox
  from time import ctime
  
 
  req.content_type = 'text/html'
  req.encoding = "UTF-8"
  
  i = inbox.Inbox()
  m = i.sms_messages()  # all message ID's
  
  req.write("<div class=\"messagelist\" id=\"smslistdiv\">")
  
  for s in m:
    req.write("<p class=\"msgheader\" id=\"header_")
    req.write(str(s))
    req.write("\">")
    req.write(ctime(i.time(s)))
    req.write("  -  ")
    req.write(i.address(s))
    req.write("</p>")
    
    req.write("<p class=\"msgtext\" id=\"body_")
    req.write(str(s))
    req.write("\">")
    req.write(i.content(s).encode("utf-8"))
    req.write("</p>")
  
  req.write("</div>")
  
  return apache.OK

PHP

<?php
  print "<div class=\"messagelist\" id=\"smslistdiv\">";
 foreach (s60_inbox_get_messages() as $msg) {
         print "<p class=\"msgheader\">"; 
         print 'From: '.$msg->sender()."<br/>\n";
         print 'When: '.strftime ("%x %X", $msg->time())."<br/>\n";
         print "</p>";
         print "<p class=\"msgtext\">";
         print 'Content: '.$msg->content()."<br/>\n";
         print "</p>";
         }
  print "</div>";
?>

WidgetのHTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="StyleSheet" href="styles/general.css" type="text/css" />
    <script type="text/javascript" src="scripts/scripts.js" />
    <title>Inbox messages</title>
  </head>
  <body id="body">  
  <div id="contents"></div>  
  </body>
</html>

WidgetのJavaScript

window.onload = init;
var PY_SCRIPT_URL = "http://127.0.0.1/inboxTest/.py";
var PHP_SCRIPT_URL = "http://127.0.0.1/inboxTest/inboxtest.php";
 
var PY_MENU_ITEM_ID = 993;
var PHP_MENU_ITEM_ID = 994;
 
// Initializes the widget
function init() {
  window.menu.showSoftkeys();
  window.widget.setNavigationEnabled( false );
  createMenu();
}
 
function getMsgs( id ) {
  var requrl;
  
  switch (id)
  {
    case PY_MENU_ITEM_ID:
      requrl = PY_SCRIPT_URL;
      alert("Calling Python script");
      break;
    case PHP_MENU_ITEM_ID:
      alert("Calling PHP script");
      requrl = PHP_SCRIPT_URL;
      break;
  }
      
  var req = createXMLHttpRequest();
  
  if (req) {              
    loadXMLDoc(req, requrl);
  }
}
 
 
// Creates an XMLHttpRequest object
function createXMLHttpRequest() {
  var req = null;
  try {
    req = new XMLHttpRequest();
    if (typeof req.overrideMimeType != "undefined") {
      req.overrideMimeType("text/html");
    }
  } catch (ex) {
    req = null;
  }
  
  return req;
}
 
// Loads target XML document (url) into XMLHttpRequest
function loadXMLDoc(req, url) {
 
  // Register a callback function which gets called when the request state changes
      req.onreadystatechange = function() {
      processStateChange(req);
      };
   
  req.open("GET", url, true);
  // Transmit the request
  req.send(null);
}
 
// Processes state changes of XMLHttpRequest
function processStateChange(req) {
  // Request states are 0 through 4, where 4 equals complete
  if (req.readyState == 4) {
        
    if (req.status == 200) {
      showList(req);
    }
   
    }
  }
 
 
function showList(req) {
  widget.prepareForTransition("fade");
  var mybody = document.getElementById("contents");
  mybody.innerHTML = req.responseText;
  widget.performTransition();
}
 
function createMenu(){
  var menu1 = new MenuItem("Fetch using Python", PY_MENU_ITEM_ID);    
  var menu2 = new MenuItem("Fetch using PHP", PHP_MENU_ITEM_ID);
  menu1.onSelect = getMsgs;
  menu2.onSelect = getMsgs;
  
  window.menu.append(menu1);
  window.menu.append(menu2);  
}

既知の問題、ヒント(Tips)、コツ(Tricks)、その他

変更したPythonスクリプトを実行する場合、その前にPAMPまたはMWSを再起動する必要があります。