Webノウハウ

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移行イメージ

Azure移行イメージ

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

 

 1.無料アカウントを作り、仮想サーバー(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)をインストールしました。

仮想サーバ構築後

仮想サーバ構築後

 2.仮想サーバーで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接続画像

VPN接続画像

 3.仮想サーバー内SQLSERVERの外部接続設定
  仮想サーバーのFireWallで、1433のポートを受信許可。セキュリティが心配なら、ローカルIPアドレス、リモートIPアドレス、 プロファイル指定も行います。
 
  [START]-[セキュリティが強化されたWindowsファイヤーウォール]-[受信の規則]-[新しい規則]

受信の規則の設定1

受信の規則の設定1

受信の規則の設定2

受信の規則の設定2

受信の規則の設定3

受信の規則の設定3

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


Sql Server Configuration Manager(構成管理)

Sql Server Configuration Manager(構成管理)

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

SSMSで接続確認

SSMSで接続確認

 4.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ページを公開したら、一生懸命描いた絵が、まるっきり見えなくなるし、後ろの方は何行も空白が続くしで、かなり焦ってしまいました。とりあえず、絵は見えるようになったし、後ろの空白も無くせたので、後のために記録を残しておこうと思います。

1.何をやったのか。

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

 1-2.これを「ファイル」の「名前を付けて保存」で、「Webページ」として保存。

 1-3.保存した結果をMicrosoft Edgeで読んでみる。なんと!。絵が無くて、前後の文は表示されて、後ろはずっと空白。

 

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

 2-1.「名前を付けて保存」で「ツール(L) ▼」に気づく。「▼」をクリックしてみる。

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

 2-3.「VML云々」のチェックを外して保存してみる。

 2-4.Microsoft Edgeで読んでみると、めでたしめでたし。

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

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

一覧表示 ▶︎ Webノウハウ

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

2017年5月31日(staff)

はじめに

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

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

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

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

2.javascriptコーディング例

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

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

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

 

3.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

select画像1


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

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

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

3.DOMによるselect要素の追加操作

コーディング例です。

(1) html

(2) javascript

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

4.追加ボタンを押した結果

select画像2

select画像2

一覧表示 ▶︎ Webノウハウ

『Googleニュース用RSSジェネレータ』で収集したニュースをPHPで編集・成形してWebサイトに表示する

2017年1月31日(staff)

  このブログで以前に紹介した“『Googleニュース用RSSジェネレータ』と『単眼RSS』を使って労働関連に関る最新ニュースのコンテンツを作る”の続編です。 ニュースの表示方法をもう少しカスタマイズしたくなったので、単眼RSSを使わないやり方で編集する方法を模索しました。以下を紹介します。
 
[概要]
・googleニュースをPHPのSimpleXML拡張モジュールを使ってXMLオブジェクトに変換、さらにarray型データに変換する
・array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

  
1.googleニュースをPHPのSimpleXML拡張モジュールを使ってxmlオブジェクトに変換、さらにarray型データに変換する


 SimpleXML拡張モジュールは、php5.0.1以上から対応しているので、最近のレンタルサーバなら殆ど利用できると思います。まず、Googleニュース用RSSジェネレータ<http://g.1o4.jp/news-rss.html>でURIを生成します。そのURIで得たデータをSimpleXMLElement、SimpleXMLIteratorを使ってarray型に変換します。というような操作が、phpマニュアルサイトの「User Contributed Notes」のコーディング例 http://php.net/manual/ja/class.simplexmliterator.phpで紹介されていましたので、参考にしました。
  
その例の中にあるxml2array()関数を使用した場合。

[PHP コーディング例]  

  
2.array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

[php コーディング例]

[説明]
googleニュースで得たarrayデータの要素(=xmlのタグ)

・"updated" :ニュースの更新日時。atom(RFC3339) 形式の世界標準時だったので日本時間に変換
・"title" :ニュースのタイトル
・"id" :ニュースのリンク先情報

これらの要素は、1.の処理の$rssAtomArrayをprint_r()で出力して、確認しました。
今回は、googleニュースの場合ですが、他のxmlオブジェクトは、違ってくるかもしれません。
後は、Webサイトに合わせて、htmlドキュメントを成形して、表示すればOKです。

余談:
XMLオブジェクトをArray型に変換する方法は、ネットで検索すると、json_decode、json_encodeを利用すると簡単にarray型に変換できる、と出てきます。試してみると、googleニュースで取得したデータは、階層が深いのか?うまく変換できませんでした。今回、紹介したSimpleXML拡張モジュールには、イテレータが用意されているので、それを使えばXMLオブジェクトのハンドリングは容易になりますね。
(結局、phpマニュアルサイトのコーディング例を参考にしちゃうんですが)

