2011|08|
2013|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|05|06|07|08|09|10|11|12|
2016|01|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|

2020-01-16 Web画面の中央で「移動中」が点滅するhtml [長年日記]

Web画面の中央で「移動中」が点滅するhtmlを作って欲しいといったら、私の上司が作ってくれました。

以下を"blue.html"という名前で保存

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" type="text/css" href="blue-style.css">
    <meta charset="utf-8">
  </head>
  <body>
    <div class="central">
      <div class="subtitle">
        移動中
      </div>
    </div>
  </body>
</html>
 

以下を"blue-style.css"という名前で保存

body {
  background: blue;
  color: white;
  overflow: hidden;
}
 
.central {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  font-size: 220px;
  font-weight: bold;
  -webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}
 
@-webkit-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@-moz-keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes blink{
  0% {opacity:0;}
  100% {opacity:1;
}
 

2020-01-15 ボタンを押すと全てのクライアントのコンテンツが同時に代わるように改造した [長年日記]

GOによる簡単なWebSocketサーバの作り方 の"index.html"だけを変更して、ボタンを押すと全てのクライアントのコンテンツが同時に代わるように改造した。(文字表示はコメントアウトして消すこと)

稼働確認直後の、もっとも汚い状態のコードをアップしている。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Server</title>
  </head>
  <body>
 
 
    <input id="Button1" type="button" value="スタンバイ中" onclick="onButtonClick1();" />
    <input id="Button2" type="button" value="待機中" onclick="onButtonClick2();" />
    <input id="Button3" type="button" value="移動中" onclick="onButtonClick3();" />
    
    
    <!--
    <input id="input" type="text" />    
    -->
 
    <p id="input"></p>
    <p id="input1"></p>
    <p id="input2"></p>
    <p id="input3"></p>
 
    <!--
    <button onclick="send()">Send</button>
    -->
    <!--
    <pre id="output">outputのエリア</pre>
    -->
 
    <pre id="output"></pre>    
 
    <!--
    <img id="image_place" src="http://192.168.0.88:8686/red.html"/>
 
    <img id="image_place" src="http://192.168.0.88:8686/image3.jpg"/>
    -->
 
    <iframe id="image_place" src="http://192.168.0.88:8686/red.html" width="100%" height="700"></iframe>
 
    
    <script>
      var input1 = document.getElementById('input1');
      var input2 = document.getElementById('input2');
      var input3 = document.getElementById('input3');      
 
      var output = document.getElementById('output');
      var socket = new WebSocket("ws://" + window.location.host + "/chat");
      
      // 江端追記
      // img要素を取得する
      var img = document.getElementById("image_place");
      // 表示する画像番号
      var idx = 1;
      
      // 江端追記ここまで
      
      socket.onopen = function() { 
      // output.innerHTML += "Connection OK\n";
      };
      
      socket.onmessage = function(e) {
      // output.innerHTML += "Get message from server:" + e.data + "\n";
 
      var obj = JSON.parse(e.data); // JSONオブジェクトに変換
 
      // output.innerHTML += "Get object :" + obj.Message + "\n";
      
          
      // 江端追記
      
      //idx++;
      //if (idx > 3) {
      //idx = 1;
      //}
      
      //output.innerHTML += idx + "\n";
      //output.innerHTML += "before\n";
 
      
      // switch(e.data){
      switch(obj.Message){      
      case '1':
      // console.log('1です');
      // document.write("1です<br/>");
      // document.getElementById("output").innerHTML += "1です";
 
      // img.src = "http://kobore.net/soft/wstest32/image1.jpg";
      // img.src = "http://192.168.0.88:8686/image1.jpg";
      img.src = "http://192.168.0.88:8686/red.html";
 
      break;
 
      case '2':
      // console.log('2です');
      // document.write("2です<br/>");
      // document.getElementById("output").innerHTML += "2です";
      // img.src = "http://192.168.0.88:8686/image2.jpg";
      img.src = "http://192.168.0.88:8686/yellow.html";
 
      break;
 
      case '3':
      // console.log('3です');
      // document.write("3です<br/>");
      // document.getElementById("output").innerHTML += "3です";
      // img.src = "http://192.168.0.88:8686/image3.jpg";
      img.src = "http://192.168.0.88:8686/blue.html";      
 
      break;
      }
 
      // img要素のsrcに画像ファイル名を設定する
      //img.src = "image" + idx + ".jpg";
      // img.src = "http://192.168.101.1:8686/image" + idx + ".jpg";
      //img.src = "http://192.168.0.88:8686/image" + idx + ".jpg";
 
      
      // output.innerHTML += "after\n";
      
      // 江端追記ここまで
      
      };
 
 
      //function send() {
      //  socket.send(JSON.stringify( 
      //  {
      //     message: input.value
      //  }
      //  ));
      //  input.value = "";
      //};
 
      function onButtonClick1(){
        input1.value = "1";
        socket.send(JSON.stringify( 
        {
           message: input1.value
        }
        ));
        input1.value = "";
      };
 
      function onButtonClick2(){
        input2.value = "2";
        socket.send(JSON.stringify( 
        {
           message: input2.value
        }
        ));
       input2.value = "";
      };
 
      function onButtonClick3(){
        input3.value = "3";      
        socket.send(JSON.stringify( 
        {
           message: input3.value
        }
        ));
       input3.value = "";
      };
    </script>
  </body>
</html>
 
 
 

"./static/red.html 等は、wstest4に入っている


2020-01-03 オムロン社センサ 2jcie-bu01についてのコーディングについて [長年日記]


2020-01-02 GOによる簡単なWebSocketサーバの作り方 [長年日記]

GOによる簡単なWebSocketサーバの作り方

GOによる簡単なWebSocketサーバの作り方

  • 初版 2020/01/01 

     /home/kobore/www/soft/wstest32に一式あり

    1.目的

    • ラズパイを使って、クライアントで同じ画像の表示をさせたい
    • WebSocketを使ってクライアン間で共有させることを考えた

    2.課題

    • サンプルプログラムを見ても、(私には)仕組みが良く分からない
    • チャットアプリの例は沢山あるが、画像を共有する方法は分からなかった(多分あると思う)
    • が、まっとうな方法が分からなかったので、サンプルプログラムを流用させて貰うことにした

    3.前提

    • ラズパイにgoをインストールしておく
      • ネットに沢山が記載がある
    • "GOによる簡単なWebサーバの作り方"を作っておく
    • http://www.kobore.net/diary_techno/?date=20200101
    • go get github.com/gorilla/websocke
    • touch websocket-server.go
    • touch index.html

    4.サーバプログラム

    • https://qiita.com/__init__/items/08cbc3a870178fd6fc32 の内容と同じ
    • "./websocket-server.go"
      • package main
      • import (
        • "log"
        • "net/http"
        • "github.com/gorilla/websocket"
      • )
      • // WebSocket サーバーにつなぎにいくクライアント
      • var clients = make(map[*websocket.Conn]bool)
      • // クライアントから受け取るメッセージを格納
      • var broadcast = make(chan Message)
      • // WebSocket 更新用
      • var upgrader = websocket.Upgrader{}
      • // クライアントからは JSON 形式で受け取る
      • type Message struct {
        • Message string `json:message`
      • }
      • // クライアントのハンドラ
      • func HandleClients(w http.ResponseWriter, r *http.Request) {
        • // ゴルーチンで起動
        • go broadcastMessagesToClients()
        • // websocket の状態を更新
        • websocket, err := upgrader.Upgrade(w, r, nil)
        • if err != nil {
          • log.Fatal("error upgrading GET request to a websocket::", err)
        • }
        • // websocket を閉じる
        • defer websocket.Close()
        • clients[websocket] = true
        • for {
          • var message Message
          • // メッセージ読み込み
          • err := websocket.ReadJSON(&message)
          • if err != nil {
            • log.Printf("error occurred while reading message: %v", err)
            • delete(clients, websocket)
            • break
          • }
          • // メッセージを受け取る
            • broadcast <- message
        • }
      • }
      • func main() {
        • // localhost:8080 でアクセスした時に index.html を読み込む
        • http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
          • http.ServeFile(w, r, "index.html")
        • })
        • http.HandleFunc("/chat", HandleClients)
        • err := http.ListenAndServe(":8080", nil)
        • if err != nil {
          • log.Fatal("error starting http server::", err)
          • return
        • }
      • }
      • func broadcastMessagesToClients() {
        • for {
          • // メッセージ受け取り
          • message := <-broadcast
          • // クライアントの数だけループ
          • for client := range clients {
          • // 書き込む
            • err := client.WriteJSON(message)
            • if err != nil {
              • log.Printf("error occurred while writing message to client: %v",
        • err)
          • client.Close()
          • delete(clients, client)
          • }
          • }
          • }
      • }
    • 起動方法
      • go run websocket-server.go

    5.クライアントプログラム

    • こっちの方は、https://qiita.com/__init__/items/08cbc3a870178fd6fc32 の内容にちょっと追加をする
    • まったく美しくない方法だが(本来ならWebSocketを使うべき)、もうなにふり構わない
    • "./index.html"
      • コード
        • <!DOCTYPE html>
          • <head>
            • <meta charset="UTF-8">
            • <meta name="viewport" content="width=device-width, initial-scale=1.0">
            • <meta http-equiv="X-UA-Compatible" content="ie=edge">
            • <title>WebSocket Server</title>
          • </head>
          • <body>
            • <input id="input" type="text" />    <!-- 入力文字を表示  -->
            • <button onclick="send()">Send</button><!-- ボタンのメソッドをボタン本体を表
        • 示  -->
          • <pre id="output">outputのエリア</pre><!-- 出力結果を表示  -->
          • ~ <img id="image_place" src="http://192.168.0.88:8686/image3.jpg"/>
          • <script>
            • var input = document.getElementById('input');
            • var output = document.getElementById('output');
            • var socket = new WebSocket("ws://" + window.location.host + "/chat");
            • // 江端追記
            • // img要素を取得する
            • var img = document.getElementById("image_place");
            • // 表示する画像番号
            • var idx = 1;
            • // 江端追記ここまで
            • socket.onopen = function() {
            • // output.innerHTML += "Connection OK\n";
            • };
            • socket.onmessage = function(e) {
            • // output.innerHTML += "Get message from server: " + e.data + "\n";
            • // 江端追記
            • idx++;
            • if (idx > 3) {
            • idx = 1;
            • }
            • //output.innerHTML += idx + "\n";
            • //output.innerHTML += "before\n";
            • // img要素のsrcに画像ファイル名を設定する
            • //img.src = "image" + idx + ".jpg";
            • ~ img.src = "http://192.168.0.88:8686/image" + idx + ".jpg";
            • //output.innerHTML += "after\n";
            • // 江端追記ここまで
            • };
            • function send() {
              • socket.send(JSON.stringify(
              • {
                • message: input.value
              • }
              • ));
              • input.value = "";
            • };
          • </script>
          • </body>
        • </html>
      • 起動方法
        • http://192.168.0.88:8080/

    6.その他

    • 画像の場所
      • "./static/image1.jpg
        • 起動方法
          • http://192.168.0.88:8686/image1.jpg
      • "./static/image2.jpg
        • 起動方法
          • http://192.168.0.88:8686/image2.jpg

