From: itozyun <itozyun@gmail.com>
Date: Sun, 13 May 2012 23:40:23 +0000 (+0900)
Subject: Client is version0.4.29, added exportConsole.
X-Git-Url: http://git.osdn.net/view?p=pettanr%2Fpettanr.git;a=commitdiff_plain;h=2dc4a19e472009653fdeddd554debd0b744de8ef

Client is version0.4.29, added exportConsole.
---

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