Website made with rich jQuery,Ajax & Perl,PHP
ジオステーション
Sponsor
jQ+PHPでファイルダイアログ(1)
[最終更新日:2011/01/29]
このコーナーはjQueryやAjax、PHPをフル活用して実際にプロの方々の使用にも耐えうる、 高性能なファイルマネージャー機能をも有するダイアログを作成して行きます。 いつ完成するかはお約束できませんが、定期的に連載したいと思っています。

現在までの完成品サンプルです。

第一回の今回は、エフェクトして表示するモーダルのダイアログを作成します。
今回学習するシステムはすべてルートディレクトリの/filedaialogディレクトリに保存しますので、 新しく作成して置いてください。 サンプルのhtmlは以下のようになります。
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>リッチなサイトを作ろう|inetagency</title>
 <script type="text/javascript" src="/jquery/jquery.js"></script>
 <script type="text/javascript" src="/jquery/jquery-ui-1.7.2.min.js"></script>
 <script type="text/javascript" src="/ajax.js"></script>
 <link rel="stylesheet" href="/filedialog/filedialog.css" type="text/css">
 </head>
 <body>
 <script type="text/javascript" src="/filedialog/filedialog.js"></script>
 </body>
 </html>
  
jquery.jsとajax.jsはすでに学習したものを使用しますのでインクルードします。
12行目のスタイルシートと15行目のjavascriptがファイルダイアログ用のファイルですので今から作成して行きます。
javascriptが15行目に有るのは、行が重要なのではなく、</body>の直前に置くことが重要なのです。 通常javascriptは</head>の前に置く事が多いのですが、これはインクルードしたjavascriptを実行させないためです。 単に変数や関数を宣言して初期化する場合です。 対して<body>から</body>内にインクルードしたjavascriptはページをロードすると同時に実行させる物を起きます。 今回はダイアログ用のhtmlをjavascriptで出力しますので</body>の直前に置く必要が有るのです。
それでは最初のステップ「モーダルなダイアログ」の作成です。 ほとんどのhtmlのコードをjavascriptで記述しますので/filedialog/filedialog.jsを作成してください。 同時にダイアログをデザインするスタイルシート/filedialog/filedialog.cssも必要です。
まずは、ダイアログの表示をfiledialog.jsに記述して行きます。
  var filedialog_width = $(window).width();
 var filedialog_height = $(window).height();
 var filedialog_html = '\
 <div id="filedialog_overlay">\
 	<div id="filedialog" style="left:'+(filedialog_width-800)/2+'px;\
 		top:'+(filedialog_height-600)/2+'px;">\
 		<div id="filedialog_titlebar">\
 			<div id="filedialog_left_top"> </div>\
 			<div id="filedialog_caption">ファイルダイアログ</div>\
 			<div id="filedialog_right_top"> </div>\
 		</div>\
 		<div id="filedialog_toolbar"></div>\
 		<div id="filedialog_body">\
 			<div id="filedialog_treeview">ディレクトリツリー</div>\
 			<div id="filedialog_dirview">ファイル一覧</div>\
 		</div>\
 		<div id="filedialog_statusbar">\
 		</div>\
 	</div>\
 	<iframe name="filedialog_dummyframe" id="filedialog_dummyframe"></iframe>\
 </div>\
 ';
 filedialog_html.replace(/[\r\n\t]/, "");
 document.write(filedialog_html);
  
最初の1行目と2行目はjQueryから現在開いているブラウザの幅と高さを取得しています。
ここで注目すべきは、3行目から22行目のhtmlの記述です。 javascriptは複数行の記述をサポートしていませんので、行の最後にバックスラッシュを入れ、 改行文字を無効にすることで1行と判断させているのです。 いかがですか、1行ごとに書くより非常に見やすいですね。
各idの名称が長いのは、汎用ですので他のシステムと重複しない工夫です。
23行目はコードを見やすくするためのインデントで使用したタブ(\t)や改行コード(\r\n)を削除しています。

