アプリをアプリ エンジンにデプロイすると、ギャラリーは機能します ( http://mark-smith-app.appspot.com/projects/ ) が、オフラインでは機能しません。
次のコマンドでギャラリーを動作させたい:
C:\Python27\python.exe "C:/Program Files/Google/google_appengine/dev_appserver.py" .
クロムを開いて 127.0.0.1/projects/ に移動すると、ギャラリーが表示されますが、最初の画像のみが表示され、ギャラリーの残りの画像は「黒」です。
http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/からギャラリーをダウンロードしました
ダウンロードしたギャラリーには、chrome で開いたときに機能するindex4.htmlの例が付属しています。
index4.html からすべてを Google アプリ エンジンの projects.html にコピーし、css、js、および画像用の静的ディレクトリを作成しました。
ここに app.yaml があります:
application: mark-smith-app
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /stylesheets
static_dir: stylesheets
- url: /images
static_dir: images
- url: /.*
script: main.app
libraries:
- name: jinja2
version: latest
また、127.0.0.1/projects に移動し、「ソースを表示」して html1.txt にコピーしました。
また、「ソースの表示」を index4.html から html2.txt にコピーしました。
次の python 差分スクリプトから次の結果を得ました。
f1 = open('html1.txt')
f2 = open('html2.txt')
from difflib import ndiff,IS_CHARACTER_JUNK
delta = ndiff([i.strip()+"\n" for i in f1],[i.strip()+"\n" for i in f2])
for line in delta:
print line,
出力:
*** Python 2.7.2 (default, Jun 12 2011, 15:08:59) [MSC v.1500 32 bit (Intel)] on win32. ***
>>>
<!DOCTYPE html>
<html>
<head>
<title>Awkward Showcase - Demo #4</title>
- <link rel="stylesheet" href="/stylesheets/style.css" />
? ^ ---------
+ <link rel="stylesheet" href="css/style.css" />
? ^
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
- <script type="text/javascript" src="/stylesheets/jquery.aw-showcase.js"></script>
? -------------
+ <script type="text/javascript" src="jquery.aw-showcase.js"></script>
<script type="text/javascript">
$(window).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 700,
fit_to_parent: false,
auto: true,
interval: 3000,
continuous: false,
loading: true,
tooltip_width: 200,
tooltip_icon_width: 32,
tooltip_icon_height: 32,
tooltip_offsetx: 18,
tooltip_offsety: 0,
arrows: true,
buttons: true,
btn_numbers: false,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: true,
transition: 'fade', /* hslide/vslide/fade */
transition_speed: 500,
transition_delay: 300,
show_caption: 'onhover', /* onload/onhover/show */
thumbnails: true,
thumbnails_position: 'outside-last', /* outside-last/outside-first/inside-last/inside-first */
thumbnails_direction: 'horizontal', /* vertical/horizontal */
thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
dynamic_height: true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
speed_change: false, /* Set to true to prevent users from swithing more then one slide at once. */
viewline: false /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
});
});
</script>
</head>
<body>
<div class="menu"><a href="index.html">Demo #1</a> (Normal) | <a href="index2.html">Demo #2</a> (Vertical thumnbails) | <a href="index3.html">Demo #3</a> (Horizontal thumbnails) | <a href="index4.html" class="active">Demo #4</a> (Dynamic height) | <a href="index5.html">Demo #5</a> (Hundred percent) | <a href="index6.html">Demo #6</a> (Viewline)</div>
<div id="error"></div>
<div style="width: 700px; margin: auto;">
<!-- This is the button used to switch between One Page and Slideshow. -->
<p><a id="awOnePageButton" href="#"><span class="view-page">View As One Page</span><span class="view-slide">View As Slideshow</span></a></p>
<div id="showcase" class="showcase">
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
<!-- For dynamic height to work in webkit you need to set the width and height of images in the source.
Usually works to only set the dimension of the first slide in the showcase. -->
- <img src="/images/05.jpg" alt="05" width="700px" height="600px" />
? -
+ <img src="images/05.jpg" alt="05" width="700px" height="600px" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/05.jpg" alt="05" width="140px" />
? -
+ <img src="images/05.jpg" alt="05" width="140px" />
<!-- The div below with the class .showcase-thumbnail-cover is used for the thumbnails active state. -->
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<!-- Put the slide content in a div with the class .showcase-content. -->
<div class="showcase-content">
- <img src="/images/01.jpg" alt="01" />
? -
+ <img src="images/01.jpg" alt="01" />
</div>
<!-- Put the thumbnail content in a div with the class .showcase-thumbnail -->
<div class="showcase-thumbnail">
- <img src="/images/01.jpg" alt="01" width="140px" />
? -
+ <img src="images/01.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the caption content in a div with the class .showcase-caption -->
<div class="showcase-caption">
<h2>Be creative. Get Noticed!</h2>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/04.jpg" alt="04" />
? -
+ <img src="images/04.jpg" alt="04" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/04.jpg" alt="04" width="140px" />
? -
+ <img src="images/04.jpg" alt="04" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/03.jpg" alt="03" />
? -
+ <img src="images/03.jpg" alt="03" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/03.jpg" alt="01" width="140px" />
? -
+ <img src="images/03.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
</div>
<!-- Each child div in #showcase represents a slide -->
<div class="showcase-slide">
<div class="showcase-content">
- <img src="/images/02.jpg" alt="02" />
? -
+ <img src="images/02.jpg" alt="02" />
</div>
<div class="showcase-thumbnail">
- <img src="/images/02.jpg" alt="01" width="140px" />
? -
+ <img src="images/02.jpg" alt="01" width="140px" />
<div class="showcase-thumbnail-cover"></div>
</div>
<!-- Put the tooltips in a div with the class .showcase-tooltips. -->
<div class="showcase-tooltips">
<!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. -->
<a href="http://www.awkward.se" coords="634,130">
<!-- The content of the anchor-tag is displayed in the tooltip. -->
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="200,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="600,440">
This is a tooltip that displays the anchor html in a nice way.
</a>
<a href="http://www.awkward.se" coords="356, 172">
<!-- You can add multiple elements to the anchor-tag which are display in the tooltip. -->
- <img src="/images/glasses.png" />
? -
+ <img src="images/glasses.png" />
<span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;">
White Glasses: 500$
</span>
</a>
</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 50px;">
<a href="http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin">
Click here to download and learn more about this jQuery plugin.
</a>
</div>
</body>
</html>
>>>
ログは以下のとおりです: アプリを実行し、プロジェクト リンクをクリックして /projects/ ページに移動します。ギャラリーには 05.jpg が正しく表示されます。次に、01 と 04.jpg をクリックしてから 05.jpg に戻るのを見ることができます。 (05.jpgのみ黒塗りしていません)。ただし、サムネイルは機能します。
C:\Python27\python.exe "C:/Program Files/Google/google_appengine/dev_appserver.py" .
WARNING 2012-04-22 23:50:20,888 rdbms_mysqldb.py:74] The rdbms API is not available because the MySQLdb library could not be loaded.
INFO 2012-04-22 23:50:21,914 appengine_rpc.py:160] Server: appengine.google.com
INFO 2012-04-22 23:50:21,921 appcfg.py:581] Checking for updates to the SDK.
INFO 2012-04-22 23:50:23,601 appcfg.py:599] The SDK is up to date.
INFO 2012-04-22 23:50:23,891 dev_appserver_multiprocess.py:650] Running application dev~mark-smith-app on port 8080: http://localhost:8080
INFO 2012-04-22 23:50:23,891 dev_appserver_multiprocess.py:652] Admin console is available at: http://localhost:8080/_ah/admin
WARNING 2012-04-22 23:50:24,252 py_zipimport.py:139] Can't open zipfile C:\Python27\lib\site-packages\pyfacebook-1.0a2-py2.7.egg: IOError: [Errno 13] file not accessible: 'C:\\Python27\\lib\\site-packages\\pyfacebook-1.0a2-py2.7.egg'
INFO 2012-04-22 23:50:25,663 dev_appserver.py:2865] "GET / HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,744 dev_appserver.py:2865] "GET /stylesheets/main.css HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,825 dev_appserver.py:2865] "GET /images/home.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:25,960 dev_appserver.py:2865] "GET /favicon.ico HTTP/1.1" 404 -
INFO 2012-04-22 23:50:32,076 dev_appserver.py:2865] "GET /projects/ HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,164 dev_appserver.py:2865] "GET /stylesheets/style.css HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,257 dev_appserver.py:2865] "GET /stylesheets/jquery.aw-showcase.js HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,414 dev_appserver.py:2865] "GET /images/05.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,499 dev_appserver.py:2865] "GET /images/black-opacity-40.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,572 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,651 dev_appserver.py:2865] "GET /images/white-opacity-80.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,730 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,811 dev_appserver.py:2865] "GET /images/03.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,891 dev_appserver.py:2865] "GET /images/02.jpg HTTP/1.1" 200 -
INFO 2012-04-22 23:50:32,973 dev_appserver.py:2865] "GET /images/glasses.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,045 dev_appserver.py:2865] "GET /images/arrows-small.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,122 dev_appserver.py:2865] "GET /images/arrows.png HTTP/1.1" 200 -
INFO 2012-04-22 23:50:33,220 dev_appserver.py:2865] "GET /favicon.ico HTTP/1.1" 404 -
INFO 2012-04-22 23:50:38,493 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:44,198 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:46,536 dev_appserver.py:2865] "GET /images/03.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:52,927 dev_appserver.py:2865] "GET /images/04.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:54,806 dev_appserver.py:2865] "GET /images/01.jpg HTTP/1.1" 304 -
INFO 2012-04-22 23:50:57,243 dev_appserver.py:2865] "GET /images/05.jpg HTTP/1.1" 304 -