ネットワーク図を自動で綺麗に書きたい

ネットワーク図を自動で綺麗に書きたい

ネットワーク図をVisioやExcelで書くのは大変。
文書の管理も大変。運用管理ツールなどですでに接続状態はもってるのになぁ・・・といった時に朗報です。

vis.jsという素晴らしいツールがあります!

vis.jsを使えば、JSONデータでホスト(node)と、その接続(edge)を渡すだけで綺麗に自動でホストを配置してネットワークを書いてくれるのです。

以下サンプルです。オプションでかなり色々なカスタマイズが可能です。とりあえずぷよぷよするのをなくしたければ、optionsのphysicsのenabledをfalseにすると動かした位置に止まるようになります。nodeにx,yの座標を入れれば固定位置に置くこともできるので、CoreL3などは固定してしまってもよいかもしれませんね。



HTML5/JavaScriptでARを実現?!

スマートフォンアプリじゃなくても、AR実現できるのですね~
js-arucoのサンプルを貼ってみました。
githubのサンプルが、カメラが自撮り向きになっていて切り替えができなかったので、切り替えボタンをつけ・・・ようと思いましたが、また調べてからにします・・・

QRforJs-arucoDemo





-= Augmented Reality =-

Powered by js-aruco and Three.js

tableのセルの位置をクリックして書き換える

IDが#alertTableのセルをクリックして内容を書き換える


javascriptでDOMを操作してspanをlinkにする方法

span の text をlinkにする

  1. linkにする要素のidを設定します
  2. link先のURLを設定します
  3. spanのDOMオプジェクトを取得します
  4. spanのtext部分を取得します
  5. aタグのエレメントオプジェクとをaTagとして生成します
  6. aTagオブジェクトにhref要素を追加します
  7. aTagオブジェクトにtarget要素を追加します
  8. aTagのドキュメントに取得したlinkのテキストを追加します
  9. spanをaに置き換えます

span に image を付加して link にする

※<span></span> の間に何も無いと表示されません。nodeValueが空っぽだと表示されません。。。
textの例のaTagオブジェクトに imgオブジェクトを生成して、追加するだけです。


wordpressの記事内でjavascriptを動かす

wordpressの記事内にJavaScrictを埋め込みたい場合、そのまま書いちゃうと

で囲われてしまって、旨く動作しません。
これを回避するには、

で囲むとうまくいきました!
但し、スクリプト内で空行があると、ダメっぽいです。また、この括ったdiv内でdivを書くとダメっぽいです。