SQL Server 実行されたSQL履歴確認

SQL Server DBで実行されたSQLを確認する
メモする

SELECT TOP 1000   
--作成時間  
QS.creation_time,   
--SQL文   
SUBSTRING(ST.text,(QS.statement_start_offset/2)+1,   
((CASE QS.statement_end_offset WHEN -1 THEN DATALENGTH(st.text)   
ELSE QS.statement_end_offset END - QS.statement_start_offset)/2) + 1   
) AS statement_text,   
--実行SQL文   
ST.text,   
--実行計画  
QS.total_worker_time,   
QS.last_worker_time,   
QS.max_worker_time,   
QS.min_worker_time   
FROM   
sys.dm_exec_query_stats QS   
--キーワード 
CROSS APPLY   
sys.dm_exec_sql_text(QS.sql_handle) ST   
ORDER BY   
QS.creation_time DESC 

仕事効率アップ!膨大なメールの中から目当てのメールを素早く見つける!Gmailの検索コマンド10選

Googleのフリーメール「Gmail」を使っています。
無料で簡単に取得出来ますし、容量も大きいですね。
僕の場合、複数Gmailアカウントと他ドメインのメールを纏めて、一つGmailアカウントに表示する事にしています。
数十万通の膨大なメールの中から目当てのメールを探すのは大変のことです。
Gmailはメール検索用のコマンドを用意しています。さすがGoogle!
今回はそんなGmailをもっと便利に使う為の、10個の検索コマンドをご紹介します。
iPhone、AndroidのGmailアプリにも使えます。

検索方法はGmailの検索ボックスにコマンドを入力します。
検索方法はGmailの検索ボックスにコマンドを入力します。
  • 未読メールのみ検索
    is:unreadと入力すると、未読メールを検索する。未読メールのみ表示されます。
  • 添付ファイル名を指定して検索
    filename:pngと入力すると、pngファイルが添付されているメールを検索する事が出来ます
    png部分を任意のキーワードに変更する事も可能です。(例:jpg、docやファイル名等)
  • 指定日付までのメールを検索
    before:YYYY/MM/DD形式で日付を入力すると、受信時間が指定した日付までのメールを検索する事が出来ます。
  • 指定日付後のメールを検索
    after:YYYY/NN/DD形式で日付を入力すると、受信時間が指定した日付後のメールを検索する事が出来ます。
  • 添付ファイルがあるメールのみ検索する
    has:attachmentと入力すると、添付ファイルがあるメールのみ検索する事が出来ます。
  • 送信者のメールアドレスに指定した文字列が含まれているメールを検索する
    from:abcと入力すると、送信者のメールアドレスに「abc」が含まれるメールを検索する事が出来ます。
    abc部分をgoogle.co.jpにすると、googleユーザーから送信のメールのみ検索する事も可能です。
  • OR検索
    2つの検索コマンドの間に「OR」を入力すると、「〜もしくは〜」という意味で、とちらの条件が成立しても検索されます。
  • AND検索
    2つの検索コマンドの間に半角スペースもしくは、「AND」を入力と、「〜且つ〜」という意味で全部条件を満たしたメールのみ検索されます。
  • NOT検索
    2つの検索コマンドの間に「」(マイナス)、若しくは「NOT」を含めると、「〜但し、〜を除いて」という意味で、前条件の検索結果から後条件のデータを除いて検索することです。
  • 完全一致検索
    検索コマンドを「」で囲うと、完全に一致したメールのみ検索する事が出来ます。”lunch meeting”と検索した場合、メールに「lunch meeting」が完全に含まれているメールのみ抽出する事が可能です。
    「lunch」と「meeting」の単語が混ざったメールは検索結果として表示されません。

phpファイルアップロードサーバー保存

この前「Jqueryを使ってHTML5ドラッグ&ドロップファイルアップロード」を紹介しました。
http://www.it-view.net/drag-and-drop-file-upload-jquery-178.html

質問に対してクライアントからアップロードされたファイルをサーバーに保存する方法を紹介します。
今回はphpでサーバーにファイル保存方法を説明します。

クライアントのソースは「Jqueryを使ってHTML5ドラッグ&ドロップファイルアップロード」のままで利用できます。

使用する関数の説明

☆is_uploaded_file&move_uploaded_file☆
サーバーには、主にphpのis_uploaded_file関数とmove_uploaded_file関数を使用してファイルをサーバーに保存します。
・is_uploaded_file関数はHTTP POST でアップロードされたファイルかどうかを調べる。
・move_uploaded_file関数はアップロードされたファイルを新しい位置に移動する。

