ブログ

Azure SQLSEREVR <-> Windows10 ACCESS.accdb VPN接続で動作確認

2019年6月2日（staff）

はじめに
Windows2008R2サーバー、Windows7の2020年1月サポート終了に伴い、自社サーバーのOSアップグレードを検討していたのですが、せっかくなので、Microsoft Azureへの移行を検討してみました。要件としては、現行のC/SシステムにおけるSQLSERVERとAccessクライアントの処理が、 Cloud上のSQLSEREVER – VPN接続 – Accessクライアントで実現できる事、です。これが出来れば、インターネット経由で自宅パソコンやモバイル端末から接続して仕事ができるので便利です。

Azure移行イメージ

目次
１．無料アカウントを作り、仮想サーバー(Windows2016+SQLSERVER)を構築
２．仮想サーバーでVPN接続設定
３．仮想サーバー内SQLSERVERの外部接続設定
４．クライアントのSSMSで仮想サーバーSQLSERVERの接続確認
５．Access.accdb用のODBC設定

１．無料アカウントを作り、仮想サーバー(Windows2016+SQLSERVER)を構築
　自分のようなお試しユーザ向けのAzure無料アカウントを作り、Azureポータルにログイン。
ポータル画面は、直観的に何となくクリックして進めていく事ができます。
よくわからない設定があっても、その都度リンクされたヘルプサイトを見て確認する事ができました。自分は、仮想サーバーの構築をMicrosoftのDocサイトを参考にしました。

クイックスタート:Azure ポータルでWindows仮想マシンを作成する（Microsoft.comに移動）
https://docs.microsoft.com/ja-jp/azure/virtual-machines/windows/quick-create-portal

作成後、RDP接続で仮想サーバーに接続。まず、作成直後の仮想サーバーは英語なので、サーバーの日本語化設定をして、その後、仮想サーバーのブラウザを使ってSQLSERVER2016及び管理ソフト(SSMS)をインストールしました。

仮想サーバ構築後

２．仮想サーバーでVPN接続設定
仮想サーバーと自宅のパソコンを接続する形態をAzureでは「ポイント対サイトVPN接続」と呼ぶらしい。設定は、

ネイティブAzure 証明書認証を使用したVNetへのポイント対サイト接続の構成:Azureポータル（Microsoft.comに移動）

https://docs.microsoft.com/ja-jp/azure/vpn-gateway/vpn-gateway-howto-point-to-site-resource-manager-portal
を参考にしました。

【ネットワークトラフィック許可の設定】
受信ポートの追加設定は特になし。仮想ネットワークに接続している事が前提になるので、この設定で問題なし。

ネットワークトラフィック許可の設定

パソコンで上記のサイトの説明に従ってVPN構成設定を行い、接続確認。

VPN接続画像

３．仮想サーバー内SQLSERVERの外部接続設定
仮想サーバーのFireWallで、1433のポートを受信許可。セキュリティが心配なら、ローカルIPアドレス、リモートIPアドレス、プロファイル指定も行います。

[START]-[セキュリティが強化されたWindowsファイヤーウォール]-[受信の規則]-[新しい規則]

受信の規則の設定１

受信の規則の設定２

受信の規則の設定３

Sql Server Configuration Manager(構成管理)で、以下の設定を行います。
[SQL Serverネットワークの構成]-[SQLEXPRESSのプロトコル]-[TCP/IP]-[プロパティ]
IPALLの設定で、TCPポートに1433を設定します。

Sql Server Configuration Manager(構成管理)

４．クライアントのSSMSで仮想サーバーSQLSERVERの接続確認
ここで接続確認できれば、ODBC接続も問題なしです。

SSMSで接続確認

４．Access.accdb用のODBC設定
最後にACCESSからSQLSERVERのテーブルをリンク接続する為に必要なODBC接続の設定を行います。

ファイルDSNの設定例
[ODBC]
DRIVER=SQL Server Native Client 11.0
UID=SQLSERVERログインユーザID
WSID=DESKTOP-XXXXXXX
APP=Microsoft Office 2013
SERVER=192.168.1.4,1433

