• ログインログイン
  • 新規登録新規登録

MENU

Google App Engineで遊んでみよう! 第9回

連載Google App Engineで遊んでみよう!

GoogleAppEngineを使った開発レシピです。AWSやさくらインターネットのVPSやレンタルサーバなどの他の有名なクラウド環境と比べると少しクセがあるものの、慣れると非常に楽に開発やローンチができます。一定の範囲内まで無料で活用できるようになっているので、これを機会にぜひ活用してみましょう。

前回までのプログラミング学習コラムに続き9回目の勉強内容です。

こんにちは、ぴかしです。前回は、Kay Frameworkのモデルを利用し、Twitterクライアントに機能を追加しました。今回はテンプレートの継承について解説し、クライアントのデザインを変更してみます!開発環境はMac OS 10.8、GAE SDK 1.8.3、Kay Framework2.0です。

 テンプレートの継承

Kay Frameworkでは、Jinja2 というテンプレートエンジンが利用されています。ここでは、Jinja2におけるテンプレートの継承を見ていきます。

Webアプリケーションを作成する際、レイアウトはどのページにも共通していると思います。そこで、それらのページのベースとなるレイアウトを作っておき、各ページでそれを利用しよう!というのがテンプレートの継承です。これを利用することで、同じ要素を何回も書かずにすみ、各ページのコンテンツなどの部分だけをオーバーライドすればよいことになります。

では、ベースとなるテンプレートtemplates/base.htmlを作成しましょう。ページごとに変更したい部分は、{% block hoge %}{% endblock %}と記述します。例えば、タイトルはページによって変更したいので、base.htmlに以下のように記述しておきます。

<title> {% block title %}{% endblock %}</title>

base.htmlを継承するには、まず1行目に以下を記入します。

{% extends "client/base.html" %}

そして、以下のようにblockの内部に記述することで、タイトルをオーバーライドすることができます。とても簡単です。

{% block title %}Title!!{% endblock %}

外部ファイルとしてJSやCSSを読み込む場合は、ファイルを置く場所に注意が必要です。例えばstyle.cssを読み込む場合、以下の階層に置いて下さい。

twitter-client
├── kay
│ └── media
│ └── style.css
└── client

そして、以下のようにテンプレートから読み込むことができます。

<link rel="stylesheet" href="{{ internal_media_url }}/style.css" type="text/css">

テンプレートの継承を利用するとすっきりと書くことができるので、ぜひ利用して下さい!

私はこのようにTwitterに近いデザインにしてみました。ちなみにCSSはほとんど自分で書いおらず、Twitter BootstrapというCSSフレームワークを利用しています。

次回はこのような、Webデザインを簡単にするためのツール紹介しようと思います。最後まで読んでいただき、ありがとうございました。次回はいよいよ最終回ですので、ご期待ください。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top