関数の詳細使い方と説明を下記phpオフィシャルページを参考してください。
is_uploaded_file:http://php.net/manual/ja/function.is-uploaded-file.php
move_uploaded_file:http://php.net/manual/ja/function.move-uploaded-file.php

move_uploaded_fileにはファイル保存場所の指定が必要ですので、phpファイルと同じ場所にfilesフォルダを作成し、書き込み権限を与えて置きましょう。

☆$_FILES☆
クライアントから送信されたファイル情報は$_FILESというグローバル配列に格納されます。
phpが自動的に値をセットしてくれます。
クライアントのjavascriptより”file”をキーとして$_FILESに保存されます。

fd.append('file', files[i]);

$_FILES[“file”][“tmp_name”]はPHPによって一時的に作成されたアップロードファイルの名前です。
$_FILES[“file”][“name”]はアップロードされたファイルのオリジナルのファイル名です。オリジナル名をfilesフォルダに保存します。

プログラム作成

クライアントから送信されたデータを受け取るphpプログラムを作成します。

<?php

if (is_uploaded_file($_FILES["file"]["tmp_name"])) {
  if (move_uploaded_file($_FILES["file"]["tmp_name"], "files/" . $_FILES["file"]["name"])) {
    echo $_FILES["file"]["name"] . "をアップロードしました。";
  } else {
    echo "ファイルをアップロードできません。";
  }
} else {
  echo "ファイルが選択されていません。";
}

?>

また、chmod関数を使って、サーバーに保存されたファイルの権限を修正できます。

chmod("files/" . $_FILES["file"]["name"], 0644);

以上、phpでサーバーにファイルを保存する方法でした。
–EVERY LITTLE MAKES–

DataTableとリストの互換、パフォーマンス計測

DataTableからリスト(List)に変換する時のパフォーマンスを比較して見ました。
比較したのはJsonConvertクラスのSerializeとDeserializeメソッドでリストにコンバート、
とリフレクションでリストにコンバートです。

先ずは100列、5000行があるDataTableを作りましょう。

var dt = new DataTable();
for (var i = 1; i <= 100; i++)
{
    dt.Columns.Add("Column" + i.ToString());
}

for (var j = 0; j < 5000; j++)
{
    var dr = dt.NewRow();
    for (var i = 1; i <= 100; i++)
    {
        dr["Column" + i.ToString()] = "abcdefghijklmnopqrstuvwxyz";
    }
    dt.Rows.Add(dr);
}

DataTableのColumns.Addを使ってカラムを追加、NewRow()メソッドで行を作成します。

JsonConvertを利用してリストにコンバートして見ましょう。
JsonConvert.DeserializeObject>(JsonConvert.SerializeObject(dt));
5000件だと約1.8秒がかかりますね。

では、リフレクションで変換します。

private List<T> ConvertToList<T>(DataTable dt)
{
    var columnNames = dt.Columns.Cast<DataColumn>()
        .Select(c => c.ColumnName)
        .ToList();

    var properties = typeof(T).GetProperties();

    return dt.AsEnumerable().Select(row =>
        {
            var objT = Activator.CreateInstance<T>();

            foreach (var pro in properties)
            {
                if (columnNames.Contains(pro.Name))
                    pro.SetValue(objT, row[pro.Name]);
            }

            return objT;
        }).ToList();

}

結果は約1.1秒です。
CPUよりスピードがかわると思いますが、まあ、リフレクションのほうが速いことが分かりました。
大体2倍弱速いですね。

リストからDataTableに変換する

リストからデータテーブルに変換する方法です。
上記メソッドの逆バージョンですね。

private DataTable CreateDataTable<T>(IEnumerable<T> list)
{
    Type type = typeof(T);
    var properties = type.GetProperties();      

    DataTable dataTable = new DataTable();
    foreach (PropertyInfo info in properties)
    {
        dataTable.Columns.Add(new DataColumn(info.Name, info.PropertyType));
    }

    foreach (T entity in list)
    {
        object[] values = new object[properties.Length];
        for (int i = 0; i < properties.Length; i++)
        {
            values[i] = properties[i].GetValue(entity);
        }

        dataTable.Rows.Add(values);
    }

    return dataTable;
}

★3週間toeic単語制覇★
1. Office matters オフィス関連

