Recently in JavaScript Category

PEARのLogパッケージを使用して、Firebugにログを出力する方法を次に示す。
元ネタは「cl.pocari.org - PEAR Log を使って Firebug にログを出力する」。

まず、Logパッケージをインストールする。

# pear install Log
WARNING: "pear/DB" is deprecated in favor of "pear/MDB2"
Did not download optional dependencies: pear/DB, pear/MDB2, use --alldeps to download automatically
pear/Log can optionally use package "pear/DB" (version >= 1.3)
pear/Log can optionally use package "pear/MDB2" (version >= 2.0.0RC1)
pear/Log can optionally use PHP extension "sqlite"
downloading Log-1.9.11.tgz ...
Starting to download Log-1.9.11.tgz (38,479 bytes)
..........done: 38,479 bytes
install ok: channel://pear.php.net/Log-1.9.11

あとはLogクラスのインスタンスを生成し、logメソッドを呼ぶだけ。
具体的なコードは次の通り。

<?php
require_once 'Log.php';

$log = &Log::singleton('firebug', '', 'PHP', array('buffering' => true), PEAR_LOG_DEBUG);

$log->log('デバッグレベル', PEAR_LOG_DEBUG);
$log->log('情報レベル', PEAR_LOG_INFO);$log->log('警告レベル', PEAR_LOG_WARNING);
$log->log('エラーレベル', PEAR_LOG_ERR);
$log->log('レベル??');
?>

これで、次のようにFirebugのエラーコンソールにメッセージが出力される。

Enjoy!

このエントリはhttp://developer.yahoo.com/yui/yahoo/を元に、日本語に翻訳したものです。

YAHOO Global Object には唯一のグローバル名前空間があり、そこに全てのYUIライブラリのコードが存在します。 YAHOO Global Object はYUIライブラリを使用する全てのページでインクルードされる必要があり、 またどのYUIコンポーネントよりも先に現れなければなりません。 YAHOO Global Object はライブラリ全体で使用可能な多くのメソッドが存在します。

はじめに

YAHOO Global Object は次のようにしてインクルードします。

<!-- YAHOO Global Object ソースファイル --> 
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo/yahoo-min.js"></script>
<!-- 追加のソースファイルはここに記述する -->

YAHOO.namespace

YAHOO Object は自動的にYAHOO.util、YAHOO.widget、YAHOO.exampleなどの名前空間を自動的に生成します。 これらの名前空間はYUIライブラリの内部スクリプトのために予約されています。 カスタムアプリケーション(=ユーザが作成するアプリケーション)のために追加の名前空間を作成できます。

// "myproduct1"のための名前空間を作成する
YAHOO.namespace ("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
    alert(info);
};

// "mysubproject1"のための名前空間"myproduct2"を作成する
YAHOO.namespace ("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
    alert(info);
};

YAHOO.lang

YAHOO.lang にはJavaScriptのユーティリティやYUIライブラリで使用するための拡張機能が含まれています。

// true、arrayリテラルは配列です
YAHOO.lang.isArray([1, 2]);

// false、objectリテラルは配列ではありません
YAHOO.lang.isArray({"one": "two"});

// しかし、 配列として宣言された場合にはtrue になります
function() {
    var a = new Array();
    a["one"] = "two";
    return YAHOO.lang.isArray(a);
}();

// false、エレメントの集合は配列のようですが、違います
YAHOO.lang.isArray(document.getElementsByTagName("body"));

// true、falseは論理型です
YAHOO.lang.isBoolean(false);

// false、1や"true"という文字列は論理型ではありません
YAHOO.lang.isBoolean(1);
YAHOO.lang.isBoolean("true");

// nullはnullですが、undefinedや""(空文字列)はnullではありません
YAHOO.lang.isNull(null); // true
YAHOO.lang.isNull(undefined); // false
YAHOO.lang.isNull(""); // false

// functionはfunctionですが、オブジェクトはfunctionではありません
YAHOO.lang.isFunction(function(){}); // true
YAHOO.lang.isFunction({foo: "bar"}); // false