このhtmlにはデザイン的な要素は含みません。デザインは全てfiledialog.cssに記述します。
  #filedialog_overlay {
 	/*
 	*	ダイアログ表示中は他の操作を禁止するためのフレーム
 	*	(モーダルウィンドウ)
 	*	透過のPNG画像を使用することで簡単に実現する
 	*/
 	position: fixed;
 	top: 0px;
 	left: 0px;
 	height:100%;
 	width:100%;
 	background:url(/eki/overlay.png) 0 0 repeat;
 }
 #filedialog {
 	/*
 	*	ダイアログ本体
 	*/
 	position: fixed;
 	width:800px;
 	height:600px;
 	display:block;
 	font-size:12px;
 }
 #filedialog_titlebar {
 	height:24px;
 }
 #filedialog_left_top {
 	/*
 	*	タイトルバーの左角
 	*/
 	float:left;
 	width:24px;
 	height:24px;
 	background:url(images/left_top.png); #008;
 }
 #filedialog_caption {
 	/*
 	*	タイトルバーの文字(キャプション)
 	*/
 	float:left;
 	line-height:24px;
 	background:url(images/cobaltblue24.jpg); #008;
 	color:#fff;
 	padding-left:10px;
 	width:742px;
 	font-weight:bold;
 }
 #filedialog_right_top {
 	/*
 	*	タイトルバーの右角
 	*/
 	float:right;
 	width:24px;
 	height:24px;
 	background:url(images/right_top.png); #008;
 }
 #filedialog_toolbar {
 	/*
 	*	コマンドボタン等を配置したツールバー
 	*/
 	border:#888 solid 1px;
 	height:38px;
 	background:url(images/Toolbar.jpg); #008;
 }
 #filedialog_body {
 	/*
 	*	ツリービューとディアビューの表示領域
 	*/
 	width:798px;
 	height:502px;
 	background-color:#e8e8e8;
 	border:#aaa solid 1px;
 	border-top:#fff solid 1px;
 }
 #filedialog_treeview {
 	/*
 	*	ディレクトリの構造をツリー形式で表示
 	*/
 	float:left;
 	margin-top:4px;
 	margin-left:5px;
 	padding:5px;
 	border:#aaa solid 1px;
 	background-color:#fff;
 	width:240px;
 	height:482px;
 	overflowauto;
 }
 #filedialog_dirview {
 	/*
 	*	ディレクトリ内のサブディレクトリやファイルの一覧
 	*/
 	float:right;
 	margin-top:4px;
 	margin-right:5px;
 	padding:5px;
 	border:#aaa solid 1px;
 	background-color:#fff;
 	width:520px;
 	height:482px;
 	overflowauto;
 }
 #filedialog_statusbar {
 	/*
 	*	選択ファイルやコマンドボタンのステータスバー
 	*/
 	height:30px;
 	line-height:24px;
 	border:#aaa solid 1px;
 	border-top:#fff solid 1px;
 	background-color:#ddd;
 }
 #filedialog_dummyframe {
 	/*
 	*	表面には表示されない、コマンド実行のための
 	*	ダミーのフレーム
 	*/
 	display:none;
 }
  
ここまでをテストするhtmlを書いておきます。
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>全てのページにコメントフォーム</title>
 <link rel="stylesheet" href="/commentform.css" type="text/css" />
 <link rel="stylesheet" href="/filedialog/filedialog.css" type="text/css" />
 <script type="text/javascript" src="/jquery/jQuery.js"></script>
 <script type="text/javascript" src="/ajax/ajax.js"></script>
 </head>
 <body>
 <table border="1" cellspacing="0" cellpadding="5" width="100%" summary="">
 	<tr><td colspan="2" height="60"> </td></tr>
 	<tr><td width="240" valign="top"> </td>
 		<td valign="top" height="500" style="padding:10px;font-size:12px;">
 			<br />
 			</td></tr>
 	<tr><td colspan="2" height="40"> </td></tr>
 </table>
 <script type="text/javascript" src="/filedialog/filedialog.js"></script>
 </body>
 </html>
  
このように表示されるはずです。

