Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Yahoo! UI Library3(YUI3)のDeveloper Tools

Yahoo! UI Library Ver.3 を使ってみよう(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 YUI3(Yahoo! UI Library 3)は処理をモジュールという形で提供しています。前回は、開発時によく使用されるユーティリティ内のモジュールについて紹介しました。今回は、開発時に便利なツールをまとめた、Developer Toolsのモジュールについて説明して行きたいと思います。

目次

はじめに

 Yahoo! UI Library 3(YUI3)は5月5日に3.1.1にバージョンアップしました。3月31日に3.1.0にバージョンアップしたあと、細かいバージョンアップが続いているようです。

 今回は、開発時に便利なツールをまとめた、Developer Toolsのモジュールについて説明して行きたいと思います。

対象読者

 Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。

必要な環境

 HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。

作成時に便利なツール

 デベロッパーツール(Developer Tools)は、ページ作成時に便利な開発用ツールの集合です。

 logメッセージを表示するモジュールConsole、動作中のプログラムがどの処理をどういった順序で実行したかを監視するモジュールProfiler、変数の型や値の確認を行うモジュールTestがあります。モジュールTestには、テストする対象以外のオブジェクトに仮に値を設定できるMockObject、テスト結果をレポートできるReporterが備わっています。

logメッセージの表示

 開発時テスト用に使用する、logメッセージ表示をサポートするモジュールConsoleの説明を行います。指定した場所に表示することも、ページから独立させて表示することもできます。

 入力した文字をコンソールに表示する例題を見て行きましょう。実行画面は図1のようになります。

図1:例題実行画面
図1:例題実行画面

 図1は、実行画面を立ち上げて、info/warning/errorのlogを表示したところです。以下のリスト1を見てください。

[リスト1]Consoleの例題(DT_Console.html)
<script type="text/javascript">
YUI().use('console', function(Y) {	//(1)
	basic = new Y.Console({
    	style: 'separate' 		//(2)
	}).render(); 
    Y.one('#info').on("click",  function(e) {
    	Y.log(Y.one('#infoT').get('value'),'info');	//(3)
    });
    Y.one('#warn').on("click",  function(e) {
    	Y.log(Y.one('#warnT').get('value'),'warn');	//(4)
    });
    Y.one('#error').on("click",  function(e) {
    	Y.log(Y.one('#errorT').get('value'),'error');	//(5)
    });
});
</script>
</head>
<body class="yui3-skin-sam">		//(6)
<h4>Console</h4>
<div>
   	<h4>表示メッセージを入力してください。</h4>
    <p>
    	<input type="text" id="infoT" value="info メッセージ">
    	<button type="button" id="info">ログ info</button>
    </p>
    <p>
    	<input type="text" id="warnT" value="warning メッセージ">
    	<button type="button" id="warn">ログ warning</button>
    </p>
    <p>
    	<input type="text" id="errorT" value="error メッセージ">
    	<button type="button" id="error">ログ error</button>
    </p>	
</div>
</body>

 (1)でモジュールConsoleを指定しています。(2)がlogメッセージを表示する部分の指定です。以下、Y.Console({})の構成を表にしました。

Y.Consoleの構成
構成 概要 デフォルト
logLevel "warm"/"err"/"info"で標準表示指定 "info"
newestOnTop 以前のlogの上に新しい行を追加 true
consoleLimit 表示文字の最大値 300
height 表示枠の高さ "300px"
style 表示スタイル(下表参照) separate
表示スタイルの種類
概要
inline 表題表示なしで場所指定
block 表題に、Log Console 表示で場所指定
separate ページから独立して右上に表示

 .render()で表示します。内容の表示には(3)(4)(5)のY.log()を使用します。Y.log()の構文を以下に示します。

[構文]log関数
Y.log(message,logLevel)
	message:表示するメッセージ
	logLevel:"warm"/"err"/"info"(省略はinfo)

 各logLevel設定時の表示は図1のようになります。logメッセージウィンドウのCSSは(6)bodyにclass="yui3-skin-sam"を指定しています。ページ内に表示したいときは、リスト2のように書きます。

[リスト2]ページ内に表示(DT_Console1.html)
basic = new Y.Console({
	style: 'block' 
}).render("#demo"); 

 styleにblockかinlineを指定して.render(id名)と書きます。以下はページ内に指定して表示させた図です。body内の<div id="demo"></div>で指定した所に表示しています。

図2:リスト2実行画面
図2:リスト2実行画面

 また、Y.Plugin.ConsoleFiltersを指定することで、現在どのlogLevelを表示しているかをコンソール上で指定することもできます(図3、リスト3)。

図3:Filter設定時
図3:filter設定時
[リスト3]Filter設定(DT_Console2.html)
YUI().use('console-filters', function(Y) {

	basic = new Y.Console({
    	style: 'separate' ,
    	plugins:[Y.Plugin.ConsoleFilters]  //(1)
	}).render(); 

 モジュールにconsole-filtersを指定して、(1)のpluginでY.Plugin.ConsoleFiltersを指定します。チェックボックス(info、warn、error)のオン/オフを切り替えることで、表示がフィルタされることを確認してください。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

バックナンバー

連載:Yahoo! UI Library Ver.3 を使ってみよう

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5