<meta http-equiv="Content-Script-Type" content="text/javascript">\r
<meta http-equiv="Content-Style-Type" content="text/css">\r
<meta http-equiv="imagetoolbar" content="no">\r
- <title>html2comic Js Editor</title>\r
- <link rel="stylesheet" type="text/css" href="all.css">\r
- </head>\r
- <body>\r
- <!--[if lt IE 9]>\r
- <script type="text/javascript">\r
- (function(){\r
- var b = document.body || (function(){document.write('<body>');return document.body;})(),\r
- x = (function(){\r
- try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}\r
- return 'h2c-ActiveX-' +( t ? 'enabled' : 'disabled');\r
- })();\r
- if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;\r
- })(); \r
- </script>\r
- <![endif]-->\r
-\r
- <!-- 改行コード 取得用 -->\r
-<form>\r
-<textarea id="shadowTxtarea" style="display:none;">\r
-\r
-</textarea>\r
-</form>\r
-<pre id="shadowPre" style="display:none;">\r
-\r
-</pre>\r
- <!-- home -->\r
- <div id="home" class="view-container" style="display:block;">\r
- <div style="overflow: auto;height: 100%;">\r
- <h1>Wellcome to pettanr</h1>\r
- <h2 style="font-size:12px;">html2comic Js Editor</h2>\r
- <a href="index.html?view=editor">エディター起動 ⇒</a><br>\r
- <a href="index.html?view=editor&rimg=CSS3">エディター起動(ReversibleImageBackend is CSS3) ⇒</a><br>\r
- <a href="index.html?view=editor&rimg=VML">エディター起動(ReversibleImageBackend is VML) ⇒</a><br>\r
- <a href="index.html?view=editor&rimg=ActiveX">エディター起動(ReversibleImageBackend is ActiveX) ⇒</a>\r
- <h3 style="font-size:12px;">開発記録</h3>\r
- <dl style="font-size:12px;line-height:1em;">\r
- <dt>11-08-27</dt>\r
- <dd>開始。当初uupaa.jsを使うも0.8でresize()イベントの拾い方が分からずあきらめる。</dd>\r
- <dt>11-08-28</dt>\r
- <dd>jQueryに差し替え。コマと半透過レイヤーの高さのリサイズ・windowリサイズを受けたリサイズ。オペレーションキャッチャーによるキャラクタの移動。コミックエレメントにリサイザ用のマークを表示</dd>\r
- <dt>11-08-29</dt>\r
- <dd>キャラの8方向のリサイズ、マークのみx8、実際にイベントを起こす透明な要素x8で計16個の要素を使う。</dd>\r
- <dt>11-08-30</dt>\r
- <dd>人に触ってもらったところ、操作性が悪すぎることが判明。自分でいじっている間は深刻度が把握が甘かった、、、</dd>\r
- <dt>11-08-31</dt>\r
- <dd>ドラッグ周りをjQueryに頼らない形に書き換え。マウスイベントのキャッチはoperationCatcherElmに一任する。処理が遅れ要素からカーソルが離れた段階でドラッグイベントが終了するのを防ぐ。</dd>\r
- <dt>11-09-02</dt>\r
- <dd>コマ枠のリサイザーのマウスイベントもmouseOperationChacherElmに任せる。コマ枠リサイザーとコマ要素（キャラ・吹き出し）を同列に扱うために処理を書き直す。キーイベントの調査。</dd>\r
- <dt>11-09-03</dt>\r
- <dd>ctrl+zの実装に備えて、コミック要素の座標を絶対座標からコマ枠からの相対座標とした。</dd> \r
- <dt>11-09-04</dt>\r
- <dd>altキーは一度押すと他のキー入力ができなくなる。もう一度押すと解除。以上をaltのみreturn falseしてfirefoxでは対処できた。ieではできない。</dd>\r
- <dd>ctrl+z 戻る（アニメーション）、ctrl+0 センタリング。</dd>\r
- <dd>svgまたはvmlで吹きだしを書いて、Vectorのサポートを調べる</dd>\r
- <dt>11-09-05</dt>\r
- <dd>ctrl+shift+zで進むを実装してみるもいまいちおかしい、、、</dd>\r
- <dt>11-09-06</dt>\r
- <dd>吹き出しのしっぽの座標決定ロジックの修正。以前は数回～数百回ループしていたのを、10回程度に固定。</dd>\r
- <dt>11-09-07</dt>\r
- <dd>戻る・進むのそもそもの考え方が間違っていた。でうまく動作！</dd>\r
- <dt>11-09-17</dt>\r
- <dd>噴出しの尻尾の回転・復帰ができる！クラス構造どうするかとか手間取ったけど、別に10日間をフルで取り組んでたわけじゃないんだからね。ie7+8でxmlの描画が非常に重い、、、</dd>\r
- <dd>ieはマウス操作のたび？にキー入力監視用のinputからfocusが外れるみたいで、intervalで0.5秒おきにfocusさせてみた</dd>\r
- <dt>11-09-18</dt>\r
- <dd>window関連を始める。まずはinfomationのモックのみ</dd>\r
- <dt>11-09-19</dt>\r
- <dd>infomationのドラッグ、currentなcomicElementの情報の表示。</dd>\r
- <dd>Dragに関わるアイテムは、MouseOperationChacherの下に。そうでないものは上で、ただし使うときだけ。よし！</dd>\r
- <dd>jQueryの拡張で、editableTextを作る。こいつでinfomationの属性を編集可能にする。さらにtabキーによる項目移動。tab+shiftでその逆。currentのロックをしないと、属性変更を反映できないな。</dd>\r
- <dt>11-09-20</dt>\r
- <dd>ツールボックスwindowに着手。</dd> \r
- <dt>11-09-22</dt>\r
- <dd>エディタブルテキストの修正を開始。グリッドスイッチを動作。吹き出しの挿入。</dd>\r
- <dt>11-09-23</dt>\r
- <dd>ie8の8modeに対応。キー周りの見直し。エディタブルテキストの修正。コミックオブジェクト情報⇔背景情報の切り替え。</dd>\r
- <dt>11-09-24</dt>\r
- <dd>クロスブラウザな吹き出しクラスの整理。画像⇔ベジェの切り替えもh2c.vectorに置く。キャンバスのドラッグ。ショートカットキーのie7以下対応。</dd>\r
- <dt>11-09-25</dt>\r
- <dd>コミックオブジェクトの操作ボタンの表示。小さい場合は外に表示。その際にはフォーカスがヒットエリアの外にも拡大。カレントなオブジェクトは優先してヒットエリアをチェック。尻尾操作の位置を修正。</dd>\r
- <dt>11-11-20</dt>\r
- <dd>再開！テキストの編集が可能に。履歴も効きます。まだリターンキーが反応しない。</dd>\r
- <dt>11-11-22</dt>\r
- <dd>comicElementの削除。ヒストリーも動作。</dd>\r
- <dt>11-11-23</dt>\r
- <dd>comicElementの追加（今はtextのみ）ヒストリーも動作。グループイメージの選択画面に着手。まだ操作はできない。</dd>\r
- <dt>11-11-26</dt>\r
- <dd>イメージの追加、ヒストリーも動作。グループイメージの選択画面も動くようになる。comicElementのコンソールのボタンに画像を用意。</dd>\r
- <dt>11-11-28</dt>\r
- <dd>レイヤーの前後、ヒストリーも動作。</dd>\r
- <dt>11-11-29</dt>\r
- <dd>グループ画像選択画面の画像の読み込みエラーに対処、マウスホイールでスクロール、filesizeの大きいものはサムネイルを表示、画面の外の画像は表示範囲に入るまで読み込まない、クリックで画像取得のリトライ。</dd>\r
- <dt>11-12-03</dt>\r
- <dd>ヒストリーに格納されたcomicElementのうち、append & removeに関するもので、ヒストリーから参照されなくなったものは.destroy()するようにする。main.jsが100KB超え。。。</dd>\r
- <dd>file + io なクラスが必要。</dd>\r
- <dd>xBackend(css3,ActiveX,vml,flash,silverlight,canvas)な画像の反転、ロード監視、png fix(ie6-) してくれる画像ラッパーが必要。</dd>\r
- <dt>11-12-06</dt>\r
- <dd>vmlを使ったie用のReversibleImageClassが動作。vmlはclassを変えた後に、再びelmWrap.appendChild(vmlImg)しないと再描画されない。</dd>\r
- <dt>11-12-11</dt>\r
- <dd>画像の反転操作ができるように！ヒストリーも動作。現在のバックエンドは、css3,vml,ActiveV。</dd>\r
- <dd>jQueryが不要そうな部分は直接domに触るようにする。style.width,style.heightにieではマイナスは不可、'px'が不要。</dd>\r
- <dd>ieでイメージの縦横pxが取れず、jsonからのデータを入れる。</dd>\r
- <dt>11-12-13</dt>\r
- <dd>ieでイメージの縦横pxが取れない問題の解消。new Image()の場合、ie8以下ではサイズが取れなかったり、removeChildに失敗するっぽい。</dd>\r
- <dt>11-12-18</dt>\r
- <dd>helpウインドウの追加。併せてWindowClass周りの大幅な書き換え。クロージャを効かせるスタイルでも継承っぽい書き方ができたかも。</dd>\r
- <dd>domTreeに追加する前にjQueryでセットしても特にイベント周りで表示がおかしくなる．ieでは特に酷い。</dd>\r
- <dt>11-12-25</dt>\r
- <dd>メニューバーが動作するようになる。他にマウスイベントリスナへのイベント伝播の書き換え。</dd>\r
- <dt>11-12-30</dt>\r
- <dd>shiftキーを押しながらのリサイズでは、縦横比が維持するようにする。</dd>\r
- </dl>\r
- </div>\r
- </div>\r
- \r
- <!-- comic list -->\r
- <div id="comic-list" class="view-container"></div>\r
- \r
- <!-- image list -->\r
- <div id="image-list" class="view-container"></div>\r
- \r
- <!-- setting -->\r
- <div id="setting" class="view-container"></div>\r
- \r
- <!-- grobal navi -->\r
- <div id="grobal-navi">\r
- <a href="#jump-to-home">home</a>\r
- <a href="#jump-to-comic-list">comic list</a>\r
- <a href="#jump-to-image-list">image list</a>\r
- <a href="#jump-to-setting">setting</a>\r
- </div>\r
- \r
- <!-- Editor -->\r
- <div id="editor" class="view-container">\r
- <p id="key-event-log" style="margin-top: 5em;"></p>\r
- <p id="history-log"></p>\r
- <p id="operation-catcher-log"></p>\r
- <p id="tail-log"></p>\r
- <p id="window-log"></p>\r
- \r
- <!-- コマの背景（パターン・塗りつぶし） -->\r
- \r
- <!-- グリッド-->\r
- <div id="grid" style="display:none;"></div>\r
- \r
- <!-- コマ要素 -->\r
- <div id="comic-element-container"></div>\r
-\r
- <!-- コマの枠の外は完全に隠さないで、半透過のレイヤーを重ねる -->\r
- <div id="whiteGlass-container">\r
- <div id="whiteGlass-top"></div>\r
- <div id="whiteGlass-left"></div>\r
- <div id="whiteGlass-right"></div>\r
- <div id="whiteGlass-bottom"></div>\r
- </div>\r
- \r
- <!-- コマの枠の表示 -->\r
- <div id="panel-border">\r
- <!-- コマの高さの変更ボタン -->\r
- <div id="panel-resizer-top">▲</div>\r
- <div id="panel-resizer-bottom">▼</div>\r
+ <title>pettanR</title>\r
+ <link rel="stylesheet" type="text/css" href="common.css">\r
+ </head>\r
+ <body>\r
+ <div id="general-content">\r
+ <div id="outer-wrapper">\r
\r
- <!-- コミック要素のリサイザ -->\r
- <div id="comic-element-resizer-container">\r
- <div class="comic-element-resizer" id="comic-element-resizer-top"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-left"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-right"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>\r
- <div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>\r
- <div id="balloon-tail-mover"></div>\r
- \r
- <!-- コミックオブジェクトコンソール -->\r
- <div id="comic-element-consol-wrapper">\r
- <div id="comic-element-consol-tail"></div>\r
- <div id="comic-element-consol-wrapper-when-out">\r
- <div id="image-element-consol">\r
- <div id="change-image-button">⇔</div>\r
- <div id="layer-back-button"><B</div>\r
- <div id="delete-image-button">x</div>\r
- <div id="layer-forward-button">F></div>\r
- </div>\r
- <div id="text-element-consol">\r
- <div id="edit-text-button">E</div>\r
- <div id="change-text-style-button">⇔</div>\r
- <div id="back-text-button"><B</div>\r
- <div id="delete-text-button">x</div>\r
- <div id="hide-text-tail-button">x｛</div>\r
- <div id="forward-text-button">F></div>\r
- </div>\r
+ <div id="header">\r
+ <div class="base-content-width" style="position:relative;">\r
+ <h1>pettanR</h1>\r
+ <!-- global navi -->\r
+ <div id="global-navi">\r
+ <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
</div>\r
</div>\r
</div>\r
- </div>\r
-\r
- <div id="window-container"></div>\r
\r
-\r
- <!-- layer-window -->\r
- <!-- dom-console-window -->\r
- <!-- publish-window -->\r
- <!-- wellcome-window -->\r
- \r
-\r
- <!-- メニューバー -->\r
- <div id="menu-bar"></div>\r
- \r
- <!-- マウスオペレーションキャッチャー -->\r
- <div id="mouse-operation-catcher"></div>\r
- \r
- <!-- テンプレート -->\r
- <script id="imgElementTemplete" type="text/x-jquery-tmpl">\r
- <div class="comic-element-wrapper image-element"></div>\r
- </script>\r
- \r
- <script id="textElementTemplete" type="text/x-jquery-tmpl">\r
- <div class="comic-element-wrapper text-element">\r
- <img>\r
- <div class="speach">\r
- <div class="speach-inner"></div>\r
- </div>\r
- </div>\r
- </script>\r
- \r
- <script id="textElementTempleteForOldIE" type="text/x-jquery-tmpl">\r
- <div class="comic-element-wrapper text-element">\r
- <img>\r
- <div class="speach">\r
- <table><tr><td></td></tr></table>\r
- </div>\r
- </div>\r
- </script>\r
- \r
- <script id="imageGruopItemTemplete" type="text/x-jquery-tmpl">\r
- <div class="image-gruop-item">\r
- <img width="0" height="0">\r
- <div class="image-gruop-item-title">img-title</div>\r
- </div> \r
- </script>\r
- \r
- <script id="windowTemplete" type="text/x-jquery-tmpl">\r
- <div class="window-wrapper">\r
- <div class="window-header">window title</div>\r
- <div class="window-close-button">x</div>\r
- <div class="window-body clearfix">\r
- <div class="window-body-insert-position"></div>\r
- <div class="window-resize-button">／</div>\r
+ <div id="inner-wrapper" class="base-content-width">\r
+ <div id="main">\r
+ <div style="padding:50px;text-align:center;">\r
+ <p style="font-size:2em;font-weight:bold;color:#666;line-height:1.6em;">\r
+ もうしばらくしたら、いつもと同じ一日が、<br>\r
+ 忘れられない一日になります。\r
+ </p>\r
+ <p style="text-align:center;color:#999;">\r
+ ぺったんRからの特別な発表を、もうちょっとまっててね。\r
+ </p>\r
+ <img src="http://static.sourceforge.jp/thumb/g/2/930/640x640_0.png" width="200" height="200" alt="ぺったんR">\r
+ </div>\r
</div>\r
</div>\r
- </script>\r
- \r
- <!-- infomation-window -->\r
- <script id="infomation-window" type="text/x-jquery-tmpl">\r
- <div id="panel-background-information">\r
- <div id="bg-pattern"></div>\r
- <div id="select-bg-pattern-button">pattern</div>\r
- <div id="reset-bg-pattern-button">x</div>\r
- <div id="bg-color"></div>\r
- <div id="select-bg-color-button">color</div>\r
- <div id="reset-bg-color-button">x</div>\r
- <!-- <div id="bg-pattern-x"></div>\r
- <div id="bg-pattern-y"></div>\r
- <div id="bg-pattern-repeat-x"></div>\r
- <div id="bg-pattern-repeat-y"></div> -->\r
- </div>\r
- \r
- <div id="comic-element-infomation">\r
- <div id="comic-element-x">\r
- <span class="comic-element-attribute-label">x:</span>\r
- <span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>\r
- </div>\r
- <div id="comic-element-y">\r
- <span class="comic-element-attribute-label">y:</span>\r
- <span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>\r
- </div>\r
- <div id="comic-element-z">\r
- <span class="comic-element-attribute-label">z:</span>\r
- <span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>\r
- </div>\r
- <div id="comic-element-a">\r
- <span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>\r
- <span class="comic-element-attribute-label">°</span>\r
- </div>\r
- <div id="comic-element-w">\r
- <span class="comic-element-attribute-label">w:</span>\r
- <span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>\r
+ </div>\r
+ </div>\r
+ \r
+ <!-- footer -->\r
+ <div id="footer-content">\r
+ <div id="footer">\r
+ <div id="footer-item-container" class="base-content-width clearfix">\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ぺったんR にようこそ</h2>\r
+ <ul>\r
+ <li>サンプル</li>\r
+ <li>ぺったんRの特徴</li>\r
+ <li>沿革</li>\r
+ </ul>\r
+ </div>\r
</div>\r
- <div id="comic-element-h">\r
- <span class="comic-element-attribute-label">h:</span>\r
- <span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>ドキュメント</h2>\r
+ <ul>\r
+ <li>作家向けドキュメント</li>\r
+ <li>絵師向けドキュメント</li> \r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
+ <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
+ </ul>\r
+ </div>\r
</div>\r
- <div id="comic-element-w-percent">\r
- <span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>\r
- <span class="comic-element-attribute-label">%</span>\r
+ <div class="footer-item-wrapper">\r
+ <div class="footer-item">\r
+ <h2>プロトタイプ</h2>\r
+ <ul>\r
+ <li>pettanr</li>\r
+ <li><a href="work.html" rel="editor">js editor</a></li>\r
+ </ul>\r
+ <h2>Ajax contents</h2>\r
+ <ul>\r
+ <li><a href="help/jp.xml">help | jp</a></li>\r
+ </ul>\r
+ </div>\r
</div>\r
- <div id="comic-element-h-percent">\r
- <span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>\r
- <span class="comic-element-attribute-label">%</span>\r
+ <div class="footer-item-wrapper" style="width:170px;">\r
+ <div class="footer-item" style="padding-right:0;">\r
+ <h2>ぺったんRチーム</h2>\r
+ <ul>\r
+ <li>わたしたちについて</li>\r
+ <li>ミッション</li>\r
+ <li><a href="diary/itozyun.xml">itozyun's diary</a></li>\r
+ <li>個人情報保護方針</li>\r
+ <li>作品の取り扱い</li>\r
+ <li>お問い合わせ</li>\r
+ </ul>\r
+ </div>\r
</div>\r
- <div id="comic-element-keep-aspect"></div>\r
</div>\r
- </script>\r
-\r
- <!-- toolbox-window -->\r
- <script id="toolbox-window" type="text/x-jquery-tmpl">\r
- <div id="toolbox-add-image-button">add image</div>\r
- <div id="toolbox-add-text-button">add text</div>\r
- <div id="toolbox-edit-bg-button">edit bg</div>\r
- <div id="toolbox-switch-grid">grid</div>\r
- <div id="toolbox-popup-help-button">?</div>\r
- <div id="toolbox-publish-button">publish!</div>\r
- </script>\r
- \r
- </div>\r
- <!-- Editor -->\r
- \r
- \r
- <!-- オーバーレイ -->\r
- <div id="overlay-container" style="display: none;">\r
- <div id="overlay-shadow"></div>\r
- \r
- <!-- テキスト エディタ -->\r
- <div id="speach-editor-wrapper">\r
- <textarea id="speach-editor"></textarea>\r
- <div id="speach-edit-complete-button" class="button">OK</div>\r
- </div>\r
-\r
- <!-- 画像グループから画像を選択 -->\r
- <div id="image-gruop-wrapper">\r
- <div id="image-icon-container"></div>\r
- <div id="gruop-name-display">Group Name</div>\r
- <div id="image-gruop-button" class="button">cancel</div>\r
+ <div id="copyright">Copyright © 2011-2012 pettanR team, some rights reserved.</div>\r
</div>\r
- \r
- <div id="overlay-close-button">x</div>\r
</div>\r
-\r
- <script type="text/javascript" src="jquery-1.6.2.min.js"></script>\r
- <!-- <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> -->\r
- <script type="text/javascript" src="main.js"></script>\r
+ <script type="text/javascript" src="common.js"></script>\r
</body>\r
-</html>\r
+</html>
\ No newline at end of file
OSDN Git Service
