0.4.x/test/html2comic_0.3.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/common.css">\r
  11         <!-- InstanceBeginEditable name="doctitle" -->\r
  12         <title>ぺったんR html 実証サンプル version 0.3 | pettanR</title>\r
  13         <!-- InstanceEndEditable -->\r
  14         <!-- InstanceBeginEditable name="head" -->\r
  15         <style type="text/css">\r
  16                                 \r
  17 /*  PettanR Comic\r
  18 --------------------------------------------------------------------------------------*/\r
  19 .test_pettanr-comic-wrapper {\r
  20         margin : 1em auto;\r
  21 }\r
  22         .test_pettanr-comic-panel {\r
  23                 border-style : solid;\r
  24                 border-color : #111;\r
  25                 position     : relative;\r
  26                 margin       : 1em 0;\r
  27                 overflow     : hidden;\r
  28         }\r
  29                 .test_pettanr-comic-panel img,\r
  30                 .test_pettanr-comic-balloon {\r
  31                         position : absolute;\r
  32                 }\r
  33                         .test_pettanr-comic-balloon img {\r
  34                                 width        : 100%;\r
  35                                 height       : 100%;\r
  36                         }\r
  37                         .test_pettanr-comic-speech {\r
  38                                 margin       : 0 !important;\r
  39                                 padding      : 0 !important;\r
  40                                 display      : table;\r
  41                                 table-layout : fixed;\r
  42                                 position     : absolute;\r
  43                                 top          : 0;\r
  44                                 left         : 16.6%;\r
  45                                 width        : 66.6%;\r
  46                                 height       : 100%;\r
  47                                 *height      : auto;\r
  48                                 *top         : 50% !important;\r
  49                         }\r
  50                                 .test_pettanr-comic-speech-inner {\r
  51                                         vertical-align : middle;\r
  52                                         display        : table-cell;\r
  53                                         *display       : block;\r
  54                                         zoom           : 1;\r
  55                                         *position      : relative;\r
  56                                         *top           : -50%;\r
  57                                 }\r
  58                                         .test_pettanr-comic-speech p {\r
  59                                                 padding : 0.5em 0 !important;\r
  60                                                 margin  : 0 !important;\r
  61                                         }\r
  62                                                 .test_pettanr-comic-speech strong {\r
  63                                                         font-weight    : bold;\r
  64                                                 }\r
  65                                                 .test_pettanr-comic-speech em,\r
  66                                                 .test_pettanr-comic-speech i {\r
  67                                                         font-style     : italic;\r
  68                                                 }\r
  69                                                 .test_pettanr-comic-speech samp,\r
  70                                                 .test_pettanr-comic-speech code {\r
  71                                                         font-family    : monospace;\r
  72                                                 }\r
  73                 .test_pettanr-comic-ground {\r
  74                         position            : absolute;\r
  75                         top                 : 0;\r
  76                         left                : 0;\r
  77                         width               : 0;\r
  78                         *width              : 100%; /* for ie5.5- */\r
  79                         height              : 100%;\r
  80                         overflow            : hidden;\r
  81                         padding-left        : 100%;\r
  82                         background-repeat   : repeat;\r
  83                         background-position : 0 0;\r
  84                 }\r
  85 \r
  86         .show-border .test_pettanr-comic-speech {\r
  87                 border : 1px solid green;\r
  88         }               \r
  89         .show-border .test_pettanr-comic-speech div {\r
  90                 border : 1px solid red;\r
  91         }\r
  92         .show-border .test_pettanr-comic-speech p {\r
  93                 border : 1px solid orange;\r
  94         }\r
  95         .show-border .test_pettanr-comic-speech span,\r
  96         .show-border .test_pettanr-comic-speech strong,\r
  97         .show-border .test_pettanr-comic-speech em,\r
  98         .show-border .test_pettanr-comic-speech i,\r
  99         .show-border .test_pettanr-comic-speech samp,\r
 100         .show-border .test_pettanr-comic-speech code {\r
 101                 border : 1px solid blue;\r
 102         }\r
 103         </style>\r
 104         <!-- InstanceEndEditable -->\r
 105 </head>\r
 106 \r
 107 <body>\r
 108     <div id="general-content">\r
 109         <div id="outer-wrapper">\r
 110             \r
 111             <div id="header">\r
 112                 <div class="base-content-width" style="position:relative;">\r
 113                     <h1><a href="../index.html">pettanR</a></h1>\r
 114                 <!-- global navi -->\r
 115                     <div id="global-navi">\r
 116                         <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>\r
 117                     </div>\r
 118                 </div>\r
 119             </div>\r
 120             \r
 121             <div id="inner-wrapper" class="base-content-width">\r
 122                                 <!-- InstanceBeginEditable name="main_content" -->\r
 123                                 <div id="main">\r
 124                                         <div id="breadcrumb"><a href="index.html">テスト インデックス</a> &gt; ぺったんR html 実証サンプル version 0.3</div>\r
 125                                         \r
 126                                         <h2>ぺったんR html 実証サンプル version 0.3　2013.09.23</h2>\r
 127                                         <h3>はじめに</h3>\r
 128                                         <p>html + css の表現力を活用してマンガ状の表示を行うのことが ぺったん、及び ぺったんR の肝です．</p>\r
 129                                         <p>この文書では ぺったんR API などで作られたマンガ作品データがブラウザ上でどのような html になるのか？ を示す．文書はあくまで実証サンプルであり、必ずしもここで示した html に従わなくてはいけないわけではない．</p>\r
 130                                         <p>また、ぺったんR API によって提供されたマンガデータが、必ずしも html によって表示されなければいけないわけでもない．</p>\r
 131                                         <p>この文書で示された html 構造と css は ぺったんR プロジェクトのライセンスの元でユーザーが自由に利用できる．</p>\r
 132                                         \r
 133                                         <h3>機能一覧</h3>\r
 134                                         <dl class="dl-table clearfix">\r
 135                                                 <dt>正常動作確認済みブラウザ</dt>\r
 136                                                 <dd>ie5+, Firefox3.6+, NN6.2+, Opera7.11 & 9.64+, Konqueror4.8, Safari3.2, Iron5</dd>\r
 137                                                 <dt>吹きだしの語調</dt>\r
 138                                                 <dd>通常の語調のほかに、強調、コンピュータの合成音声</dd>\r
 139                                                 <dt>脚本情報</dt>\r
 140                                                 <dd>テキストブラウザ・音声読み上げブラウザでも作品を読むことができる（はず）</dd>\r
 141                                                 <dt>リッチテキスト機能</dt>\r
 142                                                 <dd>まだ、、、</dd>\r
 143                                         </dl>\r
 144                                         <p>実際の運用時には、js によって吹き出し画像がベクター画像に置き換えられたり、クライアント側で反転画像の生成を行うが、本文書では扱わない．</p>\r
 145                                         \r
 146                                         <h3>表示サンプル</h3>\r
 147                                         <p>表示サンプルは今後充実していくこととする．</p>\r
 148                                         \r
 149                                         <div id="swbutton" class="button" onclick="switchBorder();" style="width:100px;margin:10px auto;">show border</div>\r
 150                                         \r
 151                                         <div id="html2comic">\r
 152                                                 <div class="test_pettanr-comic-wrapper" style="width: 400px;">\r
 153                                                         <div class="test_pettanr-comic-panel" style="border-width: 2px;height: 300px;">\r
 154                                                                 <div class="test_pettanr-comic-balloon"\r
 155                                                                         style="width: 200px; height: 200px; left: -4px; top: -10px; z-index: 3;"\r
 156                                                                 >\r
 157                                                                         <img src="../system_pictures/_w7.gif" alt="ようやく口を開くと">\r
 158                                                                         <div class="test_pettanr-comic-speech">\r
 159                                                                                 <div class="test_pettanr-comic-speech-inner"\r
 160                                                                                         style="font-size: 1em; text-align: left; color: rgb(0, 0, 0);"\r
 161                                                                                 >\r
 162                                                                                         <p>それじゃほとんど意味がないじゃねえか</p>\r
 163                                                                                 </div>\r
 164                                                                         </div>\r
 165                                                                 </div>\r
 166                                                                 <img src="2.gif"\r
 167                                                                         alt="頭を抱えるキンイチであった"\r
 168                                                                         title="キャラクター名:キンイチ, 絵師:yas"\r
 169                                                                         longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
 170                                                                         width="247" height="273" style="top: 101px; left: 86px; z-index: 2;">\r
 171                                                                 <div class="test_pettanr-comic-ground" style="z-index: 1; background-color: #003;">深いため息に空気までが暗く重々しい…</div>\r
 172                                                         </div>\r
 173                                                         <div class="test_pettanr-comic-panel" style="border-width: 2px; height: 235px;">\r
 174                                                                 <img src="../resource_pictures/1.png"\r
 175                                                                         alt="目の血走ったペンギンが拳を握り締めている"\r
 176                                                                         title="キャラクター名:キンイチ, 絵師:yas"\r
 177                                                                         longdesc="http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi"\r
 178                                                                         width="166" height="272" style="left: 148px; top: -2px; z-index: 0;"\r
 179                                                                 >\r
 180                                                                 <div class="test_pettanr-comic-balloon"\r
 181                                                                         style="width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;"\r
 182                                                                 >\r
 183                                                                         <img src="../system_pictures/_w5.gif" alt="ペンギン曰く">\r
 184                                                                         <div class="test_pettanr-comic-speech">\r
 185                                                                                 <div class="test_pettanr-comic-speech-inner">\r
 186                                                                                         <p>どの環境でもそれなりにセリフを表示する</p>\r
 187                                                                                         <p>これには慎重を要する</p>\r
 188                                                                                 </div>\r
 189                                                                         </div>\r
 190                                                                 </div>\r
 191                                                                 <div class="test_pettanr-comic-balloon"\r
 192                                                                         style="width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;"\r
 193                                                                 >\r
 194                                                                         <img src="../system_pictures/_w19.gif" alt="ペンギン一息ついて">\r
 195                                                                         <div class="test_pettanr-comic-speech">\r
 196                                                                                 <div class="test_pettanr-comic-speech-inner">\r
 197                                                                                         <p>そやそや</p>\r
 198                                                                                 </div>\r
 199                                                                         </div>\r
 200                                                                 </div>\r
 201                                                         </div>\r
 202                                                 </div>\r
 203                                         </div>\r
 204                                         \r
 205                                         <h3>画像や css に対応しない Web ブラウザでの表示</h3>\r
 206                                         <p>マンガコンテンツとして推奨ブラウザや対応ブラウザで意図したとおりに表示できるだけでなく、html 文書として正しく書かれていなくてはいけない．</p>\r
 207                                         <p>テキストブラウザや web クローラ、音声読み上げブラウザでの表示のされ方を勘案し html 構造を設計する．</p>\r
 208                                         <p>同様の着眼で代替テキストを用意する．</p>\r
 209                                         <h4>テキストブラウザでの表示イメージ</h4>\r
 210                                         <pre><samp>\r
 211 \r
 212 ようやく口を開くと\r
 213 「それじゃほとんど意味がないじゃねえか」\r
 214 頭を抱えるキンイチであった\r
 215 深いため息に空気までが暗く重々しい…\r
 216 \r
 217 目の血走ったペンギンが拳を握り締めている\r
 218 ペンギン曰く\r
 219 「どの環境でもそれなりにセリフを表示する」\r
 220 これには慎重を要する\r
 221 ペンギン一息ついて\r
 222 「そやそや」\r
 223                                         </samp></pre>\r
 224                                         \r
 225                                         <h3>ブラウザ検証</h3>\r
 226                                         <h4>対応ブラウザ</h4>\r
 227                                         <p>NN6.2+, firefox3.6, ie5+, Safari3.2, Iron5, opera7.11 & 9.64+, Konqueror4.8(windows)</p>\r
 228                                         <h4>準対応ブラウザ</h4>\r
 229                                         <p>Opera6.06( <code>overflow:hidden</code> が孫要素に対して利かず（？）要素がパネルをはみ出す z-index が overflow:hidden なパネルを超えて効いてしまう)</p>\r
 230                                         <p>Opera8.02 パネルの枠線が一部欠けてしまう．alt タグの内容が画面に表示される．opera7.11 ではこの不具合は起こらない．</p>\r
 231                                         <h4>非対応ブラウザ</h4>\r
 232                                         <p>NN6(テキスト表示位置がずれる．z-index 指定が画面にゴミを出してしまう), Opera5(　日本語に非対応で文字化けする )</p>\r
 233                                         \r
 234                                         <h3>ソースコード</h3>\r
 235                                         <h4>html 部分</h4>\r
 236                                         <p>パネルピクチャはひとつの &lt;img&gt; タグで表示されます．</p>\r
 237                                         <p>バルーンは、位置とサイズを決めるための &lt;div&gt; の中に吹きだし画像のための &lt;img&gt; と テキストを上下中央配置するための &lt;p&gt; と &lt;span&gt; からなる．</p>\r
 238                                         <pre class="brush: xml;">\r
 239 &lt;div class=&quot;test_pettanr-comic-wrapper&quot; style=&quot;width: 400px;&quot;&gt;\r
 240         &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 2px;height: 300px;&quot;&gt;\r
 241                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 242                         style=&quot;width: 200px; height: 200px; left: -4px; top: -10px; z-index: 3;&quot;\r
 243                 &gt;\r
 244                         &lt;img src=&quot;../system_pictures/_w7.gif&quot; alt=&quot;ようやく口を開くと&quot;&gt;\r
 245                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 246                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;\r
 247                                         style=&quot;font-size: 1em; text-align: left; color: rgb(0, 0, 0);&quot;\r
 248                                 &gt;\r
 249                                         &lt;p&gt;それじゃほとんど意味がないじゃねえか&lt;/p&gt;\r
 250                                 &lt;/div&gt;\r
 251                         &lt;/div&gt;\r
 252                 &lt;/div&gt;\r
 253                 &lt;img src=&quot;2.gif&quot;\r
 254                         alt=&quot;頭を抱えるキンイチであった&quot;\r
 255                         title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
 256                         longdesc=&quot;http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi&quot;\r
 257                         width=&quot;247&quot; height=&quot;273&quot; style=&quot;top: 101px; left: 86px; z-index: 2;&quot;&gt;\r
 258                 &lt;div class=&quot;test_pettanr-comic-ground&quot; style=&quot;z-index: 1; background-color: #003;&quot;&gt;深いため息に空気までが暗く重々しい…&lt;/div&gt;\r
 259         &lt;/div&gt;\r
 260         &lt;div class=&quot;test_pettanr-comic-panel&quot; style=&quot;border-width: 2px; height: 235px;&quot;&gt;\r
 261                 &lt;img src=&quot;../resource_pictures/1.png&quot;\r
 262                         alt=&quot;目の血走ったペンギンが拳を握り締めている&quot;\r
 263                         title=&quot;キャラクター名:キンイチ, 絵師:yas&quot;\r
 264                         longdesc=&quot;http://sourceforge.jp/projects/pettanr/wiki/AboutKinichi&quot;\r
 265                         width=&quot;166&quot; height=&quot;272&quot; style=&quot;left: 148px; top: -2px; z-index: 0;&quot;\r
 266                 &gt;\r
 267                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 268                         style=&quot;width: 200px; height: 160px; left: -29px; top: 39px; z-index: 1;&quot;\r
 269                 &gt;\r
 270                         &lt;img src=&quot;../system_pictures/_w5.gif&quot; alt=&quot;ペンギン曰く&quot;&gt;\r
 271                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 272                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;&gt;\r
 273                                         &lt;p&gt;どの環境でもそれなりにセリフを表示する&lt;/p&gt;\r
 274                                         &lt;p&gt;これには慎重を要する&lt;/p&gt;\r
 275                                 &lt;/div&gt;\r
 276                         &lt;/div&gt;\r
 277                 &lt;/div&gt;\r
 278                 &lt;div class=&quot;test_pettanr-comic-balloon&quot;\r
 279                         style=&quot;width: 100px; height: 80px; left: 300px; top: 80px; z-index: 2;&quot;\r
 280                 &gt;\r
 281                         &lt;img src=&quot;../system_pictures/_w19.gif&quot; alt=&quot;ペンギン一息ついて&quot;&gt;\r
 282                         &lt;div class=&quot;test_pettanr-comic-speech&quot;&gt;\r
 283                                 &lt;div class=&quot;test_pettanr-comic-speech-inner&quot;&gt;\r
 284                                         &lt;p&gt;そやそや&lt;/p&gt;\r
 285                                 &lt;/div&gt;\r
 286                         &lt;/div&gt;\r
 287                 &lt;/div&gt;\r
 288         &lt;/div&gt;\r
 289 &lt;/div&gt;\r
 290                                         </pre>\r
 291                                         <h4>css 部分</h4>\r
 292                                         <h5>上下中央配置(モダンブラウザ)</h5>\r
 293                                         <p>css2 の <code>display: table, display: table-cell</code> を使って吹き出し内のテキストの上下中央配置を行う．</p>\r
 294                                         <h5>上下中央配置(old IE)</h5>\r
 295                                         <p><code>display: table</code> をサポートしない ie7 以下は、入れ子になった要素を上下に 50% ずらす、という手法で上下中央配置している．その様子を、show border ボタンを使って確認されたし．（ 参考 <a href="http://scuderia-web.com/tips/xhtml_css/div_vertical_align.php" target="_blank">tableを使わずdivで縦位置を指定</a> ）</p>\r
 296                                         <h5>レイアウト計算負荷を提げる</h5>\r
 297                                         <p>.test_pettanr-comic-ground でテキストをコマの外に飛ばしているのは、<code>padding-left : 100%; になる．</code></p><p><code>width : 0; *width : 100%; overflow : hidden </code>はどちらも無くても表示に変わりが無いが、それぞれレイアウト計算負荷が下がりそうなので指定してある．</p>\r
 298                                         <pre class="brush: css;">\r
 299 .test_pettanr-comic-wrapper {\r
 300         margin : 1em auto;\r
 301 }\r
 302         .test_pettanr-comic-panel {\r
 303                 border-style : solid;\r
 304                 border-color : #111;\r
 305                 position     : relative;\r
 306                 margin       : 1em 0;\r
 307                 overflow     : hidden;\r
 308         }\r
 309                 .test_pettanr-comic-panel img,\r
 310                 .test_pettanr-comic-balloon {\r
 311                         position : absolute;\r
 312                 }\r
 313                         .test_pettanr-comic-balloon img {\r
 314                                 width        : 100%;\r
 315                                 height       : 100%;\r
 316                         }\r
 317                         .test_pettanr-comic-speech {\r
 318                                 margin       : 0 !important;\r
 319                                 padding      : 0 !important;\r
 320                                 display      : table;\r
 321                                 table-layout : fixed;\r
 322                                 position     : absolute;\r
 323                                 top          : 0;\r
 324                                 left         : 16.6%;\r
 325                                 width        : 66.6%;\r
 326                                 height       : 100%;\r
 327                                 *height      : auto;\r
 328                                 *top         : 50% !important;\r
 329                         }\r
 330                                 .test_pettanr-comic-speech-inner {\r
 331                                         vertical-align : middle;\r
 332                                         display        : table-cell;\r
 333                                         *display       : block;\r
 334                                         zoom           : 1;\r
 335                                         *position      : relative;\r
 336                                         *top           : -50%;\r
 337                                 }\r
 338                                         .test_pettanr-comic-speech p {\r
 339                                                 padding : 0.5em 0 !important;\r
 340                                                 margin  : 0 !important;\r
 341                                         }\r
 342                                                 .test_pettanr-comic-speech strong {\r
 343                                                         font-weight    : bold;\r
 344                                                 }\r
 345                                                 .test_pettanr-comic-speech em,\r
 346                                                 .test_pettanr-comic-speech i {\r
 347                                                         font-style     : italic;\r
 348                                                 }\r
 349                                                 .test_pettanr-comic-speech samp,\r
 350                                                 .test_pettanr-comic-speech code {\r
 351                                                         font-family    : monospace;\r
 352                                                 }\r
 353                 .test_pettanr-comic-ground {\r
 354                         position            : absolute;\r
 355                         top                 : 0;\r
 356                         left                : 0;\r
 357                         width               : 0;\r
 358                         *width              : 100%; /* for ie5.5- */\r
 359                         height              : 100%;\r
 360                         overflow            : hidden;\r
 361                         padding-left        : 100%;\r
 362                         background-repeat   : repeat;\r
 363                         background-position : 0 0;\r
 364                 }\r
 365                                         </pre>\r
 366                                         <h3>履歴</h3>\r
 367                                         <dl class="dl-table-small">\r
 368                                                 <dt>version 0.3</dt>\r
 369                                                 <dd>2013.09.23 公開．<br>\r
 370                                                         脚本情報を html タグとして書き出し、通常の閲覧に際しては非表示、テキストブラウザ等に対しては表示となるように html と css を拡張．参考 <a href="http://sourceforge.jp/forum/message.php?msg_id=70069">RE: 脚本機能について</a><br>\r
 371                                                         あるパネルで指定されたパネル要素の z-index が、他のパネルに影響しないか？調査の追加．参考 <a href="http://sourceforge.jp/forum/message.php?msg_id=70116">RE: パネルのZインデックスが適切でない</a>\r
 372                                                 </dd>\r
 373                                                 <dt>version 0.2</dt>\r
 374                                                 <dd>2013.08.10 公開．<br>\r
 375                                                         吹き出し内での &lt;p&gt; タグによる段落分け(改行)に対応．<br>\r
 376                                                         デフォルトでテキストの中央配置をやめる．<br>\r
 377                                                         外す．<del>font-size : 14px; /* opera6 で使用 13px は不可 */</del><br>\r
 378                                                         レンダリング負荷を下げる為の css 指定を追加 ( テキストの上下中央配置のための display:table に対して tabel-layout:fixed を追加 )．<br>\r
 379                                                         &lt;img&gt; タグに longdesc を追加．title 属性で説明しきれなかった画像に関する情報が書いてある url を指示する手段としてとして適切ではないか、と考える．\r
 380                                                 </dd>\r
 381                                                 <dt>version 0.1</dt>\r
 382                                                 <dd>2012.05.04 公開．</dd>\r
 383                                         </dl>\r
 384                                         <h3>懸案</h3>\r
 385                                         <p>スピーチの上下中央配置に使っている display:table を使ったテクニックに Firefox 3.5 で起きる不具合が報告されている．<a href="http://ie-style.blogspot.jp/2009/08/firefox-35-display-tabletable-row-table.html">Project IE: Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について:</a></p>\r
 386                                 </div>\r
 387                                 <!-- InstanceEndEditable -->\r
 388             </div>\r
 389         </div>\r
 390     </div>\r
 391     \r
 392     <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->\r
 393 \r
 394         <div id="footer">\r
 395             <div id="footer-item-container" class="base-content-width clearfix">\r
 396                 <div class="footer-item-wrapper">\r
 397                     <div class="footer-item">\r
 398                         <h2>ぺったんR にようこそ</h2>\r
 399                         <ul>\r
 400                             <li>サンプル</li>\r
 401                             <li>ぺったんRの特徴</li>\r
 402                             <li>沿革</li>\r
 403                         </ul>\r
 404                         <h2>Test</h2>\r
 405                         <ul>\r
 406                             <li><a href="index.html">Test Index</a></li>\r
 407                         </ul>\r
 408                     </div>\r
 409                 </div>\r
 410                 <div class="footer-item-wrapper">\r
 411                     <div class="footer-item">\r
 412                         <h2>ドキュメント</h2>\r
 413                         <ul>\r
 414                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>\r
 415                             <li>絵師向けドキュメント</li>                                                     \r
 416                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>\r
 417                             <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>\r
 418                         </ul>\r
 419                     </div>\r
 420                 </div>\r
 421                 <div class="footer-item-wrapper">\r
 422                     <div class="footer-item">\r
 423                         <h2>プロトタイプ</h2>\r
 424                         <ul>\r
 425                             <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>\r
 426                             <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>\r
 427                         </ul>\r
 428                         <h2>Ajax contents</h2>\r
 429                         <ul>\r
 430                             <li><a href="../help/jp.xml">help | jp</a></li>\r
 431                         </ul>\r
 432                     </div>\r
 433                 </div>\r
 434                 <div class="footer-item-wrapper" style="width:170px;">\r
 435                     <div class="footer-item" style="padding-right:0;">\r
 436                         <h2>ぺったんRチーム</h2>\r
 437                         <ul>\r
 438                             <li>わたしたちについて</li>\r
 439                             <li>ミッション</li>\r
 440                             <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>\r
 441                             <li>個人情報保護方針</li>\r
 442                             <li>作品の取り扱い</li>\r
 443                             <li>お問い合わせ</li>\r
 444                         </ul>\r
 445                     </div>\r
 446                 </div>\r
 447             </div>\r
 448             <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>\r
 449         </div><!-- #EndLibraryItem -->\r
 450         </div>\r
 451         <script type="text/javascript">\r
 452                 var has_server_support = false;\r
 453         </script>\r
 454         <script type="text/javascript" src="../javascripts/common.js"></script>\r
 455 <!-- InstanceBeginEditable name="script" -->\r
 456         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js"></script>\r
 457         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js"></script>\r
 458         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js"></script>\r
 459         <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js"></script>\r
 460         <link type="text/css" rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCoreDefault.css">\r
 461         <script type="text/javascript">\r
 462                 SyntaxHighlighter.all();\r
 463                 \r
 464                 var btn = document.getElementById( 'swbutton' );\r
 465                 var elm = document.getElementById( 'html2comic' );\r
 466                 var cls = 'show-border';\r
 467                 var val = btn.firstChild.data\r
 468                 \r
 469                 function switchBorder(){\r
 470                         var current = elm.className;\r
 471                         elm.className = cls === current ? '' : cls;\r
 472                         btn.firstChild.data = cls === current ? val: 'hide border';\r
 473                 }\r
 474         </script>\r
 475 <!-- InstanceEndEditable -->\r
 476 </body>\r
 477 <!-- InstanceEnd --></html>\r