アクセス（Access）講座一覧｜フロンティアリンク
Access/Excel/VBA/Webプログラミングの1日速習講座

前回に引き続き、jQueryを使ったダイアログボックスについてご紹介いたします。

前回ご紹介しました警告や確認のように、ユーザーへのメッセージを主にしたダイアログボックスもありますが、ユーザーに対して、何か情報を入力してもらうためのダイアログボックスが必要になる事もあると思います。

今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。

◆準備
　もし、読んでいない方は前回のコラムにてご紹介しました、「◆準備」と「▼表示する場所の指定」をご確認ください。

◆ダイアログボックスの表示
　今回のサンプルでは、文字入力ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。
　▼jQueryを使った文字入力ダイアログ
　　基本的には、前回のコラムでご紹介しましたダイアログボックスと変わりはありませんが、警告ダイアログや確認ダイアログで記載していたコメント部分にフォームタグを記述して、ダイアログの中に文字入力機能を盛り込んでいます。以下のソースコードの6行目がポイントになります。
　　
　　以下が確認ダイアログのサンプルソースコードになります。

	function ShowJQueryInputDialog() {
		var strTitle = "文字入力ダイアログ";
		var strComment = "これは文字入力ダイアログです。";
		
		// ダイアログのメッセージとタイトルを設定
		$( "#show_dialog" ).html( '<p>' + strComment + '</p><input type="text" name="inputtxt" id="inputtxt" value="初期入力されている文字列です" />' );

		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog("入力された文字は「" + $( "#inputtxt" ).val() + "」です。");
				},
				"キャンセル": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "キャンセルがクリックされました" );
				}
			}
		});
	}

今回は、1行入力のフォームタグを使って単純な文字入力のみをご紹介していますが、このコメント部分に他のフォームタグを設定することによって、ダイアログの機能を増やすことが可能です。皆さんのWebサイトの要件に合わせてこのダイアログを応用してみてはいかがでしょうか。

本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

（担当：小口　真己）

「Webサイトでユーザー向けにダイアログを表示したい。」という要件はとても多いと思いますが、最近ではJavaScriptの標準ダイアログでは、機能が少なすぎるという場合が多いのではないでしょうか。そこで、見た目をリッチなデザインで、タイトルも付けたいなどの要件を満たすための簡単な方法として、「jQuery」と「jQuery UI」を利用したダイアログ表示についてご紹介しましょう。

今回ご紹介するダイアログボックスはこちらにサンプルソースコードをアップロードしてありますので、本コラムと合わせてご確認ください。

◆準備
　もし、読んでいない方は前回のコラムにてご紹介しました、jQueryを使う準備をまずはご一読いただき、以下の準備をしてください。

　1. jQueryライブラリを読み込む
CDNを使ってjQueryを読み込むサンプルについて記載しています。

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

　2.jQuery UIライブラリを読み込む
　　jQuery UIライブラリはスタイルシートもセットで読み込む必要があります。そのため、以下の2行をCDNを使って読み込みます。

	<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" rel="stylesheet">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

◆ダイアログボックスの表示
　今回のサンプルでは、警告ダイアログと確認ダイアログについて通常のJavaScriptを使って表示する場合との動きの違いを比較表示しています。

　▼表示する場所の指定
　　忘れてしまいがちなのが、表示する場所の設定です。表示する場所とは言っても、ここではブラウザ上のどの場所に表示するという意味ではなく、div要素を使ってダイアログを表示する画面上の受け入れ先の準備という意味になります。ここで指定している「id属性」に対して、ダイアログを表示する制御を行います。
　　
　　以下が表示する場所の指定用サンプルソースコードになります。

　	<div id="show_dialog"></div>

　▼jQueryを使った警告ダイアログ
　　ダイアログを表示するときに、オプションとしてモーダルダイアログ（ブラウザ上の他のリンクなどをクリックできないようにし、表示されているダイアログのみを動かせる）設定やタイトルの指定、表示するボタンについて設定しています。この他にもデザインを変更したり、ダイアログ表示にアニメーションを適用する設定も可能です。

　　以下が警告ダイアログのサンプルソースコードになります。

	function ShowJQueryAlertDialog() {
		var strTitle = "警告ダイアログ";
		var strComment = "ダイアログのメッセージ\nダイアログを閉じるためにはOKをクリックするか、右上の×ボタンをクリックしてください。";
		
		// ダイアログのメッセージを設定
		$( "#show_dialog" ).html( strComment );

		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
				}
			}
		});
	}

　▼jQueryを使った確認ダイアログ
　　確認ダイアログの場合は、ボタンを複数設定し、クリックされたときの動きを記載しておきます。今回のサンプルではシンプルにOKとキャンセルの各ボタンが押されたメッセージを表示するだけに留めていますが、要件によっていろいろと応用可能になります。
　　
　　以下が確認ダイアログのサンプルソースコードになります。

	function ShowJQueryConfirmDialog() {
		var strTitle = "確認ダイアログ";
		var strComment = "これは確認ダイアログです。";
		
		// ダイアログのメッセージを設定
		$( "#show_dialog" ).html( strComment );
		
		// ダイアログを作成
		$( "#show_dialog" ).dialog({
			modal: true,
			title: strTitle,
			buttons: {
				"OK": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "OKがクリックされました" );
				},
				"キャンセル": function() {
					$( this ).dialog( "close" );
					ShowJQueryMessageDialog( "キャンセルがクリックされました" );
				}
			}
		});
	}

今回はjQueryとjQuery UIを使ってダイアログボックスを表示するサンプルについてご紹介しました。次回は、今回の続きとして文字入力ダイアログについてご紹介したいと思います。
本コラムが、読者の皆さんの日々の業務に役立てば幸いです。

（担当：小口　真己）