0.5.x/test/dynamic-comic-html.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">\r
   2 <html xmlns:v="urn:schemas-microsoft-com:vml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->\r
   3 <head>\r
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">\r
   6         <meta http-equiv="Content-Language" content="ja">\r
   7         <meta http-equiv="Content-Script-Type" content="text/javascript">\r
   8         <meta http-equiv="Content-Style-Type" content="text/css">\r
   9         <meta http-equiv="imagetoolbar" content="no">\r
  10         <link rel="stylesheet" type="text/css" href="../stylesheets/site.css">\r
  11         <link rel="stylesheet" type="text/css" href="../stylesheets/peta.common.css">\r
  12         <link rel="stylesheet" type="text/css" href="../stylesheets/system.css">\r
  13         <!-- InstanceBeginEditable name="doctitle" -->\r
  14         <title>js によるコミック html の動的書き出しテスト | pettanR</title>\r
  15         <!-- InstanceEndEditable -->\r
  16         <!-- InstanceBeginEditable name="head" -->\r
  17         <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
  18         <!-- InstanceEndEditable -->\r
  19 </head>\r
  20 \r
  21 <body>\r
  22     <div id="general-content">\r
  23         <div id="outer-wrapper">\r
  24             \r
  25             <div id="header">\r
  26                 <div class="base-content-width" style="position:relative;">\r
  27                     <h1><a href="../index.html">pettanR</a></h1>\r
  28                 <!-- global navi -->\r
  29                     <div id="global-navi">\r
  30                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
  31                     </div>\r
  32                 </div>\r
  33             </div>\r
  34             \r
  35             <div id="inner-wrapper" class="base-content-width">\r
  36                                 <!-- InstanceBeginEditable name="main_content" -->\r
  37                                 <div id="main">\r
  38                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; js によるコミック html の動的書き出しテスト</div>\r
  39                                         <h2>js によるコミック html の動的書き出しテスト</h2>\r
  40                                         <p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます．</p>\r
  41                                         \r
  42                                         <h3>動的書き出しテスト</h3>\r
  43                                         <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます．</p>\r
  44                                         <form name="htmlTest" class="block-element-item">\r
  45                                                 <textarea name="jsonString" style="width:100%" rows="20" cols="100">\r
  46 {\r
  47         "border":                       1,\r
  48         "comic_id":                     5,\r
  49         "resource_picture_id":          1,\r
  50         "x":                            0,\r
  51         "y":                            0,\r
  52         "z":                            0,\r
  53         "t":                            0,\r
  54         "width":                        400,\r
  55         "height":                       235,\r
  56         "panel_elements":               [\r
  57                 {\r
  58                         "resource_picture":     {"id":1,"ext":'png'},\r
  59                         "x":                    178,\r
  60                         "y":                    -2,\r
  61                         "z":                    0,\r
  62                         "width":                166,\r
  63                         "height":               252\r
  64                 },\r
  65                 {\r
  66                         "balloon_template_id":  1,\r
  67                         "system_picture_id":    1,\r
  68                         "size":                 1,\r
  69                         "tail":                 90,\r
  70                         "x":                    -29,\r
  71                         "y":                    39,\r
  72                         "z":                    1,\r
  73                         "width":                200,\r
  74                         "height":               160,\r
  75                         "speeches_attributes":  {\r
  76                                 "newf1":        {\r
  77                                         "content":      "Hello",\r
  78                                         "x":            -29,\r
  79                                         "y":            39,\r
  80                                         "width":        200,\r
  81                                         "height":       160\r
  82                                 }\r
  83                         }\r
  84                 }\r
  85         ]\r
  86 }\r
  87                                                 </textarea>\r
  88                                                 <input type="button" value="print" name="bindButton" class="button">\r
  89                                         </form>\r
  90                                         <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>\r
  91                                         <div id="outputHere"></div>\r
  92                                         \r
  93                                         <h3>source</h3>\r
  94                                         <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する．外部サイト張り出し用  script や ユーザーコンソールの コミックビューワーから使われる．</p>\r
  95                                         <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する．bind の意味は 製本 ．jQuery.bind とは関係ないので注意．</p>\r
  96                                         <pre class="brush: js;">\r
  97 var jsonArea = document.htmlTest.jsonString,\r
  98         button = document.htmlTest.bindButton,\r
  99         bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
 100         elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
 101         json = null;\r
 102 button.onclick = function(){\r
 103         try {\r
 104                 eval( 'json = ' + jsonArea.value);\r
 105                 elmAlertStyle.display = 'none';\r
 106         } catch(e){\r
 107                 elmAlertStyle.display = 'block';\r
 108         }\r
 109         json !== null && bindWorker.json( json);\r
 110         json = null;\r
 111 }\r
 112                                         </pre>\r
 113                                         <h3>js による動的な書き出しの利点</h3>\r
 114                                         <p>js による動的な書き出しには以下にあげる利点がある．最後のもの以外はサーバへの画像リクエストを抑えるものになります．</p>\r
 115                                         <ul>\r
 116                                                 <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>\r
 117                                                 <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる．</li>\r
 118                                                 <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>\r
 119                                                 <li>コマのズーム機能が利用できる．ただしリサイズを禁止された画像を含むコマに対してはできない．</li>\r
 120                                         </ul>\r
 121                                 </div>\r
 122                                 <!-- InstanceEndEditable -->\r
 123             </div>\r
 124         </div>\r
 125     </div>\r
 126     \r
 127     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 128 \r
 129         <div id="footer">\r
 130             <div id="footer-item-container" class="base-content-width clearfix">\r
 131                 <div class="footer-item-wrapper">\r
 132                     <div class="footer-item">\r
 133                         <h2>ぺったんR にようこそ</h2>\r
 134                         <ul>\r
 135                             <li>サンプル</li>\r
 136                             <li>ぺったんRの特徴</li>\r
 137                             <li>沿革</li>\r
 138                         </ul>\r
 139                         <h2>Test</h2>\r
 140                         <ul>\r
 141                             <li><a href="index.html">Test Index</a></li>\r
 142                         </ul>\r
 143                     </div>\r
 144                 </div>\r
 145                 <div class="footer-item-wrapper">\r
 146                     <div class="footer-item">\r
 147                         <h2>ドキュメント</h2>\r
 148                         <ul>\r
 149                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 150                             <li>絵師向けドキュメント</li>                                                     \r
 151                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 152                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 153                         </ul>\r
 154                     </div>\r
 155                 </div>\r
 156                 <div class="footer-item-wrapper">\r
 157                     <div class="footer-item">\r
 158                         <h2>プロトタイプ</h2>\r
 159                         <ul>\r
 160                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 161                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 162                         </ul>\r
 163                         <h2>Ajax contents</h2>\r
 164                         <ul>\r
 165                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 166                         </ul>\r
 167                     </div>\r
 168                 </div>\r
 169                 <div class="footer-item-wrapper" style="width:170px;">\r
 170                     <div class="footer-item" style="padding-right:0;">\r
 171                         <h2>ぺったんRチーム</h2>\r
 172                         <ul>\r
 173                             <li>わたしたちについて</li>\r
 174                             <li>ミッション</li>\r
 175                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 176                             <li>個人情報保護方針</li>\r
 177                             <li>作品の取り扱い</li>\r
 178                             <li>お問い合わせ</li>\r
 179                         </ul>\r
 180                     </div>\r
 181                 </div>\r
 182             </div>\r
 183             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 184         </div><!-- #EndLibraryItem -->\r
 185         </div>\r
 186         <script type="text/javascript">\r
 187                 var has_server_support = false;\r
 188         </script>\r
 189 <!-- InstanceBeginEditable name="script" -->\r
 190         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
 191         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>\r
 192         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>\r
 193         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>\r
 194         <script type="text/javascript" src="../javascripts/jquery-1.6.2.min.js"></script>\r
 195         <script type="text/javascript" src="../javascripts/system.js"></script>\r
 196         <script type="text/javascript" src="../javascripts/peta.common.js"></script>\r
 197         <script type="text/javascript">\r
 198                 SyntaxHighlighter.all();\r
 199                 \r
 200                 var jsonArea = document.htmlTest.jsonString,\r
 201                         button = document.htmlTest.bindButton,\r
 202                         bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),\r
 203                         elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,\r
 204                         json = null;\r
 205                 button.onclick = function(){\r
 206                         try {\r
 207                                 eval( 'json = ' + jsonArea.value);\r
 208                                 elmAlertStyle.display = 'none';\r
 209                         } catch(e){\r
 210                                 elmAlertStyle.display = 'block';\r
 211                         }\r
 212                         json !== null && bindWorker.json( json);\r
 213                         json = null;\r
 214                 }\r
 215         </script>\r
 216 <!-- InstanceEndEditable -->\r
 217 </body>\r
 218 <!-- InstanceEnd --></html>\r