【3週間toeic単語制覇】シリーズはTOEIC試験に頻出単語を整理し、作成した無料単語帳です。
使用シーンで単語をグループ分けます、記憶しやすいと思います。
1~2日/シーン記憶おすすめです。

1 appointment
/əpˈɔɪntmənt/
1.(日時、場所、訪問、診察などの)約束、予約、アポイントメント
例1:meet a person by appointment 約束して人に会う.
例2:I have an appointment to see the doctor. 医者に診てもらう予約がある。
2.指名、任命、任用
例1:the appointment of a teacher 教師の任命
例2:take up an appointment 就任する
2 attendance
/əténdəns/
1.出席、出勤、参会、参列
例:regular attendance 精勤
2.出席者数、出席者
例:There was a large attendance at the ceremony. その式には参列者が多かった。
3 cabinet
/kˈæb(ə)nɪt/
1.飾り棚、飾りだんす、キャビネット 《貴重品などを収め、また陳列する》
例:filing cabinet 書類整理棚
2.内閣
例:shadow cabinet 影の内閣
4 calendar
/kˈæləndɚ/
カレンダー、日程表、年中行事表; 年次目録; 一覧表
例:put a bill on the calendar. 議案を日程にのせる。
5 clerk
/klˈɚːk/
(官庁の)書記、事務官、吏員・(銀行・会社の)事務員、社員、行員
例:a bank clerk 銀行員
6 directory
/dəréktəri/
(特定の地区などの)住所氏名録; 商工人名録
例:a telephone directory 電話帳
7 duplicate
/d(j)úːplɪkət/
1.[形容詞] 重複の、複製の
例:a duplicate key 合いかぎ
2.[名詞] 写し、複製、複写; 複製物
3.[動詞]〈…を〉複製する
8 filing
/fáɪlɪŋ/
とじ込み、書類整理
9 in-tray
〈書類が〉未決(の)
10 out-tray
〈書類が〉既決(の)
11 monitor
/mάnəṭɚ/
1.[名詞]モニター、監視用画面/装置
2.[動詞]〈…を〉監視する
例:monitor a child’s progress. 子供の進み具合を監視する。
12 partition
/pɑɚtíʃən/
1.[名詞]仕切り、区画
例:a glass partition ガラスの仕切り壁
2.[動詞]〈…に〉分割する、区画する
例:partition a room into two small rooms. 部屋を小さな2部屋に分ける。
13 postage
/póʊstɪdʒ/
郵送料
例:postage due 郵税不足
14 punctuality
/p`ʌŋ(k)tʃuˈæləṭi/
時間厳守
例:to enforce punctuality 時間を励行する
15 schedule

1.予定(表)、スケジュール
例:a publishing schedule 出版予定
2.〈…を〉予定する
例:The match is scheduled for Monday. 試合は月曜に予定されている。
16 shift
/ʃíft/
1.〈…を〉移す、転じる
例:We shifted the bookcase around. 我々は本箱をあちこち移し変えた。
2.変化、変更、転換
例:a shift in policy 政策の変更
17 staff
/stˈæf/
職員、スタッフ
例:a staff of thirty people 30名の職員
18 strike
/strάɪk/
1.〈…を〉打つ、たたく、殴る
例:He struck the ball. 彼はボールを打った。
2.〈操業を〉一時停止する; 〈工場に対して〉ストに入る
19 task
/tˈæsk/
仕事、務め
例:an easy task 容易な仕事
20 workforce
/wɝ́kfɔ̀rs/
全従業員、労働(力)人口
例:The whole workforce is on strike. 全従業員がスト中である。
21 assignment
/əsάɪnmənt/
割り当てられた仕事; (任命された)職、地位
例:give an assignment 宿題を出す。
22 bulletin
/bˈʊlətn/
公報; 報告、告示
例:a flash news bulletin ニュース速報

23 calculator
/kælkjəˌletɚ/
電卓, 計算器
例:a programmable calculator プログラム電卓
24 carbon copy
/kάɚb(ə)n/
(カーボン紙による)写し、カーボンコピー
25 colleague
/kάliːg/
同僚
26 document
/dάkjʊmənt/
1.文書、書類、記録、文献
例:an official [a public] document 公文書
2.〈…を〉文書で証明する
27 extension
/ɪksténʃən/
1.[名詞]拡張; 延長
例:the extension of one’s house 家の増築
2.[名詞](電話の)内線
例:May I have Extension 363, please? 内線 363 番をお願いします。
3.[形容詞]継ぎ足しの; 伸縮自在の
例:an extension ladder 繰り出し式はしご
28 intercom
/ínṭɚkὰm/
内部通話(装置), インターホン
例:over the intercom インターホンで
29 memo
/mémoʊ/
メモ
例:a memo pad メモ帳
30 operator
/άpərèɪṭɚ/
(機械の)運転者、操作員; 技師、オペレーター
例1:a computer operator コンピューターのオペレーター
例2:a tour operator 旅行業者
31 overtime
/óʊvɚtὰɪm/
1.時間外労働、残業
例:do [be on] overtime 残業をする.
2.規定時間を超えた
例:overtime parking 駐車時間オーバー
32 portfolio
/pɔɚtfóʊliòʊ/
折りかばん、書類入れ
33 printed matter
/prɪ́ntəd/ /mˈæṭɚ/
印刷物
34 receptionist
/‐ʃ(ə)nɪst/
受付係、フロント係
35 secretary
/sékrətèri/
秘書、事務官
例:an executive secretary 重役付き秘書
36 shorthand
/ʃɔ́rthæ̀nd/
速記
例:take shorthand 速記をとる
37 stapler
/stéɪpəlɚ/
ステープラー
38 tardy
/tάɚdi/
1.のろい、遅い
例:He was tardy in his response. 彼は返答をしぶった。
2.遅刻した
例:He was tardy to school [for supper]. 彼は学校に[夕食に]遅れた。
39 typist
/tάɪpɪst/
タイピスト
例:I’m a very fast typist. 私はタイプを打つのがとても速いです。
40 xerox
/zí(ə)rɑks/
ゼロックスによる複写
例:The xerox machine is not working. 複写機は停止中である。

その他単語
1.Office matters オフィス関連
2.Personner & Management 人事と管理 (作成中)
3.Business Development 事業開発(作成中)
4.Finance & Investment 金融と投資(作成中)
5.Commerce 貿易(作成中)
6.Business Meeting & Negotiation 商談会と交渉(作成中)
7.Technology & Equipment 技術と設備(作成中)
8.computer コンピュータ(作成中)
9.Business Correspondence & Advertisement 商業通信と広告(作成中)
10.Travel 旅行(作成中)
11.Transportation(Air,Ocean,Land) 運送(空、海、陸)(作成中)
12.shopping 買い物(作成中)
13.Dinning out 外食 (作成中)
14.Social Contact 社交(作成中)
15.Entertainment & Mass Media 娯楽とマスメディア(作成中)
16.Sports & Recreational Activities スポーツとレクリエーション活動(作成中)
17.Medicine & Insurance 医療と保険(作成中)
18.Housing 住宅(作成中)
19.Feelings ,Emotions,Attitudes,&Sensations 感覚、情緒、態度と知覚 (作成中)
20.Other important Nouns & Verbs そのた重要な名詞と動詞 (作成中)

Jqueryを使ってHTML5ドラッグ&ドロップファイルアップロード

今のプロジェクトでドラッグ&ドロップでブラウザファイルアップロードの機能がいる。
検索してみたらたくさん方法が出てきます。その中一番いいと思うのはJqueryを使ってファイルアップロード。
とても勉強になりました、英語のページを翻訳して、ここに転載します。

原文はこちら

これに対してサーバー側のファイル保存について、下記リンクを参照してください。
phpサーバーアップロードファイル保存

*****以下は翻訳内容です*****

jQueryドラッグ&ドロップファイルアップロードの例で、HTML5およびjQuery AJAX APIを使用して、ドラッグ・アンド・ドロップ・ファイル・アップロードを実現する方法について説明しました。
ドラッグ&ドロップはHTML5をサポートするブラウザのみ使えます。
サポートされたブラウザは次のとおりです: IE 10+、Firefox、Chrome、Safari、Opera
live-demo
drag-and-drop-file-upload-jquery

上記のイメージで示されるようにドラッグ&ドロップファイルをアップロードさせるステップに従ってください。

ステップ1、jQueryライブラリをHTMLに引用

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

ステップ2、divタグをアップロード処理したいの所に追加

<div id="dragandrophandler">ここにドロップしてください。</div>

アップロードのdivタグに下記のようなCSSを適用します。

#dragandrophandler
{
border:2px dotted #0B85A1;
width:500px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}

ステップ3、jQueryでドラッグ&ドロップイベントをハンドル

var obj = $("#dragandrophandler");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
     handleFileUpload(files,obj);
});

ファイルがdivの外でドロップされた場合、ブラウザで開いてしまいます。それを避けるため、documentの「ドロップ」イベントを防ぐ。

$(document).on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{
  e.stopPropagation();
  e.preventDefault();
  obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});

ステップ4、ファイルがドロップされた時に、HTML5のFormData()を使って、ファイルの中身を読み

function handleFileUpload(files,obj)
{
   for (var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('file', files[i]);
 
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name,files[i].size);
        sendFileToServer(fd,status);
 
   }
}

ステップ5、jQuery AJAX APIを使って、FormData()をサーバーに送信

function sendFileToServer(formData,status)
{
    var uploadURL ="http://hayageek.com/examples/jquery/drag-drop-file-upload/upload.php"; //Upload URL
    var extraData ={}; //Extra Data.
    var jqXHR=$.ajax({
            xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                    xhrobj.upload.addEventListener('progress', function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //Set progress
                        status.setProgress(percent);
                    }, false);
                }
            return xhrobj;
        },
        url: uploadURL,
        type: "POST",
        contentType:false,
        processData: false,
        cache: false,
        data: formData,
        success: function(data){
            status.setProgress(100);
 
            //$("#status1").append("File upload Done<br>");           
        }
    }); 
 
    status.setAbort(jqXHR);
}

まとめる

以上ステップのソースを纏めって、ドラッグ&ドロップファイルアップロードのサンプルは下記のようになります。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#dragandrophandler
{
border:2px dotted #0B85A1;
width:500px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}
.progressBar {
    width: 200px;
    height: 22px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}
 
.progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5; border-radius: 3px; 
}
.statusbar
{
    border-top:1px solid #A9CCD1;
    min-height:25px;
    width:700px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
}
.statusbar:nth-child(odd){
    background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
    background-color:#A8352F;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
    color:#fff;
    font-family:arial;font-size:13px;font-weight:normal;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
    }
</style>
</head>
 
<body>
<div id="dragandrophandler">ここにドロップしてください。</div>
<br><br>
<div id="status1"></div>
<script>
function sendFileToServer(formData,status)
{
    var uploadURL ="http://hayageek.com/examples/jquery/drag-drop-file-upload/upload.php"; //Upload URL
    var extraData ={}; //Extra Data.
    var jqXHR=$.ajax({
            xhr: function() {
            var xhrobj = $.ajaxSettings.xhr();
            if (xhrobj.upload) {
                    xhrobj.upload.addEventListener('progress', function(event) {
                        var percent = 0;
                        var position = event.loaded || event.position;
                        var total = event.total;
                        if (event.lengthComputable) {
                            percent = Math.ceil(position / total * 100);
                        }
                        //Set progress
                        status.setProgress(percent);
                    }, false);
                }
            return xhrobj;
        },
    url: uploadURL,
    type: "POST",
    contentType:false,
    processData: false,
        cache: false,
        data: formData,
        success: function(data){
            status.setProgress(100);
 
            $("#status1").append("File upload Done<br>");         
        }
    }); 
 
    status.setAbort(jqXHR);
}
 
var rowCount=0;
function createStatusbar(obj)
{
     rowCount++;
     var row="odd";
     if(rowCount %2 ==0) row ="even";
     this.statusbar = $("<div class='statusbar "+row+"'></div>");
     this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
     this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
     this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
     this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
     obj.after(this.statusbar);
 
    this.setFileNameSize = function(name,size)
    {
        var sizeStr="";
        var sizeKB = size/1024;
        if(parseInt(sizeKB) > 1024)
        {
            var sizeMB = sizeKB/1024;
            sizeStr = sizeMB.toFixed(2)+" MB";
        }
        else
        {
            sizeStr = sizeKB.toFixed(2)+" KB";
        }
 
        this.filename.html(name);
        this.size.html(sizeStr);
    }
    this.setProgress = function(progress)
    {       
        var progressBarWidth =progress*this.progressBar.width()/ 100;  
        this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
        if(parseInt(progress) >= 100)
        {
            this.abort.hide();
        }
    }
    this.setAbort = function(jqxhr)
    {
        var sb = this.statusbar;
        this.abort.click(function()
        {
            jqxhr.abort();
            sb.hide();
        });
    }
}
function handleFileUpload(files,obj)
{
   for (var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('file', files[i]);
 
        var status = new createStatusbar(obj); //Using this we can set progress.
        status.setFileNameSize(files[i].name,files[i].size);
        sendFileToServer(fd,status);
 
   }
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
     handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{
  e.stopPropagation();
  e.preventDefault();
  obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
 
});
</script>
</body>
</html>

jQuery UIのインストールと使い方紹介

jQuery UIjQueryを基に構築された公式JavaScriptのライブラリです。
マウスベースのインタラクションやアニメーション、テーマを適用可能なダイアログや日付Datepickerといったウィジェットが提供される。
jQuery UIを利用して、簡単に機能豊富のウェブページを作れます。

オフライン利用

オフライン利用のため、ローカルにダウンロードが必要です。
ここからダウンロードします。
バージョンと使う機能、及びテーマを選べます。
jqueryui-intro1
jqueryui-intro2
jQuery UIはいろいろテーマを提供しています。
http://jqueryui.com/themeroller/
jqueryui-intro3

ダウンロードしたファイルを引用します。
jQueryベースですので、jQueryの引用も必要です。

<!--jQuery-->
<script src="js/jquery-1.10.2.js"></script>
<!--jQuery UI-->
<script src="js/jquery-ui-1.10.4.js"></script>
<!--jQuery UI theme-->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.css" type="text/css" />

オンライン

jQueryとjQuery UI両方ともダウンロードせず、直接URL引用してオンラインで使えます。

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css" type="text/css" />

オンラインもいろいろテーマを使えます。使えるテーマを纏めます。代表的なカレンダーで配色パターンを例とします。

Black Tie

http://code.jquery.com/ui/1.10.3/themes/black-tie/jquery-ui.min.css

jqueryui-theme-BlackTie
Blitzer

http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.min.css

jqueryui-theme-Blitzer
Cupertino

http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css

jqueryui-theme-Cupertino
Dark Hive

http://code.jquery.com/ui/1.10.3/themes/dark-hive/jquery-ui.min.css

jqueryui-theme-DarkHive
Dot luv

http://code.jquery.com/ui/1.10.3/themes/dot-luv/jquery-ui.min.css

jqueryui-theme-DotLuv
Eggplant

http://code.jquery.com/ui/1.10.3/themes/eggplant/jquery-ui.min.css

jqueryui-theme-Eggplant
Flick

http://code.jquery.com/ui/1.10.3/themes/flick/jquery-ui.min.css

jqueryui-theme-flick
Hot Sneaks

http://code.jquery.com/ui/1.10.3/themes/hot-sneaks/jquery-ui.min.css

jqueryui-theme-hotSneaks
Humanity

http://code.jquery.com/ui/1.10.3/themes/humanity/jquery-ui.min.css

jqueryui-theme-Humanity
Le frog

http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.min.css

jqueryui-theme-lefrog
Mint choc

http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.min.css

jqueryui-theme-MintChoc
Overcast

http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.min.css

jqueryui-theme-overcast
Pepper ginder

http://code.jquery.com/ui/1.10.3/themes/pepper-grinder/jquery-ui.min.css

jqueryui-theme-peppergrinder
Redmond

http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.min.css

jqueryui-theme-redmond
Smoothness

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css

jqueryui-theme-smoothness
South street

http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.min.css

jqueryui-theme-SouthStreet
Start

http://code.jquery.com/ui/1.10.3/themes/start/jquery-ui.min.css

jqueryui-theme-start
Sunny

http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.min.css

jqueryui-theme-sunny
Swanky purse

http://code.jquery.com/ui/1.10.3/themes/swanky-purse/jquery-ui.min.css

jqueryui-theme-SwankyPurse
Excite bike

http://code.jquery.com/ui/1.10.3/themes/excite-bike/jquery-ui.min.css

jqueryui-theme-ExciteBike
Trontastic

http://code.jquery.com/ui/1.10.3/themes/trontastic/jquery-ui.min.css

jqueryui-theme-Trontastic
ui-lightness

http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.min.css

ui-lightness
ui-darkness

http://code.jquery.com/ui/1.10.3/themes/ui-darkness/jquery-ui.min.css

jqueryui-theme-uidarkness
Vader

http://code.jquery.com/ui/1.10.3/themes/vader/jquery-ui.min.css

jqueryui-theme-Vader

機能&使い方

1.タブメニューの作成
jquery-ui-tabs-normal

jQuery UIを使ってタブメニューを作成

基本のJavaScriptとCSSだけでタブメニューを作成のは大変面倒くさいです。
jQuery UIを利用して、簡単にタブメニューを作成の方法を紹介します。
シンプルのタブから、いろいろカスタマイズも説明します。

jQueryとjQuery UIのインストールはここを参照してください。

1、基本のタブメニューを作成

先ず、こんな形HTMLを準備してください。作成したいタブ数で<li>タグを書きます。
各<li>に対応する<div>も書きます。
<a>の属性hrefの値と<div>のidが一致しないといけないことを注意してください。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">日本酒</a></li>
    <li><a href="#tabs-2">焼酎</a></li>
    <li><a href="#tabs-3">ビール</a></li>
  </ul>
  <div id="tabs-1">
    <p>・獺祭<br/>・十四代<br/>・久保田</p>
  </div>
  <div id="tabs-2">
    <p>・佐藤<br/>・魔王<br/>・百年の孤独</p>
  </div>
  <div id="tabs-3">
    <p>・朝日<br/>・YEBISU<br/>・麒麟</p>
  </div>
</div>

tabs()函数をコールして、タブを生成します。
HTMLロード時にタブ生成するため下記JavaScriptを実行させます。

$("#tabs").tabs();

これで、タブメニューが生成されました。

jquery-ui-tabs-normal
jQueryUIで作成したタブ

2、折り畳めるタブを作成

tabs()函数を使用時に、オプションがサポートされます。
collapsible: trueを指定して、折り畳めるタブを作成できます。

$("#tabs").tabs({
collapsible: true
});

タブメニューを二度クリックしてタブの折り畳みと展開の切替できます。

3、マウスオーバーでタブを切替

デフォルトはクリックでタブを切替する。
event: “mouseover”を指定して、マウスオーバーでタブを切替になります。

$("#tabs").tabs({
event: "mouseover"
});

4、順番が変えれるタブメニュー

マウスでタブをドラッグ&ドロップしてタブの順番を変えます。

var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
  axis: "x",
  stop: function() {
	tabs.tabs( "refresh" );
  }
});

5、タブメニューを底部表示

タブメニューを中身の底部で表示させます。
JavaScriptでDOMを操作します。
タブのクラス(ui-tabs-nav)でタブを取得してappendToを使って底部に移動します。
これだけタブの丸角は上のままになっていますので、ui-corner-bottomのクラスを追加して丸角を底部に変更します。
JavaScriptはこんな感じです。

$( "#tabs" ).tabs();
// classでタブを探す、上の丸角を直角に、下の直角を丸角に変更する
$( "#tabs .ui-tabs-nav, #tabs .ui-tabs-nav > *" )
  .removeClass( "ui-corner-all ui-corner-top" )
  .addClass( "ui-corner-bottom" );
// タブを下に移動する
$( "#tabs .ui-tabs-nav" ).appendTo( "#tabs" );

出来ました!

jquery-ui-tabs-buttom
タブを底部表示

6、横でタブメニューを表示

ちょっと工夫します、CSSで横メニューの仕様を調整します。

<style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>

javascriptでタブにclassを追加します

$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

出来たタブはこんな感じです。

jquery-ui-tabs-left
タブを横で表示

以上、jQueryUIを利用して、タブの作り方です。

HTML5のcanvasを使って映画「マトリックス」の文字落ちてくるかっこいい効果を実現

映画「マトリックス」の超かっこいいのシーン、ブラックのグランドで緑の文字は雨みたい落ちる、覚えていますか。
今日はHTML5のcanvasを使って、その効果を再現します。
効果はこちら↓

全画面表示はこちらです。

ソースは下記です。

<canvas id="q"></canvas>
<script type="text/javascript"> 
var s = window.screen; 
var width = q.width = s.width; 
var height = q.height = s.height; 
var letters = Array(256).join(1).split(''); 
var draw = function () { 
q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; 
q.getContext('2d').fillRect(0,0,width,height); 
q.getContext('2d').fillStyle='#0F0'; 
letters.map(function(y_pos, index){ 
text = String.fromCharCode(3e4+Math.random()*33); 
x_pos = index * 10; 
q.getContext('2d').fillText(text, x_pos, y_pos); 
letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10; 
}); 
}; 
setInterval(draw, 33); 
</script>

面白いと思ったら是非やってみてください。