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

- 2019/07/11
JavaScript jQueryでAjaxを使いブロック領域を表示・非表示にする方法（css()メソッド、"display"属性）
最終的にブロック領域を表示・非表示にする方法を説明しますが、そのために使用する jQuery の css() メソッドについて説明します。
css() メソッドは要素の style 属性を設定をします。メソッドの引数の記述方法で、1個の属性のみと複数の属性の設定ができます。

// 1個のstyle属性のみ $('要素').css('プロパティ', '設定値'); // 複数のstyle属性 $('要素').css({'プロパティ':'設定値', 'プロパティ':'設定値', ... });

例としてHTML要素で class 名が「class1」とした場合において、1個の場合は「color」属性を「red」に、複数の場合は「color」属性を「blue」、「font-weight」属性を「bold」に設定するには以下の様にします。

// 1個のstyle属性のみ $('class1').css('color', 'red'); // 複数のstyle属性 $('class1').css({'color':'blue', 'font-weight':'bold'});

そこで、ブロック領域を表示・非表示の制御を行うには、「display」属性を「block」(表示)、または「none」(非表示)に設定します。
今回のデモ HTML ファイル側のソースを以下に示します。

■ブロック領域を表示・非表示にする

<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 表示・非表示関数 function setDisplay() { // チェック判定 if($("#chkOnOff").prop("checked")){ // 表示設定 $(".msg1").css("display", "block"); $("#area").css("display", "block"); } else { // 非表示設定 $(".msg1").css("display", "none"); $("#area").css("display", "none"); } return false; } </script> </head> <body> <h2>test display ON/OFF</h2> <label> <input id="chkOnOff" type="checkbox" onclick="setDisplay();" checked="checked" value="1" /> 表示ON/OFF </label> <br /> <div id="area" style="display: block;"> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p> <p>11111111111222222222222222</p> </div> <p class="msg1" style="display: block;">テストメッセージ１</p> <p class="msg1" style="display: block;">テストメッセージ２</p> <p class="msg2" style="display: block;">テストメッセージ３</p> </body> </html>

".msg1" のセレクタで class="msg1" の p タグのみが制御され、 "#area" のセレクタで id="area" の div タグが制御されることが分かると思います。
PR
- JavaScript
- 0CM
- 2019/07/10
JavaScript jQueryを使った checkbox の操作方法
今回は checkbox の操作方法について説明します。
先ずは checkbox がチェックされているかを設定・取得するための prop 関数の説明をします。
指定された要素に対して「属性名」のみを引数にすると、属性値が返されます。また、「属性名」「属性値」を引数にすると対象の「属性名」に指定した「属性値」設定されます。

var v = $('要素').prop('属性名'); // 属性値が返る $('要素').prop('属性名', 属性値); // 属性値の設定

これを使った例として以下に HTML ファイル側のソースを示します。

■prop を使った例

<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>  <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('#chk1').prop('checked', false); $('#chk2').prop('checked', false); $('#chk3').prop('checked', false); }); //ON/OFF関数 function getData() { var strMsg = "チェック内容\n"; // 各チェック判定 if($('#chk1').prop('checked')){ // チェックONの場合、自分の親のオブジェクトのTEXT取得 strMsg += $('#chk1').parent().text() + "\n"; } if($('#chk2').prop('checked')){ strMsg += $('#chk2').parent().text() + "\n"; } if($('#chk3').prop('checked')){ strMsg += $('#chk3').parent().text() + "\n"; } alert(strMsg); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label> <label><input id="chk2" type="checkbox" value="2" />チェック2</label> <label><input id="chk3" type="checkbox" value="3" />チェック3</label> <br /> <button onclick="getData();">状態取得</button> </body> </html>

9行目の $(function(){ ... }); の部分は JQuery で初期処理を記述する時の一般的な方法です。
この関数内に記述された処理が、全てのHTMLソース（DOM）を読込んだ後で実行されます。
この例では全ての checkbox の checked 属性を false に設定しています。

