「画像アップロードDB管理」 V 2.0
1、[機能概要]
ブラウザ(IE)とASP.NETとデータベース(SQLServer)で
画像(写真など)を管理して見ましょう。
厳格にデータベースに格納して、多くの写真などを分類したり、
コメントを入れたり、スマートに公開したり更新したりできます。
設定や使用する上において、パソコンやwebについての技術的知識も必要とします。
プログラムのソース付きなので、ASP.NETプログラミングに興味をお持ちの方におすすめします。
御自身のwebシステムに於いて、ファイルのアップロード機能やダウンロード機能を
実現したいとお考えの方にも助力となります。
2、[稼動環境]
・サーバー側
WINDOWS2000,WINDOWS2003,WINDOWS XP pro
IIS 5以上 & .NET Framework 2.0
SQLServer2000以上
・パソコン側
WINDOWS XP,WINDOWS2000
IE 5、 IE 6
※サーバーをお持ちでない方 m(__)m でも
「Visual Web Developer 2005 Express Edition」と
「SQL Server 2005 Express Edition」があれば大丈夫 (^_^)/
それらも お持ちでない方は、
Micro Soft のダウンロード・サイト「Visual Studio 2008 Express Editions」から、
「Visual Web Developer 2008 Express Edition」と
「SQL Server 2008 Express Edition」を
パソコンにインストールしてください。
(サーバーをお持ちでない方の設定方法も説明しますので御安心下さい。)サーバーをお持ちでない方の設定方法へ(*^_^*)
3、[サーバーを持っておられる方の設定方法]
@ダウンロードした「GAZOUkan_v2_0.LZH」を適当なフォルダーに展開して下さい。
A「README_画像管理.HTML」を開く・・・今、見ておられるのが、「README_画像管理.HTML」です(-_-メ)
BSQLServer に「gazou」というデータベース名のDBをcreateする。
展開したフォルダーにある「画像DBcre.txt」の以下の赤字の箇所を必要なら替えて使って下さい!
CREATE DATABASE [gazou] ON PRIMARY
( NAME = N'gazou', FILENAME = N'd:\gazouDB\gazou.mdf' , SIZE = 102400KB , MAXSIZE = 2GB, FILEGROWTH = 1024KB )
LOG ON
( NAME = N'gazou_log', FILENAME = N'd:\gazouDB\gazou_log.ldf' , SIZE = 15360KB , MAXSIZE = 2GB , FILEGROWTH = 10%)
COLLATE Japanese_CI_AS
CSQLServer の「gazou」というDBに「gazou_kanri」というテーブル名のTABLEをcreateする。
展開したフォルダーにある「画像DB管理テーブル.txt」を使って下さい!
DIIS に仮想フォルダー名「GAZOU」を用意して下さい。
展開したフォルダーにある「GAZOU」フォルダーの中にあるものを全て、仮想フォルダー「GAZOU」の中へコピーほうり込んで下さい。
Eその中の 「Web.Config」をメモ帳で開く。
以下の一行のDBへのコネクション・ストリングの指定行を
<add name="gazouConnectionString" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=gazou;User ID=sa;password=??????;" providerName="System.Data.SqlClient"/>
以下の一行のDBへのコネクション・ストリングの指定行と入れ替える。赤字の箇所のデータベース・サーバー名と ユーザー/パスワードを替えて下さい。
<add name="gazouConnectionString" connectionString="Data Source=データベース・サーバー名;Initial Catalog=gazou;User ID=sa;password=??????;" providerName="System.Data.SqlClient"/>
Fブラウザから 「画 像 管 理」メニュー を呼び出す。
※このurlのwebサーバー名は替えて下さいよ!
どうですか(・_・)? ブラウザで「画 像 管 理」メニューが実行されましたでしょう!!!!
4、[サーバーをお持ちでない方の設定方法]
@ダウンロードした「GAZOUkan_v2_0.LZH」を適当なフォルダーに展開して下さい。
A「README_画像管理.HTML」を開く・・・今、見ておられるのが、「README_画像管理.HTML」です(-_-メ)
BSQLServer に「gazou」というデータベース名のDBをcreateする。
展開したフォルダーにある「画像DBcre.txt」の以下の赤字の箇所を必要なら替えて使って下さい!
CREATE DATABASE [gazou] ON PRIMARY
( NAME = N'gazou', FILENAME = N'd:\gazouDB\gazou.mdf' , SIZE = 102400KB , MAXSIZE = 2GB, FILEGROWTH = 1024KB )
LOG ON
( NAME = N'gazou_log', FILENAME = N'd:\gazouDB\gazou_log.ldf' , SIZE = 15360KB , MAXSIZE = 2GB , FILEGROWTH = 10%)
COLLATE Japanese_CI_AS
CSQLServer の「gazou」というDBに「gazou_kanri」というテーブル名のTABLEをcreateする。
展開したフォルダーにある「画像DB管理テーブル.txt」を使って下さい!
DVisual Web Developerのメニュー「ファイル」−「Webサイトを開く」で、
展開したフォルダーにある「GAZOU」フォルダーを開く。
E 開けましたか・・・ 開けたら、
Web.Config を選択クリックして、以下の一行のDBへのコネクション・ストリングの赤字の箇所のユーザー/パスワードを必要なら替えて下さい。
<add name="gazouConnectionString" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=gazou;User ID=sa;password=??????;" providerName="System.Data.SqlClient"/>
次に、
menu.aspx を選択クリックして、「ブラウザで表示」アイコンか 「デバッグ開始」三角マークを クリックして下さい。
どうですか(・_・)? ブラウザで「画 像 管 理」メニューが実行されましたでしょうか????
5、[使用方法]
(画像管理メニュー サンプル画面)
画 像 登 録 ・・・・ 画像をアップロードしてDBに新規登録する処理
画 像 一 覧 & 更 新 ・・・・ アップロードした画像をDBから検索して一覧表示したり更新したりする処理
画 像 サムネイル&ダウンロード ・・・・ アップロードした画像をDBから検索してサムネイル表示したりダウンロードしたりする処理
(画像登録サンプル画面)
御自分で「システム分類(半角10文字ないし全角5文字)」と「キーCD(半角20文字ないし全角10文字)」を適当に決めて入力、「新規」ボタンを押して登録。
アップロード画像の最大サイズは 1M(メガ)バイト迄です。
(展開したフォルダーにある富士山.jpg, 富士山02.jpg, 海 1.jpg などをアップロード画像としてお試しいただけます・・・)
「更新(削除)許可パスワード」や「画像表示許可パスワード」を入力すれば、誤って更新・削除したり(>_<)、他人に見られたりする(^^;ことから保護できます。
(画像一覧サンプル画面)
「システム分類」と「キーCD」を入力、「検索」ボタンを押す。(「システム分類」に 下線文字 "_" を入力すれば、登録した全ての画像を表示できます。)
「システム分類」と「キーCD」に、例えば 「山」とか、「%山」とか一部の語句を入力して、「山」や「山歩き」とか、「富士山」や「あたたら山」とか・・・まとめて検索できます(^_^)。
(画像サムネイル・サンプル画面)
「システム分類」と「キーCD」を入力、「検索」ボタンを押す。(「システム分類」に 下線文字 "_" を入力すれば、登録した全ての画像を表示できます。)
「システム分類」と「キーCD」に、例えば 「山」とか、「%山」とか一部の語句を入力して、「山」や「山歩き」とか、「富士山」や「あたたら山」とか・・・まとめて検索できます(^_^)。
6、[高度な活用方法](webサーバーを持っておられる方へ)
「画 像 一 覧 & 更 新」の画面には、各行の画像ごとに画像更新用の「選択」ボタンが有ります。
この「選択」ボタンをクリックすると、「画 像 登 録」の画面がポップアップで開き、画像更新できます。
そして、この「画 像 登 録」の画面を その「閉じる」ボタンで閉じると、自動的に「画 像 一 覧 & 更 新」の画面がリフレッシュされて最新画像が表示されるようにしています。
(画面右上のXで閉じた場合はリフレッシュしてません)
この事は、
他の任意のwebシステムのブラウザ画面のJavaScriptから、「画 像 登 録」の画面を以下の様に呼び出して 画像アップロード・ツールとして活用できる事を示唆しています。
window.open("http://webサーバー名/GAZOU/touroku.aspx?openersw=1&bunrui=山&keycd=富士山&koushinsya=更新者(任意の名前など)&koushinmsg=更新メッセージ(任意の内容)","abcxyz","top=0,left=0,width=680,height=500,scrollbars=yes,toolbar=no,location=no,directories=no,status=no");
但し、他の任意のwebシステムのwebサーバーと 「画像アップロードDB管理」のwebサーバー名が異なるサーバーであるケースでは、
「画 像 登 録」の画面を その「閉じる」ボタンで閉じると伴に自動で、他の任意のwebシステムのブラウザ画面に画像を最新画像表示することは困難ですので、
例えば、他の任意のwebシステムのブラウザ画面の方のJavaScriptのonmouseoverイベントなどで <imgタグを書き換えてリフレッシュしてやるなどの工夫をして下さい。
又、他の任意のwebシステムのブラウザ画面に画像を表示するには HTMLの<imgタグで以下の様にします。
<img src='http://webサーバー名/GAZOU/gazou_out.aspx?bunrui=山&keycd=富士山'></img>
「画像表示許可パスワード」が設定されてる画像には、以下のようにurl引数 sansyoupwd= でパスワードを指定
<img src='http://webサーバー名/GAZOU/gazou_out.aspx?bunrui=山&keycd=富士山&sansyoupwd=パスワード'></img>
又、他の任意のwebシステムのブラウザ画面から 「画 像 一 覧 & 更 新」の画面を以下の様にリンク呼び出すこともできます。
<a href='http://webサーバー名/GAZOU/gazou.aspx?bunrui=山&keycd=&koushinsya=更新者(任意の名前など)&koushinmsg=更新メッセージ(任意の内容)' target=_blank>山 の 画 像 一 覧</a>
その他、
指定の「システム分類」と「キーCD」の画像が登録有るかを調べるには 以下のurlをXMLHTTPリクエストして戻り値(0は無し、1は有り)で判断。
http://webサーバー名/GAZOU/touroku_arinasi.aspx?bunrui=山&keycd=富士山
指定の「システム分類」と「キーCD」の画像の登録を削除するには 以下のurlをXMLHTTPリクエスト。戻り値(0は削除しようとしたが無い、1は削除成功、Eはなんらかの原因で削除できなかった)
http://webサーバー名/GAZOU/sakujyo_gazou.aspx?bunrui=山&keycd=富士山
7、[あとがき]
「このソフトの著作権は、作者にあります。
このソフトの使用によって生じたいかなる損害も保証しません。」
ソースを改変したりして御自由にご活用ください。
なんでも質問やご意見・お気づきの点などありましたら、
作者へメール
まで、お知らせ下さい。(*^_^*)
8、[更新履歴]
新規 V1.0 2009.02.03
メンテV2.0 2009.05.20
・画 像 サムネイル の画面 の 改良
@各画像に「ダウンロード」ボタンを付けて
ダウンロードできるようになりました。
(但し、「画像表示許可パスワード」を設定して登録した画像には
「ダウンロード」ボタンは付けていません)
ダウンロード・ファイル名は、
BUNRUI=分類名_KEYCD=keycd名.元の拡張子
になります。
漢字の分類名やkeycd名もOK!
(なぜか「Visual Web Developer 2005 Express Edition」版では
漢字化けm(__)mします・・・しかし、それをIISの仮想フォルダーへ置けば化けません)
Aサムネイル表示のときの画面のチラツキを無くした。
B画像ごとに、その分類名とkeycd名も表示。
(だから、ALT=によるメモ表示はヤメタ)
C各画像をクリックしたら元の画像サイズで表示。又、登録してあるコメントも表示。
(再度クリックしたらサイズ戻る、トグルになっています)