$Date: 2019/01/24 11:07:54 $

概要

私の担当授業の説明用に作成したRIPの仕組みを学習者に理解してもらうためのjQuery Pluginです。 PowerPointやKeynoteで授業資料を作成するより、Webサイト（ページ）として授業資料を作成した方が、よりマルチメディア、オンデマンド、汎用性、可用性に優れると考え、私が担当する授業の授業資料は原則Webサイト上に作成しています。

jquery.rip.jsはRIPの仕組みなどを学習させるWeb教材（授業資料）を作成するためのjQueryプラグインです。 JavaScriptでネットワーク構成（セグメント、ルーターなど）を定義することにより、ネットワークの構成図、経路情報テーブルなどを表示します。 さらに、経路情報の送出をユーザによるクリックあるいは一定間隔で自動的に行うことができ、経路情報テーブルが自動的に作成（更新）されていく様子を見ることができます。 また、任意のタイミングでルーターを追加したりすることもできます。

大学などで関係する授業（ネットワーク関係の授業）での利用を想定しています。

デモ

FileName: demo01.js
クリップボードにコピーしました 
/* $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 の作成

htmlでネットワークの構成図を表示する領域divと 経路情報テーブルを表示する領域divを確保し、それぞれに異なるIDを割り当ててください。この時、ネットワークの構成図を表示する領域に、スタイルシートで適切な高さheightを与えてください。

FileName: sample.html
クリップボードにコピーしました 
<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>

JavaScript の作成

ネットワーク構成図の領域（上記の例では$('#figure')）に対して.rip( )メソッドを呼び出してください。ripの引数は下記を参考にしてください。

JavaScriptでネットワーク構成の定義などを行ってください。

FileName: sample.js
クリップボードにコピーしました 
/* $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()メソッドの引数

ネットーワーク構成などは.rip()メソッドの引数として定義してください。

未定義で呼び出すと、Plugin内でデフォルトとして定義されたネットワーク構成となります（サンプル程度の構成なので、なにもおもしろくありません）。

Objcet 型 摘要 例
data Object

ネットワーク構成を定義します。 従属するObjectとしてrouterとsegmentがあります。（詳細は後述）

 data: {
  router : {....},
  segment: {....}
}
riptable Strings

経路情報テーブルを表示する領域のidを指定します。

 riptable: '#figure'
ripexpire Integer

経路情報の保持時間を秒数で指定します。既定値は30秒です。

 ripexpire: 30
edittable N/A

今のところ、未使用です。

ネットワーク構成の定義 (data object)

Objcet 型 摘要 例
router Object 配列

ルーターを配列として定義します。 一つのルータにはid、name、linkの３つのobjectの定義が必要です。 詳細はルータの定義参照

data : {
  router : [
    {
      id: 100,
      name: 'R1',
      link: [ 1, 2 ]
    },{
    ....
    }
  ]
segument Object 配列

セグメント（LAN）を配列として定義します。一つのセグメントには id、 name、 pc、 ip、 netmaskのobjectの定義が必要です。

data : {
  router : [
    {
      id: 100,
      name: 'R1',
      link: [ 1, 2 ]
    },{
    ....
    }
  ]

ルータの定義 (router objcet)

Objcet 型 摘要 例
id Integer

router, segumentを通しての固有の識別番号を指定します。他のrouterやsegumentと重複しないように番号を割り振ってください。番号は連続している必要はありません。

name Strings ルータの名称を指定してくだだい
link Integer 配列

接続しているセグメントのidを配列で指定してください。（足を突っ込んでいるセグメントのid）
type (省略可) Strings

ルータの種別を指定してください。ここで指定できるものは下記の通りです。

  • router 既定値 / 省略時
  • nat
 type: 'nat'

セグメントの定義 (segment object)

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

サンプル


Fatal error: Uncaught Error: Using $this when not in object context in /usr/local/apache/htdocs/jquery.rip.js/templates_c/b9aa9e2e6627373ff10f633296e82342b412348b_0.file.top.inc.tpl.php:534 Stack trace: #0 /usr/local/lib/php/Smarty3/sysplugins/smarty_template_resource_base.php(123): content_634ad3097e92d9_01841372(Object(Smarty_Internal_Template)) #1 /usr/local/lib/php/Smarty3/sysplugins/smarty_template_compiled.php(114): Smarty_Template_Resource_Base->getRenderedTemplateCode(Object(Smarty_Internal_Template)) #2 /usr/local/lib/php/Smarty3/sysplugins/smarty_internal_template.php(216): Smarty_Template_Compiled->render(Object(Smarty_Internal_Template)) #3 /usr/local/lib/php/Smarty3/sysplugins/smarty_internal_templatebase.php(232): Smarty_Internal_Template->render(false, 0) #4 /usr/local/lib/php/Smarty3/sysplugins/smarty_internal_templatebase.php(116): Smarty_Internal_TemplateBase->_execute(Object(Smarty_Internal_Template), NULL, NULL, NULL, 0) #5 /usr/local/apache/htdocs/cms8/lib/main.php(1680): Smarty_Internal_TemplateBase- in /usr/local/apache/htdocs/jquery.rip.js/templates_c/b9aa9e2e6627373ff10f633296e82342b412348b_0.file.top.inc.tpl.php on line 534