narou 2.8.3.1 → 2.9.0

data/lib/web/public/resources/common.ui.js

@@ -24,9 +24,9 @@ $(document).ready(function() {
   $.moveTo();
 
   /*
-   * 自然に消える alert
+   * 自然に消えるフラッシュメッセージ
    */
-  $("#fadeout-alert").delay(2000).animate({ opacity: "hide" }, 1500);
+  Narou.Flash.setEvents(".fadeout-alert");
 
   /*************************************************************************
    * Webサーバの方から入力を求められた時にモーダルを表示して返事を返す

data/lib/web/public/resources/narou.library.js

@@ -184,21 +184,28 @@ var Narou = (function() {
       });
     },
 
-    on: function(event, block) {
+    on: function(event, block, once) {
       if (typeof block !== "function") {
         $.error("need a function");
       }
       var stack = this.events[event] || [];
-      stack.push(block);
+      stack.push([block, once]);
       this.events[event] = stack;
     },
 
+    one: function(event, block) {
+      this.on(event, block, true);
+    },
+
     trigger: function(event, data) {
       var self = this;
       var stack = this.events[event] || [];
-      $.each(stack, function() {
-        this.call(self, data);
-      });
+      this.events[event] =
+        _.reject(stack, function(pair) {
+          var block = pair[0], once = pair[1];
+          block.call(self, data);
+          return once;
+        });
     },
 
     send: function(json) {
@@ -207,24 +214,25 @@ var Narou = (function() {
   });
 
   /*************************************************************************
-   * コンテキストメニュー
+   * 個別メニュー
    *************************************************************************/
-  var ContextMenu = Narou.ContextMenu = function(action, notification, tag) {
+  var ContextMenu = Narou.ContextMenu = function(action, tag) {
     this.action = action;
-    this.notification = notification;
+    this.notification = Notification.instance();
     this.tag = tag;
     this.closed = true;
     this.initializeConsoleDialog();
-    this.initializeMenuEvent();
     this.initializeDiffListEvent();
+    this.initializeMenu();
   };
 
   $.extend(ContextMenu.prototype, {
     open: function(target_id, pos, callback) {
+      var self = this;
       this.target_id = target_id;
       if (!this.closed) {
         // メニューを開いた状態で直接ボタンを押した場合に一旦閉じるイベントを起こさせる
-        $(document).trigger("click");
+        this.close();
       }
       this.closed = false;
       var caller = function() {
@@ -232,15 +240,30 @@ var Narou = (function() {
           callback();
       };
       $(document).one("show.bs.dropdown", function() {
-        $("#context-menu").hide();
+        self.object.hide();
+        self.closed = true;
         caller();
       });
-      Narou.popupMenu("#context-menu", pos, function() {
-        $("#context-menu").hide();
+      Narou.popupMenu(this.object, pos, function() {
+        self.object.hide();
+        self.closed = true;
         caller();
       });
     },
 
+    close: function() {
+      $(document).trigger("click");
+      this.closed = true;
+    },
+
+    save: function(text) {
+      this.text = text;
+      storage.set("context_menu_text", text);
+      storage.save();
+      this.object.remove();
+      this.initializeMenu();
+    },
+
     openConsoleDialog: function(callback) {
       if (typeof callback !== "function") return;
       var $console_dialog = $("#console-dialog");
@@ -253,7 +276,7 @@ var Narou = (function() {
     },
 
     initializeConsoleDialog: function() {
-      this.console = new Narou.Console(this.notification, {
+      this.console = new Narou.Console({
         restore: false, buttons: false,
         id: "#each-console"
       });
@@ -298,66 +321,160 @@ var Narou = (function() {
       });
     },
 
-    initializeMenuEvent: function() {
-      var $context_menu = $("#context-menu");
-      var self = this;
-      $("#context-menu-setting").on("click", function(e) {
-        e.preventDefault();
-        location.href = "/novels/" + self.target_id + "/setting";
-      });
-      $("#context-menu-update").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.update(self.target_id);
-        });
-      });
-      $("#context-menu-send").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.send(self.target_id);
-        });
-      });
-      $("#context-menu-freeze-toggle").on("click", function(e) {
-        e.preventDefault();
-        self.action.freeze(self.target_id);
-      });
-      $("#context-menu-remove").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.remove(self.target_id);
-        });
-      });
-      $("#context-menu-edit-tag").on("click", function(e) {
-        e.preventDefault();
-        self.tag.openEditor(self.target_id);
-      });
-      $("#context-menu-convert").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.convert(self.target_id);
-        });
-      });
-      $("#context-menu-diff").on("click", function(e) {
-        e.preventDefault();
-        self.openSelectDiffListDialog(self.target_id);
+    initializeMenu: function() {
+      this.initializeMenuObject();
+      this.initializeMenuEvents();
+      $("body").append(this.object);
+    },
+
+    initializeMenuObject: function(text) {
+      this.text = text || storage.get("context_menu_text") || this.createDefaultMenuText();
+      this.object = this.createMenuObject(this.text);
+    },
+
+    createMenuObject: function(text) {
+      var object = $('<ul class="context-menu dropdown-menu" role="menu">');
+      _.each(text.split("\n"), function(line) {
+        var splited = line.split("<>");
+        var label = splited[0], command = splited[1];
+        var child;
+        if (!command) return;
+        if (command === "divider")
+          child = $('<li class="divider">');
+        else
+          child = $(sprintf('<li class="context-menu-%s"><a href="#">%s</a>', command, label));
+        object.append(child);
       });
-      $("#context-menu-inspect").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.inspect(self.target_id);
+      return object;
+    },
+
+    _default_commands: [
+      "setting", "diff", "edit_tag", "freeze_toggle", "update",
+      "send", "remove", "convert", "inspect", "folder", "backup"
+    ],
+
+    items: [
+      { label: "――――――――(区切り)", command: "divider" },
+      { label: "小説の変換設定", command: "setting" },
+      { label: "差分を表示", command: "diff" },
+      { label: "タグを編集", command: "edit_tag" },
+      { label: "凍結 or 解凍", command: "freeze_toggle" },
+      { label: "更新", command: "update" },
+      { label: "凍結済みでも更新", command: "update_force" },
+      { label: "送信", command: "send" },
+      { label: "削除", command: "remove" },
+      { label: "変換", command: "convert" },
+      { label: "調査状況ログを表示", command: "inspect" },
+      { label: "保存フォルダを開く", command: "folder" },
+      { label: "バックアップを作成", command: "backup" },
+      { label: "再ダウンロード", command: "download_force" },
+    ],
+
+    events: {
+      setting: function() {
+        var setting_page_path = "/novels/" + this.target_id + "/setting";
+        if (storage.get("open_new_tab_setting_pages")) {
+          window.open(setting_page_path);
+        }
+        else {
+          location.href = setting_page_path;
+        }
+      },
+
+      update: function() {
+        this.openConsoleDialog(function() {
+          this.action.update(this.target_id);
+        }.bind(this));
+      },
+
+      update_force: function() {
+        this.openConsoleDialog(function() {
+          this.action.updateForce(this.target_id);
+        }.bind(this));
+      },
+
+      send: function() {
+        this.openConsoleDialog(function() {
+          this.action.send(this.target_id);
+        }.bind(this));
+      },
+
+      freeze_toggle: function() {
+        this.action.freeze(this.target_id);
+      },
+
+      remove: function() {
+        this.openConsoleDialog(function() {
+          this.action.remove(this.target_id);
+        }.bind(this));
+      },
+
+      edit_tag: function() {
+        this.tag.openEditor(this.target_id);
+      },
+
+      convert: function() {
+        this.openConsoleDialog(function() {
+          this.action.convert(this.target_id);
+        }.bind(this));
+      },
+
+      diff: function() {
+        this.openSelectDiffListDialog(this.target_id);
+      },
+
+      inspect: function() {
+        this.openConsoleDialog(function() {
+          this.action.inspect(this.target_id);
+        }.bind(this));
+      },
+
+      folder: function() {
+        this.action.folder(this.target_id);
+      },
+
+      backup: function() {
+        this.openConsoleDialog(function() {
+          this.action.backup(this.target_id);
+        }.bind(this));
+      },
+
+      download_force: function() {
+        this.openConsoleDialog(function() {
+          this.action.downloadForce(this.target_id);
+        }.bind(this));
+      },
+    },
+
+    initializeMenuEvents: function() {
+      var object = this.object;
+      var self = this;
+      _.each(this.events, function(fn, command) {
+        object.find(".context-menu-" + command).on("click", function(e) {
+          e.preventDefault();
+          if (self.action)
+            fn.call(self);
         });
       });
-      $("#context-menu-folder").on("click", function(e) {
-        e.preventDefault();
-        self.action.folder(self.target_id);
+    },
+
+    findItem: function(command) {
+      return this.items.find(function(item) {
+        return item.command === command;
       });
-      $("#context-menu-backup").on("click", function(e) {
-        e.preventDefault();
-        self.openConsoleDialog(function() {
-          self.action.backup(self.target_id);
-        });
+    },
+
+    createDefaultMenuText: function() {
+      var self = this;
+      var menu_text_lines = [];
+      _.each(this._default_commands, function(command) {
+        var item = self.findItem(command);
+        if (!item)
+          $.error("invalid command(" + command + ")");
+        menu_text_lines.push(item.label + "<>" + command);
       });
-    }
+      return menu_text_lines.join("\n");
+    },
   });
 
   /*************************************************************************
@@ -457,10 +574,10 @@ var Narou = (function() {
 
     updateGeneralLastup: function() {
       bootbox.dialog({
-        title: '最新話掲載日の更新',
-        message: "凍結済みを除く各小説の最新話掲載日を更新します。<br>" +
-                 "最新話掲載日は通常時のUPDATEでも更新されるので、手動で更新する必要は基本的にはありません。<br>" +
-                 "掲載日だけを調べて、選択的にUPDATEをかけるなど、用途を理解した上で小説サイトのサーバーに負荷をかけない範囲でご利用下さい。",
+        title: "最新話掲載日の更新",
+        message: "凍結済みを除く各小説の最新話掲載日のみを更新して反映させます。<br>" +
+                 "最新話掲載日は通常時のUpdateでも更新されるので、手動で更新する必要は基本的にはありません。<br>" +
+                 "掲載日だけを調べて、選択的にUpdateをかけるなど、用途を理解した上で小説サイトのサーバーに負荷をかけない範囲でご利用下さい。",
         backdrop: true,
         buttons: {
           cancel: {
@@ -606,26 +723,94 @@ var Narou = (function() {
         });
       });
     },
+
+    rebootDialog: function() {
+      var self = this;
+      bootbox.dialog({
+        title: '<span class="glyphicon glyphicon-refresh"></span> 再起動',
+        message: "<p>Narou.rb WEB UI サーバを再起動します。<br>" +
+                 "バージョンを更新してある場合は最新バージョンで立ち上がります。</p>" +
+                 "<p class=text-danger>アップデート中や変換中の小説がある場合は中断されます。<br>" +
+                 "終わったかどうか確認しましょう。</p>",
+        backdrop: true,
+        buttons: {
+          danger: {
+            label: "再起動",
+            className: "btn-danger",
+            callback: function() {
+              self.reboot();
+            }
+          },
+          main: {
+            label: "キャンセル",
+            className: "btn-default",
+          }
+        }
+      });
+    },
+
+    reboot: function() {
+      $.post("/reboot", function(data) {
+        bootbox.hideAll();
+        bootbox.dialog({
+          title: "",
+          closeButton: false,
+          message: data
+        });
+      });
+    },
+
+    checkUpdatedSystem: function(funcs) {
+      $.post("/check_already_update_system", function(data) {
+        if (data.result) {
+          $.post("/gem_update_last_log", function(log) {
+            funcs.already_updated(log);
+          });
+        }
+        else {
+          funcs.not_updated();
+        }
+      });
+    },
+
+    updateSystem: function(callback) {
+      var notification = Notification.instance();
+      notification.one("server.update.success", function(log) {
+        callback("success", log);
+      });
+      notification.one("server.update.nothing", function(log) {
+        callback("nothing", log);
+      });
+      notification.one("server.update.failure", function(log) {
+        callback("failure", log);
+      });
+      $.post("/update_system");
+    },
+
+    eject: function() {
+      $.post("/api/eject");
+    },
+
   });
 
   /*************************************************************************
    * コンソール
    *************************************************************************/
-  var Console = Narou.Console = function(notification, options) {
+  var Console = Narou.Console = function(options) {
     this.options = $.extend({
       restore: true,   // コンソールの大きさを復元・保存するか
       buttons: true,   // 拡大縮小等のコントロールボタンを使用するか
       id: "#console",  // コンソールのID名
       buttons_id: "#console-buttons"   // コントロールボタンを格納している要素のID名
     }, options);
-    this.initialize(notification);
+    this.initialize();
   };
 
   $.extend(Console.prototype, {
     animate_duration: 200,
 
-    initialize: function(notification) {
-      this.notification = notification;
+    initialize: function() {
+      this.notification = Notification.instance();
       this.last_char_was_return = true;
       this.console = $(this.options.id);
       this.init_scrollbar();
@@ -820,14 +1005,197 @@ var Narou = (function() {
     }
   });
 
+  /*************************************************************************
+   * 検索機能
+   * dataTables の検索に、タグ検索機能を追加する
+   *************************************************************************/
+  var Search = Narou.Search = function(table) {
+    this.initialize(table);
+  };
+
+  Search.get = function(table) {
+    if (!this.__instance) {
+      this.__instance = new this(table);
+    }
+    return this.__instance;
+  };
+
+  $.extend(Search.prototype, {
+    initialize: function(table) {
+      this.table = table;
+      this.myfilter = $("#myFilter");
+      this.filter_tags = [];
+      this.exclusion_tags = [];   // 除外タグ
+      this.myfilter_clear = $("#myFilter-clear");
+      this.myfilter_clear_timer_id = null;
+      this.initializeEvents();
+    },
+
+    initializeEvents: function() {
+      var self = this;
+      // フィルターのフックAPIでタグを検索する
+      $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
+        if (_.isEmpty(self.filter_tags) && _.isEmpty(self.exclusion_tags))
+          return true;
+
+        var tags = self.table.row(dataIndex).data().tags;
+        var matched = true;
+        // 一致タグ検索
+        _.each(self.filter_tags, function(tag_name) {
+          matched = !!tags.match(new RegExp('data-tag="' + tag_name + '"'));
+          return matched;
+        });
+        if (matched) {
+          // 除外タグ検索
+          _.each(self.exclusion_tags, function(tag_name) {
+            matched = !tags.match(new RegExp('data-tag="' + tag_name + '"'));
+            return matched;
+          });
+        }
+        return matched;
+      });
+
+      // カスタムフィルタボックスの変更イベント
+      this.myfilter.on("keyup", function() {
+        clearTimeout(self.myfilter_clear_timer_id);
+        self.myfilter_clear_timer_id = setTimeout(function() {
+          self.search();
+        }, 300);
+        self.myFilterClearToggleVisiblity();
+      });
+
+      // フィルタのリセットボタン
+      this.myfilter_clear.on("click", function() {
+        self.myfilter.val("");
+        self.myfilter_clear.hide();
+        self.search();
+      });
+
+      // 検索アイコンも反応するようにしておく（コピペとかで反応しない場合用）
+      $("#myFilter-search-icon").on("click", function() {
+        self.search();
+        self.myFilterClearToggleVisiblity();
+      });
+    },
+
+    appendTagToFilter: function(tag_name, exclude) {
+      if (_.includes(this.filter_tags, tag_name) ||
+          _.includes(this.exclusion_tags, tag_name)) {
+        // すでにフィルターに入力済みなら何もしない
+        return;
+      }
+
+      if (tag_name) {
+        var str = sprintf(
+            "%(current)s %(exclude_flag)stag:%(tag_name)s",
+            {
+              current: this.myfilter.val(),
+              exclude_flag: exclude ? "-" : "",
+              tag_name: tag_name
+            });
+        this.myfilter.val(str.trim());
+      }
+      else {
+        this.removeAllTagsByFilter();
+      }
+      this.search();
+      this.myFilterClearToggleVisiblity();
+    },
+
+    removeAllTagsByFilter: function() {
+      var normal_words = this.splitFilter().normal;
+      this.myfilter.val(normal_words.join(" "));
+      this.clearTagCaches();
+    },
+
+    splitFilter: function(string) {
+      string = string || this.myfilter.val().trim();
+      var result = {
+        filter_tags: [], exclusion_tags: []
+      };
+      var words = string.split(/\s+/);
+      result.normal =
+        _.filter(words, function(word) {
+          if (word.match(/^(-?)tag:(.+)$/i)) {
+            var exclude_flag = !!RegExp.$1;
+            var tag_name = RegExp.$2;
+            if (exclude_flag)
+              result.exclusion_tags.push(tag_name);
+            else
+              result.filter_tags.push(tag_name);
+            return false;
+          }
+          else {
+            return true;
+          }
+        }.bind(this));
+      return result;
+    },
+
+    clearTagCaches: function() {
+      this.filter_tags.length = 0;
+      this.exclusion_tags.length = 0;
+    },
+
+    searchSync: function() {
+      this.search(true);
+    },
+
+    _flatPush: function(target, array) {
+      return target.push.apply(target, array);
+    },
+
+    _searchFn: function() {
+      var filter_string = this.myfilter.val().trim();
+      var words = this.splitFilter(filter_string);
+      var normal_words = words.normal;
+
+      this.clearTagCaches();
+      this._flatPush(this.filter_tags, words.filter_tags);
+      this._flatPush(this.exclusion_tags, words.exclusion_tags);
+
+      // タグ以外の単語で通常検索し、タグ部分はフックAPIでフィルターする
+      var normal_words_string = normal_words.join(" ");
+      if (this.before_normal_words_string !== normal_words_string) {
+        // 通常の検索は一度 table.search() を実行すれば維持されるので、
+        // 検索語が変化しないかぎりは一度の実行でいい
+        this.table.search(normal_words_string);
+        this.before_normal_words_string = normal_words_string;
+      }
+      // table.draw() を実行することにより、table.search() のフックAPIが実行される
+      this.table.draw();
+
+      // dataTables は search() に渡された文字列しか自動保存しないので、タグ含めて自前で保存
+      storage.set("filter_string", filter_string).save();
+    },
+
+    search: function(sync) {
+      if (sync)
+        this._searchFn();
+      else
+        setTimeout(this._searchFn.bind(this), 10);
+    },
+
+    myFilterClearToggleVisiblity: function() {
+      if (this.myfilter.val() === "") {
+        this.myfilter_clear.hide();
+      }
+      else {
+        this.myfilter_clear.show();
+      }
+    },
+  });
+
   /*************************************************************************
    * タグ機能
    *************************************************************************/
-  var Tag = Narou.Tag = (function(table) {
+  var Tag = Narou.Tag = function(table) {
     this.table = table;
+    this.search = Search.get(table);
     this.registerEvents($("#tag-list-canvas"));
+    this.registerEvents($("#novel-list tbody"));
     this.updateCanvas();
-  });
+  };
 
   $.extend(Tag.prototype, {
     updateCanvas: function() {
@@ -841,18 +1209,17 @@ var Narou = (function() {
       var self = this;
       if (typeof stop_bubbling === "undefined") stop_bubbling = true;
       var args = { stop_bubbling: stop_bubbling };
-      $target.on("click", ".tag", args, function(e) {
-        if (e.data.stop_bubbling) e.stopPropagation();
-        var tag_name = $(this).data("tag");
-        $("#tag-search").val(tag_name);
-        storage.set("tag_search", tag_name);
-        storage.save();
-        self.table.draw();
-        self.table.$("[data-toggle=tooltip]").tooltip("hide");
-      }).on("mousedown", ".tag", args, function(e) {
-        // 範囲選択モードでもクリック出来るように
-        if (e.data.stop_bubbling) e.stopPropagation();
-      });
+      $target
+        .on("click", ".tag", args, function(e) {
+          if (e.data.stop_bubbling) e.stopPropagation();
+          var tag_name = String($(this).data("tag"));
+          self.search.appendTagToFilter(tag_name, e.altKey);
+          self.table.$("[data-toggle=tooltip]").tooltip("hide");
+        })
+        .on("mousedown", ".tag", args, function(e) {
+          // 範囲選択モードでもクリック出来るように
+          if (e.data.stop_bubbling) e.stopPropagation();
+        });
     },
 
     openEditor: function() {
@@ -1114,6 +1481,205 @@ var Narou = (function() {
     },
   });
 
+  /*************************************************************************
+   * 自動保存・同期機能付きメモ帳
+   *************************************************************************/
+  var Notepad = Narou.Notepad = (function() {
+    this.object_id = this.createObjectId();
+  });
+
+  Notepad.replace = function(id, options) {
+    var notepad = new Notepad;
+    notepad.replace(id, options);
+    return notepad;
+  };
+
+  $.extend(Notepad.prototype, {
+    DEFAULTS: {
+      autosave: true,
+      readonly: false,
+      synchronizing: true,    // 別ウィンドウ同士で内容を同期するか
+      rows: 20,
+      // string or Deferred オブジェクト
+      text: function() {
+        return $.get("/api/notepad/read");
+      }
+    },
+
+    renderer: _.template(
+                '<div id="<%= container_id %>" class="notepad-container">' +
+                '<textarea class="form-control" rows="<%- rows %>" ' +
+                '<% if (readonly) { %>readonly<% } %>' +
+                '><%- text %></textarea>' +
+                '<span class="notepad-icon glyphicon glyphicon-ok text-success hide"></span>' +
+                '</div>'
+              ),
+
+    replace: function(id, options) {
+      var opt = _.merge({}, this.DEFAULTS, options);
+      this.id = id;
+      this.autosave = opt.autosave;
+      this.readonly = opt.readonly;
+      this.synchronizing = opt.synchronizing;
+      this.rows = opt.rows;
+      this.text = opt.text;
+
+      this.createElements();
+    },
+
+    save: function(textarea) {
+      var self = this;
+      textarea._old_value = textarea.value;
+      return $.post("/api/notepad/save", {
+        text: textarea.value,
+        object_id: this.object_id
+      })
+      .done(function() {
+        self.activeOkIcon();
+      });
+    },
+
+    createObjectId: function() {
+      return String(_.now()) + _.random(0, 10000);
+    },
+
+    createElements: function() {
+      var self = this;
+      var text = this.text;
+      var render = function(stringified_text) {
+        var rendered_html = self.renderer({
+          container_id: self.containerId(),
+          readonly: self.readonly,
+          rows: self.rows,
+          text: stringified_text
+        });
+        var elm = $("#" + self.id).html(rendered_html);
+        var textarea = elm.find("textarea");
+        if (self.autosave && !self.readonly) {
+          self.attachAutoSaveEvents(textarea);
+        }
+        if (self.synchronizing) {
+          self.attachSynchronizingEvents(textarea);
+        }
+      };
+
+      if (typeof text == "function") {
+        text()
+          .done(function(stringified_text) {
+            render(stringified_text);
+          })
+          .fail(function() {
+            render("");
+          });
+      }
+      else {
+        render(text);
+      }
+    },
+
+    attachAutoSaveEvents: function(textarea) {
+      var timer_id = null;
+      var self = this;
+
+      textarea
+        .on("focus", function() {
+          this._old_value = this.value;
+        })
+        .on("blur", function() {
+          if (this.value !== this._old_value) {
+            self.save(this);
+          }
+        })
+        .on("keyup paste cut", function() {
+          // paste, cut イベントは実行される「直前」に発生するので、
+          // 実際にテキストボックスに反映されるまでに少し待つ
+          setTimeout(function() {
+            clearTimeout(timer_id);
+            timer_id = setTimeout(function(value, old_value) {
+              if (value !== old_value) {
+                self.save(this);
+              }
+            }.bind(this), 1000, this.value, this._old_value);
+          }.bind(this), 10);
+        });
+    },
+
+    activeOkIcon: function() {
+      var icon = this.container().find(".notepad-icon");
+      icon
+        .removeClass("hide")
+        .show()
+        .delay(2000)
+        .fadeOut(1000);
+    },
+
+    attachSynchronizingEvents: function(textarea) {
+      var self = this;
+      var notification = Notification.instance();
+      notification.on("notepad.change", function(data) {
+        if (data.object_id == self.object_id)
+          return;
+        var dom = textarea[0];
+        if (dom.value != data.text) {
+          dom.value = dom._old_value = data.text;
+        }
+      });
+    },
+
+    container: function() {
+      return $("#" + this.containerId());
+    },
+
+    containerId: function() {
+      return this.id + "_notepad";
+    },
+  });
+
+  /*************************************************************************
+   * 埋め込みテンプレート変換
+   *************************************************************************/
+  Narou.Template = {
+    // role="template" を探して、そのテンプレートを処理したあと
+    // 同じ場所にレンダリング結果を埋め込む。
+    // 一回だけレンダリングすればいいもの向け
+    replaceAll: function(hash) {
+      $("[role=template]").each(function() {
+        var renderer = _.template($(this).text());
+        $(this).after(renderer(hash));
+      });
+    }
+  };
+
+  /*************************************************************************
+   * フラッシュメッセージ
+   *************************************************************************/
+  Narou.Flash = {
+    renderer: _.template(
+                '<div class="container">' +
+                '<div class="fadeout-alert alert alert-<%= type %>">' +
+                '<%= message %>' +
+                '</div></div>'
+              ),
+
+    show: function(message, type) {
+      var obj = $(Narou.Flash.renderer({
+        message: message, type: type || "success"
+      }));
+      $("body").append(obj);
+      this.setEvents(obj);
+    },
+
+    setEvents: function(object) {
+      $(object)
+        .delay(2000)
+        .animate({ opacity: "hide" }, 1500)
+        .queue(function(next) {
+          $(this).remove();
+          next();
+        });
+    }
+  };
+
   return Narou;
 })();