diff --git a/src/js/src/main/app.html b/src/js/src/main/app.html
index 59dbaac..0532ed6 100644
--- a/src/js/src/main/app.html
+++ b/src/js/src/main/app.html
@@ -15,35 +15,30 @@
     </div>
     <div id="main">
         <div id="left-menu" class="expanded initial">
-            <template id="tmpl-menu-item">
-                <li class="menu-item><img src=" img/menu-empty">アプリケーション</li>
-            </template>
             <ol>
                 <li id="menu-toggle" class="menu-item"><img src="img/menu-toggle.svg"><span class="expanded">開閉</span>
                 </li>
                 <li class="menu-item"><img src="img/menu-home.svg"><span class="expanded">HOME</span></li>
-                <li class="menu-item"><img src="img/menu-empty.svg"><span class="expanded">メニューアイテム2</span></li>
-                <li class="menu-item"><img src="img/menu-empty.svg"><span class="expanded">メニューアイテム3</span></li>
             </ol>
             <textarea id="logarea"></textarea>
         </div>
         <div id="main-pane">
             <ul id="main-tabs">
                 <li class="tab selected">タブ1</li>
-                <li class="tab">タブ2</li>
             </ul>
-            <div class="main-article selected petari">
+            <div class="main-article selected">
                 <div class="app-container">
-                    <iframe id="petari" title="petari" src="../petari/app.html" height="640"></iframe>
+                    <h1> Hello Solitude World</h1>
+                    <p>This is Solitude</p>
                 </div>
             </div>
-            <div class="main-article">
-                <h1> Hello Solitude World</h1>
-                <p>This is third Solitude</p>
-            </div>
         </div>
     </div>
     <div id="componant-templates">
+        <!-- メニュー -->
+        <template id="app-menu">
+            <li class="menu-item init"><img src="img/menu-empty.svg"><span class="expanded">APP NAME</span></li>
+        </template>
         <!-- タブ -->
         <template id="app-tab">
             <li class="tab">表示名</li>
@@ -58,12 +53,6 @@
         </template>
 
     </div>
-
-    <div id="plugins">
-        <template>
-
-        </template>
-    </div>
     <script type="text/javascript">
         main(document);
         function main(document) {
@@ -130,13 +119,11 @@
                     val.classList.remove("selected");
                 });
                 query("li.tab")[index].classList.add("selected");
-                console.log(query("li.tab"))
 
                 query("div.main-article.selected").forEach(function (val) {
                     val.classList.remove("selected");
                 });
                 query("div.main-article")[index].classList.add("selected");
-                console.log("li.main-article")
             }
 
             function query(selector) {
@@ -185,13 +172,33 @@
             }
 
             function loadIframeApps(name, conf) {
-                addNewMenu(conf);
+                addNewMenu(name,conf);
+                const mount = query("#left-menu ol")[0];
+                mount.querySelector("li.init").addEventListener("click", function() {
+                    bootIframeApps(name, conf);
+                });
+                mount.querySelector("li.init").classList.remove("init");
+            }
+
+            function bootIframeApps(name, conf) {
                 addNewTab(name);
                 addNewContent(name, conf);
             }
 
-            function addNewMenu(app) {
+            function addNewMenu(name, conf) {
+                const mount = query("#left-menu ol")[0];
+                let menu = query("#app-menu")[0];
+                menu = menu.content.cloneNode(true);
 
+                const span = menu.querySelector("span");
+                // template では初期状態はexpanded
+                if( query("#left-menu.shrinked").length > 0) {
+                    const cls = span.classList;
+                    cls.remove("expanded");
+                    cls.add("shrinked");
+                }
+                span.textContent = name;
+                mount.appendChild(menu);
             }
 
             function addNewTab(label) {
@@ -204,14 +211,14 @@
                 let tab = document.querySelector("#app-tab")
                 tab = tab.content.cloneNode(true);
                 tab.querySelector("li").textContent = label;
+                const index = query("li.tab").length
                 mount.appendChild(tab);
 
                 /*
                  * ・追加したタブのindexの推定のやり方がよくない
                  * ・イベントの設定コードが重複が気持ち悪い
                  */
-                const index = query("li.tab").length
-                tab.addEventListener("click", function () {
+                 query("li.tab")[index].addEventListener("click", function () {
                     selectTab(index);
                 })
             }