// true、整数や少数は数です
YAHOO.lang.isNumber(0);
YAHOO.lang.isNumber(123.123);

// false, strings that can be cast to numbers aren't really numbers
// false、数にキャストできる文字列は、実際には文字列ではありません
YAHOO.lang.isNumber("123.123");

// false、未定義の値や無限大の値は数ではありません
YAHOO.lang.isNumber(1/0);

// true、オブジェクト、関数、配列はオブジェクトです
YAHOO.lang.isObject({});
YAHOO.lang.isObject(function(){});
YAHOO.lang.isObject([1,2]);

// false、プリミティブな値はオブジェクトではありません
YAHOO.lang.isObject(1);
YAHOO.lang.isObject(true);
YAHOO.lang.isObject("{}");

// 文字列
YAHOO.lang.isString("{}"); // true
YAHOO.lang.isString({foo: "bar"}); // false
YAHOO.lang.isString(123); // false
YAHOO.lang.isString(true); // false
 
// undefinedはundefinedですが、nullとfalseはundefinedではありません
YAHOO.lang.isUndefined(undefined); // true
YAHOO.lang.isUndefined(false); // false
YAHOO.lang.isUndefined(null); // false

YAHOO.lang.hasOwnProperty

YAHOO.lang.hasOwnPropertyはハッシュテーブルをイテレートする際に、オブジェクトのプロトタイプに追加されたプロパティを無視するために使用します。これは元々Aグレードのブラウザをサポートするものでしたが、つい最近までSafariはサポートされませんでした。(all internal usage of the hasOwnProperty test within YUI will use the version in YAHOO.lang for the forseeable future, and we recommend that you do the same in your own implementations.)。YAHOO.lang.hasOwnPropertyは可能な限りブラウザのネイティブな関数を使用します。 (訳者注：ブラウザをグレード分けし、優先的にサポートするブラウザとそれ以外を分けることがあります。詳しくはYahoo!のドキュメントを参照してください。)

// これが保護するものです
Object.prototype.myCustomFunction = function(x) {
    alert(x);
}

var o = {};
o["foo"] = "bar";
o["marco"] = "polo";

// これが保護する必要がある部分です
for (var i in o) {
    if (YAHOO.lang.hasOwnProperty(o, i)) {
        alert("good key: " + i);
    } else {
        alert("bad key: " + i);
    }
}

YAHOO.lang.extend

YAHOO.lang.extend は他のオブジェクトを継承したオブジェクトのプロトタイプ、コンストラクタ、スーパークラスのプロパティを設定する仕組みを提供します。また、継承先オブジェクトでコンストラクタが二度実行されるないようにします。YAHOO.lang.extend はバージョン2.3.1ではYAHOO.langパッケージに再配置されました。YAHOO.extend はYAHOO.lang.extend のエイリアスですが推奨されていません。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class1.prototype.testMethod = function(info) {
    alert("Class1: " + info);
};

YAHOO.test.Class2 = function(info) {
    // コンストラクタを繋げる
    YAHOO.test.Class2.superclass.constructor.call(this, info);
    alert("Class2: " + info);
};

// Class2がClass1を継承する。これはClass2のコンストラクタの直後に実行される必要がある
YAHOO.lang.extend(YAHOO.test.Class2, YAHOO.test.Class1);

YAHOO.test.Class2.prototype.testMethod = function(info) {
    // 関数を繋げる
    YAHOO.test.Class2.superclass.testMethod.call(this, info);
    alert("Class2: " + info);
};

var class2Instance = new YAHOO.test.Class2("constructor executed");
class2Instance.testMethod("testMethod invoked");

YAHOO.lang.augment

YAHOO.lang.augment はプロトタイプのプロパティを複数のオブジェクトに適用することで、コードを再利用する手段を提供します。YAHOO.augment はYAHOO.lang.augment のエイリアスですが、推奨されません。

<!-- debugger output for environments without "console" -->
<!-- コンソールがない環境ではここにデバッガの出力が与えられます -->
<div id="consoleelement"> </div>

