そのため、Google App Engine を使用してホストしているアプリケーションに基本的なフォームがあります。「CN」などの特定のクエリを入力すると、CN.html ファイルがレンダリングされます。パスなどをリダイレクトし、if-else を使用して、'CN' がクエリされたときに CN.html ファイルをレンダリングできるようにしました。ただし、CN.html 内のすべてのインライン CSS コマンドは考慮されず、「CN」を照会したときにリダイレクトされるのは、すべての CSS コマンドを含まない基本的な HTML ドキュメントだけです。また、画像は表示されません。
ここで、CN.html ファイルをディレクトリの「templates」というフォルダーに入れ、すべての画像を「images」というフォルダーに入れました。
注-「テンプレート」と「画像」には、それぞれフロント ページの html ファイルとその画像も含まれています。問題にはならないと思いますが、え？
ここで、私の問題の実例を自分で確認してください。
www.deploymentapp.appspot.com にアクセスして、「コンピュータ ネットワーク」を検索してください。
では、何が問題だと思われますか?
EDIT（理解を深めるためにすべてのソースコードファイルを含む）
CN.html
<html>
<head>
<title>Computer Network</title>
<link rel = "stylesheet" href = "/stylesheets/cn.css" type = "text/css">
</head>
<body>
<div id='cn'>
<img src = "/images/CN.jpg" width = '300px' height = '400px'>
</div>
<div id = 'cn_heading'>
<h1>                                     Computer Networks</h1>
<p class = 'pname'>by Andrew Tanenbaum</p>
</div>
<div id = 'buy'>
<a href = '#'><img src = '/images/buy-now.jpg' width = '300px' height = '100px'></a>
<div id = 'details'>
<p>Authored by : Andrew S. Tanenbaum, David J. Wetherall</p>
<p>Publisher : Pearson </p>
<p>Price : Rs. 550 (Inclusive of taxes)</p>
</div>
<div id = 'description'>
<p><h3>                                      COMPUTER NETWORKS 5TH EDITION</h3>
Computer Networks, Fifth Edition, is the ideal introduction to the networking field. This bestseller reflects the latest networking technologies with a special emphasis on wireless networking, including 802.11, 802.16, Bluetooth&trade, and 3G cellular, paired with fixed-network coverage of ADSL, Internet over cable, gigabit Ethernet, MLPS, and peer-to-peer networks. Notably, this latest edition incorporates new coverage on 3G mobile phone networks, Fiber to the Home, RIFD, delay-tolerant networks, and 802.11 security, in addition to expanded material on Internet routing, multicasting, congestion control, quality of service, real-time transport, and content distribution.
Tanenbaum takes a structured approach to explaining how networks work from the inside out. He starts with an explanation of the physical layer of networking, computer hardware and transmission systems then works his way up to network applications.
Salient Features
<ul>
<li>Wireless networks (802.12 and 802.16)</li>
<li>The 3G networks used by smart phones</li>
<li>RFID and sensor networks</li>
<li>Content Distribution using CDNs</li>
<li>Peer-to-peer networks</li>
<li>Real-time media (from stored, streaming, and live sources)</li>
<li>Internet telephony (voice over IP)</li>
<li>Delay-tolerant networks</li>
</ul>
</p>
</div>
</body>
</html>
CN.css
#cn
{
margin-top : 50px;
margin-left : 50px;
box-shadow : 5px 5px 5px black;
width : 300px;
}
#cn_heading
{
margin-top : -448px;
margin-left : 425px;
}
.pname
{ font-style : italic;
}
#buy
{
margin-top : 370px;
margin-left : 50px;
}
#details
{
margin-left : 425px;
margin-top : -450px;
}
#description
{
margin-left : 425px;
margin-top : 20px;
}
.yaml ファイル
application: deploymentapp
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /images
static_dir: images
- url: /stylesheets/
static_dir: stylesheets
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
これは、'Computer Networks' が照会されたときに何が起こるかを処理するハンドラーです。
class CNHandler(webapp2.RequestHandler):
def write(self, *a, **kw):
self.response.out.write(*a, **kw)
def render_str(self, template, **params):
t = jinja_env.get_template(template)
return t.render(params)
def render(self, template, **kw):
self.write(self.render_str(template, **kw))
def get(self):
self.render("CN.html")