ブログ

割とコンピュータよりの情報をお届けします。

コンピュータ

ntp-clientとsocket.ioでサービス作成を試してみる

ntp-clientとsocket.ioを使ってみた。
学習を始めたJavaScriptのクラス使い方も試してみた。

以下に示す例はnode.jsでntp-clientを使用して自コンピュータ時刻(サーバ側)とntpサーバーの時刻の差を6分置きに取得する。
そして10秒置きに自コンピュータ時刻(サーバ側)を取得してオフセットを足して,socket.ioを通して送信する。
サンプルにしては長いものになっている。

まずアプリのスタートポイントの(本体)serv.js

const GetNtp = require('./GetNtp')

var getNtp = new GetNtp();
var ntpServer = 'ntp.nict.jp';

var task = new Promise(function(resolve, reject) {
  getNtp.getNetworkTime(ntpServer, 123, resolve, reject);
})

task.then(function(value) {
  // 6分置きにオフセットmsを更新
  setInterval(function () {
    getNtp.getNetworkTime(ntpServer, 123);
  }, 360000);
  
  // 10秒置きに時刻を送信 
  setInterval(function() {
    var value = new Date();
    value = new Date(value.valueOf() + getNtp.timeOffset);
    socketIOHandler.io.sockets.emit('date', {'date': value});
  }, 10000);
});

var SocketIOHandler = require('./SocketIOHandler');
var socketIOHandler = new SocketIOHandler(8081, getNtp);
socketIOHandler.start();

クラスの勉強中につきGetNtpというクラス風のオブジェクトを作成するGetNtp.js

var GetNtp = function() {
  this.ntpClient = require('ntp-client');
  this.last = null;
  this.timeOffset = 0;
}

GetNtp.prototype.getNetworkTime = function(uri, port, resolve, reject) {
  var before = new Date();
  this.ntpClient.getNetworkTime(uri, port, (err, date)=> {
    if(err) {
      console.error(err);
      if (typeof reject !== "undefined")
        reject();
      return;
    }
    var after = new Date();
    var computerDate = (before.valueOf() + after.valueOf()) / 2.0;
    this.timeOffset = date.valueOf() - computerDate.valueOf(); // コンピュータ時刻が進んでいたら負
    console.log('Time Offset Updated: ' + this.timeOffset.toFixed(1) + " ms");
    this.last = date;
    if (typeof resolve !== "undefined")
      resolve(date)
  });
}

module.exports = GetNtp

同様にクラス風オブジェクトを作成するSocketIOHandler.js

var SocketIOHandler = function(port, getNtp) {
  this.getNtp = getNtp;
  this.fs = require('fs');
  this.handler = function(req, res) {
    this.fs.readFile(__dirname + '/index.html',
    function (err, data) {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }
      res.writeHead(200);
      res.end(data);
    });
  }.bind(this);

  this.app = require('http').createServer(this.handler);
  this.io = require('socket.io')(this.app);
  
  this.start = () => {
    this.app.listen(port);
  }

  this.io.on('connection', (socket) => {
    socket.emit('connected', { hello: 'world' });
    {
      var value = new Date();
      value = new Date(value.valueOf() + this.getNtp.timeOffset);
      socket.emit('date', {'date': value});
    }
    socket.on('test', function (data) {
      console.log(data);
    });
  });
}

module.exports = SocketIOHandler;

クライアント側のコードindex.html。(httpでクライアントに読ませて使用する)

<html>
<head>
  <title>Sample App</title>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>
<body>
<div id="test"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost:8081');
  socket.on('connected', function (data) {
    console.log(data);
    socket.emit('test', { value: 'data' });
  });
  socket.on('date', function(data) {
    console.log(data);
    $('#test').html(data.date);
  });
</script>
</body>
</html>

≫ 続きを読む

2018/07/15 コンピュータ   TakeMe

Visual Studio CodeでNode.jsのアプリをデバッグ

先の記事の続きでプログラム作成を続けていた。するとlaunch.jsonの設定にまだまだ深いところがあったので追加の内容を調べていた。
process.stdout.writeを使ったところでlaunch.jsonに新たな設定が必要になった。