ボタンクリック時に全ての checkbox のチェック状態を取得し、チェックされている場合に各 checkbox の親の label の要素のテキストを取得しています。

各 checkbox は label タグで囲まれているのですが、これはチェックボックスの右側のテキスト（”チェック1”など）をクリックしてもチェックボックス自身をクリックしたことと同様に動作します。（四角いボックスだけしか効かないと不便なので）

チェックボックス3個の処理をべた書きしましたが、もう少し JQuery 的な方法で記述してみます。

■prop を使った例２

<html> <head> <meta charset="utf-8"> <title>test checkbox</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // 初期処理 $(function(){ // 全てのチェックボックスをOFF $('input[type="checkbox"]').prop('checked', false); }); //ON/OFF取得関数 function getData() { var strMsg = "チェック内容\n"; // 選択済チェックボックス $('input[type="checkbox"]:checked').each(function() { strMsg += $(this).parent().text() + "\n"; }); alert(strMsg); return false; } </script> </head> <body> <h2>test checkbox</h2> <label><input id="chk1" type="checkbox" value="1" />チェック1</label> <label><input id="chk2" type="checkbox" value="2" />チェック2</label> <label><input id="chk3" type="checkbox" value="3" />チェック3</label> <br /> <button onclick="getData();">状態取得</button> </body> </html>

初期処理のセレクタはタグ名が input でかつ type 属性が "checkbox" と一致するものが対象となります。
ON/OFF取得関数のセレクタはタグ名が input でかつ type 属性が "checkbox" でチェックされているものが対象となります。

セレクタの書き方を工夫すれば簡単な記述になります。パッと見は分かりづらいですが慣れだと思います。
- JavaScript
- 0CM
- 2019/07/09
JavaScript jQueryでAjaxを使いPHPからデータを取得する方法その２（郵便番号からの住所取得）
前回の「Ajaxを使いPHPからデータを取得する方法」では例として郵便番号からの住所取得を挙げましたが、それのデモ的なものを示したいと思います。

先ずは郵便番号のCSVファイルを以下のサイトからダウンロードする必要があります。

⇒郵便番号データダウンロード

今回はデモなので東京都のデータのみを利用しました。

HTML ファイル側のソースですが以下の様になります。
Ajax からの正常戻りの関数で、 PHPからのデータが住所１，住所２，住所３を配列にしたものを返してくるので、分解してそれぞれの表示タグに設定しています。

■Ajaxを使いPHPからデータを取得するHTMLファイルその２

