OSDN Git Service

Client is version0.4.29, added exportConsole.
authoritozyun <itozyun@gmail.com>
Sun, 13 May 2012 23:40:23 +0000 (08:40 +0900)
committeritozyun <itozyun@gmail.com>
Sun, 13 May 2012 23:40:23 +0000 (08:40 +0900)
app/assets/stylesheets/common.css
app/assets/stylesheets/work.css
app/views/layouts/application.html.erb
public/assets/common.js
public/assets/system.js
public/assets/work.js

index 2c05cd7..13ea61f 100644 (file)
@@ -1,3 +1,5 @@
+@charset "UTF-8";\r
+\r
 /*\r
  * pettanR\r
  * \r
@@ -562,6 +564,11 @@ version: 2.7.0
                    left:                               0;\r
                    top:                                0;\r
                }\r
+               .pettanr-comic-panel img {\r
+                       position:                       absolute;\r
+                   left:                               0;\r
+                   top:                                0;\r
+               }\r
                .pettanr-comic-balloon .pettanr-comic-speach {\r
                        position:                               absolute;\r
                        top:                                    0;\r
@@ -579,6 +586,9 @@ version: 2.7.0
                                text-align:                     center;\r
                                vertical-align:         middle;\r
                        }\r
+                       .pettanr-comic-speach td {\r
+                               padding:                        16.66%;\r
+                       }\r
                        .pettanr-comic-speach {\r
                                table-layout:           fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */\r
                        }
\ No newline at end of file
index 0b32939..3c1755c 100644 (file)
@@ -1,3 +1,5 @@
+@charset "UTF-8";\r
+\r
 /*\r
  * pettanR\r
  * \r
                        -moz-border-radius:             5px;\r
                        -webkit-border-radius:  5px;\r
                }\r
-\r
-               /*  Output Console\r
-               --------------------------------------------------------------------------------------*/\r
-                       #output-console-wrapper {\r
-                               position:                               absolute;\r
-                               width:                                  80%;\r
-                               height:                                 80%;\r
-                               background-color:               #fff;\r
-                       }\r
-                               #output-area {\r
-                                       width:                  100%;\r
-                                       height:                 100%;\r
-                                       border:                 1px outset #ccc;\r
-                                       outline:                1px;\r
-                               }\r
                \r
                /*  Console Common\r
                --------------------------------------------------------------------------------------*/\r
                                        margin-top:             15px;\r
                                        color:                  #666;\r
                                }\r
-                                       \r
+\r
+               /*  Field\r
+               --------------------------------------------------------------------------------------*/\r
+                       .field {\r
+                               margin:                         10px 0;\r
+                               padding-bottom:         5px;\r
+                               border-bottom:          1px solid #ccc;\r
+                       }                               \r
+                               .field-label {\r
+                                       display:                        inline-block;\r
+                                       width:                          120px;\r
+                                       line-height:            22px;\r
+                                       color:                          #666;\r
+                                       cursor:                         pointer;\r
+                               }\r
+\r
                /*  Comic Console\r
                --------------------------------------------------------------------------------------*/\r
                                #comic-console {\r
                                        \r
                                }\r
-                                       .comic-console-label {\r
-                                               display:                        inline-block;\r
-                                               width:                          120px;\r
-                                               line-height:            22px;\r
-                                               color:                          #666;\r
-                                               cursor:                         pointer;\r
-                                       }\r
+\r
                                        .comic-console-value {\r
                                                width:                          40px;\r
                                                text-align:                     right;\r
                                        }\r
-                                       .comic-console-line {\r
-                                               margin:                         10px 0;\r
-                                               padding-bottom:         5px;\r
-                                               border-bottom:          1px solid #ccc;\r
-                                       }\r
+\r
                                        #comic-console-title,\r
                                        #comic-console-height,\r
                                        #comic-console-width,\r
                                                        text-align:             center;\r
                                                }\r
                                        \r
-                                       #comic-console-button-container {\r
-                                               margin-top:                     20px;\r
-                                               position:                       relative;\r
-                                       }\r
+\r
                                        \r