今回デバッグするアプリケーションは
2つのファイルで構成

スクリプトの内容は後に回すとして
まずlaunch.jsonでconfigurationsに追加が必要なのは
"console": "integratedTerminal",
であった。

これを追加しておかないとprocess.stdout.writeで出力した内容がデバッグの表示に現れない。
なぜこうなるのかは いまひとつよくわかっていない。

一つ目はserv.js

const GetNtp = require('./GetNtp')

var getNtp = new GetNtp();

var before = new Date();
var task = new Promise(function(resolve, reject) {
  getNtp.getNetworkTime('ntp.nict.jp', 123, resolve, reject)
})

task.then(function(value) {
  var after = new Date()
  console.log('Computer tick: ' + (before.valueOf() + after.valueOf()) / 2 + ' ms')
  process.stdout.write('ntp.nict.jp tick: ' + value.valueOf() + ' ms\n')
  process.stdout.write('Difference: ' + ((before.valueOf() + after.valueOf()) / 2 - value.valueOf()) + ' ms')
  process.stdout.write(' ±: ' + (after.valueOf() - before.valueOf()) + ' ms\n')
})

2つ目のファイルGetNtp.jsは以下のようになっている


var GetNtp = function() {
  this.ntpClient = require('ntp-client');
}

GetNtp.prototype.getNetworkTime = function(uri, port, resolve, reject) {
  this.ntpClient.getNetworkTime(uri, port, function(err, date) {
    if(err) {
        console.error(err)
        if (typeof reject !== "undefined")
          reject()
        return
    }
    if (typeof resolve !== "undefined")
      resolve(date)
  });
}

module.exports = GetNtp

その前にこのサンプルではntp-clientを使って時刻を取得し自PCの時刻と差をms出力をしている。

作業フォルダでnpm init -yを実行してnpm install -D ntp-clientを実行しておく必要があることは言うまでもない。

≫ 続きを読む

2018/07/14 コンピュータ   TakeMe

CSS でtableの一部をsticky ... 使えないの続編

tableの中でスクロールさせる部分と固定させる部分を分けるときにCSSでposition: stickyを指定するというのを調べていたという記事の続き,

上を固定してみた。

どのHTML / CSSの参考サイトも指定のtdかth要素をstickyにするか,absoluteにするかでスクロールに対して止めていた。

参考を見ながら試してみたコードはセルだけが固定された。
また試しのコードを作ってみた。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
html {
  height:100%;
}

body {
  height: 100%;
  margin: 0;
  padding:0;
  height: 100%;
}

#wrapper {
  overflow: scroll;
  width: 100%;
  height:100%;
}

#wrapper2 {
  position:absolute;
  top:0;
  left:0;
  overflow: hidden;
  width: 373px;
  height: 97.5vh;
  z-index:4;
}

#wrapper3 {
  position:absolute;
  top:0;
  left:0;
  overflow: hidden;
  width: 97.5vw;
  height: 34px;
  z-index:4;
}


table {
  table-layout;fixed;
  border-collapse: collapse;
}

thead th {
  background-color: #4a4aff;
  color: white;
  width: 300px;
  height: 10px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
  border:1px solid white;
}

thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

