VB.NET-TIPS などプログラミングについて

2020/05/20

JavaScript jQueryでモーダルウインドウ風の表示をする方法（css:display, css:z-index, fadeIn, fadeOut）

画面全体が暗くなり、画面の中央にウインドウが表示されるサイトをよく見かけますが、これを実現してみます。

方法自体は難しくなく、ウインドウとなる領域を div タグで表示し、その div 領域を表示・非表示の処理を行います。（「display」属性を「block」(表示)、または「none」(非表示)に設定します。）

ウインドウの周りに全体的に暗い領域を作るために、上記の div タグをさらにラップする div タグを設けます。
全体の div タグの大きさを画面全体とし、背景色を薄い黒色にします。ウインドウの div タグは大きさを適当に決め背景色を白色にします。

更に HTML 要素の表示重なりを決める z-index をウインドウの div タグの方を、全体の div タグの z-index より大きい値にします。こうするとウインドウの div タグが上に表示されます。
今回のデモ HTML ファイル側のソースを以下に示します。

■ブロック領域を表示・非表示にすることでモーダルウインドウ風

<html>
<head>
<meta charset="utf-8">
<title>test modal</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
// モーダルウインドウ表示
function displayModal() {
    $('.modal').css('display', 'block');
}
// モーダルウインドウ非表示
function closeModal() {
    $('.modal').css('display', 'none');
}
</script>

<style>
.modal {
    display: none;
    z-index: 1;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
}

.modal-window{
    z-index: 2;
    width: 500px;
    margin: 20% auto;
    padding: 20px;
    background-color: white;
}
</style>

</head>
<body>
<h2>test modal</h2>
<button onclick="displayModal();">Display Modal</button>

<div class="modal">
  <div class="modal-window">
    <div class="modal-contents">
      <p>これはモーダルウインドウです。</p>
      <button onclick="closeModal();">Close Modal</button>
    </div>
  </div>
</div>
</body>
</html>

上のプログラムで display 属性を設定しているところを fadeIn 、 fadeOut メソッドを使用すればフェードイン、フェードアウト表示ができます。メソッドの説明は以下の通りです。

// フェードイン表示
$('要素').fadeIn([speed], [callback]);
// フェードアウト表示
$('要素').fadeOut([speed], [callback]);

このメソッドは非表示の要素をフェードイン表示または、表示の要素をフェードアウト表示します。

speed   : "slow", "normal", "fast" または時間をミリ秒で指定(デフォルト:"normal")
callback: 処理が完了した時の呼び出し関数を指定

関数を以下の様に変更すればできます。

// モーダルウインドウ表示
function displayModal() {
    $('.modal').fadeIn();
}
// モーダルウインドウ非表示
function closeModal() {
    $('.modal').fadeOut();
}

PR

JavaScript
0CM

2020/05/19

JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録２（changesデータにレコードを反映し save）

以下のページでは save プロパティにPHPプログラムを指定することでデータ登録ができる説明をしました。

⇒JavaScript jQuery w2ui.grid を使ったグリッド処理・外部データへ登録（save）

この場合は PHP プログラムにデータの変更された部分のみが $_GET['request']['changes'] に配列データとして格納されます。渡された $_GET['request']['changes'] に従ってレコード毎に個別に変更カラムデータを再設定しています。

今回は $_GET['request']['changes'] の内容を1レコード全てのカラムデータとして渡すことで PHP では1レコードを一括で処理する様に変更します。
尚、最初の読込ファイルは以下の様に以前のものと同様です。

■JSON 形式のテストデータ(data-get.json)

