私の担当授業の説明用に作成したRIPの仕組みを学習者に理解してもらうためのjQuery Pluginです。 PowerPointやKeynoteで授業資料を作成するより、Webサイト(ページ)として授業資料を作成した方が、よりマルチメディア、オンデマンド、汎用性、可用性に優れると考え、私が担当する授業の授業資料は原則Webサイト上に作成しています。
jquery.rip.jsはRIPの仕組みなどを学習させるWeb教材(授業資料)を作成するためのjQueryプラグインです。 JavaScriptでネットワーク構成(セグメント、ルーターなど)を定義することにより、ネットワークの構成図、経路情報テーブルなどを表示します。 さらに、経路情報の送出をユーザによるクリックあるいは一定間隔で自動的に行うことができ、経路情報テーブルが自動的に作成(更新)されていく様子を見ることができます。 また、任意のタイミングでルーターを追加したりすることもできます。
大学などで関係する授業(ネットワーク関係の授業)での利用を想定しています。
/* $Id: demo01.js,v 1.2 2019/01/21 22:53:03 yahiro Exp $ -*- js -*- Copyright (C) 2019 by Takeki Yahiro. All Rights Reserved. demo01.js */ ;(function($){ $(document).ready( function(){ $('#demo01').rip( { data: { segment: [ { id: 1, name: 'Network 1', pc: 4, ip: '192.168.1.0', netmask: 24 }, { id: 2, name: 'Network 2', pc: 10, ip: '192.168.2.0', netmask: 24 }, { id: 3, name: 'Netwrok 3', pc: 4, ip: '192.168.3.0', netmask: 24 }, { id: 4, name: 'Netwrok 4', pc: 4, ip: '192.168.4.0', netmask: 24 }, { id: 5, name: 'Netwrok 5', pc: 4, ip: '192.168.5.0', netmask: 24 }, { id: 2000, name: 'ISP (Internet)', type: 'isp' } ], router: [ { id: 100, name: 'Router 1', link: [ 1,2 ] }, { id: 200, name: 'Router 2', link: [2, 3] }, { id: 300, name: 'Router 3', link: [4, 5, 1] }, { id: 1000, name: 'NAT', link: [ 1, 2000], type: 'nat' } ] }, riptable: '#rip', ripexpire: 30, edittable: false }); }); /* end of ready() */ })(jQuery);
htmlでネットワークの構成図を表示する領域div
と
経路情報テーブルを表示する領域div
を確保し、それぞれに異なるIDを割り当ててください。この時、ネットワークの構成図を表示する領域に、スタイルシートで適切な高さheight
を与えてください。
<div id="figure" style="height: 400px; width: 100%;"></div> <div id="riptable"></div> <!-- jQueryの読み込み --> <script src="...."></script> <!-- Bootstrapの読み込み cssの読み込みもお忘れなく --> <script src="...."></script> <!-- vis.js の読み込み --> <script src="...."></script> <!-- 本プラグインの読み込み --> <script src="jquery.rip.js"></script> <!-- ネットワークの定義など --> <script src="sample.js"></script>
ネットワーク構成図の領域(上記の例では$('#figure')
)に対して.rip( )
メソッドを呼び出してください。ripの引数は下記を参考にしてください。
JavaScriptでネットワーク構成の定義などを行ってください。
/* $Id: sample.js,v 1.1 2019/01/22 14:51:54 yahiro Exp $ -*- js -*- Copyright (C) 2019 by Takeki Yahiro. All Rights Reserved. sample.js */ ;(function($){ $(document).ready( function(){ $('#figure').rip( { /* network configuration */ }); }); /* end of ready() */ })(jQuery);
Method | 説明 | 例 |
---|---|---|
rip() |
初期化メソッドです。が、同時にネットワーク構成図を経路情報テーブルも表示します。 引数として与えられた定義にしたがって、ネットワーク構成図を作成します。 また、経路情報テーブルも表示します。 |
$('#figure').rip();
|
$('#figure').rip( メソッド, options )
の書式で各種メソッドを呼び出します。
rip( 'append', [options] ) |
引数として与えられた定義を、既存のネットワーク構成に追加します。 同時に、ネットワーク構成図も更新されます。 |
$('#figure').rip( 'append', {......} );
|
rip( 'remove' )
未実装
|
指定されたセグメントやルータを削除します(の予定)。 現時点では、この機能は未実装です。必要な場合は、経路情報テーブルの稼働中をクリックすることによりルーターを故障した状態にできますので、それで代用をお願いします。 |
|
rip( 'edit')
未実装
|
指定されたセグメントやルータの編集をします(の予定)
|
|
rip( 'fit' ) |
ネットワーク構成図のサイズを最適化します。 |
$('#figure').rip( 'fit');
|
ネットーワーク構成などは.rip()
メソッドの引数として定義してください。
未定義で呼び出すと、Plugin内でデフォルトとして定義されたネットワーク構成となります(サンプル程度の構成なので、なにもおもしろくありません)。
Objcet | 型 | 摘要 | 例 |
---|---|---|---|
data | Object |
ネットワーク構成を定義します。
従属するObjectとして |
data: {
|
riptable | Strings |
経路情報テーブルを表示する領域のidを指定します。 |
riptable: '#figure'
|
ripexpire | Integer |
経路情報の保持時間を秒数で指定します。既定値は30秒です。 |
ripexpire: 30 |
edittable | N/A | 今のところ、未使用です。 |
Objcet | 型 | 摘要 | 例 |
---|---|---|---|
router | Object 配列 |
ルーターを配列として定義します。
一つのルータには |
data : {
|
segument | Object 配列 |
セグメント(LAN)を配列として定義します。一つのセグメントには
|
data : {
|
Objcet | 型 | 摘要 | 例 |
---|---|---|---|
id | Integer |
router, segumentを通しての固有の識別番号を指定します。他のrouterやsegumentと重複しないように番号を割り振ってください。番号は連続している必要はありません。 |
|
name | Strings | ルータの名称を指定してくだだい | |
link | Integer 配列 | 接続しているセグメントのidを配列で指定してください。(足を突っ込んでいるセグメントのid) |
|
type (省略可) | Strings | ルータの種別を指定してください。ここで指定できるものは下記の通りです。
|
type: 'nat'
|
Objcet | 型 | 摘要 | 例 |
---|---|---|---|
id | Integer |
router, segumentを通しての固有の識別番号を指定します。他のrouterやsegumentと重複しないように番号を割り振ってください。番号は連続している必要はありません。 |
|
name | Strings |
セグメントの名称を指定してください。 |
|
ip | Strings |
ネットワークアドレスを指定してください。 |
ip: '192.168.1.0'
|
netmask | Integer |
サブネットマスク長を指定してください。 注意:255.255.255.0形式では指定できません。 |
netmask: 24
|
pc | Integer |
セグメントに属する端末数を指定してください。ネットワーク図に表示される端末の数となります。 |
pc: 14
|