<script>
////////////////////////////////////////////////////////////////////////////
// ConsoleProvilderの例はコンソールがある場合はコンソールにログを出力します
// コンソールがない場合は"consoleelement"にログを出力します
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ConsoleProvider = function() { };
YAHOO.example.ConsoleProvider.prototype = {
    log: function(msg) {
        // use the error console if available (FF+FireBug or Safari)
        if (typeof console != "undefined") {
            console.log(msg);
        // write the msg to a well-known div element
        } else {
            var el = document.getElementById("consoleelement");
            if (el) {
                el.innerHTML += "<p>" + msg + "</p>";
            }
        }
    }
};

////////////////////////////////////////////////////////////////////////////
// デバッグメッセージを出力するクラスを定義します
////////////////////////////////////////////////////////////////////////////
YAHOO.example.ClassWithLogging = function() { };
YAHOO.lang.augment(YAHOO.example.ClassWithLogging, YAHOO.example.ConsoleProvider);

////////////////////////////////////////////////////////////////////////////
// テスト
////////////////////////////////////////////////////////////////////////////
var c = new YAHOO.example.ClassWithLogging();
c.log("worked");

</script>

YAHOO.log

YAHOO.log はYAHOO Global Object に含まれており、(YUI Logger Controlがページ中に存在せずとも)YUIのコード中のどこでもログ出力を行うことが可能です。このため、デバッグ情報を除去する前にエラーが出現することを抑止できます。YAHOO.log はLogger Controlを使用できる環境ではYAHOO.widget.Logger.log を実行しますが、そうでない場合は何もしません。 使用方法についてはLogger Controlのドキュメントを参照してください。

YAHOO.namespace("test");

YAHOO.test.Class1 = function(info) {
    YAHOO.log("Class1: " + info, "error", "Class1");
};

YAHOO_config and YAHOO.env

YAHOO.env はブラウズ環境、特にページ表示のためにロードしたYUIコンポーネントの情報を保持します。 この情報はYAHOO.env.getVersion を介してどのコンポーネントからも取得可能で、特にライブラリがダイナミックにロードされる環境で有用です。 YAHOOやその他のYUIライブラリがロードされているか確認するために、ポーリングする代わりにYAHOO_configコールバック関数を定義することができます。

<html>
<head>
<script type="text/javascript">

// モジュールがロードされる度にコールバックされます
function mycallback(info) {
 
    alert(info.name + " loaded");

    // loggerがページでロードされると動作します
    if (info.name == "logger") {
        YAHOO.widget.Logger.enableBrowserConsole() 
        var l = new YAHOO.widget.LogWriter("(");

        YAHOO.example.EnvTest = function() {
            function log(msg,cat) {
                var c=c||"info";
                YAHOO.log(msg,c,"LangTest");
            }

            return { 
                init: function() {
                    new YAHOO.widget.LogReader("logoutput");
                    log("init");
                },
                
                showInfo: function(e, module){
                    // YAHOO.env.getVersion はYAHOO_config.listener が受け取るデータと同じデータを返します
                    var info = YAHOO.env.getVersion(module);

                    log("name: " + info.name);
                    log("version: " + info.version);
                    log("build: " + info.build);
                    log("versions: " + info.versions);
                    log("builds: " + info.builds);
                    log("mainClass version: " + info.mainClass.VERSION);
                }
            };
        } ();

        YAHOO.util.Event.addListener(window, "load", YAHOO.example.EnvTest.init);
        YAHOO.util.Event.addListener("showeventbutton", "click", YAHOO.example.EnvTest.showInfo, "event");
    }
}

YAHOO_config = {
    listener: mycallback
};

</script>
<script src = "../src/js/YAHOO.js" ></script>
<script src = "../../build/event/event.js" ></script>
<script src = "../../build/dom/dom.js" ></script>
<script src = "../../build/dragdrop/dragdrop.js" ></script>
<script src = "../../build/logger/logger.js" ></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<style> #logoutput {float: right}</style>
</head>
<body>
<input type="button" id="showeventbutton" value="show event version" />
<div id="logoutput"></div>
</body>
</html>

YUI Module NamesとYUI on Mobile: Using YAHOO Global Object with "A-Grade" Mobile Browsersは割愛します。