はじめてのYUI3 > とりあえずログコンソールの表示から

YUI3が9/29に正式リリースされたそうで、
遅ればせながらYUI3を使ってみました。

色々日本語の記事やブログがかかれていますが、
やはりYUI3公式サイトを見るのが一番です。
情報も最新ですし。

Javascriptの場合、ログ環境を整えることから
面倒といえば面倒ですが、それも喜びに感じつつ、
やってみようと思います。

結論から言うと、以下のコードでYUI3のログコンソールが動きました。
(YUI3公式サンプルページ)

<div class="yui-skin-sam"><div id="mylogconsole"></div></div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script tyle="text/javascript">
YUI().use("console", "console-filters", "dd-plugin", function (Y) {
    var basic = new Y.Console({
        boundingBox: '#mylogconsole',
        style: 'block' // keeps the Console in the page flow as a block element                                                                         
    }).render();
});
</script>

まず、1行目のdivタグ。classにYUI2同様"yui-skin-sam"を指定して、
コンソールが格好良く表示されるようにします。また、中のdivタグに
任意のID（今回は"mylogconsole"）も指定しておきます。

で、次の行がYUI3の真骨頂（か？）

YUI().use("console", "console-filters", "dd-plugin", function (Y) {...})

javascriptっぽく、メソッドチェーンでつなげられてますが、
PHPっぽく書くと、

$yui = new YUI();
$yui->use(array("console", "console-filters", "dd-plugin"));
$yui->do_function();

って感じですかね。useで必要なライブラリをとってきているっぽいです。
で、function(Y)を実行、かな？

ログコンソールを表示させるサンプル

引き続き調査をすすめます。



ZOOM Guitar Effects Console G9.2tt