<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Ajax関数 function getData() { // マスタデータの取得 $.ajax({ type: "POST" , url: "./ajax2.php" , data: { zip: $("#zip").val() } }).done(function(res){ // ajaxがOK // JSON形式から文字列に変換 var data = JSON.parse(res); // [,]で分解 var arr = (""+data).split(','); // 住所の表示 $("#addr1").text(arr[0]); $("#addr2").text(arr[1]); $("#addr3").text(arr[2]); }).fail(function() { // 取得エラー alert('取得エラー'); }).always(function() { // 後処理(処理することが在れば) }); return false; } </script> </head> <body> <h2>test ajax json 2</h2> 郵便番号("-"無し):<input type="text" id="zip" size="10" maxlength="7" /><br /> <p id="addr1">テスト住所１</p> <p id="addr2">テスト住所２</p> <p id="addr3">テスト住所３</p> <button onclick="getData();">Ajax</button> </body> </html>

外部PHPファイル ajax2.php 及び 13TOKYO.CSV がこのHTMLファイルと同じディレクトリに存在することにします。

■外部PHPファイル ajax2.php

<?php // 郵便番号CSVファイル読込、配列データで返す // (KEY:郵便番号 => array(住所1, 住所2, 住所3) ) function getZipCsv($filename) { // ZIPデータ配列 $arrZip = array(); // ファイルを開く $fp = fopen($filename, 'r'); // whileで行末までループ処理 while (!feof($fp)) { // fgetsでファイルを読み込み、変数に格納 $txt = fgets($fp); if ($txt == "") continue; // SJISからUTF8への文字コード変換 $txt = mb_convert_encoding($txt, 'UTF-8', 'sjis-win'); // ["]を省く $txt = str_replace('"', '', $txt); // [,]で配列に分解 $arr = explode(',', $txt); // 3カラム目をキーにして住所1, 住所2, 住所3を配列で退避 $arrZip[$arr[2]] = array($arr[6], $arr[7], $arr[8]); } // fcloseでファイルを閉じる fclose($fp); // 郵便番号配列データを返す return $arrZip; } // 郵便番号の取得 $zip = ""; if (isset($_POST["zip"]) == true && $_POST["zip"] != "") { $zip = $_POST["zip"]; } // 東京の郵便番号CSVファイルを変数に格納 $arrZipData = getZipCsv('./13TOKYO.CSV'); $arrRet = array( "", "", ""); if ($zip != "" && array_key_exists($zip, $arrZipData)) { // 郵便番号のキーが存在 $arrRet = $arrZipData[$zip]; } // 結果を返す echo(json_encode($arrRet));

このPHPファイルの関数 getZipCsv は指定されたCSVファイルをオープンし、 1行毎に読込を行い、SJISからUTF8への文字コード変換を行った後で郵便番号をキーとした配列に住所データを格納しています。

POSTされた zip を取得し、その値をキーとして、郵便番号配列データから該当データを取得し JSON データに変換して echo 関数で返してやります。

今回は東京都のデータしかありませんが、本当ならば全国のデータに対応する必要があります。そのためにはこの様なCSVファイルを都度読込んで処理するには重すぎるので、データベースに郵便番号マスタを作成して、そこから取得するのが一般的だと思います。
- JavaScript
- 0CM
- 2019/07/09
JavaScript jQueryでAjaxを使いPHPからデータを取得する方法
今回は jQuery で用意されている Ajax 関数を使って PHP からデータを取得する方法について説明します。
この例は、よくあるのですが、マスタテーブルからコードを指定しその内容を表示する場合に使う方法です。（例えば、郵便番号を入力し対応する都道府県名、市町村名、住所を表示する等です。）

先ずは Ajax 関数の使い方ですが、以下の様な感じです。

<ajax関数の例> $.ajax({ type: "POST", url: "hoge.php", data: { data1: "1111", data2: "222" , ... } }).done(function(data){ // 正常処理 }).fail(function() { // 取得エラー }).always(function() { // 後処理 }); <パラメータ> ・type：リクエストのタイプ("POST"または"GET")を指定します。・url ：リクエストを送信するURLを指定します。・data：サーバーへ送信するデータを指定します。：{ キー値1: データ値1, キー値2: データ値2, キー値3: データ値3, ... } <メソッド> ・done(function(data){}：ajax 処理が成功した場合に呼ばれる関数宣言。・fail(function(){} ：ajax 処理でエラーが発生した場合に呼ばれる関数宣言。・always(function(){} ：ajax 処理の最後に呼ばれる関数宣言。

HTML ファイル側のソースですが以下の様になります。

■Ajaxを使いPHPからデータを取得するHTMLファイル

<html> <head> <meta charset="utf-8"> <title>test ajax</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> //Ajax関数 function getData() { // マスタデータの取得 $.ajax({ type: "POST" , url: "./ajax1.php" , data: { id: $("#id").val() } }).done(function(res){ // ajaxがOK $("#msg").text(JSON.parse(res)); }).fail(function() { // 取得エラー alert('取得エラー'); }).always(function() { // 後処理(処理することが在れば) }); return false; } </script> </head> <body> <h2>test ajax json</h2> ID:<input type="text" id="id" size="10" maxlength="10" /><br /> <p id="msg">テストメッセージ</p> <button onclick="getData();">Ajax</button> </body> </html>

外部PHPファイル ajax1.php がこのHTMLファイルと同じディレクトリに存在することにします。

■外部PHPファイル ajax1.php

<?php // 処理モードの取得 $id = -1; if (isset($_POST["id"]) == true && $_POST["id"] != "") { $id = intval($_POST["id"]); } // マスタ風の仮のデータ $arrData = array( 0 => "@@@@@@" ,1 => "AAAAAA" ,2 => "BBBB" ,3 => "CCCCCCCC" ); $strRet = ""; if (0 <= $id && $id <= 3) { $strRet = $arrData[$id]; } // 結果を返す echo(json_encode($strRet));

このPHPファイルは POST された id を取得し、その値をキーとして、マスタデータの仮の配列データから文字列を取得します。その文字列を JSON データに変換して echo 関数で返してやります。
返されたデータは、HTML側の done 関数の引数に渡されます。そこでその引数の値を JSON データから逆変換し、HTMLのタグに設定してやります。

実際にHTMLファイルをブラウザで表示し、IDを入力しボタンを押下すれば対応するデータが表示されると思います。
- JavaScript
- 0CM

2019/07/02

Excel ファイルの操作について（Microsoft.Office.Interop.Excel COM参照）

Excel ファイルを VB.NET から操作することはいろんなシステムで要求されます。例えば、検索されたデータ一覧を Excel ファイルに出力することや、印刷用のテンプレート Excel ファイルを読込んで、そこにデータを設定し、出力する等です。

それで、今回は Microsoft.Office.Interop.Excel COM参照による方法について示します。 Microsoft.Office.Interop.Excel を利用するには対象となるパソコンに Excel がインストールされている必要があります。

先ずはプロジェクトに Microsoft.Office.Interop.Excel の参照設定を行う必要があります。
以下は、メニューの中の「プロジェクト(P)」⇒「参照の追加(R)...」を開いて Microsoft Excel 15.0 Object Library を選択したところです。 15.0 の部分は Excel のバージョンにより変わります。

参照設定が終わると、左図の様にソリューションエクスプローラの中の「参照設定」に Microsoft.Office.Interop.Excel が現れます。
これで、プログラムの中でエクセルを利用する準備が終わりました。

早速簡単なエクセルファイルを上書きする例を示します。
今回の例はフォームにボタンを1個設置しそのクリックイベントで処理を行います。
ファイル名を「test.xlsx」とし、そのファイルの中のシートの先頭セルに "TEST123" の文字列を設定し、登録します。（「test.xlsx」は前もって作成しておきます。）

エクセルを使う手順は以下の様に行います。

Excel オブジェクトを生成しアプリケーション起動
Excel の Workbook のコレクションである Workbooks の取得
Workbooks オブジェクトにより既存の Excel ファイルを Workbook に開く
Excel の Worksheet のコレクションである Worksheets 取得
Excel の Worksheets から先頭のシート Worksheet 取得
シート内の処理を行う
Workbook オブジェクトによりファイルに保存
Worksheet オブジェクトの解放
Worksheets オブジェクトの解放
Workbook オブジェクトを閉じてから解放
Workbooks オブジェクトの解放
Excel オブジェクトを閉じる
Excel アプリケーションの解放

以下の様にオブジェクトを順を追って参照を取得し、対象となるワークシートに処理を行った後で逆順でオブジェクトの解放を行います。
Excel.Application ⇒ Workbooks ⇒ Workbook ⇒ Worksheets ⇒ Worksheets

オブジェクトの解放用の関数は、Marshalクラスの COM オブジェクトの解放用関数 System.Runtime.InteropServices.Marshal.ReleaseComObject を使います。（エクセルオブジェクトは COM オブジェクトとして動作するためです）

簡単なエクセル処理の例１

Imports Microsoft.Office.Interop

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        'Excel のアプリケーション参照用オブジェクト
        Dim xlsApplication As Excel.Application = Nothing
        'Excel の Workbooks 参照用オブジェクト (Workbook の Collection)
        Dim xlsWorkbooks As Excel.Workbooks = Nothing
        'Excel の Workbooks 内の1個の Workbook 参照用オブジェクト
        Dim xlsWorkbook As Excel.Workbook = Nothing
        'Excel の Workbook 内の Worksheets 参照用オブジェクト (Worksheet の Collection)
        Dim xlsWorkSheets As Excel.Sheets = Nothing
        'Excel の Sheets 内の1個の Worksheet 参照用オブジェクト
        Dim xlsWorkSheet As Excel.Worksheet = Nothing
        'Excel の Sheet 内の1個のセル Range 参照用オブジェクト
        Dim xlsRange As Excel.Range = Nothing
        'フルパスでのファイル名 (ファイル名のみだと Excel 側のデフォルトのフォルダになるはず)
        Dim strFileName As String = My.Application.Info.DirectoryPath & "\test.xlsx"

        'Excel アプリケーション起動 
        xlsApplication = New Excel.Application
        'Excel の Workbooks 取得
        xlsWorkbooks = xlsApplication.Workbooks
        'Excel非表示
        xlsApplication.Visible = False
        xlsApplication.DisplayAlerts = False
        '既存 Excel ファイルを開く
        xlsWorkbook = xlsWorkbooks.Open(strFileName)
        'Excel の Worksheets 取得
        xlsWorkSheets = xlsWorkbook.Worksheets
        'Excel の Worksheet 取得
        xlsWorkSheet = CType(xlsWorkSheets.Item(1), Excel.Worksheet)
        'シート名称
        xlsWorkSheet.Name = "シート名test"

        'セル選択
        xlsRange = xlsWorkSheet.Range("A1")
        'セルに値設定
        xlsRange.Value = "TEST123"
        MRComObject(xlsRange)

        '保存時の問合せダイアログを非表示に設定
        xlsApplication.DisplayAlerts = False
        'ファイルに保存 (Excel 2007～ブック形式)
        xlsWorkbook.SaveAs(Filename:=strFileName, FileFormat:=Excel.XlFileFormat.xlOpenXMLWorkbook)
        '保存時の問合せダイアログを表示に戻す
        xlsApplication.DisplayAlerts = True

        '終了処理
        'xlsWorkSheet の解放
        MRComObject(xlsWorkSheet)
        'xlsWorkSheets の解放
        MRComObject(xlsWorkSheets)
        'xlsWorkbookを閉じる
        xlsWorkbook.Close(False)
        'xlsWorkbook の解放
        MRComObject(xlsWorkbook)
        'xlsWorkbooks の解放
        MRComObject(xlsWorkbooks)
        'Excelを閉じる 
        xlsApplication.Quit()
        'xlsApplication を解放
        MRComObject(xlsApplication)
    End Sub

    'COM オブジェクトへの参照を解放
    Private Sub MRComObject(ByRef objCom As Object)
        If Not objCom Is Nothing Then
            Try
                System.Runtime.InteropServices.Marshal.ReleaseComObject(objCom)
            Catch
                '
            Finally
                '参照を解除する
                objCom = Nothing
            End Try
        End If
    End Sub

End Class

各処理の途中でエラーが発生した場合には COM オブジェクトの解放が行われない場合がありますので、変数の宣言以降を Try … Catch … End で括って更に終了処理を Finally にまとめて以下の様にすれば解消できるはずです。

簡単なエクセル処理の例２

Imports Microsoft.Office.Interop

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        'Excel のアプリケーション参照用オブジェクト
        Dim xlsApplication As Excel.Application = Nothing
        'Excel の Workbooks 参照用オブジェクト (Workbook の Collection)
        Dim xlsWorkbooks As Excel.Workbooks = Nothing
        'Excel の Workbooks 内の1個の Workbook 参照用オブジェクト
        Dim xlsWorkbook As Excel.Workbook = Nothing
        'Excel の Workbook 内の Worksheets 参照用オブジェクト (Worksheet の Collection)
        Dim xlsWorkSheets As Excel.Sheets = Nothing
        'Excel の Sheets 内の1個の Worksheet 参照用オブジェクト
        Dim xlsWorkSheet As Excel.Worksheet = Nothing
        'Excel の Sheet 内の1個のセル Range 参照用オブジェクト
        Dim xlsRange As Excel.Range = Nothing
        'フルパスでのファイル名 (ファイル名のみだと Excel 側のデフォルトのフォルダになるはず)
        Dim strFileName As String = My.Application.Info.DirectoryPath & "\test.xlsx"

        Try
            'Excel アプリケーション起動 
            xlsApplication = New Excel.Application
            'Excel の Workbooks 取得
            xlsWorkbooks = xlsApplication.Workbooks
            'Excel非表示
            xlsApplication.Visible = False
            xlsApplication.DisplayAlerts = False
            '既存 Excel ファイルを開く
            xlsWorkbook = xlsWorkbooks.Open(strFileName)
            'Excel の Worksheets 取得
            xlsWorkSheets = xlsWorkbook.Worksheets
            'Excel の Worksheet 取得
            xlsWorkSheet = CType(xlsWorkSheets.Item(1), Excel.Worksheet)
            'シート名称
            xlsWorkSheet.Name = "シート名test"

            'セル選択
            xlsRange = xlsWorkSheet.Range("A1")
            'セルに値設定
            xlsRange.Value = "TEST123ABC"
            MRComObject(xlsRange)

            '保存時の問合せダイアログを非表示に設定
            xlsApplication.DisplayAlerts = False
            'ファイルに保存 (Excel 2007～ブック形式)
            xlsWorkbook.SaveAs(Filename:=strFileName, FileFormat:=Excel.XlFileFormat.xlOpenXMLWorkbook)
            '保存時の問合せダイアログを表示に戻す
            xlsApplication.DisplayAlerts = True

        Catch ex As Exception
            MsgBox(ex.Message)
        Finally
            '終了処理
            'xlsWorkSheet の解放
            MRComObject(xlsWorkSheet)
            'xlsWorkSheets の解放
            MRComObject(xlsWorkSheets)
            'xlsWorkbook のオブジェクトが存在すれば閉じる
            If Not xlsWorkbook Is Nothing Then
                xlsApplication.DisplayAlerts = False
                xlsWorkbook.Close()
                xlsApplication.DisplayAlerts = True
            End If
            'xlsWorkbook の解放
            MRComObject(xlsWorkbook)
            'xlsWorkbooks の解放
            MRComObject(xlsWorkbooks)

            'xlsApplication のオブジェクトが存在すれば閉じる
            If Not xlsApplication Is Nothing Then
                xlsApplication.DisplayAlerts = False
                xlsApplication.Quit()
                xlsApplication.DisplayAlerts = True
            End If
            'xlsApplication を解放
            MRComObject(xlsApplication)
        End Try
    End Sub

    'COM オブジェクトへの参照を解放
    Private Sub MRComObject(ByRef objCom As Object)
        If Not objCom Is Nothing Then
            Try
                System.Runtime.InteropServices.Marshal.ReleaseComObject(objCom)
            Catch
                '
            Finally
                '参照を解除する
                objCom = Nothing
            End Try
        End If
    End Sub

End Class

■ブロック領域を表示・非表示にする

■prop を使った例

■prop を使った例２

■Ajaxを使いPHPからデータを取得するHTMLファイルその２

■外部PHPファイル ajax2.php

■Ajaxを使いPHPからデータを取得するHTMLファイル

■外部PHPファイル ajax1.php

簡単なエクセル処理の例１

簡単なエクセル処理の例２

関連する記事