+               /*  Output Console\r
+               --------------------------------------------------------------------------------------*/\r
+               \r
+                       #output-console-wrapper {\r
 \r
+                       }\r
+                               #output-console-format-value {\r
+                                       width:                  180px;\r
+                                       text-align:             center\r
+                               }\r
+                               #output-console-option-value {\r
+                                       width:                  180px;\r
+                                       text-align:             left;\r
+                               }\r
+                               #output-console-button-container {\r
+                                       margin:                 10px 0;\r
+                                       position:               relative;\r
+                               }                               \r
+                               #output-area {\r
+                                       width:                  100%;\r
+                                       height:                 200px;\r
+                                       border:                 1px outset #ccc;\r
+                                       outline:                1px;\r
+                                       margin-bottom:  20px;\r
+                               }\r
                                        \r
                /*  Upload Console\r
                --------------------------------------------------------------------------------------*/\r
                                line-height:    30px;\r
                                *cursor:                pointer;\r
                        }\r
-                       .current-option a,\r
-                       .current-option a:link,\r
-                       .current-option a:visited {\r
-                               color:                          #e6e6ef;\r
-                               background-color:       #66f;\r
-                               text-decoration:        none;\r
-                       }\r
                        .option-container a:hover {\r
                                color:                          #333;\r
                                background-color:       #ccf;\r
                                text-decoration:        none;\r
                                *cursor:                        pointer;\r
                        }\r
+                       .current-option a,\r
+                       .current-option a:link,\r
+                       .current-option a:visited {\r
+                               color:                          #e6e6ef;\r
+                               background-color:       #66f;\r
+                               text-decoration:        none;\r
+                       }                       \r
        \r
        /*  Information Window\r
        --------------------------------------------------------------------------------------*/\r
index 2148d10..b78281b 100644 (file)
                        <div id="overlay-shadow"></div>\r
                        <div id="overlay-close-button">x</div>\r
                </div>\r
-\r
-       <!-- アウトプットコンソール -->\r
-               <div id="output-console-wrapper">\r
-                       <textarea id="output-area" readonly></textarea>\r
-               </div>\r
                \r
        <!-- テキスト エディタ -->\r
                <div id="speach-editor-wrapper">\r
                        </div>\r
                </div>\r
 \r
+       <!-- アウトプットコンソール -->\r
+               <div id="output-console-wrapper" class="console-wrapper">\r
+                       <div id="output-console-header" class="console-header">Output Console</div>\r
+                       <div id="output-console" class="console-inner">\r
+                               <div id="output-console-format" class="field">\r
+                                       <span class="field-label">Format:</span>\r
+                                       <span id="output-console-format-value" class="output-console-value combobox"></span>\r
+                               </div>\r
+                               <div id="output-console-option" class="field">\r
+                                       <span class="field-label">Options:</span>\r
+                                       <span id="output-console-option-value" class="output-console-value editable-value">absolute-path</span>\r
+                               </div>                          \r
+                               <div id="output-console-button-container" class="clearfix">\r
+                                       <div id="output-console-generate-button" class="button console-submit-button">generate</div>\r
+                                       <div id="output-console-close-button" class="button console-cancel-button">close</div>\r
+                               </div>\r
+                               <textarea id="output-area" readonly></textarea>\r
+                       </div>\r
+               </div>\r
+\r
        <!-- コミックの新規作成・編集・削除 -->\r
                <div id="comic-console-wrapper" class="console-wrapper">\r
                        <div id="comic-console-header" class="console-header">Create New Comic</div>\r
                        <div id="comic-console" class="console-inner">\r
-                               <div id="comic-console-title" class="comic-console-line">\r
-                                       <span class="comic-console-label">Title:</span>\r
+                               <div id="comic-console-title" class="field">\r
+                                       <span class="field-label">Title:</span>\r
                                        <span id="comic-console-title-value" class="comic-console-value editable-value">No Title</span>\r
                                </div>\r
-                               <div id="comic-console-width" class="comic-console-line">\r
-                                       <span class="comic-console-label">Default Width:</span>\r
+                               <div id="comic-console-width" class="field">\r
+                                       <span class="field-label">Default Width:</span>\r
                                        <span id="comic-console-width-value" class="comic-console-value editable-value">300</span>\r
                                </div>\r
