パソコンのリモート操作環境構築

に が投稿

サーバーにWOL機能を追加

サーバーにwol機能を追加するには，コマンドレベルによるmagic packet送出が必要。
丁度よさそうなツールがあったので有難く使用させてもらう。_(._.)_
nWOLc マニュアル：nWOLのコンソールコマンド (n-archives.net)
これを使用して，プログにiframe埋め込みで作ってみた。非公開ページで自分しか使用しないので体裁は整えないでかなり手抜きをした。時間があったらphp,css,javascriptで作ってみることにする。

PHP作成

<form method="post" action="">
  <input type="radio" name="macadres" id="server01" value="000000000001">
    <label for="server01"> server01_____192.168.***.001____00:00:00:00:00:01 </label><br>
  <input type="radio" name="macadres" id="server02" value="000000000002">
    <label for="server02"> server02_____192.168.***.002____00:00:00:00:00:02 </label><br>
  <input type="radio" name="macadres" id="server03" value="000000000003">
    <label for="server03"> server03_____192.168.***.003____00:00:00:00:00:03 </label><br>
  <input type="radio" name="macadres" id="server04" value="000000000004">
    <label for="server04"> server04_____192.168.***.004____00:00:00:00:00:04 </label><br>
  <p><input type="submit" value="submit"></p>
 </form>

<?php 
if(isset($_POST['macadres'])) {  
  //$_POST['macadres']がすでに定義されている（値が送信されている）場合
  $macadres = $_POST['macadres'];
     $cmd = "nwolc -m " . $macadres;
    exec($cmd,$opt);
    foreach($opt as $value){
     echo $value;
     }
 }
?>
<p><a href="">return</a></p>


ブログに埋め込み

ダウンロードした「nWOLc.exe」はphpのルートに保存。
作成した「nwolc.php」はブログのフォルダーに保存。(今回はwp-contentに入れた) 
ブログの非公開ページにiframeで埋め込み。

<iframe src="https://hoge.com/hoge-blog/wp-content/nwolc.php" width="710" height="300">
</iframe>


サーバーWOL機能完成デモ

下記はデモなので実際にmagic packetは送出されない。
submitで実際と同じメッセージを出している。
「Magic packet sent to MAC:000000000001 Port:9」

　

サーバーにWOL機能を追加(デザイン見直し)

時間があったらと思っていたが，ネット検索して自分の思いに近いコードがあったのでそれを利用させてもらい案外簡単に作ることができた。起動確認を追加した以外は機能的には何も変わっていないのだが，php,css,javascriptを使用して見た目を良くしてみた。
これもデモ仕様なので，実際にmagic packetは送出されない。
１．「IP address and Operation status」欄のofflineの起動したいホストを選択して，
　　「submit」クリック。
２．「return & status update」をクリックして戻る。
３．「IP address and Operation status」欄がonlineになるまで，「return & status update」を
　　 何度かクリックしてonlineを待つ。※デモなので変化しない。

　tnwolc.php，wolstyle.css，wolscript.js　を作成してみた。メインはphpで，cssとjavascriptはおまけ的な存在で機能に直接関係ないのだが，見た目を良くするために作成した。
今回は４台のHOSTを登録した。ＷＯＬはMACアドレスで行うが，稼働確認はPINGのIPアドレスで行う。今回使用したツール「nwolc.exe」のコマンド実行後の返答メセージをそのまま表示している。

tnwolc.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>WOL</title>
  <link rel="stylesheet" href="wolstyle.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="wolscript.js"></script>
</head>
<body>
  <div id="wrapper">