おわりに
とりあえず、VPN接続して動作確認はできました。サーバ―レスポンスも思ったより早いです。
処理にもよるのでしょうが、今後は5G通信も始まるのでレスポンスについては問題にならないと思いました。セキュリティ面は、レンタルサーバーを借りて設定するよりも、はるかに堅牢なシステム構築が簡単に出来そうです。

さて、気になる利用料金ですが、Azure 料金計算ツール
https://azure.microsoft.com/ja-jp/pricing/calculator/
でシミュレーションができます。試しに計算してみると・・・・・・・

うーん、小規模システムで運用するにはちょっと掛かりすぎの利用料金でした・・・・・。費用対効果として「効果」の部分を積極的に考えていかないと割に合いません。結局自社サーバー（オンプレミス）に落ち着きそうです。

一覧表示 ▶︎ Webノウハウ

ドメイン名に“＿”(アンダースコア)を使ってはいけない

2019年2月16日（staff）

ドメイン名にアンダースコアが含まれていると、ブラウザからサーバリクエストをした際に、ドメイン宛てのCookieの送信がブロックされてしまう。

参照：[PRB] Internet Explorer セキュリティ修正プログラム MS01-055 のインストール後、セッション変数が要求間で保持されない

以上はInternet Explorerにおける振る舞いですが、RFC952の仕様ではホスト名の命名規則にアンダースコアは含まれていないので、使ってはだめでした。

　今回はテスト環境でハマったのですが（そもそもテスト環境でしか起こりえない。本番では正式なドメイン名になるので）、テスト環境だからとりあえず「何でもいいや」という気持ちで、分かりやすくしたいからアンダースコアを含めたドメイン名を設定しました。よくプログラムのコーディングで、変数名にアンダースコアを使うのでそんな延長で気軽に付けてしまったが為に、半日悩んでしまいました。

　また、例えば"localhost"、"testserver" 等、セカンドレベルドメイン(.coとか)、トップレベルドメイン(.jpとか)が無かったり、いわゆるFQDN形式に沿っていないと、やはりcookie送信がブロックされてしまいました。(Internet Explorer調べ)
架空であってもそれらしい名前を設定しておく事ですね。

確か過去にも同じ痛い目にあったはずなのに・・・。戒めを込めて記録しておきます。

一覧表示 ▶︎ Webノウハウ

MS-Wordで「図形」で絵を描いてWebページにしたら絵が見えない！

2019年1月9日（平石）

　私は、技術研究と趣味と脳の老化防止のために、Webサイトを作ってます。

　そのサイトに、MS-Wordで作ったWebページを公開したら、一生懸命描いた絵が、まるっきり見えなくなるし、後ろの方は何行も空白が続くしで、かなり焦ってしまいました。とりあえず、絵は見えるようになったし、後ろの空白も無くせたので、後のために記録を残しておこうと思います。

１．何をやったのか。

　１－１．MS-Wordで、「図形」を使って絵を描きました。

　１－２．これを「ファイル」の「名前を付けて保存」で、「Webページ」として保存。

　１－３．保存した結果をMicrosoft Edgeで読んでみる。なんと！。絵が無くて、前後の文は表示されて、後ろはずっと空白。

２．どこがいけなかったか、試行錯誤。全部書くと大変なことになるので、うまく行ったことだけ書くことにする。

　２－１．「名前を付けて保存」で「ツール(L)　▼」に気づく。「▼」をクリックしてみる。

　２－２．「Webオプション(W)」とあるので、クリックしてみると、Webオプション設定ウィンドウが。下から２行目の「VMLを使ってグラフィックスをブラウザーに表示する」が怪しい。

　２－３．「VML云々」のチェックを外して保存してみる。

　２－４．Microsoft Edgeで読んでみると、めでたしめでたし。

　なお、この絵は、テストおよびこのブログへの投稿用に作ったものです。私のサイトの問題のページは下記です。

「囲碁を開集合による位相数学で説明してみる」

一覧表示 ▶︎ Webノウハウ

現金での出資を正味財産に反映させたい、借入金とその返済を予算化したいなど

2018年9月1日（平石）

　先だって、あるユーザから「現金での出資を正味財産に反映させたい」とのご質問がありました。

