Showing Documents in Custom Formats

任意の書式によるドキュメントの表示

CouchDB’s show functions are a RESTful API inspired by a similar feature in Lotus Notes. In a nutshell, they allow you to serve documents to clients, in any format you choose.

CouchDBのshow関数はRESTfulなAPIであり、Lotus Notesの影響を受けています。つまり、ドキュメントを好きな体裁でクライアントに表示させることができるのです。

A show function builds an HTTP response with any Content-Type, based on a stored JSON document. For Sofa, we’ll use them to show the blog post permalink pages. This will ensure that these pages are indexable by search engines, as well as make the pages more accessible. Sofa’s show function displays each blog post as an HTML page, with links to stylesheets and other assets, which are stored as attachments to Sofa’s design document.

show関数はJSON形式のドキュメントを基にして、どんなContent-TypeであってもHTTPのリクエスト結果として返すことができます。Sofaの場合は、この特徴をパーマネントリンクを備えたブログ記事を表示させるときに使用しています。こうすれば、ブログの記事は検索エンジンの対象に含まれ、アクセス数の向上が期待できます。

Hey, this is great—we’ve rendered a blog post! See Figure 1, “A rendered post”.

これはとても素晴らしいことです。CouchDB単体でブログの記事をレンダリングできるのです！！

Figure 1. A rendered post

The complete show function and template will render a static, cacheable resource that does not depend on details about the current user or anything else aside from the requested document and Content-Type. Generating HTML from a show function will not cause any side effects in the database, which has positive implications for building simple scalable applications.

show関数をうまく使えば、静的でキャッシュが効くリソースをレンダリングしてくれます。ユーザーや要求されたドキュメント、Content-Type によってshow関数の挙動が変わることはありません。show関数を利用してHTMLを生成すると、スケーラブルなアプリケーションができるメリットこそあれ、データベースに影響を及ぼすようなリスクはありません。

Rendering Documents with Show Functions

show関数でドキュメントをレンダリングする

Let’s look at the source code. The first thing we’ll see is the JavaScript function body, which is very simple—it simply runs a template function to generate the HTML page. Let’s break it down:

function(doc, req) {
  // !json templates.post
  // !json blog
  // !code vendor/couchapp/template.js
  // !code vendor/couchapp/path.js

We’re familiar with the !code and !json macros from Chapter 12, Storing Documents. In this case, we’re using them to import a template and some metadata about the blog (as JSON data), as well as to include link and template rendering functions as inline code.

!codeと!jsonのマクロについてはデザインドキュメントを管理する章ですでに紹介しました。ブログ(JSONのデータとして)に関するテンプレートやメタデータを読み込んで、コード上に展開しています。

Next, we render the template:

次はテンプレートをレンダリングしています。

  return template(templates.post, {
    title : doc.title,
    blogName : blog.title,
    post : doc.html,
    date : doc.created_at,
    author : doc.author,

The blog post title, HTML body, author, and date are taken from the document, with the blog’s title included from its JSON value. The next three calls all use the path.js library to generate links based on the request path. This ensures that links within the application are correct.

ブログの記事に付けられたタイトル、内容、著者と日付がドキュメントから抜き出されます。次の三行では関数が書かれていますが、これらはパスの要求に基づいたリンクを生成するpath.jsというライブラリから呼び出しています。アプリケーションが正しく稼動していることはこのリンクを確認することでわかります。

    assets : assetPath(),
    editPostPath : showPath('edit', doc._id),
    index : listPath('index','recent-posts',{descending:true, limit:5})
  });
}

So we’ve seen that the function body itself just calculates some values (based on the document, the request, and some deployment specifics, like the name of the database) to send to the template for rendering. The real action is in the HTML template. Let’s take a look.

上記の関数は単に多少計算した後に値(ドキュメントや要求、データベースの名前といったデプロイ時のルールに従ってできた値)をレンダリングのためにテンプレートへ渡しているに過ぎないことがわかったと思います。実際に表示する内容を決定する部分はHTMLのテンプレートにあります。次を見てみましょう。

The Post Page Template

投稿ページのテンプレート

The template defines the output HTML, with the exception of a few tags that are replaced with dynamic content. In Sofa’s case, the dynamic tags look like <%= replace_me %>, which is a common templating tag delimiter.

テンプレートでは出力結果となるHTMLファイルを定義しています。その中で、動的に内容が変わるものについてはタグを埋め込んでおいて後で変更するようにしているのです。Sofaではタグを<%= replace_me %>のように表現します。タグで囲む点は他のいくつかの記法と似ていると思います。

The template engine used by Sofa is adapted from John Resig’s blog post, “JavaScript Micro-Templating”. It was chosen as the simplest one that worked in the server-side context without modification. Using a different template engine would be a simple exercise.

テンプレートエンジンにはJohn Resigさんのブログにあった `JavaScript Micro-Templateing `_ という方法を採用しています。サーバー側に設定を変更する必要もなく、シンプルな方法だったので採用しました。違ったテンプレートエンジンを自分で使ってみるのも練習になっていいと思います。

Let’s look at the template string. Remember that it is included in the JavaScript using the CouchApp !json macro, so that CouchApp can handle escaping it and including it to be used by the templating engine.

テンプレートの文字列を見てみましょう。テンプレートはCouchAppの!jsonマクロとしてJavaScriptで書かれています。CouchAppを操作する時点でテンプレートの取り込みをどうするかを決めることができます。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %> : <%= blogName %></title>

This is the first time we’ve seen a template tag in action—the blog post title, as well as the name of the blog as defined in blog.json are both used to craft the HTML <title> tag.

最初に見るテンプレートのタグは投稿内容のタイトルになるでしょう。blog.jsonの中で定義されており、HTMLにレンダリングするときもそのまま