thead th.blank {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

td {
  text-align: center;
  box-sizing: border-box;
  background-color: #efefff;
  width: 300px;
  height: 70px;
  border: 1px solid black;
}

tr:nth-of-type(2n+1) td {
  background-color: #ffffff;
}

td:nth-of-type(1) {
  position: sticky;
  left:0px;
}

th:nth-of-type(1) {
  position: sticky;
  left:0px;
  z-index:3;
}

td:nth-of-type(2) {
  position: sticky;
  left:122px;
}

th:nth-of-type(2) {
  position: sticky;
  left:122px;
  z-index:3;
}

td:nth-of-type(3) {
  position: sticky;
  left:244px;
}

th:nth-of-type(3) {
  position: sticky;
  left:244px;
  z-index:3;
}

tr {
  height:20px;
}

.fixed {
  position: fixed;
}

.header {
  width:120px;
  height:30px;
}

</style>
</head>
<body>
<div id="wrapper">
<table>
<colgroup span="3" style="border-right:2px solid black;">
<colgroup span="7">
<thead>
<tr><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>

<div id="wrapper2">
<table>
<colgroup span="3" style="border-right:2px solid black;">
<colgroup span="7">
<thead>
<tr><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>

<div id="wrapper3">
<table>
<colgroup span="3" style="border-right:2px solid black;">
<colgroup span="7">
<thead>
<tr><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th><th><div class="header">TEST</div></th></tr>
</thead>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>

</body>
</html>

 

オーバーレイ表示をすることで確かにヘッダだけ固定された。

コラムが今度は固定を追加した。
そして,スクロールバーのサイズは固定とみなしている。100%いっぱいに広げてしまうとスクロールバーが隠れてしまう。

せっかくとあるJavaScriptフレームワークの学習を始めたのにjqueryでグリグリいじりまくるコーディングに逆戻り…

やっぱりjQueryが手放せない。
jqueryでスクロールイベントに合わせてコラムだけを表示している側をスクロールする対応が必要

≫ 続きを読む

2018/07/12 コンピュータ   TakeMe

CSS でtableの一部をsticky ... 使えない

tableの中でスクロールさせる部分と固定させる部分を分けるときにCSSでposition: stickyを指定するというのを調べていた
新しいposition: sticky;が便利という記事が多かったので試してみたら…

どのHTML / CSSの参考サイトも指定のtdかth要素をstickyにするか,absoluteにするかでスクロールに対して止めていた。

参考を見ながら試してみたコードは以下のようなものだが…

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

#wrapper {
  width: 400px;
  overflow:scroll;
  height:100%;
}

table {
  table-layoute: auto;
  border-collapse: collapse;
}

tbody th {
  background-color: #4a4aff;
  color: white;
  width: 300px;
  height: 70px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  border:1px solid white;
}

thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

