目的

今 SNMP 関連のことをやっていて、いい MIB ブラウザがないか探しています。
アプリ版であれば前回ご紹介した以下の SnmpB があるのですがもっと手軽にみたいなと思い、少し構想を練っています。

amegon.hatenablog.com

イメージとしては以下のような感じです。

MIB ツリーをブラウザで表示(インストール不要で手軽)
MIB ファイルを後から追加することでツリーの拡張ができる
MIB ツリーから対象の SNMP ホストに SNMP-Get、SNMP-Set ができる

一気に全部はできないのと Web 関連のアプリ開発はちんぷんかんぷんなので、一歩ずつ進めていこうかなと思い、今回はブラウザ内にツリー表示をするところまでをやっていきたいと思います。

やったこと

いろいろなサイトを参考に以下のことを実施。

jstree をダウンロード
- https://www.jstree.com/
ダウンロードした jstree を展開
以下のファイルを一か所に保存
- まとめるファイル
  - dist\themes\default\32px
  - dist\themes\default\40px
  - dist\themes\default\style.min.css
  - dist\themes\default\throbber.gif
  - dist\jstree.min.js
- 保存場所
  - <ルートディレクトリ>\js\jstree\

サンプルコードと見た目

<ルートディレクトリ> に sample.html として次項のサンプルコードを作成する。

サンプルコード

ざくっと作成したコードを以下に記載です。
ファイル名を sample.html として以下のコードを張り付けました。
いろいろなサイトを参考にしていたのですが、<script> を置く とか部分的なコードしか載っているところがなかったので、全コード掲載しておきたいと思います。
あとで自分が忘れちゃうから。。

<html lang="ja>
  <head>
    <link rel="stylesheet" href="./js/jstree/style.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/jstree/jstree.min.js"></script>
    <title>jstree サンプル</title>
    <script>
      $(function(){$('#tree1').jstree();});
    </script>
  </head>
  <body>
    <div id="tree1">
    <ul>
      <li>demo1</a></li>
      <li><b>demo2</b>
        <ul>
          <li>demo2-1</li>
          <li><b>demo2-2</b>
            <ul>
              <li>demo2-2-1</li>
              <li>demo2-2-2</li>
            </ul>
          </li>
          <li>demo2-3</li>
        </ul>
      </li>
      <li>demo3</li>
      <li>demo4</li>
      <li><b>demo5</b>
        <ul>
          <li>demo5-1</li>
          <li>demo5-2</li>
          <li>demo5-3</li>
          <li>demo5-4</li>
          <li>demo5-5</li>
        </ul>
      </li>
    </ul>
    </div>
  </body>
</html>

実行結果

sample.html をブラウザで開くと以下みたいに表示されました。
子ノードがあるノードは太字で表示しているので、太字のノードをダブルクリックするとツリーが展開されて子ノードが見れました。

はまったこと

前述したようにサンプルとしての全コードを掲載している参考サイト見つけることができず、途中から自分でトライエラーを繰り返しました。
結果一番はまったのは内の <link> と <script> の記載順序でした。
はじめは <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> を <head> 直下に記載していたのですが「Uncaught ReferenceError: jQuery is not defined」でうまく動かず。。