　また、かなり古い話ですが、別のユーザから「借入金とその返済を予算化したい」とのご質問がありました。

　これらは、いずれも「見返し勘定」という考え方で、対処できるのですが、すぐ忘れてしまうのでここに書いておきます。

　取引というものは、通常、２つの側面を持っています。これを「借方」と「貸方」という言葉で表現します。私見ですが、見返し勘定とは、ある取引は4つの側面を持っていると考えるのです。

　たとえば、「現金での出資」は、「現金が減る」という側面と、「出資金が増える」という側面があります。通常の仕訳では、これを、借方に出資金、貸方に現金とします。そして、正味財産は、相殺されて増減無しです。

　この「取引」に、あと２つの側面があります。その１つは「正味財産に反映させたい」という気持ちです。もう１つは「現金を支出した」という気持ちです。この２つは、実際に何かが動いたということではなく「気持ち」なのですが、後々まで残したいので、勘定科目として建てます。

　具体的に考えてみましょう。

　まず、「現金」はCcu会計／Web会計では、「科目コード＝1101」として存在します。

　次に、「出資金」は、資産（権利が自分にある）で、固定的（すぐ返ってくるわけでない）なので、たとえば「1501」としましょう。

　「正味財産に反映させたい」は、Ccu会計／Web会計では、「科目コード＝3000 資産見返し剰余金」があるので、その補助科目として定義することにします（独立の科目としても可）。

　「現金を支出した」は、支出なので、5000台で定義します。たとえば、「5501」で科目を定義し、補助科目を用いることにします。

　伝票は、下図の通り。

　なお、出資をやめて、出資金が返ってきたときのことを考慮して、「出資返戻収入」というような収入科目を設けることもできます。

　「借入金とその返済を予算化したい」は、「借入金」は資産でなく、負債であるところが異なりますが、ほぼ同様に対処できます。

　Ccu会計／Web会計では、負債科目である借入金についての予算は立てられませんが、「借入金収入」、「借入金返済」をそれぞれ収入科目、支出科目とすることで、予算化できるようになります。

　借入金の借り入れ、一部返済は、それぞれ、下図のようになります。

一覧表示 ▶︎ ブログ

Acrobat Readerの注釈機能を使って、文書のレビューを上手にする

2018年8月12日（平石）

最近は、メールでの文書のやり取りが多くなり、指摘事項もメールにいちいち引用先を記して書くことは面倒になってきました。そんな時、Acrobat Readerの注釈機能とFDFというファイルがあることを知ったので、紹介したいと思います。

たとえば、下図のように使います。

一点鎖線の左と右では別の人だと思ってください。

まず、Aさんが文書（PDFファイル）を作成します。

それを受取ったBさんは、文書に「注釈」（私の脳内では「いちゃもん」と変換されます）を付けたくなったとします。

ここでまず、Acrobat Readerの注釈機能が登場します。PDFファイルのどの部分の注釈かも、すぐわかるようになっています。

次に出てくるのが、FDFファイルです。Acrobat Readerの操作で、注釈情報のみを出力することができます。

Bさんは、FDFファイルをAさんに送ります。

Aさんは、送られたFDFファイルと、元のPDFファイルとを読込んで、どんな注釈がつけられたかを見ることができます。

図には書きませんでしたが、Aさんは、注釈に対する返信を付けてFDFファイルにしてBさんに送り返すこともできますし、さらに別の人に送って…ということもできます。そして、こうしたやり取りが、ぐちゃぐちゃにならず、FDFファイルとして形に残し、管理できるということも重要です。

Acrobat Readerの、具体的な操作については、下記などを参照してください。これは、少し古いAcrobat Reader Xについてなので、その後のバージョンとは少し違いますが、参考にはなるでしょう。

https://helpx.adobe.com/jp/acrobat/kb/4561.html

一覧表示 ▶︎ スタッフの日記

ACCESS VBA ダブルクリックによってクリックイベントの処理が２回実行されてしまう件

2018年7月12日（staff）

はじめに　