2020-01-01 GOによる簡単なWebサーバの作り方 [長年日記]

http://www.kobore.net/soft/wstest4/go_server.mm.html

GOによる簡単なWebサーバの作り方

GOによる簡単なWebサーバの作り方

  • 初版 2020/01/01

    /home/kobore/www/soft/wstest4に一式あり

    1.目的

    • WebSocketと連動させる方法を考えたが、難しいので単体で作ることにした

    2.サーバプログラム

    • "./main.go"
      • package main
      • import (
        • "log"
        • "net/http"
      • )
      • func main() {
        • http.Handle("/", http.FileServer(http.Dir("static")))
        • if err := http.ListenAndServe(":8686", nil); err != nil {
          • log.Fatal("ListenAndServe: ", err)
        • }
      • }
    • 起動方法
      • >go run main.go

    3.クライアントプログラム

    • "./index.html"
      • コード
        • <!DOCTYPE html>
          • <head>
            • <title>HTMLの練習1</title>
          • </head>
          • <body>
            • 初めてのWebページ1です。
          • </body>
        • </html>
      • 起動方法
        • http://192.168.0.88:8686/
    • "./user.html"
      • コード
        • <!DOCTYPE html>
          • <head>
            • <title>HTMLの練習2</title>
          • </head>
          • <body>
            • 初めてのWebページ2です。
          • </body>
        • </html>
      • 起動方法
        • http://192.168.0.88:8686/user.html

    4.その他

    • 画像を表示したい場合等
    • "./static/image1.jpg
      • 起動方法
        • http://192.168.0.88:8686/image1.jpg
    • "./static/image2.jpg
      • 起動方法
        • http://192.168.0.88:8686/image2.jpg