<form method="post" action="">
<table id="target-table">
  <thead>
    <tr>
      <th>OPTION</th>
      <th>HOST name</th>
      <th>MAC address</th>
      <th>IP address and Operation status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="radio" name="macadres" value="000000000001" required>
      </td>
     <td>server01</td>
     <td>00:00:00:00:00:01</td>
     <td><?php 
          $cmd1 = "nwolc -p " . "192.168.***.001";
          exec($cmd1,$opt1);
          foreach($opt1 as $value1){
          if(strpos($value1,'offline') !== false){
            echo '<font color="red"> '.$value1.' </FONT>';
             }
           if(strpos($value1,'online') !== false){
            echo '<font color="green"> '.$value1.' </FONT>';
             }
          }            
          ?></td>
    </tr>
    <tr>
      <td>
        <input type="radio" name="macadres" value="000000000002" required>
      </td>
      <td>server02</td>
      <td>00:00:00:00:00:02</td>
     <td><?php 
          $cmd2 = "nwolc -p " . "192.168.***.002";
          exec($cmd2,$opt2);
          foreach($opt2 as $value2){
          if(strpos($value2,'offline') !== false){
            echo '<font color="red"> '.$value2.' </FONT>';
             }
          if(strpos($value2,'online') !== false){
            echo '<font color="green"> '.$value2.' </FONT>';
             }
          }            
          ?></td>
    </tr>
      <td>
        <input type="radio" name="macadres" value="000000000003" required>
      </td>
      <td>server03</td>
      <td>00:00:00:00:00:03</td>
     <td><?php 
          $cmd3 = "nwolc -p " . "192.168.***.003";
          exec($cmd3,$opt3);
          foreach($opt3 as $value3){
          if(strpos($value3,'offline') !== false){
            echo '<font color="red"> '.$value3.' </FONT>';
             }
          if(strpos($value3,'online') !== false){
            echo '<font color="green"> '.$value3.' </FONT>';
             }
          }            
          ?></td>
    </tr>
      <td>
        <input type="radio" name="macadres" value="000000000004" required>
      </td>
      <td>server04</td>
      <td>00:00:00:00:00:04</td>
      <td><?php 
          $cmd4 = "nwolc -p " . "192.168.***.004";
          exec($cmd4,$opt4);
          foreach($opt4 as $value4){
           if(strpos($value4,'offline') !== false){
            echo '<font color="red"> '.$value4.' </FONT>';
             }
          if(strpos($value4,'online') !== false){
            echo '<font color="green"> '.$value4.' </FONT>';
             }
          }            
          ?></td>
    </tr>
  </tbody>
</table>
  <!-- /#wrapper --></div>
  <p><input type="submit" value="submit"></p>
</form>
</body>
</html>

<?php 
if(isset($_POST['macadres'])) {  
  //$_POST['macadres']がすでに定義されている（値が送信されている）場合
  $macadres = $_POST['macadres'];
     $cmd = "nwolc -m " . $macadres;
    exec($cmd,$opt);
    foreach($opt as $value){
     echo $value;
     }
 }
?>
<p><a href="">return & status update</a></p>

　※上記網掛けの「HOST name」「MAC address」「IP address」は実際の値に変更する。

　

wolstyle.css

table {
  margin: 0 0 2em 0;
  width: 100%;
}
table tbody tr {
  border: solid 1px rgba(210, 215, 217, 0.75);
  border-left: 0;
  border-right: 0;
}
table tbody tr:nth-child(2n + 1) {
  background-color: rgba(100, 100, 255, 0.1);
}
table td {
  padding: 0.75em 0.75em;
}
table th {
  color: #3d4449;
  font-size: 0.9em;
  font-weight: 600;
  padding: 0 0.75em 0.75em 0.75em;
  text-align: left;
}

　

wolscript.js

function preloader() {
  let table = document.getElementById("target-table");
  let rows = table.querySelectorAll("tbody tr");

  let backgroundcolor_dict = {};
  let tr_color = window.getComputedStyle(rows[0], "").color;

  rows.forEach((row) => {
    // 行ごとに背景色が異なるため全ての行の変更前の背景色を取得
    backgroundcolor_dict[String(row.rowIndex)] = window.getComputedStyle(
      row,
      ""
    ).backgroundColor;

    row.addEventListener(
      "click",
      function () {
        // 一度全て元の配色
        rows.forEach((click_row) => {
          click_row.style.backgroundColor =
            backgroundcolor_dict[String(row.rowIndex)];
          click_row.style.color = tr_color;
        });
        // 選択された行のみ配色変更
        row.style.backgroundColor = "#0A9BCD";
        row.style.color = "#FFFFFF";

        if (row.querySelector("input").type == "radio") {
          row.querySelector('input[type="radio"]').checked = true;
        }
        if (row.querySelector("input").type == "checkbox") {
          if (row.querySelector('input[type="checkbox"]').checked == false) {
            row.querySelector('input[type="checkbox"]').checked = true;
          } else {
            row.querySelector('input[type="checkbox"]').checked = false;
          }
        }
      },
      false
    );
  });
}

window.onload = preloader;

　

TOPに戻る

機能アップ
2023/02/14 WOLツールをバージョンアップした。
2023/03/20 Word Pressに「Wake On LAN」機能を埋め込み – na-blog (na-3.com)

最終形2023/11/12

WOL機能追加について一連の開発の最終形態なのかと思う
　(サーバー完結形でWordPressに埋め込み)
2023/11/12 パソコンの起動・停止監視ツール – na-blog (na-3.com)

固定ページ: 1 2 3

コメントは受け付けていません。