thead th.blank {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

td {
  text-align: center;
  background-color: #efefff;
  width: 300px;
  height: 70px;
  border: 1px solid black;
}

tr:nth-of-type(2n+1) td {
  background-color: #ffffff;
}

/*td:nth-of-type(1) {
  position: sticky;
  left:0px;
}

th:nth-of-type(1) {
  position: sticky;
  left:0px;
  z-index:3;
}

colgroup:nth-of-type(1) {
  position: absolute;
  left:0px;
  z-index:3;
}*/

</style>
</head>
<body>
<div id="wrapper">
<table>
<colgroup span="3" style="border:2px solid black;">
<colgroup span="7">
<tr><th>TEST</th><th>TEST2</th><th>TEST3</th><th>TEST4</th><th>TEST5</th><th>TEST</th><th>TEST2</th><th>TEST3</th><th>TEST4</th><th>TEST5</th></tr>
<tbody>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</div>
</body>
</html>

 

確かに,簡単なコードでヘッダが固定されるのだが固定されるのはヘッダのセルだけで境界は固定されないのだ…

スクロースしてみると境界が透けて見える

これではデザインがうるさいと使えない。

せっかくとあるJavaScriptフレームワークの学習を始めたのにjqueryでグリグリいじりまくるコーディングに逆戻り…

結局jQueryが手放せない。

≫ 続きを読む

2018/07/11 コンピュータ   TakeMe

先のFTPクライアントをC#で作り直してみた

先ほどのPythonでFTPサーバを作ってみた件について一緒に書いていたクライアントの部分をC#で書き直してみた。

この程度の実装ならC#の方が簡単。

ただし,WebClientを使用するところが非常に特徴的である。
ちなみに,2つファイルを作ってしまっているが,一つ目はファイルを転送したもの,二つ目はメモリからバイト列をファイルへ転送したもの。

using System.Text;

namespace FTP
{
    class Program
    {
        static void Main(string[] args)
        {
            System.Net.WebClient client = new System.Net.WebClient();
            client.Credentials = new System.Net.NetworkCredential("user", "password");

            // ファイルを転送する場合。
            client.UploadFile("ftp://localhost/test4.txt", "test2.txt");

            // メモリから直接文字列を転送する場合。
            string str = "これはテストの文字列です";
            byte[] bytes = Encoding.UTF8.GetBytes(str); 
            client.UploadData("ftp://localhost/test5.txt", bytes);
            client.Dispose();
        }
    }
}

当然Syste.Net.WebClientを使用しているのでftpに限らずhttpの利用も想定できると思うが…

≫ 続きを読む

2018/07/08 コンピュータ   TakeMe

PythonでFTPサーバーを立ててみる

Pythonで開発用のftpサーバを用意してみた。

Pythonで開発用のftpサーバを簡単に作る方法を探していると,以下のようなコードが上がった。

ユーザ名 user
パスワード password
でダミーのユーザを作成。

import pyftpdlib.authorizers
import pyftpdlib.handlers
import pyftpdlib.servers
import os

# スクリプトのファイルのあるフォルダのfolderフォルダを
# ユーザルートにする
srvRoot = os.path.dirname(__file__) + '\\folder';

auth = pyftpdlib.authorizers.DummyAuthorizer()
auth.add_user('user', 'password', srvRoot, perm='elradfmw')

hndler = pyftpdlib.handlers.FTPHandler
hndler.authorizer = auth

server = pyftpdlib.servers.FTPServer(("0.0.0.0", 21), hndler)

try:
    server.serve_forever();
except KeyboardInterrupt:
    print('interrupted!')

クライアントを作成してみる。といっても接続してファイルをアップロードしてみるだけのプログラムだけど…

from ftplib import FTP

ftp = FTP(
    "localhost",
    "user",
    passwd="password"
)

# ファイルのアップロード(テキスト).
with open("test2.txt", "rb") as f:
    ftp.storlines("STOR /test2.txt", f)

ftp.quit();

例えば,このプログラムを定期的にプログラムを実行すれば定期的にアップロードできる。

ただし,この例ではtest2.txtファイルを一度用意しないといけない。
そこでいwith open......の部分は以下のように変えておくと,文字列を直接ftpサーバのtest3.txtファイルに書き込むことができる。

from io import BytesIO
sample_bytes=bytes('これはテストのバイト列です','utf-8')
f = BytesIO(sample_bytes)
ftp.storlines("STOR /test3.txt", f)

≫ 続きを読む

2018/07/08 コンピュータ   TakeMe

System.Threading.Thread.Startは一度しか開始されない。

.NET FrameworkのSystem.Threading.Threadを使用していて使用方法を誤って,大きなバグを招いてしまった。

System.Threading.Threadの使い方を間違えてしまった。

例えば,以下のようなコードでは最初のthread.Start()では意図通りRun()の中身が実行されるが,2回目のStart()では実行されない。

一応ドキュメントには載っている。

例外が発生すると思うのだが,どういうコンテキストで実行したか,例外が出ないことがあって大きなバグになってしまった。
一回一回new Thread(Run)を呼んでおけばよい。

using System;
using System.Threading;

namespace TEST_THREAD
{
    class Program
    {
        static void Main(string[] args)
        {
            Thread thread = new Thread(Run);

            thread.Start();
            Thread.Sleep(2000);

            thread.Start();
            Thread.Sleep(2000);
        }

        private static void Run()
        {
            Console.WriteLine("Started");
        }
    }
}

≫ 続きを読む

2018/07/04 コンピュータ   TakeMe

WPF DataGridにバインドしてみた

WPFでDataGridにデータをバインドしてみたが,多少はまったので記録

まずは,Viewの部分を確認。

<Window x:Class="WPFDataGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDataGrid"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <DataGrid x:Name="dataGrid" Margin="10,35,10,10" FontSize="30"  AlternatingRowBackground="Azure" ColumnWidth="1*" HeadersVisibility="Column" AutoGenerateColumns="False">
            <DataGrid.Columns >
                <DataGridTextColumn Header="Date Time" Binding="{Binding dateTime}"></DataGridTextColumn>
                <DataGridTextColumn Header="Tick" Binding="{Binding str}"></DataGridTextColumn>
            </DataGrid.Columns>
        </DataGrid>
        <Button Content="確認用" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    </Grid>
 </Window>

次に乗せるデータを定義する。この例では,DataGridのコントロールからの変更ではなくタイマーで値を変更してプロパティ変更を通知してDataGridへ反映させることをシミュレートしてみた。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Timers;
using System.ComponentModel;

namespace WPFDataGrid
{
    public class Datum : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string name)
        {
            if (PropertyChanged == null) return;

            PropertyChanged(this, new PropertyChangedEventArgs(name));
        }

        private Timer timer;
        public Datum()
        {
            dateTime = DateTime.Now;
            str = dateTime.Ticks.ToString();
            timer = new Timer();
            timer.Elapsed += new ElapsedEventHandler(OnElapsed_TimersTimer);
            timer.Interval = 500;
            timer.Start();
        }

        void OnElapsed_TimersTimer(object sender, ElapsedEventArgs e)
        {
            str = DateTime.Now.Ticks.ToString();
        }

        public string _str = "";

        public DateTime dateTime { set; get; }
        public String str {
            set {
                _str = value;
                OnPropertyChanged("str");
            }
            get {
                return _str;
            }
        }
    }
}

