diff --git a/src/js/src/bookmark/main.js b/src/js/src/bookmark/main.js
index 011e091..e9e057e 100644
--- a/src/js/src/bookmark/main.js
+++ b/src/js/src/bookmark/main.js
@@ -1,20 +1,23 @@
-import { Graphviz } from "https://cdn.jsdelivr.net/npm/@hpcc-js/wasm/dist/index.js";
-
-let counter = 0;
-const lf = "\n";
-
-(async function() {
-  const mime ="image/svg+xml;charset=UTF-8";
-  try {
-    document.querySelector("#dot-src-viewer").value = card2dot();
-    const dataUri = text2DataUriScheme(await dot2svg(document.querySelector("#dot-src-viewer").value),mime);
-    document.querySelector("#ref-map").setAttribute("data", dataUri);  
-  } catch(err) {
-    console.log(err);
-  }
-})();
-
+import { Graphviz } from "/solitude/libs/@hpcc-js/wasm/dist/index.js";
 window.addEventListener("load", (event) => {
+  let counter = 0;
+  const lf = "\n";  
+
+  (async () => {
+    const mime = "image/svg+xml;charset=UTF-8";
+    try {
+      const dotViewer = document.querySelector("#dot-src-viewer");
+      const dot = dotViewer.value = card2dot();
+      const svg = await dot2svg(dot);
+      const dataUri = text2DataUriScheme(svg, mime);
+
+      document.querySelector("#ref-map").setAttribute("data", dataUri);
+    } catch (err) {
+      console.log(err);
+    }
+  })();
+
+
   const handle = handlers.call({});
   const menu = document.querySelector("#menuView");
 
@@ -29,21 +32,7 @@
   editor.addEventListener("click", handle.deleteCard)
 
   const fileChooser = document.querySelector("#openReal");
-  fileChooser.addEventListener('change',handleOpenReal);
-
-  function handleOpenReal(event) {
-    const files = fileChooser.files;
-    if(files.length == 0) {
-      return;
-    }
-
-    const reader = new FileReader();
-    const content = reader.readAsText(files[0]);
-
-    reader.addEventListener("load", () => {
-      document.querySelector("#csv-src-viewer").value = reader.result;
-    })
-  }
+  fileChooser.addEventListener('change', handle.openReal);
 
   function handlers() {
     const nameOf = {
@@ -51,29 +40,30 @@
       svg: "result.svg"
     }
     this.appendCard = handleAppendCardButton;
-    this.deleteCard = handleDeleteCardButton
-    this.export = handleExportButton
-    this.open = handleOpenButton
-    this.generate = handleGenerateButton
+    this.deleteCard = handleDeleteCardButton;
+    this.export = handleExportButton;
+    this.open = handleOpenButton;
+    this.generate = handleGenerateButton;
     this.loadCSV = handleLoadCsvButton;
-    this.save = handleSaveButton
+    this.save = handleSaveButton;
+    this.openReal = handleOpenReal;
     return this;
 
     function handleGenerateButton(event) {
-      if(event.target.id != "generate") {
+      if (event.target.id != "generate") {
         return;
       }
-  
+
       document.querySelector("#dot-src-viewer").value = card2dot();
       dot2svg(document.querySelector("#dot-src-viewer").value)
         .then(xml => {
           const canvas = document.querySelector("#ref-map");
-          const data = text2DataUriScheme(xml,"image/svg+xml");
+          const data = text2DataUriScheme(xml, "image/svg+xml");
           canvas.setAttribute("data", data);
         }).catch(err => {
           console.log(err)
         });
-    }  
+    }
 
     function handleOpenButton(event) {
       if (event.target.id != "open") {
@@ -106,7 +96,7 @@
       try {
         const data = await dot2svg(card2dot());
         download(data, "image/svg+xml;charset=UTF-8", nameOf.svg);
-      } catch(err) {
+      } catch (err) {
         console.log(err);
       }
     }
@@ -138,90 +128,91 @@
         }, 50);
       }
     }
-  }
-});
 