ある入力画面フォームで登録ボタンを用意、クリックイベントの処理（イベントプロシージャ）でデータベースに登録する処理を割り当てました。運用になってからしばらくは順調に動作していましたが、複数の担当者の内、ある人が操作した時に、データが２重登録されるケースが出現。
　
　
原因について

　どうやら、その担当者は登録ボタンをダブルクリックしていて、クリックイベント処理が２回走ってしまったことが原因らしい。
改めてACCESSのヘルプを見直すと、
　
　Form.DblClick イベント (Access)
　https://msdn.microsoft.com/ja-jp/vba/access-vba/articles/form-dblclick-event-access
　
　■マウスイベントを受け取るオブジェクトに対しては、次の順序でイベントが発生。

　　　MouseDown ⇒ MouseUp ⇒ Click ⇒ DblClick ⇒ MouseUp　

　■コマンドボタンをダブルクリックすると、次の順序でイベントが発生。

　　　MouseDown ⇒ MouseUp ⇒ Click ⇒ DblClick ⇒ MouseUp ⇒ Click
　
　との事。
　
　今回のケースは、コマンドボタンをDblClickした場合なので、Clickイベントが２回発生した。
　そもそも、DblClickの時にClickイベントが発生する事など、全く考えていなかったので、この仕様には驚いています。ただ、今回の事を知って改めて考えると、パソコンの設定によってDblClickとClickの判断は難しい場合があるのだと思えば、なんとなく納得しています。
　

対応方法

２回目のClickイベントを無効にする次の方法で対応します。　
DblClickイベントプロシージャの引数に「Cancel」があるので、この引数にtrueを設定して終了すれば、以降のClickイベントは発生しません。
　
　例)
　
　Private sub XXXボタン_DblClick(Cancel As Integer)
　　　Cancel = true
　End sub
　
おわりに

　入力画面を設計する際、ＧＵＩの観点からなるべく入力を簡単にできるよう考えます。
例えば、テキストボックスをダブルクリックするとデフォルトの値が設定されるようにするとか。
結果として、クリック操作とダブルクリック操作が混在する画面の操作性の良し悪しは、
判断が分かれるところですが、今回のようなケースでうっかり操作による誤動作の対応はしておきましょう。

　なお、Accessのヘルプには、
　”一般的には、コマンドボタンをダブルクリックしない事をお勧めします”
　とありました。

一覧表示 ▶︎ スタッフの日記

MS-AccessからODBC経由でFirebirdのテーブルにアクセスは大変

2017年9月3日（平石）

　あるユーザーのシステムで、Ccu労組会計のデータをMS-Accessからアクセスして処理することになりました。それで、ODBC経由で接続することにしたのですが、…私の覚えを兼ねて、ここに書いておきます。

１．ODBCって、マルチバイト文字は正しく処理できない！

１．１　DBファイル、クライアントdllへのパスにマルチバイト文字があると接続できない

　　まず、上図のようにしたら、接続時にエラーとなってしまいました。各パスを確認したところ、後ろの方が切れてしまっている。どうも「会計」とあるのがいけないらしい。「会計」は4バイトだけど2文字なので2バイトと判断して、差額の2バイトはカットしてしまうものと思われる。

　　これは、英数字と空白だけのフォルダを作って、そこにコピーして事無きを得ました。

１．２　テーブルの中身もマルチバイト文字があると…

　　これは、私（平石）ではなく、一緒に仕事をしている組合員が見つけた現象です。

　　下図は、RKA23というテーブルの内容を、フリーソフトを使って見たものです。

　ところが、同じものをMS-Accessで見ると、データ内容に余計な文字が付加されている。

　　（吹き出しは記述者＝平石が付けたもの）

　　どうも、Shift-JISでのバイト数が項目長と一致するときに、この現象が起きるらしい（このときは、項目長を超えるデータができてしまうかのように見えますが、MS-Accessで見るときの項目長はバイト数ではなくて文字数なので、これらのケースでは、項目長を超えていません）。

　　データのShift-JISでのバイト数を求める関数を作り、そのバイト数が項目長を超えている分はカットするようにして、対処できました。

２．DAO.TableDef.Connectを書き換えるとReadOnlyになってしまう