{
  records: [
    { recid: 1, fname: "John"   , lname: "Doe"    , email: "jdoe@gmail.com", sdate: "2020/03/01" },
    { recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2020/03/12" },
    { recid: 3, fname: "Jin"    , lname: "Franson", email: "jgra@gmail.com", sdate: "2020/03/13" },
    { recid: 4, fname: "Susan"  , lname: "Ottie"  , email: "sott@gmail.com", sdate: "2020/03/24" },
    { recid: 5, fname: "Kelly"  , lname: "Silver" , email: "ksil@gmail.com", sdate: "2020/03/25" },
    { recid: 6, fname: "Francis", lname: "Gatos"  , email: "fgat@gmail.com", sdate: "2020/03/26" },
    { recid: 7, fname: "Mark"   , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2020/03/27" },
    { recid: 8, fname: "Thomas" , lname: "Bahh"   , email: "tbah@gmail.com", sdate: "2020/03/28" }
  ]
}

それでは records 部分を url にて JSON ファイルを指定し、登録処理を追加したソースを示します。

■url プロパティによる JSON ファイルを指定と登録処理を追加について

<!DOCTYPE html>
<html>
<head>
  <title>w2ui Grid-2 url2</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
  <script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="./dist/w2ui-1.5.rc1.js"></script>
</head>
<body>
  <div id="grid" style="width: 500px; height: 200px;"></div>
  <button onclick="save();">save</button>

<script>
$(function () {
  // id="grid" へのグリッド設定
  $('#grid').w2grid({ 
    name: 'grid', 
    method: 'GET', 
    columns: [
      { field: 'recid', caption: 'ID', size: '50px' },
      { field: 'fname', caption: 'First Name', size: '30%' , editable: { type: 'text' } },
      { field: 'lname', caption: 'Last Name' , size: '30%' , editable: { type: 'text' } },
      { field: 'email', caption: 'Email'     , size: '40%' , editable: { type: 'text' } },
      { field: 'sdate', caption: 'Start Date', size: '100px' }
    ], 
    url: {
      get:    'data-get.json',
      save:   'saverow.php'
    }
  });
});

// 登録関数
function save() {
    //レコード配列初期化
    var rows = new Array();
    //レコード分の処理
    for(i = 0; i < w2ui["grid"].records.length; i++) {
        //'recid' で1レコード取得
        var rec = w2ui["grid"].get(w2ui["grid"].records[i]['recid']);
        if (rec) {
            //レコードが存在する場合
            if (rec.w2ui) {
                //「w2ui」が存在する場合
                if (rec.w2ui.changes) {
                    //変更箇所が存在する場合、レコードデータに設定
                    $.extend(rec, rec.w2ui.changes);
                    //オブジェクト[rec.w2ui]の削除
                    delete rec.w2ui;
                    //配列に追加
                    rows.push(rec);
                }
            }
        }
    }
    //[save]の機能を使って得点計算を起動(CallBack:onSave)
    w2ui["grid"].request("save", { changerows : rows });
}
</script>
</body>
</html>

今回の HTML ファイルには登録用のボタンを設け、そのクリックイベント処理用の登録関数を作成しました。
この登録関数の処理は grid の get は1レコード分のデータを取得できますが w2ui プロパティ内の changes プロパティに変更カラム情報が入っています。このプロパティが存在していれば、そのレコードは変更された証拠となります。よってこの情報を取得したレコード情報のプロパティに上書きし、登録用レコード配列に追加します。
w2ui.changes プロパティですが今回の w2ui のバージョンが w2ui-1.5.rc1.js なのでこの様になりました。（w2ui-1.4.js では w2ui.changes ではなく changes 直で良かったようですが）

最後に request メソッドで grid の[save]機能を呼出します。request メソッドの定義は以下の通りです。

request( cmd, [params, [url, [callBack]]])

<パラメータ>
・cmd     ：string    コマンド名("POST"または"GET")を指定します。
・params  ：object    送信する追加パラメータのオブジェクトを指定します。
・url     ：string    リクエストURLを指定します。
・callBack：function  コールバック関数を指定します。

■saverow.php プログラム

<?php
//  PHP 5.5.0 未満のため
if (!function_exists('array_column')) {
    //  「array_column」宣言
    function array_column($arr, $strKey) {
        $arrOut = array();
        for ($i = 0; $i <= count($arr); $i++) {
            if (isset($arr[$i][$strKey])) {
                $arrOut[] = $arr[$i][$strKey];
            }
        }
        return  $arrOut;
    }
}

//  リクエスト取得
$arrReq = json_decode($_GET['request'], true);
$strJsonFile = 'data-get.json';

//  元のデータJSONファイル
$strJson = file_get_contents($strJsonFile);
$arrData = json_decode($strJson, true);

//  動作による処理
switch ($arrReq['cmd']) {
    case 'save':
        //  変更データ存在チェック
        if (!isset($arrReq['changerows']) || count($arrReq['changerows']) == 0) {
            break;
        }
        //  recid列の配列(KEY:0からの連番)
        $arrRecid = array_column($arrReq['changerows'], 'recid');

        //  新規配列に元データと変更データから追加処理
        $arrNew = array();
        foreach ($arrData['records'] as $value) {
            $i = array_search($value["recid"], $arrRecid);
            if ($i === false) {
                //  変更が無い場合
                $arrNew['records'][] = $value;
            } else {
                //  変更が有った場合
                $arrNew['records'][] = $arrReq['changerows'][$i];
            }
        }
        $arrNew['records'] = array_values($arrNew['records']);
        $arrNew['total']   = count($arrNew['records']);
        //  JSON文字列生成
        $strJson = json_encode($arrNew, JSON_UNESCAPED_UNICODE);
        //  テキストファイル書込(data-get.json)
        file_put_contents($strJsonFile , $strJson);
        break;
}
?>

この PHP プログラムでは $_GET['request']['changerows'] で渡される変更レコードデータを、元のレコードデータとマージする様な処理を行います。

最初の HTML ファイルを実行し、以下の図の Save ボタンをクリックすると data-get.json が変更され、ページの再読込を行うと変更した値になるはずです。

JavaScript
0CM

2020/05/14

指定フォルダ内の全ファイルをクリア（サブフォルダ内もクリア）

以前紹介しましたフォルダの中のファイルを全てクリアする関数を、指定フォルダのサブフォルダ内のファイルも全てクリアする様にします。

⇒指定フォルダ内の全ファイルをクリア　　：[Directory.GetFiles,File.Delete]

指定フォルダ内の全ファイルクリア関数（サブフォルダ内もクリア）

    ''' -----------------------------------------------------------------------
    ''' 
    ''' 指定フォルダ内の全ファイルをクリア（サブフォルダ内のファイルもクリア）
    ''' 
    '''指定フォルダ
    ''' True:正常, False:エラー
    ''' -----------------------------------------------------------------------
    Function ClearFolderFile(ByVal astrDesFolderName As String) As Boolean
        '戻り値初期化
        ClearFolderFile = False
        Try
            '指定フォルダ内の全ファイルを取得
            Dim arrFiles() As String = System.IO.Directory.GetFiles(astrDesFolderName)

            '全ファイルクリア
            For Each strFile As String In arrFiles
                'File.Create メソッドを使用してファイルを作成する
                Using fs As System.IO.FileStream = System.IO.File.Create(strFile)
                    'ファイルクローズ
                    fs.Close()
                End Using
            Next

            'サブフォルダにあるファイルをクリア(再帰呼出)
            Dim ArrDirs As String() = System.IO.Directory.GetDirectories(astrDesFolderName)
            Dim strDir As String
            For Each strDir In ArrDirs
                '自分自身を再帰呼出
                If ClearFolderFile(strDir) = False Then
                    '再帰呼出での内部のファイルのクリアがエラーの場合
                    Return False
                End If
            Next

            '正常終了
            Return True

        Catch ex As Exception
            'エラー処理が必要な場合は、ここに記述する
        End Try
    End Function

指定フォルダ内の全ファイル削除関数（サブフォルダ内も削除）

    ''' -----------------------------------------------------------------------
    ''' 
    ''' 指定フォルダ内の全ファイルを削除（サブフォルダも削除）
    ''' 
    '''指定フォルダ
    ''' True:正常, False:エラー
    ''' -----------------------------------------------------------------------
    Function DeleteFolder(ByVal astrDesFolderName As String) As Boolean
        '戻り値初期化
        DeleteFolder = False
        Try
            '指定フォルダ内の全ファイルを取得
            Dim arrFiles() As String = System.IO.Directory.GetFiles(astrDesFolderName)

            '全ファイル削除
            For Each strFile As String In arrFiles
                System.IO.File.Delete(strFile)
            Next

            'サブフォルダにあるファイルを削除(再帰呼出)
            Dim ArrDirs As String() = System.IO.Directory.GetDirectories(astrDesFolderName)
            Dim strDir As String
            For Each strDir In ArrDirs
                '自分自身を再帰呼出
                If DeleteFolder(strDir) = False Then
                    '再帰呼出での内部のファイルの削除がエラーの場合
                    Return False
                End If
            Next

            '正常終了
            Return True

        Catch ex As Exception
            'エラー処理が必要な場合は、ここに記述する
        End Try
    End Function

■雑音の入らない仕事部屋を作る

とにかく自宅での仕事は集中するのが難しいので、できることなら仕事専用の部屋を作ることです。なるべく子供たちや、家事の音が聞こえない様な部屋が良いのですが、できなければ部屋の一角を仕事が出来る様にします。
私自身は、子供が独立しましたので子供部屋をそのまま仕事部屋として使っています。

後、部屋に窓があって少し太陽の日差しがまぶしい場合は、遮光カーテンを吊るすことを推奨します。

■1日のタイムスケジュールを作る（仕事と休憩の時間）

1日の時間割を作ってなるべくそれに合わせることです。以下は、私のタイムスケジュールです。
時間割を決めてはいるのですが、この時間は目安で学校みたいにしっかり行動しているわけではありません。

テレワークを行っていると時間がルーズになりがちですが、食事の時間は必ず守っています。食事の時間で気分を変えて次の仕事に向かえる様になると思います。（食事は私の妻が作ってくれますので非常にありがたいです。）
とにかく食事は大事だと思います。私たちの体は食べた物で出来るのですから。
人間の体は聞いたところによれば、２，３か月で全ての細胞が入れ替わっているとか、はっきりはしませんが。

あと、おやつも大事です。この時間に実は昼寝も行います。最近では昼寝は学校などでも取り入れられている様ですが、15分ぐらいで頭がすっきりします。これ以上寝ると本当の睡眠になってしまいますので、注意して下さい。

お昼寝用には「ネックピロー」と言われるものを使用しています。
Muji Well-Fited（マイクロビーズ）ネッククッション（ネイビーグレー）

これは小型の抱き枕の様な形状で、内部にマイクロビーズを使っているので昔のそば殻の枕の感じがして心地いいです。
机の上でうつ伏せ寝をする時にも、また首の周りの着けてそのまま椅子で寝てもいいです。

■なるべく残業はしない

自宅で仕事を行うと兎角ずるずるしがちで、夜まで引きずりたくなります。なかなか難しいのですが、とにかく残業にならない様に考えて仕事を進めることです。
私の場合は、やむなく残業になりそうな場合は、なるべくその日は行わず、土曜日をそれに充てています。やはり昼に行った方が能率が良いですし、土曜の方が周りがうるさくありませんので。

■仕事が乗らない場合はスケジュールに無い休憩を取る

仕事を行っていると考えに行き詰って進まないことがあります。皆さんもどうでしょうか。
そんな時は、机から立ち上がって別の部屋に行って休憩をしてはどうでしょうか。普段の会社なら他の人の目もありますが、ここは自宅です、もっと自由に行動してみてはどうでしょうか。

■気分を上げる場合は好きな音楽を聴きながら作業する

ちょっと今日は気分が乗らないなあと言う場合には、昔好きだった音楽を聴いたりします。
私は80年代のトト、ドゥービー・ブラザーズ、マイケルジャクソン、ボビー・コールドウェルなど懐かしのロックを聴いています。（ちょっと昔過ぎてついてこれない？）

とにかく気分を前向きにして仕事をしないと良いものができないと思います。

■服装は普段着でもピシッとした感じで

家にいるとどうしても普段着で仕事をしがちですが、気分を切り替える意味でも少しピシッとした服装の方が宜しいかと思います。
何も普段会社に行く服装にするというのではなく、テレワークでの会議もあると思いますので、あまりに失礼にならない様にすべきと思います。

■家人に仕事部屋への出入りには「行ってきます」「ただいま」を言う

何を「行ってきます」？ですかと思われるかもしれませんが、私は毎日これを行っています。また、リビングに戻った時には「ただいま」といいます。

くだらないことと思われるかもしれませんが、案外これが自分で気分を切り替えるスイッチになっていると思います。

最後に

最後まで読んでいただいて有難うございます。このコロナの件ですが、数か月では解消できない様ですね。専門家によれば１～２年ぐらいは掛かるかもしれないとのこと。確かに「新しい生活様式」では無いですが、それに近い感じで考えていく必要はありそうです。

コロナの件が解消された時には社会はガラッと変化しているかもしれません。テレワークに始まって、さらに会社の形態もどんどん変化していくと思いますので、怖いようで楽しみな感じもします。

とにかく「手洗い・うがい」は継続していこうと思います。