一覧表示 ▶︎ Webノウハウ

BlenderでモデリングしたワイヤーフレームをFlashで描画再生してみる。

2016年9月2日(staff)

はじめに

  今回の思いつきは、『Webサイトのコンテンツで、多面体のワイヤーフレーム画像を動かしたい。』です。幾つか実現方法はあると思うのですが、Blenderでモデリングを行い、そこで作られた頂点座標情報を取り込んでflashで再生する、という方法を選びました。
 
1.Blenderでモデリング
   Blenderは、オープンソースの3次元CG開発ソフトウエア(統合開発環境)ですね。だいぶ前に同様のCGソフトのMetasequoiaで何かやろうとチャレンジした事があったのですが、挫折しました。そこでBlenderです。使い方は、次のサイトを参考にさせて頂きました。
「Blender入門」(http://www.blender3d.biz/)大変感謝しています。

 以下、何とかリンゴをモデリング。

blender
 

 

 

 


2.頂点座標情報の取り込み
  モデリングしたリンゴの頂点座標情報の取り込みは、BlenderのExport機能で情報をファイル出力して、そのファイルから読み込む事にしました。幾つかあるファイルフォーマットの中から、Wavefront(.obj)フォーマットを選択。 このフォーマットで出力された3Dモデルデータが一番扱い易いと判断しました。 Wavefrontフォーマットの説明は、次のサイトを参考にさせて頂きました。
「OBJファイルフォーマット」(http://www.hiramine.com/programming/3dmodelfileformat/objfileformat.html)
大変感謝しています。
 OBJファイルフォーマットは、頂点座標値(x,y,z)データ、多面体の面(メッシュ)を構成する頂点座標を指すインデックス情報や、モデリングした時の法線ベクトルの情報等が含まれています。今回は、頂点座標値(x,y,z)データ、多面体の面(メッシュ)を構成する頂点座標を指すインデックス情報を利用します。
  
3.flashで再生する
  objファイルを読み込んで描画するプログラムをAS3.0でコーディング。AS3.0を選んだのは、ブラウザ上で画像を操作できるインターフェース(各種イベントを拾える)が用意されている点がいいと思ったから。 AS3.0のコーディングは、次の本を参考にさせて頂きました。
「C++による簡単実習 3次元CG入門」(http://www.morikita.co.jp/books/book/2149)
言語はC++ですが、AS3.0でプログラミングする際に大変役に立ちました。
 [ワイヤーフレーム]

 wire

 
 

 

 

 

 

 

 

 

[面を塗りつぶし  ]

apple apple2

 

 

 

 

 

 

 

 

 

今回はここまでです。

 

一覧表示 ▶︎ Webノウハウ

『Googleニュース用RSSジェネレータ』と『単眼RSS』を使って労働運動に関る最新ニュースのコンテンツを作る

2014年11月3日(staff)

 今回は自分が興味のあるニュースを拾って、Webサイトに時系列で一覧表示する方法の紹介です。

 特定のニュースを収集する方法は、例えばニュースを配信するサイトが提供するRSSフィード情報をRSS対応ブラウザの「RSSリーダー」とか、「フィード」と呼ばれる機能を使って自動収集しておく、なんてやり方がありますね。でもこの方法だと、ブラウザのRSSリーダーで読む事しかできないので、何とかWebサイトに表示してニュースタイトルをクリックするとリンク先に飛べるようにしたいと思います。。。まずは、

1.『Googleニュース用RSSジェネレータ』で、気になるキーワードが含まれるニュースのRSSフィードを生成する
  例えば、[雇用]というキーワードでRSSフィードを生成します。パラメータを選択して最後に「RSS生成」ボタンを押します。

 [Googleニュース用RSSジェネレータ  例)]

ブログ画像4

 

 

 

 

 

 

 

 

 

次に、

2.ブログパーツ『単眼RSS』で、1で生成したRSSフィードによって自動取得した「ニュースタイトル」をリスト化するブログパーツを作成する
  『単眼RSS』のサイトで、いろいろパラメータ(簡単なもの)を設定します。1で生成したRSSフィードURLを入力します。最後に「貼付けコード生成」ボタンを押します。
  今回は、[雇用][労働]の2つのキーワードでニュースを選別してリスト化できるようにしました。

  [RSSフィード登録画面 例]

ブログ画像5

 

 

 

 

 

 

 

 

 

そして、

3.2で生成したブログパーツをWebサイトにはめ込んでみる
  こんな感じになります。 如何でしょうか。こんな風にニュースが選別されて表示されていると、世の中の動きも把握しやすくなるのではないでしょうか。

労働運動関連ニュース

 

(2017/1/31) 「単眼RSS」を利用するとad広告が出てしまうため、削除しました。代替案は、2017/1/31の投稿“「Googleニュース用RSSジェネレータ」で収集したニュースをPHPで編集・成形してWebサイトに表示する”を参照してください。

一覧表示 ▶︎ Webノウハウ

『Xmedia Recode』を使ってスマフォやデジカメで撮った動画をmp4形式に変換する

2014年10月12日(staff)

 前回のブログで紹介したメディアプレイヤー(Strobe Media Playback)が再生できる動画ファイルの形式は、mp4かflvの2択になるのですが、スマフォやデジカメで撮った動画ファイルの形式が、3gpp、m2tsだったりしたら困ってしまいますね。こんな時は、変換ソフトを使って変換してしまいます。今回はいろいろある変換ソフトの中からフリーソフトの『Xmedia Recode』(※1)を紹介します。

 このソフトは多数の形式に対応していて、大概の機器で撮った動画は網羅しているのではないでしょうか。変換時のパラメータも豊富で、分からない設定も多々あるのですが、動画再生に専門的な知識が無くてもデフォルトの設定で大体うまくいきます。この辺の詳細についてはいろいろなブログで紹介されているのでここでは省略します。m(..)m

  さて、このソフトを選んだ外せない理由がひとつあります。それは変換時の設定で、「ストリーミング Fast-Start」という設定がある、ということです。

[Xmedia Recode 画面抜粋]

 この設定をして変換した動画ファイルは、ダウンロードしながら動画を再生できるようになります。(※2) 数十分の動画ファイルを全部ダウンロードしてから再生が始まるようでは、待つのが面倒になりますからこの設定は必要でした。では実際にどうなるか試してみましょう。

 桜のある風景(再生 00:07) 「ストリーミング Fast-Start」設定無し

 桜のある風景(再生 00:07) 「ストリーミング Fast-Start」設定有り

 どうでしょうか。7秒と短い動画ですが、「ストリーミング Fast-Start」設定無しの動画は、スタートボタンを押してから少し待ってから再生が始まることが感じられますね。youtube等では当たり前のように感じている再生ですが、自分で用意する場合はこんな設定が必要になりました。

一覧表示 ▶︎ Webノウハウ

Webサイトに組み込むメディアプレイヤー(Strobe Media Playback)の見せ方を一工夫

2014年10月8日(staff)


 動画をWebサイトで再生する方法の一つにメディアプレイヤーを利用する方法があります。
メディアプレイヤーにもいろいろありますが、今回はオープンソースの有名どころでFlashで再生するStrobe Media Playback(※1)を利用します。
インストール、動作パラメータの設定等の細かい説明は、いろいろなブログ等で公開されているのでここでは省きます。m(..)m
  さて、”見せ方を一工夫”ですが、タイトルにまでして実は大したことではありません。
(本当に) 普通は、そのまま貼り付けるとこんな感じです。

 一工夫は、タイトルをクリックすると展開するようにしました。こうすることで、動画の一覧から見たい動画を選択できるようにした際、ちょっとすっきりします。

桜のある風景(再生 00:07)

 方法は、aタグをクリックしたしたら、aタグ要素の下にメディアプレイヤー用のオブジェクトを追加する、です。コーディング例は以下の通り。

[aタグの例]

<p><a onclick="fOpenMovie(this, '動画ファイル名');return false;" href="javascript:void(0);">桜のある風景(再生 00:07) </a></p>

[メディアプレイヤー用のオブジェクトを追加するjavascript 関数の例  fOpenMovie()]

function fOpenMovie(oPara,strURL){
    // aタグのテキストを取得
    var n=oPara.firstChild;
    var aTagText ="";
    while(n){
        if(n.nodeName=="#text") aTagText = n.nodeValue;
        n=n.nextSibling;
    }
    // objectタグの生成
    var strValue = "src=" + encodeURIComponent(strURL);
   
    var strObjectTag = String();
    strObjectTag = "<span>" + aTagText + "</span><br />";
    strObjectTag = strObjectTag
                 + "<object width='470' height='320'>"
                 + "<param name='movie' value='(swfのURL) StrobeMediaPlayback.swf'></param>"
                 + "<param name='flashvars' value='" + strValue + "'></param>"
                 + "<param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param>"
                 + "<param name='wmode' value='direct'></param>"
                 + "<embed src=~(swfのURL)StrobeMediaPlayback.swf' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='direct' width='470' height='320 flashvars="
                 + "'" + strValue + "'></embed>"
                 + "</object>";

    // オブジェクトを追加する。
    var oElements = oPara.parentNode;
    oElements.innerHTML = strObjectTag;
    return false;
}

※1 Strobe Media Playback ダウンロードサイト
http://sourceforge.net/projects/smp.adobe/files/
 

一覧表示 ▶︎ Webノウハウ