　　実は、上記１．１に書いた、「DBファイル、クライアントdllへのパス」については、DAO.TableDef.Connectに、その情報があるので、これを書き換えて対処できるのではないかとやってみたのです。

　　読むだけなら、うまく行きました。パスに「会計」などのマルチバイト文字があってもちゃんと読めます（ODBCの設定ではマルチバイト文字の無いパスを指定して、あとから書き換えます）。

　　ところが、内容を更新しようとすると、ReadOnlyである旨のメッセージが出てダメでした。

一覧表示 ▶︎ スタッフの日記

画像の「赤」と「青」を入れ替えるプログラムを作ってみた

2017年6月10日（平石）

　実は私、赤信号を見ると、青信号であると確信して道路を渡ってしまう人です。
　先だって、たまたま「色彩心理学入門」なる本を読んで、その原因と思われるものが分かりました。
　私の理解では、「正常者」つまり色覚についての多数派の方は、実は「青緑色弱」と呼ぶべきであって、赤と緑の区別はつくらしいが、青と緑の区別はほとんどつかないらしい。
　そこで、もしかしたら、「赤」と「青」を入れ替えたら、彼ら青緑色弱者の気持ちが少しはわかるのではないかと思い、そんなプログラムを作ってみました。

　上の画像は、近所のお宅の何とか赤く見える花を撮ったものと、それの「赤」と「青」を入れ替えたものを並べました（クリックしてみてください）。
　左は撮ったままの画像ですが、「いったいどこに花なんかあるんだっ」という感じで、まったく花の存在はわかりません。
　右を見ると、花の存在ははっきりわかります。実は、この右の画像を見るまで、こんなにたくさん花が咲いていることに、まったく気づきませんでした。やはり「正常者」の方が正常なようです。

　そんな訳で、良いプログラムを作ったと自負しております。

一覧表示 ▶︎ スタッフの日記

jQueryを使って、EnterキーでTab移動する

2017年5月31日（staff）

はじめに

システム開発の際、ＧＵＩの要件の１つに、「入力項目は、Enterキーで確定し、次の入力項目に移動すること」を挙げている事が、経験として結構あります。Webシステムにおいても、例外では無くて、以前からあった方法として、Javascriptのコーディングで
event.keyCodeプロパティを、強制的にEnterキー(13)からTabキー(9)に入れ替えてしまう方法があります。

if (event.keyCode == 13){
　　　　event.keyCode = 9;
}

if (event.keyCode == 13){

　　　　event.keyCode = 9;

}

但し、InternetExpoler Ver.9以降は、event.keyCodeプロパティの強制的な変更が出来なくなっており、（セキュリティ対策と思われる）この方法は使えません。

そこで、どうしたものか？Google先生に聞いてみると、どうやらjQueryを使うと出来るらしいという事で、次のサイト「[jQuery] Enterキーでフォーカスを移動するには」を、参考にさせていただきまして、自分用にカスタマイズした関数「fEnterChangeTab()」を紹介します。

１．関数の仕様
・input要素の中で、button型、hidden型、readonly属性、disabled属性は、タブ移動先から除外する事。
・画面最後のinput要素でEnterキーを押されたら、最初のinput要素に移動する事。
・画面最初のinput要素でEnterキー＋Shiftキーを押されたら、最後のinput要素に移動する事。

２．javascriptコーディング例

// ①jQueryの取り込み
<script type="text/javascript" src="（パス）/jquery-1.10.2.js"></script>