2019-12-28 GO言語のインストールのメモ [長年日記]

sudo apt-get install golang-go
sudo apt-get update
 
sudo vim ~/.bashrc
  export GOENV_ROOT=$HOME/.goenv
  export PATH=$GOENV_ROOT/bin:$PATH
  eval "$(goenv init -)"
 
cd /etc/apt/sources.list.d/
sudo vim google.list
で
deb http://dl.google.com/linux/chrome/deb/ stable main
をコメントアウトする。
 
git clone https://github.com/syndbg/goenv.git ~/.goenv
 
source .bashrc
 
goenv install -l
 
でバーションを確認できる。
 
goenv install 1.13.5  (私はこのバージョンを選んだ)
go version (バージョンの確認
 
以上

2019-12-01 eth0の設定のないラズパイに、IPアドレスを付与する方法 [長年日記]

/etc/network/interfaces に以下を追加

allow-hotplug eth0
iface eth0 inet static
address 192.168.0.20
netmask 255.255.255.0
gateway 192.168.0.1
dns-nameservers 192.168.0.1

上記のやり方は「古い」方法らしいのだけど、以下の「新しい」やり方では固定IPが強制的に解除されるという問題が発生した

/etc/dhcpcd.conf

interface eth0
static ip_address=192.168.0.88/24
static routers=192.168.0.1
static domain_name_servers=192.168.0.1 8.8.8.8

2019-11-23 Windows10で2つのWiFiを使えるようにする方法 [長年日記]

http://kobore.net/2-wifi-window10.mm.html


2019-11-22 NICが二つあると、片方が認識しない(ことがある) [長年日記]

_ https://blog.treedown.net/entry/2017/11/17/010000


2019-11-21 「Windows 10 Home」でローカルグループポリシーエディターを使用する方法 [長年日記]

_ https://www.japan-secure.com/entry/how-to-use-local-group-policy-editor-in-windows-10-home.html

@echo off 
pushd "%~dp0" 
dir /b %SystemRoot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientExtensions-Package~3*.mum >List.txt 
dir /b %SystemRoot%\servicing\Packages\Microsoft-Windows-GroupPolicy-ClientTools-Package~3*.mum >>List.txt 
for /f %%i in ('findstr /i . List.txt 2^>nul') do dism /online /norestart /add-package:"%SystemRoot%\servicing\Packages\%%i" 
pause