×
Namespaces

Variants
Actions

Web Runtime Widgetでログを出力する例

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


本ページは、Web Runtime Widgetで YUI Logger Control を使用する方法について示します。

必要なYUIのCSS、JavaScriptファイルをインクルードする

YUIファイルの依存関係については、こちらで確認することができます: [1]

WidgetのHTMLファイル中で以下のように定義して、必要なYUIサーバー側のLogger Controlファイルを取り込むようにします。

  <head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/logger/assets/skins/sam/logger.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/logger/logger-min.js"></script>
...
</head>

代わりに、必要なファイルをWidgetバンドルにコピーし、Widgetの起動時に端末上でローカルに取り込むようにすることもできます。

  <head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="./YUI/logger.css">
<!-- js -->
<script type="text/javascript" src="./YUI/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./YUI/logger-min.js"></script>
...
</head>

YUIのライセンスについては、各自確認しておいてください。

JavaScript、HTML中でログ出力機構(Logger)を使用する

操作手順の詳細については、YUI Logger Control ドキュメント をご覧ください。

下記サンプルコードは、HTMLページ上でLogger Controlのコンテナを生成し、画面上にハードコードでのログ出力を行います。

window.onload = init;
 
var myLogReader;
var myConfigs = {
width: "230px",
height: "30em",
newestOnTop: true,
footerEnabled: false
};
 
 
// Initializes the widget
function init() {
var myContainer = document.body.appendChild(document.createElement("div"));
myLogReader = new YAHOO.widget.LogReader(myContainer);
}
 
 
 
function logMsg() {
 
YAHOO.log("hello there");
}

上記JavaScriptを使用した全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>
<!-- css -->
<link rel="stylesheet" type="text/css" href="./YUI/logger.css">
<!-- js -->
<script type="text/javascript" src="./YUI/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./YUI/logger-min.js"></script>
<script type="text/javascript" src="script.js" /></script>
 
<title>YUI Logger Example</title>
</head>
<body>
<br><a href="#" onclick="logMsg();">log</a><br>
</body>
</html>

パッケージのインストール・動作可能な端末について

本ページのデモWidgetは、 Web Runtimeに対応した端末で動作します。

また、端末にインストールする前に、ファイルの拡張子を.wgzに変更します。

This page was last modified on 9 December 2011, at 02:50.
53 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.

×