<script type="text/javascript">
<!--
// input項目をEnter キー、Shift+Enterキーでtab移動 without(button, hidden) 
function fEnterChangeTab(){	

  // ② input要素の選択。但し、ボタンとhidden型は除く。
  var oObject = "#Div要素のid :input:not(:button):not(:hidden)";
	
  $(oObject).keypress(function(e) { 
    var c = e.which ? e.which : e.keyCode; // クロスブラウザ対応
    if (c == 13) {  
        var index = $(oObject).index(this); // indexは0～
        var cNext = "";
        var nLength = $(oObject).length;
        for(i=index;i<nLength;i++){
            cNext = e.shiftKey ? ":lt(" + index + "):last" : ":gt(" + index + "):first";
            // ③ 止まってはいけいない属性 readonly
            if ($(oObject + cNext).attr("readonly") == "readonly") {
                if (e.shiftKey) index--; // １つ前
                else index++;            // 次へ
            }
            // ③ 止まってはいけいない属性 disabled
            else if ($(oObject + cNext).prop("disabled") == true) {
                if (e.shiftKey) index--; // １つ前
                else index++;            // 次へ
            }
            else break;
        }
        if (index == nLength - 1) {
            if (! e.shiftKey){
                // 最後の項目なら、最初に移動。
                cNext = ":eq(1)";
            }
        }
        if (index == 0) {
            if (e.shiftKey) {
                // 最初の項目なら、最後に移動。
                cNext = ":eq(" + (nLength - 1) + ")";
            }
        }
        $(oObject + cNext).focus();           
        //e.defaultPrevented; ⇒　2018.06.28 このプログラミングは間違い。
        e.preventDefault()    //規定の動作をキャンセルするため、こちらのメソッドを呼ぶ。
    }  
  }); 
} 

// ④onloadのタイミングでこの関数を実行
if(window.attachEvent){
    // IE用
    window.attachEvent('onload',fEnterChangeTab);
}
else if (window.opera){
    // opera用
    window.addEventListener('load',fEnterChangeTab,false);
}
else {
    // Mozilla用
    window.addEventListener('load',fEnterChangeTab,false);
}
// -->
</script>

// ①jQueryの取り込み

<!--

// input項目をEnter キー、Shift+Enterキーでtab移動 without(button, hidden)

