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
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>Comic 用 html構造テスト | pettanR</title>
\r
13 <!-- InstanceEndEditable -->
\r
14 <!-- InstanceBeginEditable name="head" -->
\r
15 <!-- InstanceEndEditable -->
\r
19 <div id="general-content">
\r
20 <div id="outer-wrapper">
\r
23 <div class="base-content-width" style="position:relative;">
\r
24 <h1><a href="../index.html">pettanR</a></h1>
\r
25 <!-- global navi -->
\r
26 <div id="global-navi">
\r
27 <noscript id="noscript-alert">You need to have JavaScript enabled.</noscript>
\r
32 <div id="inner-wrapper" class="base-content-width">
\r
33 <!-- InstanceBeginEditable name="main_content" -->
\r
35 <h2>コミック用 html 構造のテスト</h2>
\r
36 <p>html 4.01 + css 2.1 で pettanR コミックを表示するための html 構造のテストページです.</p>
\r
37 <p>html は js で動的に描画されるため、js の関連部分のテストも兼ねます.</p>
\r
38 <p>js による 動的な html の書き出しは、ブログ等への外部サイト表示 script と ログイン後のユーザーのコミック・パネル閲覧に使われます.</p>
\r
41 <p>以下のテキストエリアに パネルの json データを入力することで、動的書き出しのテストを行えます.</p>
\r
42 <form name="htmlTest" class="block-element-item">
\r
43 <textarea name="jsonString" style="width:100%" rows="20" cols="100">
\r
47 "resource_picture_id": 1,
\r
56 "resource_picture": {"id":1,"ext":'png'},
\r
64 "balloon_template_id": 1,
\r
65 "system_picture_id": 1,
\r
73 "speaches_attributes": {
\r
86 <input type="button" value="print" name="bindButton" class="button">
\r
88 <p id="invalidJsonAlert" style="color:red;display:none;font-weight:bold;">json is invalid !</p>
\r
89 <div id="outputHere"></div>
\r
92 <p>pettanr.bind は pettanR コミック用の html エレメントを制作するときに使用する.外部サイト張り出し用 script や ユーザーコンソールの コミックビューワーから使われる.</p>
\r
93 <p>pettanr.bind.createBindWorker で BindWorker インスタンスを作って使用する.bind の意味は 製本 .jQuery.bind とは関係ないので注意.</p>
\r
95 var jsonArea = document.htmlTest.jsonString,
\r
96 button = document.htmlTest.bindButton,
\r
97 bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),
\r
98 elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,
\r
100 button.onclick = function(){
\r
102 eval( 'json = ' + jsonArea.value);
\r
103 elmAlertStyle.display = 'none';
\r
105 elmAlertStyle.display = 'block';
\r
107 json !== null && bindWorker.json( json);
\r
111 <h3>js による動的な書き出しの利点</h3>
\r
112 <p>js による動的な書き出しには以下にあげる利点がある.最後のもの以外はサーバへの画像リクエストを抑えるものになります.</p>
\r
114 <li>吹き出しをベジェ曲線で書き出すことで美しい描画ができ、吹き出し画像へのリクエストを抑止できる</li>
\r
115 <li>反転画像をブラウザ側で用意することで、flipH, flipV, flipVH といった反転画像へのリクエストを抑止できる.</li>
\r
116 <li>ブラウザの表示エリアに入らない画像について、表示エリアに入るまでリクエストを行わないようにできる</li>
\r
117 <li>コマのズーム機能が利用できる.ただしリサイズを禁止された画像を含むコマに対してはできない.</li>
\r
120 <!-- InstanceEndEditable -->
\r
125 <div id="footer-content"><!-- #BeginLibraryItem "/Library/footer.lbi" -->
\r
128 <div id="footer-item-container" class="base-content-width clearfix">
\r
129 <div class="footer-item-wrapper">
\r
130 <div class="footer-item">
\r
131 <h2>ぺったんR にようこそ</h2>
\r
139 <li><a href="index.html">Test Index</a></li>
\r
143 <div class="footer-item-wrapper">
\r
144 <div class="footer-item">
\r
147 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForAuthors" rel="me" target="_blank">作家向けドキュメント</a></li>
\r
148 <li>絵師向けドキュメント</li>
\r
149 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForDevelopers" rel="me" target="_blank">開発者向けドキュメント</a></li>
\r
150 <li><a href="http://sourceforge.jp/projects/pettanr/wiki/ForWebmasters" rel="me" target="_blank">編集長向けドキュメント</a></li>
\r
154 <div class="footer-item-wrapper">
\r
155 <div class="footer-item">
\r
158 <li><a href="http://pettanr.heroku.com/" rel="me" target="_blank">pettanr.heroku.com</a></li>
\r
159 <li><a href="../work.html" rel="console">ユーザーコンソール</a></li>
\r
161 <h2>Ajax contents</h2>
\r
163 <li><a href="../help/jp.xml">help | jp</a></li>
\r
167 <div class="footer-item-wrapper" style="width:170px;">
\r
168 <div class="footer-item" style="padding-right:0;">
\r
173 <li><a href="../diary/itozyun.xml">itozyun's diary</a></li>
\r
181 <div id="copyright">Copyright (c) 2011-2012 pettanR team, some rights reserved.</div>
\r
182 </div><!-- #EndLibraryItem -->
\r
184 <script type="text/javascript" src="../javascripts/common.js"></script>
\r
185 <!-- InstanceBeginEditable name="script" -->
\r
186 <script type="text/javascript">
\r
187 var jsonArea = document.htmlTest.jsonString,
\r
188 button = document.htmlTest.bindButton,
\r
189 bindWorker = pettanr.bind.createBindWorker( document.getElementById( 'outputHere')),
\r
190 elmAlertStyle = document.getElementById( 'invalidJsonAlert').style,
\r
192 button.onclick = function(){
\r
194 eval( 'json = ' + jsonArea.value);
\r
195 elmAlertStyle.display = 'none';
\r
197 elmAlertStyle.display = 'block';
\r
199 json !== null && bindWorker.json( json);
\r
203 <!-- InstanceEndEditable -->
\r
205 <!-- InstanceEnd --></html>
\r