ヤマハルーター CustomGUIの設定例

<img src="https://img.shields.io/badge/YAMAHA-RTX-blue">

# 前置き
ヤマハさんのルーターの機能のひとつで、
ユーザー毎に専用画面を表示できるカスタムGUIという機能があります。
そこからルーターにコマンドを送ったりできるんですね。
ボタン操作でマジックパケットを送ったりとか、用途によっては便利なわけです。

![00067-1251955059.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180964/80db062d-d321-ea23-3303-06d2dbc8b702.png)


# 本題
ヤマハさんの公式ホームページに設定例がありますが、コールバック関数の例しかないので、コマンド投げるだけで戻り値いらないパターンとか、戻り値を再利用してもう一回ルータに命令送って・・・とかやろうとすると、大変困るわけです。
そこで、Promise で動くコードにしました。
`.then`で好きなだけつなげて、インデントも増えない。


# 実装コード サンプル

HTML上にボタン一つ表示させているだけですが、
ボタンを押すとルーターのコンフィグが表示されるコードです。

``` HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="/custom/custom_gui_lib.js"></script>
<script type="text/javascript">
<!--

function createHttpRequest() {
  if (window.ActiveXObject) {
    try {
      return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        return null;
      }
    }
  }
  else if (window.XMLHttpRequest)
    return new XMLHttpRequest();
  else
    return null;
}

function sendRequest(data, async) {
  let cmd = "#" + getSessionId() + "\r\n" + data;
  return new Promise((resolve, reject) => {
    let httpoj = createHttpRequest();
    httpoj.open("POST", "/custom/execute", async);
    httpoj.onreadystatechange = function() {
      if (httpoj.readyState == 4) {
        if (httpoj.status == 200) {
          resolve(httpoj);
        } else {
          reject(new Error("実行失敗"));
        }
      }
    };
    httpoj.send(cmd);
  });
}

function CommandResult(oj) {
  return new Promise((resolve, reject) => {
    if (oj.status == 200) {
      resolve(oj.responseText);
    } else {
      reject(new Error("設定内容を取得できませんでした"));
    }
  });
}

function convertText(str) {
  str = str.toString();
  str = str.replace(/&/g, "&amp;");
  str = str.replace(/</g, "&lt;");
  str = str.replace(/>/g, "&gt;");
  str = str.replace(/"/g, "&quot;");
  str = str.replace(/'/g, "&#39;");
  str = str.replace(/ /g, "&nbsp;");
  str = str.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
  str = str.replace(/\r?\n/g, "<br/>\n");
  return str;
}

function ShowConfig() {
  let cmd = "show config\r\n";
  sendRequest(cmd, true)
    .then(response => CommandResult(response))
    .then(response => OutputHTML(response))
    .catch(error => OutputHTML(error));
}

function OutputHTML(router_result) {
  return new Promise((resolve) => {
    let ret = document.getElementById("CustomGUI_Output");
    ret.innerHTML = convertText(router_result);
    resolve();
  });
}
//-->

</script>
</head>

<body>
<input type="button" value="設定表示" onclick="return ShowConfig();"><br><br>
<div id="CustomGUI_Output"></div>
</body>
</html>
```

# 雑記
ヤマハさんのルータ、RTXシリーズは昔からありますが、
NVIDIA RTX が登場し、ごちゃるなぁと思っていたら、
どうやら、バージョン管理ツールにも rtx なるものがある模様。
（でも mise にリネームされた）

何が言いたいかというと、タグの RTX って、どの RTX なんだろう。
入れない方が良かったんだろうか。

ページの頭のほうにある画像は、Stable Diffusionでつくりました。初めての生成AIです。アイキャッチ的なものを作りたかったのでやってみました。環境構築は小一時間程度で、Pythonのパスを通し忘れて再インストールしましたが、半分くらいはダウンロード時間だったような気がします。思っていたよりも簡単にできました。

# 参考
[ヤマハネットワーク製品](https://network.yamaha.com/)
[ヤマハネットワーク周辺機器 技術情報ページ](https://www.rtpro.yamaha.co.jp/)
[ヤマハ カスタムGUI](https://www.rtpro.yamaha.co.jp/RT/docs/custom-gui/index.html)