function fEnterChangeTab(){

// ② input要素の選択。但し、ボタンとhidden型は除く。

var oObject = "#Div要素のid :input:not(:button):not(:hidden)";

$(oObject).keypress(function(e) {

var c = e.which ? e.which : e.keyCode; // クロスブラウザ対応

if (c == 13) {

var index = $(oObject).index(this); // indexは0～

var cNext = "";

var nLength = $(oObject).length;

for(i=index;i<nLength;i++){

cNext = e.shiftKey ? ":lt(" + index + "):last" : ":gt(" + index + "):first";

// ③ 止まってはいけいない属性 readonly

if ($(oObject + cNext).attr("readonly") == "readonly") {

if (e.shiftKey) index--; // １つ前

else index++; // 次へ

}

// ③ 止まってはいけいない属性 disabled

else if ($(oObject + cNext).prop("disabled") == true) {

if (e.shiftKey) index--; // １つ前

else index++; // 次へ

}

else break;

}

if (index == nLength - 1) {

if (! e.shiftKey){

// 最後の項目なら、最初に移動。

cNext = ":eq(1)";

}

if (index == 0) {

if (e.shiftKey) {

// 最初の項目なら、最後に移動。

cNext = ":eq(" + (nLength - 1) + ")";

}

$(oObject + cNext).focus();

//e.defaultPrevented; ⇒　2018.06.28 このプログラミングは間違い。

e.preventDefault() //規定の動作をキャンセルするため、こちらのメソッドを呼ぶ。

}

});

}

// ④onloadのタイミングでこの関数を実行

if(window.attachEvent){

// IE用

window.attachEvent('onload',fEnterChangeTab);

}

else if (window.opera){

// opera用

window.addEventListener('load',fEnterChangeTab,false);

}

else {

// Mozilla用

window.addEventListener('load',fEnterChangeTab,false);

}

// -->

</script>

[説明]
① jQueryの取り込み
（パス）は適宜、環境に置き換えて下さい。jQueryはなるべく最新を取り込んだ方が良いと思います。
②input要素の選択。但し、ボタンとhidden型は除く。
jQueryのセレクタを使って、対象とするinput要素の項目だけを選択します。
また、今回は、<div></div>で囲まれた範囲（#Div要素のidを指定）のinput要素を対象としています。

③止まってはいけいない属性
readonly属性、disabled属性のinput項目は、この条件で判断して除外します。

④onloadのタイミングでこの関数を実行
画面要素が取り込まれたタイミングで、対象とするinput要素に適用させます。
因みに、クロスブラウザ対応のコーディング例。

３．input要素が動的に追加された時の対応
入力の操作で、input要素（入力項目）が動的に追加されるケースがある場合、
追加されたタイミングで、この関数を呼んでkeyPressイベント関数をリビルドします。
そうすることで、追加したinput要素を適用対象と認識させます。

今回はこれにて、以上。

一覧表示 ▶︎ Webノウハウ

検索機能付きのセレクトボックス。jQueryのSelect2を使ってみる

2017年5月10日（staff）

はじめに
選択肢がたくさんあるセレクトボックスは、選ぶ時、縦に広がったボックスから見つけるのに苦労します。自前で絞り込みができる方法を考える前に、ネットで探してみたら、やっぱりありました。jQueryプラグインのSelect2です。このjQuery Select2は、ボックス内の検索、タグ付け、ajaxリクエストによるセレクト項目の設定等が出来て、Bootstrapテーマで簡単に実装できるセレクトボックスです。今回、JavaScriptのDOMを使って、セレクトボックスをHTMLページに動的に追加した際、つまづいた事があったので、そのメモ書きです。

概要
DOMでセレクトボックスを追加したら、その後、『$(‘select’).select2();』を実行しておくこと。　そうしないと、select要素がselect2で初期化されない。

例）「好きな果物」セレクトボックス　追加ボタン付き

select画像1

１．ダウンロード
・seletc2
https://select2.github.io/
・select2 bootstrapテーマ
https://github.com/select2/select2-bootstrap-theme

２．select2とbootstrapの準備
jsとcssを取り込みます。

<link href="(パス)/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="(パス)/css/select2.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></></script>
<script type="text/javascript" src="(パス)/js/bootstrap.min.js"></script>
<script type="text/javascript" src="(パス)/js/select2.min.js"></script>

（パス）は適宜、環境に置き換えて下さい。jQueryはなるべく最新を取り込んだ方が良いと思います。

３．DOMによるselect要素の追加操作

コーディング例です。

(1) html

<table align=left>
　<tr>
　　<td  style="width:100px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<span>好きな果物</span>
　　/td>
　　<td style="width:200px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<select class="select" name="cSelFruit_1" id="cSelFruit_1" >
　　　　<option value="0" selected>　　</option>
　　　　<option value="1" >バナナ</option>
　　　　<option value="2" >イチゴ</option>
　　　　<option value="3" >メロン</option>
　　　　<option value="4" >リンゴ</option>
　　　　<option value="5" >グレープフルーツ</option>
　　　</select>
　　</td>
　　<td nowrap align=center><button type="button"  id="btnInsert_1" onClick="fOnClickInsert(this);"  >追加</button></td>
　</tr>
　<tr id="InsertLineEnd"></tr>
</table>

<!--追加行ひな型 ここから -->
<table  style="visibility:hidden;" id="masterDefault">
　<tr id="II_prototype">
　　<td  style="width:60px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<span>好きな果物</span>
　　</td>
　　<td style="width:60px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　　<select name="cSelFruit" id="cSelFruit" >
　　　　　<option value="0" selected>　　</option>
　　　　　<option value="1" >バナナ</option>
　　　　　<option value="2" >イチゴ</option>
　　　　　<option value="3" >メロン</option>
　　　　　<option value="4" >リンゴ</option>
　　　　　<option value="5" >グレープフルーツ</option>
　　　　</select>
　　</td>
　　<td nowrap align=center><button type="button"  id="btnInsert" onClick="fOnClickInsert(this);"  >追加</button></td>
　</tr>
</table>
<!-- ひな型 ここまで-->

　<tr>

　　　<span>好きな果物</span>

　　/td>

　　　　<option value="5" >グレープフルーツ</option>

　　　</select>

　　</td>

　</tr>

</table>

　　　<span>好きな果物</span>

　　</td>

　　　　　<option value="5" >グレープフルーツ</option>

　　　　</select>

　　</td>

　</tr>

</table>

(2) javascript

// ①静的に実装されているセレクトボックスの初期化
$(function(){
　$('.select').select2();
});

// select要素の追加 
function fOnClickInsert(oPara){
// 操作した行番号を取得  oPara.id 例) "cSelFruit_1"
　var aWork = oPara.id.split("_");
　var nLineNo = aWork[aWork.length - 1];

// ひな型行オブジェクトの取得
　var oLine1 = document.getElementById("II_prototype");

// 追加する行オブジェクトを作成する
　var oNewLine1 = oLine1.cloneNode(true);

　var oNewLine_td = "";
　var oNewLine_select = "";

// ここから属性情報設定
　var nNewLineNo = parseInt(nLineNo) + 1;

// td,button,select情報の設定
　oNewLine_button = oNewLine1.getElementsByTagName("button");
　oNewLine_select = oNewLine1.getElementsByTagName("select");

// ボタン
　for (i=0;i<oNewLine_button.length;i++){
　　if(oNewLine_button.item(i).id == "btnInsert"){ // 追加ボタン
　　　oNewLine_button.item(i).id   = "btnInsert_" + nNewLineNo;
　　}
　　else {
　　　continue;
　　}
　}
// セレクトボックス
　for (i=0;i<oNewLine_select.length;i++){
　　if(oNewLine_select.item(i).id == "cSelFruit"){	// 好きな果物
　　　oNewLine_select.item(i).id   = "cSelFruit_" + nNewLineNo;
　　　oNewLine_select.item(i).name = "cSelFruit_" + nNewLineNo;

　　　// ②classはここで設定しないと、効かない。
　　　oNewLine_select.item(i).className = "select"; 
　　}
　　else {
　　　continue;
　　}
　}
　// 行追加
　oAfterLine = document.getElementById("InsertLineEnd");
　oAfterLine.parentNode.insertBefore(oNewLine1,oAfterLine);
　
　// ③ここで動的に追加したセレクトボックスの初期化
　$('.select').select2();	

　return;
}

// ①静的に実装されているセレクトボックスの初期化

$(function(){

　$('.select').select2();

});

// select要素の追加

function fOnClickInsert(oPara){

// 操作した行番号を取得 oPara.id 例) "cSelFruit_1"

　var aWork = oPara.id.split("_");

　var nLineNo = aWork[aWork.length - 1];

// ひな型行オブジェクトの取得

　var oLine1 = document.getElementById("II_prototype");

// 追加する行オブジェクトを作成する

　var oNewLine1 = oLine1.cloneNode(true);

　var oNewLine_td = "";

　var oNewLine_select = "";

// ここから属性情報設定

　var nNewLineNo = parseInt(nLineNo) + 1;

// td,button,select情報の設定

　oNewLine_button = oNewLine1.getElementsByTagName("button");

　oNewLine_select = oNewLine1.getElementsByTagName("select");

// ボタン

　for (i=0;i<oNewLine_button.length;i++){

　　if(oNewLine_button.item(i).id == "btnInsert"){ // 追加ボタン

　　　oNewLine_button.item(i).id = "btnInsert_" + nNewLineNo;

　　}

　　else {

　　　continue;

　　}

// セレクトボックス

　for (i=0;i<oNewLine_select.length;i++){

　　if(oNewLine_select.item(i).id == "cSelFruit"){ // 好きな果物

　　　oNewLine_select.item(i).id = "cSelFruit_" + nNewLineNo;

　　　oNewLine_select.item(i).name = "cSelFruit_" + nNewLineNo;

　　　// ②classはここで設定しないと、効かない。

　　　oNewLine_select.item(i).className = "select";

　　}

　　else {

　　　continue;

　　}

　// 行追加

　oAfterLine = document.getElementById("InsertLineEnd");

　oAfterLine.parentNode.insertBefore(oNewLine1,oAfterLine);

　// ③ここで動的に追加したセレクトボックスの初期化

　$('.select').select2();

　return;

}

①のセレクトボックスの初期化は、ロードされた時点で実装されているselect要素に対して、適用されます。
②のクラス設定は、このタイミングで設定しないとうまく効きません。
③のタイミングで、直前に追加したselect要素がselect2に初期化されます。

４．追加ボタンを押した結果

select画像2

一覧表示 ▶︎ Webノウハウ