公開日：2009年1月15日(木) 11:00
By 
ダイアログボックスを表示するスクリプト
前回は、実際にYahoo! UI Library（YUI）を利用する方法を紹介しました。今回は、YUIを利用して、簡単なスクリプトを作成してみましょう。
今回作るプログラムは、図1-1のようなダイアログボックスを表示するスクリプトです。データを管理する画面などで、データを削除したり変更するなどに間違いがないように「本当によいですか？」といった確認を促す時などに利用できます。それでは早速作ってみましょう。
まずは、必要なライブラリなどをそろえていきます。前回（http://thinkit.jp/article/767/1/）紹介した通り、さまざまな利用方法がありますが、ここではYahoo!のサーバーから直接リンクするやり方で参照します。
まず、「Yahoo! UI Library: SimpleDialog（http://developer.yahoo.com/yui/container/simpledialog/）」をご覧ください。
はじめの「Getting Started」に必要なライブラリが列記されています。これらをすべてコピーしても構いませんし、「OPTIONAL」と書かれているライブラリは必要に応じて参照することができます。今回必要なライブラリは以下の通りです。
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/container/container-min.js"></script>
次に、HTMLを準備します。ここではbutton要素を利用してボタンを作ります。見慣れない要素ですがスクリプトではよく使われます。
<button id="show">削除する</button>
ID属性を忘れずにつけてください。そして、スクリプトを記述します。head要素内に記述しましょう（図1-2）。これで準備完了です。
YUIの「スキン」という概念
しかし、このままではダイアログボックスが表示されても、図1-3のように崩れた状態で表示されてしまいます。これは、スタイルシートが整っていないためです。YUIには「スキン」という概念があり、スキンを当てないとデザインが整いません。
そこで、body要素に次のように書き加えましょう。
<body class="yui-skin-sam">
これで完成です。動作を確認してみましょう。
画面を表示し、ボタンをクリックするとダイアログボックスが表示されます。「いいえ」ボタンをクリックするとダイアログが閉じ、「はい」をクリックすると「complete.php」という別のファイルにジャンプします。こうして、確認ダイアログボックスを表示することができます。
スクリプトの内容を簡単に確認しておきましょう。ダイアログの生成は「Yahoo.widget.SimpleDialog」というオブジェクトで行います。IDを付与した後、さまざまなオプションを設定することができます（図1-4）。
設定の内容は、「Yahoo! UI Library: SimpleDialog（http://developer.yahoo.com/yui/container/simpledialog/#config）」を参照してください。
ダイアログボックスに表示されるボタンの定義は、「buttons」というオプションで行います。
buttons: [ { text:"はい", handler:handleYes, isDefault:true },
{ text:"いいえ", handler:handleNo } ]
handlerとは、そのボタンをクリックした時の内容を記述します。ここではスクリプトの上の方にその定義が記述されています。
var handleYes = function() { location.href = 'complete.php';};
var handleNo = function() { this.hide();};
内容としては簡単で、「はい」をクリックした時は「location.href」で別画面へジャンプ、「いいえ」をクリックした時は「hide」メソッドでダイアログボックスを閉じます。
こうして作った「simpledialog1」というオブジェクトは「render」および「show」のメソッドを順番に呼び出すと表示されます。「render」とは、ダイアログが所属する要素を指定するメソッドで、通常は「document.body」としておけば良いでしょう。div要素に所属させたい場合などは、そのID属性を指定します。
そして、「show」メソッドを呼び出します。ここでは、ボタンがクリックされた時に表示させたいので「Yahoo.util.Event.addListener」メソッドを使って、イベント定義を行っています。これで、ボタンがクリックされたタイミングを監視してダイアログが表示されるというわけです。
すべてを理解しようとするとなかなか難しいですが、まずはサンプルをそのまま利用し、改造を加えながら動きを確認するなどして、少しずつ理解していくと良いでしょう。次回も、別のサンプルを試してみましょう。
著者について
株式会社エイチツーオー・スペース たにぐち まこと
東京代々木でWeb制作業を営む、デザインユニット。「ちゃんとWeb」というコーポレートテーマで、なんとなくキレイ、なんとなく動いているサイトではない「ちゃんとした」サイト作りを心がける。現在は、「ちゃんとWeb.net」や「aquanotes Shop.」などのサイト運営を通じて、Webの運営担当者に啓蒙中。http://h2o-space.jp連載一覧
本誌は、読者登録いただくことにより、毎月無料でみなさまのお手元まで直接お届けいたします（書店などでは販売していません）。
企業の情報システムを担当する方々や事業部門のIT担当の方々、およびIT関連プロフェッショナルの方々を対象に、実践的に役立つ情報を掲載、幅広く業務にご活用いただけます。