ObservableCollectionを用意してもよいらしいですが,参考にこのようにひとつラップをかけているものがありましたのでとりあえずこうしました。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;

namespace WPFDataGrid
{
    public class NData : ObservableCollection<datum>
    {
        public NData() : base()
        {
            Add(new Datum());
            Add(new Datum());
            Add(new Datum());
        }
    }
}

最終的にItemsSourceへ入れてみた。

public partial class MainWindow : Window
    {
        private NData data = new NData();
        public MainWindow()
        {
            InitializeComponent();

            this.dataGrid.ItemsSource = data;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(data.ToString());
        }
    }

≫ 続きを読む

2018/07/01 コンピュータ   TakeMe

知らないうちにCSSは進化していた

2008年ころにWebサイトの作成をしていたころにはCSSでWidthに100%などはできたが,100%-200pxなどはできなかったように思ったがcalc(100%-200px)などの非常に有用な仕組みが追加されている。

Internet Explorer 9とか10とかが標準で使われていた時にはcalc()なんて使えなかったので,必要があればJavaScriptでプログラムする必要があった。

親要素のWidthを確認してWidthを指定するというプログラムを作っておく必要があった。

何とも簡単になった。
ただし,問題があって各実装で互換性問題を抱えている。

@media screen and (max-width: 1024px)

などのクエリもいつの間にか標準化されている。

10年で非常に便利になった。

このサイトをレシポンシブデザインに対応してみました。

≫ 続きを読む

2018/06/24 コンピュータ   TakeMe

GeckoFX45でAny CPU対応できるか

GeckoFX45でAny CPU対応できるかを調べてみた。

Visual Studio を使っていてNuGetでGeckoFx45のGeckFX45.64を一つのプロジェクトにインストールできないようだ。

それで,プロジェクトを2つ作成して片方にGeckoFX45をインストールして,もう一方には64ビット版のGeckoFX45.64をインストールしてこちらを開発用にする。

ビルドの際にGeckoFX45.64をインストールしたプロジェクトのFirefoxをFirefoxフォルダに「新しい場合はコピー」する設定に。ダミープロジェクトのファイルはFirefox32フォルダにコピーするようにする。
if (System.Environment.Is64BitProcess)
で区別してInitializeのパスを切り替える。

これで一応Any CPU対応可能かな?

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using Gecko;

namespace GeckoFXTest
{
    public partial class Form1 : Form
    {
        private GeckoWebBrowser geckoWebBrowser;
        public Form1()
        {
            InitializeComponent();

            if (System.Environment.Is64BitProcess)
            {
                Xpcom.Initialize("Firefox");
            }
            else
            {
                Xpcom.Initialize("Firefox32");
            }
            geckoWebBrowser = new GeckoWebBrowser { Dock = DockStyle.Fill };
            this.Controls.Add(geckoWebBrowser);
            geckoWebBrowser.Dock = DockStyle.Fill;
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            geckoWebBrowser.Navigate("google.co.jp");
        }
    }
}

 

≫ 続きを読む

2018/06/23 コンピュータ   TakeMe