-function download(text, mimeType, name,) {
-  const save = document.querySelector("#savelink");    
-  const dataUri = text2DataUriScheme(text, mimeType);
-
-  save.setAttribute("href", dataUri);
-  save.setAttribute("download", name);
-  setTimeout(() => {
-    save.click();
-    save.setAttribute("href", "");
-    save.setAttribute("download", "");
-  } ,50);
-}
-
-function appendCard(bigbrother, node = {}) {
-  const newCard = document.querySelector("#tmpl-ref-card").content.cloneNode(true);
-  bigbrother.parentNode.insertBefore(newCard, bigbrother.nextElementSibling);
-
-  const addedCard = bigbrother.nextElementSibling;
-
-  new nodeValues().write(addedCard, node)
-}
-
-function deleteCard(card) {
-  card.parentNode.removeChild(card);
-}
-
-function csv2card(csv) {
-  //改行をLFだけにしたい
+    function handleOpenReal(event) {
+      const files = fileChooser.files;
+      if (files.length == 0) {
+        return;
+      }
   
-  const text = csv.replaceAll("\r", "");
-  const textRows = text.split(lf)
-  const rows = [];
-  //当該要素はrootの一つしか残っていない想定
-  let bigBrother = document.querySelector("div.ref-card") ;
-  for(const text of textRows) {
-    //ヘッダは読み飛ばす
-    if("id,parent,type,label,url" == text || "" == text.trim()) {
-      continue;
+      const reader = new FileReader();
+      const content = reader.readAsText(files[0]);
+  
+      reader.addEventListener("load", () => {
+        document.querySelector("#csv-src-viewer").value = reader.result;
+      })
     }
-
-    const row = text.split(",")
-
-    if(row[0] == "root") {
-      continue;
-    }
-
-    appendCard(bigBrother, {
-      id: row[0],
-      parent: row[1],
-      type: row[2],
-      label: row[3],
-      url: row[4]
-    })
-
-    let cards = document.querySelectorAll("div.ref-card");
-    bigBrother = cards[cards.length - 1]
-  }
-}
-
-function card2csv() {
-  const cards = document.querySelectorAll("div.ref-card");
-  const header = ["id", "parent", "type", "label", "url"].join(",");
-  const csvText = [header]
-
-  for (const card of cards) {
-    const refNode = new nodeValues().read(card);
-    csvText.push([
-      refNode.id,
-      refNode.parent,
-      refNode.type,
-      refNode.label,
-      refNode.url,
-    ].join(","));
+  
   }
 
-  return csvText.join(lf)
-}
+  function appendCard(bigbrother, node = {}) {
+    const newCard = document.querySelector("#tmpl-ref-card").content.cloneNode(true);
+    bigbrother.parentNode.insertBefore(newCard, bigbrother.nextElementSibling);
 
-function card2dot() {
-  function digraph(nodeList, edgeList) {
-    const dot = `digraph G {
+    const addedCard = bigbrother.nextElementSibling;
+
+    new nodeValues().write(addedCard, node)
+  }
+
+  function deleteCard(card) {
+    card.parentNode.removeChild(card);
+  }
+
+  function csv2card(csv) {
+    //改行をLFだけにしたい
+
+    const text = csv.replaceAll("\r", "");
+    const textRows = text.split(lf)
+    const rows = [];
+    //当該要素はrootの一つしか残っていない想定
+    let bigBrother = document.querySelector("div.ref-card");
+    for (const text of textRows) {
+      //ヘッダは読み飛ばす
+      if ("id,parent,type,label,url" == text || "" == text.trim()) {
+        continue;
+      }
+
+      const row = text.split(",")
+
+      if (row[0] == "root") {
+        continue;
+      }
+
+      appendCard(bigBrother, {
+        id: row[0],
+        parent: row[1],
+        type: row[2],
+        label: row[3],
+        url: row[4]
+      })
+
+      let cards = document.querySelectorAll("div.ref-card");
+      bigBrother = cards[cards.length - 1]
+    }
+  }
+
+  function card2csv() {
+    const cards = document.querySelectorAll("div.ref-card");
+    const header = ["id", "parent", "type", "label", "url"].join(",");
+    const csvText = [header]
+
+    for (const card of cards) {
+      const refNode = new nodeValues().read(card);
+      csvText.push([
+        refNode.id,
+        refNode.parent,
+        refNode.type,
+        refNode.label,
+        refNode.url,
+      ].join(","));
+    }
+
+    return csvText.join(lf)
+  }
+
+  function card2dot() {
+    function digraph(nodeList, edgeList) {
+      const dot = `digraph G {
   graph [overlap="true", bgcolor="#ffffdd", mindist="0.01"];
   node [fontname="BIZUDP Gothic" target="_blank", shape="tab", style="filled", color="#cc6666", fontcolor="#333333", fillcolor="#ffcc90"];
   edge [fontname="meiryo", color="#cc6666"];
@@ -233,125 +224,139 @@
   ${edgeList}
 }
 `;
-    return dot;
-  }
+      return dot;
+    }
 
-  const id = 0, parent=1, type=2, label=3, url=4;
+    const id = 0, parent = 1, type = 2, label = 3, url = 4;
 
-  const [nodeList, edgeList] = [[], []];
-  const cards = document.querySelectorAll("div.ref-card");
-  for (const card of cards) {
-    const refNode = new nodeValues().read(card);
+    const [nodeList, edgeList] = [[], []];
+    const cards = document.querySelectorAll("div.ref-card");
+    for (const card of cards) {
+      const refNode = new nodeValues().read(card);
 
-    const id = refNode.id,
-      parent = refNode.parent,
-      type = refNode.type,
-      label = refNode.label,
-      url = refNode.url;
+      const id = refNode.id,
+        parent = refNode.parent,
+        type = refNode.type,
+        label = refNode.label,
+        url = refNode.url;
 
       let shapeStmt;
-      if(type == "folder") {
+      if (type == "folder") {
         shapeStmt = `, shape="ellipse"`;
       } else {
         shapeStmt = ""
       }
 
       let labelStmt;
-      if(label == "") {
+      if (label == "") {
         labelStmt = `label="${id}"`;
       } else {
         labelStmt = `label="${label}"`;
       }
 
       let hrefStmt;
-      if(url == "") {
+      if (url == "") {
         hrefStmt = "";
       } else {
         //label属性が必ずあるため区切りの, を決め打ちで入れて問題なし
-        hrefStmt = `, href="${url}"`;     
+        hrefStmt = `, href="${url}"`;
       }
 
       const nodeStmt = `${id} [${labelStmt}${hrefStmt}${shapeStmt}];`;
       nodeList.push(nodeStmt);
 
-      if(id == "root") {
+      if (id == "root") {
         continue;
       } else {
         const edgeStmt = `${parent} -> ${id};`;
         edgeList.push(edgeStmt);
       }
+    }
+
+    //改行してインデント
+    const indent = "  ";
+    const delim = lf + indent
+    return digraph(nodeList.join(delim), edgeList.join(delim));
   }
 
-  //改行してインデント
-  const indent = "  ";
-  const delim = lf + indent
-  return digraph(nodeList.join(delim), edgeList.join(delim));
-}
-
-async function dot2svg(dot = "") {
-  const graphviz = await Graphviz.load();
-  const src = dot == "" ? 'digraph G { Hello -> World }' : dot;
-  const svg = graphviz.circo(src);
-  return svg;
-}
-
-
-function nodeValues() {
-  this.read = readNodeValues;
-  this.write = writeNodeValues;
-  return this;
-
-  /**
-   * ノードを表すカードからノードの情報を取り出す。
-   * カード内のinputについて知っている
-   * @param {*} card 
-   * @returns 
-   */
-  function readNodeValues(card) {
-    const values = card.querySelectorAll("input");
-    const refNode = {};
-    refNode.id = values[0].value;
-    refNode.parent = values[1].value;
-    refNode.tytpe = values[2].value;
-    refNode.label = values[3].value;
-    refNode.url = values[4].value;
-
-    return refNode;
+  async function dot2svg(dot = "") {
+    const graphviz = await Graphviz.load();
+    const src = dot == "" ? 'digraph G { Hello -> World }' : dot;
+    const svg = graphviz.circo(src);
+    return svg;
   }
 
-  /**
-   * ノードを表すカードに書き込む
-   * カード内のinputについて知っている
-   */
-  function writeNodeValues(card, values) {
-    const inputs = card.querySelectorAll("input");
-    const { id, parent, type, label, url } = values;
+  function nodeValues() {
+    this.read = readNodeValues;
+    this.write = writeNodeValues;
+    return this;
 
-    if (id && id.length > 0) {
-      inputs[0].value = id
+    /**
+     * ノードを表すカードからノードの情報を取り出す。
+     * カード内のinputについて知っている
+     * @param {*} card 
+     * @returns 
+     */
+    function readNodeValues(card) {
+      const values = card.querySelectorAll("input");
+      const refNode = {};
+      refNode.id = values[0].value;
+      refNode.parent = values[1].value;
+      refNode.tytpe = values[2].value;
+      refNode.label = values[3].value;
+      refNode.url = values[4].value;
+
+      return refNode;
     }
 
-    if (parent && parent.length > 0) {
-      inputs[1].value = parent
-    }
+    /**
+     * ノードを表すカードに書き込む
+     * カード内のinputについて知っている
+     */
+    function writeNodeValues(card, values) {
+      const inputs = card.querySelectorAll("input");
+      const { id, parent, type, label, url } = values;
 
-    if (type && type.length > 0) {
-      inputs[2].value = type
-    }
+      if (id && id.length > 0) {
+        inputs[0].value = id
+      }
 
-    if (label && label.length > 0) {
-      inputs[3].value = label
-    }
+      if (parent && parent.length > 0) {
+        inputs[1].value = parent
+      }
 
-    if (url && url.length > 0) {
-      inputs[4].value = url
-    }
+      if (type && type.length > 0) {
+        inputs[2].value = type
+      }
 
+      if (label && label.length > 0) {
+        inputs[3].value = label
+      }
+
+      if (url && url.length > 0) {
+        inputs[4].value = url
+      }
+
+    }
   }
-}
-function text2DataUriScheme(text, mimeType) {
-  const binary = window.btoa(unescape(encodeURIComponent(text)))
-  const dataUri = `data:${mimeType};base64,${binary}`
-  return dataUri;
-}
+
+  function text2DataUriScheme(text, mimeType) {
+    const binary = window.btoa(unescape(encodeURIComponent(text)))
+    const dataUri = `data:${mimeType};base64,${binary}`
+    return dataUri;
+  }
+
+  function download(text, mimeType, name,) {
+    const save = document.querySelector("#savelink");
+    const dataUri = text2DataUriScheme(text, mimeType);
+
+    save.setAttribute("href", dataUri);
+    save.setAttribute("download", name);
+    setTimeout(() => {
+      save.click();
+      save.setAttribute("href", "");
+      save.setAttribute("download", "");
+    }, 50);
+  }
+});