-                               <div id="comic-console-height" class="comic-console-line">\r
-                                       <span class="comic-console-label">Default Height:</span>\r
+                               <div id="comic-console-height" class="field">\r
+                                       <span class="field-label">Default Height:</span>\r
                                        <span id="comic-console-height-value" class="comic-console-value editable-value">200</span>\r
                                </div>\r
-                               <div id="comic-console-visible" class="comic-console-line">\r
-                                       <span class="comic-console-label">Visible:</span>\r
+                               <div id="comic-console-visible" class="field">\r
+                                       <span class="field-label">Visible:</span>\r
                                        <span id="comic-console-visible-value" class="comic-console-value combobox"></span>\r
                                </div>\r
-                               <div id="comic-console-editable" class="comic-console-line">\r
-                                       <span class="comic-console-label">Editable:</span>\r
+                               <div id="comic-console-editable" class="field">\r
+                                       <span class="field-label">Editable:</span>\r
                                        <span id="comic-console-editable-value" class="comic-console-value combobox"></span>\r
                                </div>\r
                                <div class="console-button-container">\r
index c1b19d6..da0a9e5 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR common.js\r
- *   version 0.4.28\r
+ *   version 0.4.29\r
  * \r
  * author: itozyun\r
  */\r
@@ -10,7 +10,7 @@
  */\r
        var Type = {\r
                isObject : function(v) {\r
-                       return v !== null && Type.isArray(v) === false && typeof v === 'object';\r
+                       return v !== null && typeof v === 'object';\r
                },\r
                isFunction : function(v) {\r
                        return typeof v === 'function';\r
@@ -665,7 +665,13 @@ pettanr.ua = ( function(){
 pettanr.CONST = ( function(){\r
        var isLocal = pettanr.LOCAL === true || pettanr.URL_PARAMS.exjson === false,\r
                isLocalhost = document.location.href.indexOf( 'http:\/\/localhost:3000\/' ) === 0,\r
-               PETTANR_ROOT_PATH = isLocalhost === true ? 'http:\/\/localhost:3000\/' : 'http:\/\/pettanr.heroku.com\/';\r
+               PETTANR_ROOT_PATH = isLocalhost === true ? 'http:\/\/localhost:3000\/' : 'http:\/\/pettanr.heroku.com\/',\r
+               location = document.location.pathname,\r
+               deep =  location.indexOf( '\/diary\/' ) !== -1 ||\r
+                               location.indexOf( '\/test\/' ) !== -1 ||\r
+                               location.indexOf( '\/help\/' ) !== -1 ||\r
+                               location.indexOf( '\/sitemap\/' ) !== -1 ||\r
+                               location.indexOf( '\/wiki\/' ) !== -1;\r
                \r
        return {\r
                PETTANR_ROOT_PATH:                      PETTANR_ROOT_PATH,\r
@@ -674,7 +680,7 @@ pettanr.CONST = ( function(){
                URL_COMICS_JSON:                        ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'comics.json',\r
                URL_PANELS_JSON:                        ( isLocal === true ? 'json\/' : PETTANR_ROOT_PATH) + 'panels.json',\r
                NS_PETTANR_COMIC:                       'pettanr-comic',\r
-               RESOURCE_PICTURE_PATH:          ( isLocal === true ? '' : PETTANR_ROOT_PATH) + 'resource_pictures\/',\r
+               RESOURCE_PICTURE_PATH:          ( isLocal === true ? ( deep === true ? '..\/' : '' ) : PETTANR_ROOT_PATH ) + 'resource_pictures\/',\r
                CREATE_COMIC_JS:                        isLocal === true ? 'js\/create_new_comic.js' : PETTANR_ROOT_PATH + 'comics\/new.js',\r
                CREATE_PANEL_JS:                        isLocal === true ? 'js\/create_new_panel.js' : PETTANR_ROOT_PATH + 'panels\/new.js',\r
                UPLOAD_PICTURE_JS:                      isLocal === true ? 'js\/upload_picture.js' : PETTANR_ROOT_PATH + 'original_pictures\/new.js',\r
@@ -752,12 +758,14 @@ pettanr.view = ( function(){
        }\r
        \r
        var AbstractApplication = function(){\r
+               var instance;\r
                this.displayName = 'app name';\r
                this.ID = 'app id';\r
                this.rootElement = null;\r
                this.parentElement = null;\r
                this.nextSibling = null;\r
                this.open = function( _w, _h /*, _option */ ){\r
+                       instance = this;\r
                        if( this.MIN_WIDTH > _w || this.MIN_HEIGHT > _h ){\r
                                if( Type.isHTMLElement( this.rootElement ) === true ){\r
                                        // 小さすぎる!、と表示\r
@@ -782,6 +790,9 @@ pettanr.view = ( function(){
                        // overrride\r
                        return true;\r
                } // false の場合、close の拒否 \r
+               this.addEventListener = function(){\r
+                       \r
+               }\r
        }\r
        AbstractApplication.prototype = new AbstractBasicPane();\r
        \r
@@ -1093,21 +1104,21 @@ pettanr.key = ( function(){
                log.html( [ e.keyCode, e.shiftKey, e.ctrlKey, e.altKey, e.type].join( ','));\r
                //keyOperationChatcher.val( '');\r
                var cancel = false,\r
-                       callback = e.type,\r
+                       type = e.type,\r
                        key = e.keyCode,\r
                        overlayEnabled = pettanr.overlay.visible === true,\r
                        currentViewID = overlayEnabled === true ? pettanr.overlay.currentID : pettanr.view.currentID;\r
-               if( callback === 'keypress') callback = 'keydown';\r
-               if( pettanr.form.keyEventRellay( e ) === false){\r
+               if( type === 'keypress') type = 'keydown';\r
+               if( pettanr.form.keyEventRellay( e ) === false ){\r
                        var shift = e.shiftKey,\r
                                ctrl = e.ctrlKey,\r
                                l = KEYEVENT_ARRAY.length,\r
                                d;\r
                        if( key === 16 || e.shiftKey === true){\r
-                               shiftEnabled = callback !== 'keyup';\r
+                               shiftEnabled = type !== 'keyup';\r
                        }\r
                        if( key === 17 || e.ctrlKey === true){\r
-                               ctrlEnabled = callback !== 'keyup';\r
+                               ctrlEnabled = type !== 'keyup';\r
                        }\r
 \r
                        for( var i=0; i<l; i++){\r
@@ -1120,24 +1131,26 @@ pettanr.key = ( function(){
                                        ( d.shift === undefined || d.shift === shift) &&\r
                                        ( d.ctrl === undefined || d.ctrl === ctrl)\r
                                ){\r
-                                       ( function( func, e){\r
-                                               func && setTimeout( function(){\r
-                                                       func( e);\r
-                                                       func = e = null;\r
-                                               }, 0);\r
-                                       })( d[callback], e);\r
+                                       Type.isFunction( d[ type ]) === true && new asyncCallback( d[ type ], e );\r
                                        cancel = true;\r
                                }\r
                        }\r
                }\r
                if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)\r
                        e.preventDefault();\r
-               e.keyCode = 0;\r
+               e.keyCode      = 0;\r
                e.cancelBubble = true;\r
-               e.returnValue = false;\r
+               e.returnValue  = false;\r
                        return false;\r
                }\r
        }\r
+       function asyncCallback( func, e ){\r
+               window.setTimeout( _callback, 0 );\r
+               function _callback(){\r
+                       func( e );\r
+                       func = e = null;\r
+               }\r
+       }       \r
        \r
        var keyPress = pettanr.ua.isIE === true && pettanr.ua.ieRenderingVersion < 8 ? ( function( e){\r
                        var key = e.keyCode;\r
@@ -1158,7 +1171,7 @@ pettanr.key = ( function(){
                                .mouseenter( function(){\r
                                        jqWindow.focus();\r
                                });\r
-                       keyPress && keyOperationChatcher.keypress( keyPress );\r
+                       keyPress !== null && keyOperationChatcher.keypress( keyPress );\r
 \r
                        delete pettanr.key.init;\r
                },\r
@@ -1363,7 +1376,7 @@ pettanr.form = ( function(){
        }\r
 \r
        var FileInputClass = function( WRAPPER_ELM, ON_UPDATE_FUNCTION, GROUP_ID, validater, elmFileInput ){\r
-               validater = typeof validater === 'function' ? validater : null;\r
+               validater = Type.isFunction( validater ) === true ? validater : null;\r
                \r
                var elmFilePath = pettanr.util.getElementsByClassName( WRAPPER_ELM, 'file-path')[ 0],\r
                        value,\r
@@ -1495,6 +1508,7 @@ pettanr.form = ( function(){
                        var exist = false,\r
                                option = null, _option,\r
                                _index;\r
+                       _value = _value || displayValue;\r
                        for( var i = 0, l = optionList.length; i < l; ++i ){\r
                                if( _value === optionList[ i ].value ){\r
                                        option = optionList[ i ];\r
@@ -1658,6 +1672,10 @@ pettanr.form = ( function(){
        }\r
 \r
        function tabShift( _groupID, _index, _way ){\r
+               // currentApplication の確認\r
+               //if( _applicationID === ( pettanr.overlay.visible === true ? pettanr.overlay.currentID : pettanr.view.currentID )){\r
+               //      return;\r
+               //};\r
                var GROUP_ARRAY = FORM_GROUP_TABLE[ _groupID ] || [],\r
                        l = GROUP_ARRAY.length,\r
                        i = _index + _way,\r
@@ -1687,7 +1705,7 @@ pettanr.form = ( function(){
                        \r
                        var keyCode = e.keyCode;\r
                        var _groupID = currentItem.groupID,\r
-                                       _index = pettanr.util.getIndex( FORM_GROUP_TABLE[ _groupID ], currentItem );\r
+                               _index = pettanr.util.getIndex( FORM_GROUP_TABLE[ _groupID ], currentItem );\r
                        if( currentItem instanceof ComboBoxClass ) {\r
                                if( 37 <= keyCode && keyCode <= 40 ){ // ↑38 ←37 →39 ↓40\r
                                        OptionControl.change( keyCode === 40 );\r
@@ -1743,6 +1761,9 @@ pettanr.form = ( function(){
                createRadio: function(){\r
                        \r
                },\r
+               createSlider: function(){\r
+                       \r
+               },\r
                onWindowResize: function( w, h ){\r
                        windowW = w;\r
                        windowH = h;\r
index 46c3f1d..23913d2 100644 (file)
@@ -1,6 +1,6 @@
 /*
  * pettanR system.js
- *   version 0.4.28
+ *   version 0.4.29
  *   
  * author:
  *   itozyun
@@ -1778,7 +1778,7 @@ pettanr.premiumSatge = pettanr.view.registerApplication( function(){
 
        elmButton.onclick = clickOK;
        
-       var BASE_PATH = pettanr.LOCAL === true ? 'resource_pictures\/' : pettanr.CONST.PETTANR_ROOT_PATH + 'resource_pictures\/',
+       var BASE_PATH = pettanr.LOCAL === true ? 'resource_pictures\/' : pettanr.CONST.RESOURCE_PICTURE_PATH,
                THUMB_PATH = BASE_PATH, // + 'thumbnail/',
                LIMIT_FILESIZE = 1024 * 10; // 10KB
 
index 8565e27..166f374 100644 (file)
@@ -1,6 +1,6 @@
 /*\r
  * pettanR work.js\r
- *   version 0.4.28\r
+ *   version 0.4.29\r
  *   \r
  * author:\r
  *   itozyun\r
@@ -417,8 +417,7 @@ pettanr.editor = pettanr.view.registerApplication( function(){
        var SAVE_CONTROL = ( function(){\r
                var SAVE = MENU_BAR_CONTROL.QUIT.createSelection( 'save', 'ctrl + S', quit, false),\r
                        SAVE_AND_QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'save & quit', null, quit, false, false, true),\r
-                       SAVE_AS_HTML = MENU_BAR_CONTROL.QUIT.createSelection( 'get as html', null, outputAsHtml, true, false, true),\r
-                       SAVE_AS_JSON_STRING = MENU_BAR_CONTROL.QUIT.createSelection( 'get JsonStr', null, outputAsJsonString, true, false, true),\r
+                       EXPORT = MENU_BAR_CONTROL.QUIT.createSelection( 'export', null, onExport, true, false, true),\r
                        QUIT = MENU_BAR_CONTROL.QUIT.createSelection( 'quit', null, quit, true, true),\r
                        updated = false;\r
                \r
@@ -426,21 +425,11 @@ pettanr.editor = pettanr.view.registerApplication( function(){
                        pettanr.editor.shutdown();\r
                }\r
                \r
-               function outputAsHtml(){\r
+               function onExport(){\r
                        pettanr.outputConsole.bootInOverlay(\r
-                               pettanr.outputConsole.HTML,\r
                                comicID, panelID, panelTimming,\r
                                PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
-                               1, // border, BackgroundImage\r
-                               PANEL_ELEMENT_ARRAY\r
-                       );\r
-               }\r
-               function outputAsJsonString(){\r
-                       pettanr.outputConsole.bootInOverlay(\r
-                               pettanr.outputConsole.JSON,\r
-                               comicID, panelID, panelTimming,\r
-                               PANEL_CONTROL.w(), PANEL_CONTROL.h(),\r
-                               1, // border, BackgroundImage\r
+                               2, // border, BackgroundImage\r
                                PANEL_ELEMENT_ARRAY\r
                        );\r
                }\r
@@ -3025,13 +3014,13 @@ pettanr.comicConsole = pettanr.view.registerApplication( function(){
        this.init = function(){\r
                jqWrap = $( '#comic-console-wrapper').hide();\r
                \r
-               inputTitle    = pettanr.form.createInputText( document.getElementById( 'comic-console-title'), null, ID);\r
-               inputW        = pettanr.form.createInputText( document.getElementById( 'comic-console-width'), null, ID);\r
-               inputH        = pettanr.form.createInputText( document.getElementById( 'comic-console-height'), null, ID);\r
+               inputTitle       = pettanr.form.createInputText( document.getElementById( 'comic-console-title'), null, ID);\r
+               inputW           = pettanr.form.createInputText( document.getElementById( 'comic-console-width'), null, ID);\r
+               inputH           = pettanr.form.createInputText( document.getElementById( 'comic-console-height'), null, ID);\r
                comboboxVisible  = pettanr.form.createCombobox( document.getElementById( 'comic-console-visible'), null, ID);\r
                comboboxEditable = pettanr.form.createCombobox( document.getElementById( 'comic-console-editable'), null, ID);\r
-               buttonSubmit  = pettanr.form.createButton( document.getElementById( 'comic-console-post-button'), clickOK, ID);\r
-               buttonCancel  = pettanr.form.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel, ID);\r
+               buttonSubmit     = pettanr.form.createButton( document.getElementById( 'comic-console-post-button'), clickOK, ID);\r
+               buttonCancel     = pettanr.form.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel, ID);\r
                \r
                delete instance.init;\r
        }\r
@@ -3551,9 +3540,13 @@ pettanr.artistConsole = pettanr.view.registerApplication( function(){
 });\r
 \r
 pettanr.outputConsole = pettanr.view.registerApplication( function(){\r
+       var FORMAT_LIST = [ 'json[POST]', 'json[GET]', 'XML', 'HTML', 'XHTML', 'MT export', 'Blogger ATOM' ];\r
        var jqWrap, jqOutputArea,\r
+               comboboxFormat, inputOption,\r
+               buttonGenerate, buttonClose,\r
                ID = 'outputConsole',\r
                timing = 0,\r
+               comicID, panelID, panelTimming, panelW, panelH, borderSize, panelElementArray,\r
                instance = this;\r
        //pettanr.key.addKeyDownEvent( ID, 69, false, false, clickOK);\r
        \r
@@ -3561,12 +3554,13 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                pettanr.outputConsole.shutdown();\r
        }\r
 \r
-       function getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l ){\r
+       function getPanelElementByTiming(){\r
+               var l = panelElementArray.length;\r
                while( timing < l * 2){\r
                        for(var i=0; i<l; ++i){\r
-                               if( timing === PANEL_ELEMENT_ARRAY[ i ].timing ){\r
+                               if( timing === panelElementArray[ i ].timing ){\r
                                        ++timing;\r
-                                       return PANEL_ELEMENT_ARRAY[ i ];\r
+                                       return panelElementArray[ i ];\r
                                }\r
                        }\r
                        ++timing;\r
@@ -3574,15 +3568,15 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                return null;\r
        }\r
 \r
-       function getAsHtmlString( isAbsoluteUrl, isXHTML, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+       function getAsHtmlString( isAbsoluteUrl, isXHTML ){\r
                timing = 0;\r
                \r
                var HTML_ARRAY = [],\r
-                       l = PANEL_ELEMENT_ARRAY.length,\r
+                       l = panelElementArray.length,\r
                        _panelElement;\r
 \r
                while( HTML_ARRAY.length < l ){\r
-                       _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+                       _panelElement = getPanelElementByTiming();\r
                        if( _panelElement === null) break;\r
                        HTML_ARRAY.push( panelElementToHtml( _panelElement, isAbsoluteUrl, isXHTML ));\r
                }\r
@@ -3643,19 +3637,55 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                                ].join( '');                            \r
                        }\r
                }\r
+       \r
+       function getJsonGetString(){\r
+               timing = 0;\r
+               \r
+               var JSON_STRING_ARRAY = [],\r
+                       ELEMENT_ARRAY     = [],\r
+                       l                 = panelElementArray.length,\r
+                       cr                = pettanr.LINE_FEED_CODE_TEXTAREA,\r
+                       _panelElement;\r
 \r
-       function getAsJsonString( comicID, panelID, panelTimming, panelW, panelH, border, PANEL_ELEMENT_ARRAY ){\r
+               while( ELEMENT_ARRAY.length <= l){\r
+                       _panelElement = getPanelElementByTiming();\r
+                       if( _panelElement === null ) break;\r
+                        \r
+                       ELEMENT_ARRAY.push( _panelElement.type === 0 ? imageToJson( _panelElement ) : balloonToJson( _panelElement ));\r
+               }\r
+               return [\r
+                       '{', cr,\r
+                               '"panel": {', cr,\r
+                                       '"id": ',               panelID, ',', cr,\r
+                                   '"border": ',           borderSize, ',', cr,\r
+                                   '"comic_id": ',         comicID, ',', cr,\r
+                                   '"resource_picture_id": 1,', cr,\r
+                                       '"x": ',                0, ',', cr,\r
+                                       '"y": ',                0, ',', cr,\r
+                                       '"z": ',                0, ',', cr,\r
+                                       panelTimming !== -1 ? ( '"t": ' + panelTimming + ',' + cr ) : '',\r
+                                   '"width": ',            panelW, ',', cr,\r
+                                   '"height": ',           panelH, ',', cr,\r
+                                   '"panel_elements": {', cr,\r
+                                       ELEMENT_ARRAY.join( ',' + cr ), cr,\r
+                                   '},', cr,\r
+                               '}', cr,\r
+                       '}'\r
+               ].join( '' );\r
+       }\r
+       \r
+       function getJsonPostString(){\r
                timing = 0;\r
                \r
                var JSON_STRING_ARRAY = [],\r
                        IMAGE_ARRAY = [],\r
                        BALLOON_ARRAY = [],\r
-                       l = PANEL_ELEMENT_ARRAY.length,\r
+                       l = panelElementArray.length,\r
                        _panelElement,\r
                        cr = pettanr.LINE_FEED_CODE_TEXTAREA;\r
 \r
                while( IMAGE_ARRAY.length + BALLOON_ARRAY.length <= l){\r
-                       _panelElement = getPanelElementByTiming( PANEL_ELEMENT_ARRAY, l );\r
+                       _panelElement = getPanelElementByTiming();\r
                        if( _panelElement === null) break;\r
                        _panelElement.type === 0 ? \r
                                IMAGE_ARRAY.push( imageToJson( _panelElement )) :\r
@@ -3665,7 +3695,7 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                        '{', cr,\r
                                '"panel": {', cr,\r
                                        '"id": ',               panelID, ',', cr,\r
-                                   '"border": ',           border, ',', cr,\r
+                                   '"border": ',           borderSize, ',', cr,\r
                                    '"comic_id": ',         comicID, ',', cr,\r
                                    '"resource_picture_id": 1,', cr,\r
                                        '"x": ',                0, ',', cr,\r
@@ -3726,8 +3756,28 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                                '}'\r
                        ].join( '');\r
                }\r
-\r
-\r
+       \r
+       function clickGenerate(){\r
+               var i = comboboxFormat.selectIndex(),\r
+                       text = 'sorry...';\r
+               if( i === 0 ){\r
+                       text = getJsonPostString();\r
+               } else\r
+               if( i === 1 ){\r
+                       text = getJsonGetString();\r
+               } else\r
+               if( i === 3 ){\r
+                       text = getAsHtmlString( false, false );\r
+               } else {\r
+                       \r
+               }\r
+               jqOutputArea.val( text );\r
+       }\r
+       function clickClose(){\r
+               pettanr.outputConsole.shutdown();\r
+               return false;\r
+       }\r
+       \r
        /* grobal method */\r
        this.rootElement = document.getElementById( 'output-console-wrapper' );\r
        this.displayName = ID;\r
@@ -3738,20 +3788,32 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
        this.init = function(){\r
                jqWrap = $( '#output-console-wrapper').hide();\r
                jqOutputArea = $( '#output-area');\r
+               \r
+               comboboxFormat = pettanr.form.createCombobox( document.getElementById( 'output-console-format' ), null, ID );\r
+               for( var i=0, l = FORMAT_LIST.length; i<l; ++i ){\r
+                       comboboxFormat.createOption( FORMAT_LIST[ i ], null, i === 0 );\r
+               }\r
+               inputOption    = pettanr.form.createInputText( document.getElementById( 'output-console-option' ), null, ID );\r
+               buttonGenerate = pettanr.form.createButton( document.getElementById( 'output-console-generate-button' ), clickGenerate, ID );\r
+               buttonClose    = pettanr.form.createButton( document.getElementById( 'output-console-close-button' ), clickClose, ID );\r
                delete instance.init;\r
        }\r
-       this.onOpen = function( _w, _h, _dataType, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements ){\r
+       this.onOpen = function( _w, _h, _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElementArray ){\r
                instance.init && instance.init();\r
                \r
                jqWrap.show();\r
                instance.onPaneResize( _w, _h );\r
                var text;\r
-               if( _dataType === pettanr.outputConsole.JSON ){\r
-                       text = getAsJsonString( _comicID, _panelID, _panelTimming, _panelW, _panelH, _borderSize, _panelElements );\r
-               } else {\r
-                       text = getAsHtmlString( false, false, _panelW, _panelH, _borderSize, _panelElements );\r
-               }\r
-               jqOutputArea.val( text ).focus();\r
+               \r
+               comicID           = _comicID;\r
+               panelID           = _panelID;\r
+               panelTimming      = _panelTimming;\r
+               panelW            = _panelW;\r
+               panelH            = _panelH;\r
+               borderSize        = _borderSize;\r
+               panelElementArray = _panelElementArray;\r
+               \r
+               clickGenerate();\r
        }\r
        this.onPaneResize = function( _w, _h){\r
                jqWrap.css(\r
@@ -3766,9 +3828,3 @@ pettanr.outputConsole = pettanr.view.registerApplication( function(){
                jqOutputArea.val('');\r
        }\r
 });\r
-pettanr.outputConsole.JSON          = 0;\r
-pettanr.outputConsole.HTML          = 1;\r
-pettanr.outputConsole.XML           = 2;\r
-pettanr.outputConsole.SHORT_URL     = 3;\r
-pettanr.outputConsole.MOVERBLE_TYPE = 4;\r
-pettanr.outputConsole.BLOGGER       = 5;\r