目的
今 SNMP 関連のことをやっていて、いい MIB ブラウザがないか探しています。
アプリ版であれば前回ご紹介した以下の SnmpB があるのですがもっと手軽にみたいなと思い、少し構想を練っています。
イメージとしては以下のような感じです。
- MIB ツリーをブラウザで表示(インストール不要で手軽)
- MIB ファイルを後から追加することでツリーの拡張ができる
- MIB ツリーから対象の SNMP ホストに SNMP-Get、SNMP-Set ができる
一気に全部はできないのと Web 関連のアプリ開発はちんぷんかんぷんなので、一歩ずつ進めていこうかなと思い、今回はブラウザ内にツリー表示をするところまでをやっていきたいと思います。
やったこと
いろいろなサイトを参考に以下のことを実施。
- jstree をダウンロード
- ダウンロードした 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」でうまく動かず。。
思考錯誤した結果、サンプル通り <link rel="stylesheet" href="./js/jstree/style.min.css"> を先頭にしたらうまく動作しました。なんで？？
今後
このツリー表示機能を参考にして、念願の MIB ツリーを作成していきたいと思います。
いつできるかな。。。