デフォルトでダイアログはブラウザの中央に表示され、黒く透過された背景の操作は行えません。
ダイアログですから必要に応じて表示されるのですが、開発中ですので完成するまでは便宜上常に表示させておきましょう。
Comment
$(this).corner("left");コメントに関するお約束

  1. ご意見、ご希望、ご質問など、何かありましたらご投稿ください。
  2. ご質問に対する回答は、分かる範囲でお答えしますが、お約束は出来ません。
  3. 投稿していただいたコメントはこのページに記載されます。
  4. コメントは各ページごとに独立しています。それぞれのテーマに沿ったコメントをお願いします。
  5. タグはいっさい使用できません。タグもそのまま表示されます。
  6. 印は必須です。ハンドル名でも結構ですのでご記入ください。
  7. パスワードを記入しておけばご自分の記事を削除できます。
  8. 当サイトにふさわしくないと判断した記事は管理者の独断で削除することがあります。
お名前
パスワード
件名

Enquete
このページの情報、記事はお役に立ちましたでしょうか?
はい いいえ どちらとも言えない

※ご意見が有ればどうぞ(公開されません)
更新履歴
10/07/26 Winテーマの変更
10/06/08 まだまだ使えるXP
10/06/02 jQueryテーマ...
10/05/25 Win7は業務に...
10/04/11 携帯位置情報取得
10/03/09 カレンダーの追加
10/03/01 サービス開始
有料サービス
  1. データ変換サービス
    番地まで記載されたテキスト形式の住所データをお持ちの場合、「緯度」、「経度」及び、 「最寄り駅」と座標、「最寄のインター」と座標の情報を追加したCSVデータを作成してお返しします。 座標付ですので簡単にGoogleマップに位置表示することができます。
    【例】
    名称 住所
    東京タワー 東京都港区芝公園4丁目2-8

    名称 住所 緯度 経度 沿線 最寄り駅 緯度 経度 高速名 インター 緯度 経度
    東京タワー 東京都港区芝公園4丁目2-8 35.6585873 139.7454247 都営大江戸線 赤羽橋 35.655007 139.743642 首都高速都心環状線 芝公園 35.6544767 139.745769
    ※住所データは必須です。電話番号では特定できません。

    費用は1件当たり、わずか32円。100件で3,200円、1000件でも32,000円です。
    追加される最寄り駅、最寄のインター共に直線距離で最も近いもの1件です。複数必要な場合はお問合せください。
  2. システム開発
    Googleマップや最寄り駅、最寄のインターを利用したWEBシステムを開発します。
    自社製品が全国どこで購入可能で、どの駅で降りれば1番近いのかなどをユーザにお知らせすることができ、販売促進にも貢献します。 また、ご自分の住所を指定して最も近い店舗を検索したり、距離を指定して範囲内の店舗を検索して地図を表示するシステムの開発もできます。
    もちろん、携帯版も可能です。
    携帯版はGIF形式の静止画ですのでキャリヤや機種を選びません。 ほぼ、全て機種で使用可能なシステムになります。

    携帯電話ですからWEBのようなパフォーマンスは望めませんが、 静止画でも地図の「縮小」、「拡大」をサポートします。
    お見積もりは「お問合せ」から、 ご希望の機能をできるだけ詳しくお書きいただき、お送りください。
  3. 最新のユーザインターフェースの導入
    現在注目を集めているAjaxやJavascriptを使用したハイセンスなインターフェースの導入をお手伝いします。
    jQueryプラグインのオーバーレイを複数使用した最先端のドキュメントの生成が可能になります。 また、オーバーレイやAjaxを使用する事で、無駄なリロードを減らすことができ、パフォーマンスも向上します。
お問合せフォーム
  1. 全てのお問合せはこちらの専用フォームをご使用ください。 もちろん、ご意見/ご希望でも結構です。
  2. システムに存在しない路線や、新たに開通した路線をご存知の場合はお知らせください。
  3. 有料サービスで新たなシステム開発のお見積もりをご希望の場合は、 出来る限りご希望の機能を詳しくお願いします。
  4. は必須項目です。必ずご記入ください。
お名前
フリガナ
Email
Email(確認) ※確認のためもう一度 (コピー禁止)
タイトル お問合せ お見積もり ご意見/ご希望
内容