目次


CouchApp を構築する

Apache CouchDB データベースに格納される Web アプリケーションを作成する

Comments

はじめる前に

このチュートリアルの対象読者は、HTML、CSS、および JavaScript だけを使用してデータベース駆動型アプリケーションを作成することに興味を持つ Web アプリケーション開発者です。チュートリアルの内容を理解するには、JavaScript の作成方法と、JavaScript を使用して HTML ページの DOM (Document Object Model) を操作する方法を知っていることが前提条件となります。また、jQuery や Dojo などのライブラリー・ツールの使用経験も必要です。

このチュートリアルについて

Apache CouchDB は、データを JSON オブジェクトとして保管する、オープンソースのドキュメント指向データベース管理システムです。従来のデータベース・システムでは、何らかの形の専用のクライアント・ソフトウェアまたは API から実行される一連の SQL 文を使用すると、データの取得または更新関数を実行できるようになっています。Apache CouchDB はそれとは異なり、RESTful な HTTP API を使ってクエリーまたは更新リクエストを送信します。そのため、最近のほぼすべてのプログラミング言語で、簡単に Apache CouchDB と通信することができます。

Apache CouchDB がベースとするこのアーキテクチャーにより、Apache CouchDB データベース内に常駐する Web アプリケーション全体を構築することが可能となっています。これらのアプリケーションを、私たちは CouchApp と呼んでいます。CouchApp では、HTML、CSS、および JavaScript の他は一切使わずに、完全なデータベース駆動型アプリケーションを作成することができます。このようなアプリケーションの利点は、Apache CouchDB に備わった強力なレプリケーション機能を最大限に利用して、CouchApp を数々の Apache CouchDB インスタンスに複製できることです。したがって、CouchApp を複数の機器に保持しつつ、各機器上のデータを最新の状態に保つ自動増分レプリケーションによって、CouchApp を同期させることができます。

このチュートリアルでは、HTML、CSS、および JavaScript を使用して独自の CouchApp を作成する方法を学びます。このアプリケーションは、jQuery フレームワークで駆動する Ajax を使ってデータベースの操作を行います。サンプル・アプリケーションとして作成するのは、ユーザーが連絡先情報を作成、編集、削除できる連絡先マネージャーです。チュートリアルの最後では、このアプリケーションを 2 つの Apache CouchDB インスタンスの間で複製する方法も説明します。

前提条件

このチュートリアルに従うには、以下のツールが必要です。

  • バージョン 1.0.1 以降の Apache CouchDB データベース・インスタンス
  • バージョン 0.7.0 以降の CouchApp ツール

ダウンロードの情報については「参考文献」を、サンプル・アプリケーションのソース・コードについては「ダウンロード」を参照してください。

Apache CouchDB と CouchApp の紹介

このセクションでは、従来のデータベース・ソリューションに勝る、Apache CouchDB を使用する利点について検討します。

Apache CouchDB と従来のデータベース・ソリューションとの違い

Apache CouchDB は、IBM DB2、Oracle、MySQL などの従来のデータベース・ソリューションとは異なる方法で機能するデータベース・システムです。従来のソリューションでは、データベース、テーブル、そして列からなる構造化フォーマットを使用しますが、Apache CouchDB は構造化フォーマットを使わずに、ドキュメントを保管することによって機能します。ドキュメントとは、フリー・フォームの構造です。フリー・フォームのドキュメントでは、あらゆる組み合わせのフィールドおよびフィールド構造を使用することができ、その組み合わせはデータベース内のドキュメントごとに違っていても構いません。

例えば、従来のリレーショナル・データベースに連絡先の基本情報を保管するとしたら、リスト 1 に記載するステートメントを使用して contact テーブルを定義することになります。

リスト 1. 従来のリレーショナル・データベースに基本的な連絡先情報を保管する場合
CREATE TABLE contact (
  id int(11) NOT NULL AUTO_INCREMENT,
  title char(20) DEFAULT NULL,
  firstname char(20) DEFAULT NULL,
  lastname char(20) DEFAULT NULL,
  PRIMARY KEY (id)
)

上記のコードは、データに厳格な構造を設けます。これは便利であると同時に、制約を課します。例えば、このテーブルにミドルネームを追加する場合のことを考えてみてください。その場合には、新しいデータを格納するための新しいフィールドを追加しなければなりません。また、追加情報が別のテーブルに保管されているとしたらどうでしょうか。例えば、個人の連絡先となる電話番号が別のテーブルに保管されている場合、その電話番号を取得するには、結合 (またはサブクエリー) を使用したクエリーを実行して、基本の contact テーブルを電話番号のテーブルに突き合わせなければなりません。他のデータ・ポイント (住所や e-メール・アカウントなど) や、さらに柔軟性のあるデータ (重要な日付、配偶者、その他の関連事項など) でも、これと同じ作業が必要になります。

Apache CouchDB に情報を保管する場合

Apache CouchDB では、情報はドキュメントに保管されます。ドキュメントはフリー・フォームであり、JSON (JavaScript Object Notation) を使用して作成されるため、従来のフィールドだけでなく、リストやハッシュもすべて 1 つのドキュメントに含めることができます。リスト 2 は、JSON フォーマットでの連絡先情報の例です。

リスト 2. JSON フォーマットの連絡先情報
{
   "firstname" : "Martin",
   "address" : {
      "home" : [
         "Some road",
         "Some town",
         "Postcode",
         "Country"
      ]
   },
   "title" : "Mr",
   "lastname" : "Brown",
   "phones" : {
      "home" : "09874978",
      "mobile" : "0892374908"
   }
}

リスト 2 では、連絡先に関するすべての情報が 1 つのドキュメント内に含まれていますが、このドキュメントの構造は何らかの様式で固定されているわけではありません。リスト 3 に、同じデータベースに保管される別の連絡先を記載します。

リスト 3. 別の連絡先
{
   "email" : {
      "work" : "sample@example.com",
      "home" : "other@example.com"
   },
   "firstname" : "Paulie"
}

データベースのコンテンツにこのようなフリー・フォームの構造が使用されているからといって、ある構造を使用するように強制できないとは勘違いしないでください。ドキュメントの構造だけでなく、ドキュメントのフィールドの中身までチェックできる検証ルーチンを使用することができます。

Apache CouchDB 内のドキュメントは、ドキュメント ID を使用して保管されます。ドキュメント ID には任意のストリングを使用できるため、連絡先を、例えば「MartinBrown」というドキュメント ID で保管することができます。あるいは、Apache CouchDB にドキュメントの UUID (Universally Unique ID) を作成させることも可能です。

従来のデータベースとは異なるもう 1 つの Apache CouchDB システムの要素は、データにアクセスしたり、データを更新したりするために、特殊なライブラリーやインターフェースを使用する必要がないことです。Apache CouchDB はインターフェース全体が REST ライクなインターフェースを中心に作成されているため、HTTP を介して Web ページにアクセス可能なあらゆる機器が、このインターフェースにアクセスすることができます。例えば、MartinBrown というドキュメントが contacts データベース内に保管されていて、このデータベースが「Apache CouchDB」マシン上にある場合、このドキュメントにアクセスするには、Web ブラウザーを開いて http://127.0.0.1:5984/contacts/MartinBrown にアクセスします。連絡先の名前が「Paulie」だとすると、そのドキュメントは URL http://127.0.0.1:5984/contacts/Paulie 内に保管されることになります。

CouchApp とは何か

Apache CouchDB データベースへのこの単純な Web インターフェースは、CouchApp の基礎にもなっています。CouchApp とは、Apache CouchDB データベース内に保管されるドキュメントを対象とした HTML5 および JavaScript ベースのアプリケーションです。ドキュメント、そしてインターフェースとアプリケーションを構成するコードも、デザイン・ドキュメントとして Apache CouchDB に保管されます。したがって、データを提供するデータベース内に、完全に自己完結型の (表示要素も含む) アプリケーションを格納できるため、アプリケーションを構築して操作するプロセス全体の焦点を、表示対象の情報に置くことができます。

CouchApp のコア部分として使用されるのは、JavaScript です。これはサーバーにも当てはまり、サーバーでは、JavaScript を使用してデータベースのビューが作成されます。Oracle のような従来のデータベースで情報の抽出を可能にするのは、SQL とデータベース構造であり、この仕組みによって、例えば firstname フィールドが「Martin」となっているすべてのレコードのリストを簡単に抽出することができます。一方、Apache CouchDB では、データはテーブルにではなく、ドキュメントに保管されます。従来のデータベースと同じ結果を実現するには、データベース内のすべてのドキュメントを開き、そこに指定されたフィールドが含まれているかどうかを調べ、そのフィールドが目的のフィールドであれば、ドキュメントをリストに追加するという作業が必要になってきます。データベースに数千、あるいは数百万ものドキュメントが保管されているとしたら尚更のこと、このプロセスは相当な時間 (そして CPU の処理能力) を要するプロセスになります。

このような処理のパフォーマンスを改善するために、Apache CouchDB ではビューを使用しています。ビューは、すべてのドキュメントを繰り返し処理して、特定のフィールドが含まれるドキュメントのリストを作成するという処理を行います。ビューはサーバー上で作成されて、ドキュメントの索引としてディスクに保管されます。これにより、ドキュメントのリストを取得する際のパフォーマンスが改善されるとともに、特定のフィールド値と一致するかどうかを基準に簡単にレコードを抽出できるようになります。

CouchApp を構築するプロセス全体を容易にするために、CouchApp という名前のコマンドライン・ツールが用意されています。このツールは、Apache CouchDB アプリケーションのスタブとテンプレート・コードを作成すると同時に、ローカル・ファイルシステム上にファイルを作成します。このファイルを編集するにも、Apache CouchDB サーバーに「プッシュ」するにも、CouchApp コマンドライン・ツールを使用できるので、プロセス全体が単純化されます。これは、アプリケーションを Apache CouchDB にアップロードすることを考えずに、アプリケーションの構築に集中できることを意味します。

その他にも従来のデータベースとの違いはありますが、このセクションでは詳しく説明しません。これらの違いの一部については、チュートリアルの残りの部分で検討します。例えば、ドキュメントには添付ファイル (ドキュメントに関連付けられた 1 つ以上のファイル) を含められること、そしてドキュメントのすべてのリビジョンが、新しい「リビジョン」を形作るドキュメントの各更新とともに保管されることなどです。CouchApp ツールはこの複雑さを見えないようにして、システム全体を簡単に使用できるようにしています。

CouchApp のインストール

このセクションでは、CouchApp をインストールして構成します。

Apache CouchDB をインストールする

CouchApp をインストールする前に、Apache CouchDB をインストールする必要があります。Apache CouchDB は、さまざまなフォーマットでダウンロードすることができます。例えば、ソースとしてダウンロードして自分でビルドすることもできれば、スタンドアロンのアプリケーションとしてダウンロードして、Windows、Mac OS X、および Linux 上で実行することもできます。例えば、Mac OS X アプリケーションである Apache CouchDBX は、スタンドアロンのアプリケーションとして実行されます。

Linux および UNIX では、couchdb バイナリーを入手します。このバイナリーは、コマンドラインから実行することができます (リスト 4 を参照)。

リスト 4. コマンドラインから couchdb バイナリーを実行する
$ couchdb
Apache CouchDB 1.0.1 (LogLevel=info) is starting.
Apache CouchDB has started. Time to relax.
[info] [<0.33.0>] Apache CouchDB has started on http://127.0.0.1:5984/

これで準備は完了です!出力に示されている URL にアクセスすると、データベースが実行中になっていることを確認できます。ネットワークを介したサーバーへのアクセスを可能にするには、local.ini 構成ファイル内の bind パラメーターを、Apache CouchDB サーバーの (ホスト名ではなく) IP アドレスに変更してください。

CouchApp をインストールする

CouchApp コマンドライン・ツールの場合、GitHub (「参考文献」を参照) から CouchApp の tar または Zip パッケージをダウンロードします。お使いのマシンには Python をインストールする必要 (まだインストールされていない場合) がありますが、CouchApp インストーラーが追加ライブラリーの依存関係のすべてを処理してくれます。

パッケージをダウンロードして解凍した後、$ cd couchapp を実行してカレント・ディレクトリーを CouchApp ディレクトリーに変更します。

Python のセットアップ・ツールを実行して依存関係のすべてをダウンロードおよびインストールし、couchapp ツールをインストールします。$ python setup.py install を実行してください。

インストール済み環境をテストするには、$ couchapp を使用して CouchApp を実行します。これにより、ツールのヘルプ情報が返されます。

注: 通常は、誰にでもアクセスおよび更新を許可するようなデータベースを作成することはしないはずです。Apache CouchDB では、認証と、実行する処理に応じて異なるレベルのセキュリティーおよび許可をサポートしていますが、この話題についてはチュートリアルで取り上げません。

データベースを構成して CouchApp を作成する

Apache CouchDB の単純さを理解する良い方法として、コマンドライン・ツールである curl を使用して、コマンドによって Apache CouchDB インスタンス内に新しいデータベースを作成する方法があります。データベースを作成するには、作成するデータベースの URL に PUT HTTP コマンドを発行します。例えば、contacts データベースを作成する場合に使用するコマンドは、$ curl -X PUT http://127.0.0.1:5984/contacts のようになります。

contacts ファイルの内容を調べると、処理が正常に完了したことが明記されているはずです。

別の方法として、http://127.0.0.1:5984/_utils を使って Futon にアクセスし、Futon 管理インターフェースを使用して新規データベースを作成することもできます。

これで空のデータベースが用意できました。スタブ・アプリケーションを作成するには、CouchApp を使用して、必要なすべての基本ファイルを、Apache CouchDB データベースにアップロードできる状態でファイルシステム上に生成することができます。それには、$ couchapp generate app contacts を実行します。

このコマンドにより、連絡先アプリケーションを構築するために使用できる一連のファイルとコンテンツが含まれる contacts ディレクトリーが作成されます。リスト 5 に、最上位レベルのファイル・リストを記載します。

リスト 5. 最上位レベルのファイル・リスト
$ ls -al contacts/
total 605-
drwxrwxrwx 9 mcco mcco 4096 Dec  1 14:49 ./
drwxrwxrwx 3 mcco mcco 4096 Dec  1 14:49 ../
-rw-rw-rw- 1 mcco mcco  174 Dec  1 14:49 .couchappignore
-rw-rw-rw- 1 mcco mcco    2 Dec  1 14:49 .couchapprc
-rw-rw-rw- 1 mcco mcco 1660 Dec  1 11:51 README.md
drwxrwxrwx 3 mcco mcco 4096 Dec  1 14:49 _attachments/
-rw-rw-rw- 1 mcco mcco   16 Dec  1 14:49 _id
-rw-rw-rw- 1 mcco mcco   70 Dec  1 11:51 couchapp.json
drwxrwxrwx 4 mcco mcco 4096 Dec  1 14:49 evently/
-rw-rw-rw- 1 mcco mcco   10 Dec  1 11:51 language
drwxrwxrwx 2 mcco mcco 4096 Dec  1 14:49 lists/
drwxrwxrwx 2 mcco mcco 4096 Dec  1 14:49 shows/
drwxrwxrwx 2 mcco mcco 4096 Dec  1 14:49 updates/
drwxrwxrwx 3 mcco mcco 4096 Dec  1 14:49 vendor/
drwxrwxrwx 3 mcco mcco 4096 Dec  1 14:49 views/

以下に、いくつかの主要な要素について説明します。

  • views — データベース上のビューを格納します。ビューは、取得したいキーとデータのリストを作成するための JavaScript 関数であり、通常のデータベース・クエリーに相当します。
  • lists — ビュー出力のフォーマット設定されたバージョンを作成するために使用するリストを格納します。リストは、ビューから情報を取得して、その情報を表示用に (通常は HTML として) フォーマット設定する JavaScript 関数です。
  • shows — ビューがドキュメントのリストを返すのに対し、単一のドキュメントを表示します。リストと同じように JavaScript 関数として定義されます。
  • attachments — アプリケーションの添付ファイル (index.html や JavaScript ファイルなど) を格納します。

ロードしたいドキュメントのドキュメント ID が不明なときに、データベースの情報にアクセスするには、ビューが欠かせない手段です。lists と shows は、情報を表示するための組み込み関数を提供します。ただし、データベースから情報を取り出すために使用できる手段は他にもあります。その 1 つは jQuery ライブラリーです。例えば、ビューを使用してドキュメントのリストを返し、そのリストを jQuery Apache CouchDB ライブラリーで処理することができます。

index.html を編集する

データベースの attachments ディレクトリー内に、デフォルトの index.html ドキュメントがあります (contacts/_attachments/index.html)。このファイルを編集して、データベースへのデフォルト・リンクを含めてください。

jQuery と Apache CouchDB が提供する環境を最大限に利用するために、Contacts アプリケーションのインターフェース全体を動的に定義することにします。それには、JavaScript を使用して各種の要素を動的に提供し、連絡先情報を編集するためのフォームやビューの結果を表示します。

この仕組みを機能させるには、index.html ファイルを編集して、リスト 6 に記載する内容にします。

リスト 6. index.html ファイルを編集する
<!DOCTYPE html>
<html>
  <head>
    <title>Contacts</title>
    <link rel="stylesheet" href="style/main.css" type="text/css">
    <script src="vendor/couchapp/loader.js"></script>
    <script src="recordedit.js"></script>

  </head>
  <body>
    <div id="account"></div>

    <h1>Contacts</h1>

    <div id="items"><div id="add"><a href="#" 
class="add">Add Contact</a></div>
      <div id="contacts"></div>
      <div id="contactform"></div>

  </body>
</html>

この構造の重要な要素は以下のとおりです。

  • vendor/couchapp/loader.js スクリプトのロード。これにより、さまざまなライブラリーのなかでも jQuery ライブラリーと jQuery Couch ライブラリーがロードされます。
  • recordedit.js スクリプトのロード。このスクリプトに、アプリケーションを構築するために使用する JavaScript 関数を含めます。
  • 新規連絡先を作成するための追加フォームをトリガーするときに使用するボタン。
  • id が “contacts” に設定された div 要素。連絡先リストを表示するために使用します。
  • id が “contactform” に設定された div 要素。連絡先フォームを表示するために使用します。

ファイルの編集が完了したら、アプリケーションを Apache CouchDB データベースにプッシュする必要があります。それには、CouchApp コマンドライン・ツールを使用して、$ couchapp push contacts http://127.0.0.1:5984/contacts を実行します。

この couchapp コマンドの 1 番目の引数は、アプリケーションをプッシュ (パブリッシュ) するための命令です。2 番目の引数は、アプリケーションが保管されているローカル・ディレクトリーとして contacts を指定しており、3 番目の引数は、データベースのアップロード先として Apache CouchDB データベースの URL を指定しています。プッシュが正常に完了した後、アップロードされたアプリケーションを表示するには、URL http://127.0.0.1:5984/contacts/_design/contacts/index.html を指定します。

この URL の各構成部分については、説明の価値があります。

  • 127.0.0.1:5984 は、Apache CouchDB サーバーのホスト名 (IP アドレス) とポート番号に相当する部分です。デフォルトでは、サーバーはポート 5984 で実行されます。
  • contacts は、データベースの名前です。
  • _design は、アクセス先をデザイン・ドキュメントに指定する Apache CouchDB の特殊な ID です。デザイン・ドキュメントには、views、lists、shows の定義が含まれています。1 つのデータベースに複数のデザイン・ドキュメントを使用することもできます。
  • contacts は、デザイン・ドキュメントの名前です。CouchApp ツールはデフォルトで、アプリケーションと同じ名前のデザイン・ドキュメントを作成します。
  • index.html は、contacts デザイン・ドキュメントの添付ファイルの名前です。

CouchDB には、これらの URL をより使いやすいものに単純化する URL 書き換えモジュールも組み込まれています。このトピックについては、「参考文献」で紹介されている記事を参照してください。

基本的なドキュメントが揃ったところで、次はアプリケーションの残りの部分の作成に取り掛かります。

連絡先リストの表示

このセクションでは、連絡先リストを作成して表示します。

ビューを作成する

連絡先のリストを作成するには、まず初めにビューを作成する必要があります。ビューは、ドキュメントを唯一の引数として取る JavaScript 関数です。Apache CouchDB はデータベース内のすべてのドキュメントでこの関数を実行します。それにより、出力したいキー (情報を表示およびフィルタリングするために使用するキー) およびそのキーに対応する値が、このビューに含まれるドキュメントごとに出力されます。このプロセスは、map と呼ばれます。それは、このプロセスでドキュメントの内容を抽出対象の情報にマッピングしているためです。map とは別に、reduce というステップもあります。これは、情報を要約または単純化するために使用するステップですが、連絡先アプリケーションには必要ありません。

例えば、連絡先ドキュメントに含まれる名前をキーとして出力し、連絡先レコード全体を値として出力するには、リスト 7 のビューを作成する必要があります。

リスト 7. ビューを作成する
function(doc) {
    if (doc.name) {
emit(doc.name,doc);
    }
}

上記の匿名関数は、ドキュメントを唯一の引数として取ります。次に、そのドキュメントに「name」という名前のフィールドがあるかどうかを調べます。フィールドが見つかった場合には、emit() 関数が 2 つの値を返します。1 番目の値はキー、2 番目の値はそのキーに対応する値です。上記の例の場合、その値はドキュメントのコピーとなります。キーと値はいずれも、任意の妥当な JSON 構造にすることができます。キーは、Apache CouchDB が検索およびページングの際に使用します。値には単に、このビューにアクセスされたときに公開されるようにしたい情報が含まれるようにします。

CouchApp 内では、コマンドラインで generate コマンドを使用して新規ビューを作成することができます。例えば、$ couchapp generate view contacts byname を使用します。

このコマンドによって、contacts/views/byname ディレクトリーに byname というビューが作成されるとともに、map.js と reduce.js という 2 つのファイルが作成されます。このうち、map.js ファイルを編集して、リスト 7 に記載する関数に変更してください。

この時点で、アプリケーションをもう一度 Apache CouchDB データベースにプッシュすることができます。ビューには、ブラウザーのインターフェースからアクセスすることができます。contacts デザイン・ドキュメントの byname ビューにアクセスするには、URL http://127.0.0.1:5984/contacts/_design/contacts/_view/byname を使用します。今回も同じく contacts デザイン・ドキュメントを使用していますが、このパスで出力をリクエストしている対象のビュー (_view で識別) は、「byname」という名前のビューです。

現時点では、ビューは空の状態です ({"total_rows":0,"offset":0,"rows":[]})。

アプリケーション内でビューを表示する

アプリケーション内でビューを表示するには、jQuery Couch ライブラリーを使用してビューにアクセスし、ビューによって返された各レコードを繰り返し処理して、レコードの情報を出力します。

この処理を行うための関数は、リスト 8 のとおりです。

リスト 8. アプリケーション内でビューを表示する
db = $.couch.db("contacts");
function updatecontacts() {
$("#contacts").empty();

db.view("contacts/byname", {success: function(data) {
    for (i in data.rows) {
        $("#contacts").append('<div id="' + data.rows[i].value._id 
+ '" class="contactrow"><span>' +
                              data.rows[i].value.name +
                              "</span><span>" +
                              data.rows[i].value.phone +
                              "</span><span>" +
                              '<a href="#" id="' + data.rows[i].value._id 
+ '" class="edit">Edit Contact</a>' +
                              "</span><span>" +
                              '<a href="#" id="' + data.rows[i].value._id 
+ '" class="remove">Remove Contact</a>' +
                              "</span></div>"
                             );
    }
}
});
}

リスト 8 の最初の行では、データベースにアクセスするために使用する変数を設定しています。updatecontacts() 関数は、連絡先リストを表示するために使用する div 要素を空にした上で、作成されたビューの結果にアクセスします。ビューに正常にアクセスできると、JSON 構造として返されたビュー・データを引数として匿名関数が呼び出されます。すると、この関数が JSON 構造の内容を繰り返し処理し、contact 行を作成して連絡先の名前と電話番号を出力します。

ビューの結果は、配列 (行) として表現されます。配列に含まれる各要素は JSON 構造です。この構造は、ビューから返されたキーの内容と、同じくビューから返された値からなります。したがって、この配列要素の value.field 部分にアクセスすれば、ビューから返された連絡先レコードの電話番号にアクセスできるというわけです。

この出力が生成する「Edit Contact」と「Remove Contact」リンクにも、Apache CouchDB ドキュメントの ID が組み込まれます。連絡先を更新および削除する際には、情報を提供するためにこの ID が使用されることになります。

この関数を連絡先アプリケーションに追加するには、contacts/_attachments/recordedit.js という新規ファイルを作成して、そこに関数を追加します。

次のステップでは、ドキュメントがロードされること、そして updatecontacts() 関数が呼び出されて現在の連絡先リストが表示されることを確認します。このステップを容易にするために jQuery に用意されているのが、ドキュメントの ready() 関数です。このステップでの処理を行うために記述した ready() 関数内のすべてが、ドキュメントのロードが完了した時点で実行されます。リスト 9 に、この関数の定義を記載します。

リスト 9. ready() 関数
$(document).ready(function() {

updatecontacts();

}

アプリケーションを再びプッシュして、index ページをリロードしてください。表示される内容は何も変更されていないはずですが、新しいコンポーネントを追加したときに、アプリケーションが壊れていないことを確認するのは望ましいプラクティスです。

もちろんリストはまだ空の状態なので、今度は連絡先を表示するために使用できるフォームを作成しましょう。

連絡先の作成、編集、削除

このセクションでは、連絡先リストを作成、編集、削除する方法を説明します。

新しい連絡先を作成する

Web アプリケーションであるこのアプリケーションで新しい連絡先を作成するには、ユーザーに入力可能なフォームを表示し、ユーザーが入力した後のフォームの内容を Apache CouchDB データベースに書き込めるようにしなければなりません。そのための最初のステップは、フォームの HTML を動的に生成する関数を作成することです。その関数を、index.html に定義されている contactform div 要素に追加します。

この関数の定義をリスト 10 に記載します。

リスト 10. フォームとしての HTML を動的に生成する
function contactform(doctoedit) {
var formhtml;
formhtml =
'<form name="update" id="update" action="">';

if (doctoedit) {
formhtml = formhtml +
    '<input name="docid" id="docid" type="hidden" value="' 
+ doctoedit._id + '"/>';
}

formhtml = formhtml +
'<table>';

formhtml = formhtml +
'<tr><td>Name</td>' +
'<td><input name="name" type="text" id="name" value="' +
(doctoedit ? doctoedit.name : '') +
'"/></td></tr>';
formhtml = formhtml +
'<tr><td>Phone</td>' +
'<td><input name="phone" type="text" id="phone" value="' +
(doctoedit ? doctoedit.phone : '') +
'"/></td></tr>';
formhtml = formhtml + '<tr><td>Email</td>' +
'<td><input name="email" type="text" id="email" value="' +
(doctoedit ? doctoedit.email : '') +
'"/></td></tr>';

formhtml = formhtml +
'</table>' +
'<input type="submit" name="submit" class="update" value="' +
(doctoedit ? 'Update' : 'Add') + '"/>' +
'</form>';
$("#contactform").empty();
$("#contactform").append(formhtml);
}

リスト 10 の最後の行は重要です。$() 構成体は、jQuery 関数を使用する際の省略形で、この行ではフォームを既存の要素に追加するために使用しています。jQuery では、HTML ページの DOM 要素に簡単にアクセスできるようになっています。例えば上記の場合、DOM ページ内で指定の id 属性を持つ要素を検索するために、「#」を接頭辞として使用しています。このフォーマットは CSS で使用するフォーマットと同じなので、さまざまな要素を簡単に調べることができます。「.」(ピリオド) の接頭辞は、指定されたクラスの項目を検索します。後で、その一例を見ることになります。

この関数は引数として 1 つだけ、編集対象のドキュメントを取ります。このドキュメントは、既存の連絡先を編集する方法について説明する際に使用します。関数でドキュメントの引数を使用するのは、最初にフォームを作成して連絡先のドキュメント ID を取り込む場合 (この処理は、連絡先レコードを更新するときに必要です)、そしてフォームの各フィールドに値を設定する場合です。

ただし、フォームの基本部分は単純なもので、フィールドの名前と ID が指定されたテキスト入力要素 (両方の値は共通で、name、phone、email など) を生成しています。

フォームをアクティブにするには、index.html ファイルの「Add Contact (連絡先の追加)」リンクを有効にして、このリンクが関数を呼び出すようにする必要があります。それには、この処理を ready() 関数に追加します。これにより、ドキュメントがロードされるまでボタンはアクティブにならないことが確実になります。リスト 11 に、リンクがクリックされた時点で処理を更新するための jQuery コードを記載します。

リスト 11. 連絡先フォームを表示する
$("a.add").live('click', function(event) {
contactform();
});

アプリケーションをもう一度 Apache CouchDB にプッシュします。すると、今度は「Add Contact (連絡先の追加)」ボタンによって、値が空の状態のフォームが表示されるはずです。図 1 に、この場合のフォームの一例を示します。

図 1. 値が空の連絡先フォーム
値が空の連絡先フォーム
値が空の連絡先フォーム

連絡先の作成手順の後半では、「Submit (送信)」ボタンがクリックされると、実際にドキュメントがデータベースに保存されるようにします。リスト 12 に、これに対処するための関数を記載します。

リスト 12. 「Submit (送信)」ボタンがクリックされたときにドキュメントをデータベースに保存する
$("input.update").live('click', function(event) {
var form = $(event.target).parents("form#update");

    db.saveDoc(builddocfromform(null,form), {
        success: function() {
            $("form#update").remove();
            updatecontacts();
        },
    });
return false;
});

上記の JavaScript フラグメントを既存の ready() 関数に追加してください。このフラグメントが追加する関数は、「Update (更新)」ボタンがクリックされると呼び出されます。インライン関数の最初の行は、フォームのフィールドにアクセスするための変数を作成します。

saveDoc() 関数は、JSON 構造をドキュメントとして Apache CouchDB に保存します。1 番目の引数はドキュメント・データ、2 番目の引数はドキュメントの保存に成功した場合のアクションを定義する JavaScript オブジェクトです。情報にアクセスするために実行される JavaScript の処理は非同期であることに注意してください。つまり、リクエストがホスト (Apache CouchDB) に送信された後、レスポンスが返されるのを待ってから、情報の処理を行う必要があります。

この関数に渡す最初の引数は、builddocfromform() という別の関数の戻り値です。こうすることで、新規ドキュメントを作成しているのか既存のドキュメントを編集しているのかに関わらず、フォーム・データからドキュメントを作成するプロセスが単純になります。この builddocfromform() 関数のコードをリスト 13 に記載します。

リスト 13. builddocfromform() 関数
function builddocfromform(doc,form) {
if (!doc) {
doc = new Object;
}
doc.name = form.find("input#name").val();
doc.phone = form.find("input#phone").val();
doc.email = form.find("input#email").val();

return(doc);
}

この関数は、既存のドキュメント・オブジェクトを引数に取ります。そのドキュメント・オブジェクトが定義されていない場合は、そのドキュメント・オブジェクトを空の JavaScript オブジェクトに初期化します。続いて、指定されたフォーム jQuery オブジェクトを使用して、フォームの各フィールドにアクセスし、ドキュメント・オブジェクトにデータを取り込んでから、そのドキュメントを返します。この関数には、さらにフィールドを追加しても構いません (フォーム HTML に該当するフィールド定義を追加してあることが前提です)。

success フィールドに付加された匿名関数は、ドキュメントが正常にデータベースに書き込まれると呼び出されます。この匿名関数が呼び出されると、contactform div 要素の中身を空にすることによって連絡先フォームの HTML を削除してから、updatecontacts() 関数を呼び出し、表示されているアクティブな連絡先リストを更新します。

この時点で、アプリケーションをもう一度 Apache CouchDB データベースにプッシュして、連絡先をシステムに追加してみてください。図 2 に示すように、Apache CouchDB に保管されている 1 つ以上の連絡先が表示されるはずです。

図 2. 連絡先
ブラウザーに表示された連絡先レコードと「Add Contact (連絡先の追加)」リンクを示すスクリーンショット
ブラウザーに表示された連絡先レコードと「Add Contact (連絡先の追加)」リンクを示すスクリーンショット

既存の連絡先を編集する

既存の連絡先を編集するための下準備はほとんど完了しています。フォームを出力するための JavaScript 関数は、すでに既存のドキュメントを引数として取るようになっています。また、そのドキュメント・オブジェクトの Apache CouchDB ドキュメント ID と既存の値がフォームに取り込まれるようにもなっています。

連絡先を編集できるようにするには、2 つの点を変更する必要があります。まず 1 つは、リストの各連絡先に対して「Edit Contact (連絡先の編集)」リンクを出力できるようにすることです。すべてを個々に作成するとなると悪夢のような作業になりますが、jQuery では、ターゲット DOM オブジェクトを識別することによって、どのリンクでもクリックされた時点で識別できる機能を提供しています。この情報を使用すれば、そのリンクに組み込まれているドキュメントの ID にアクセスして Apache CouchDB からレコードをロードし、フォーム関数を呼び出すことができます。リスト 14 を見ると、この処理の流れがわかります。

リスト 14. ターゲット DOM オブジェクトを識別して、リンクがクリックされた時点で識別する
$("#contacts").click(function(event) {

var target = $(event.target);
if (target.is('a')) {
id = target.attr("id");

if (target.hasClass("edit")) {
    db.openDoc(id, { success: function(doc) {
        contactform(doc);
    }});
}

}
});

上記のコードも ready() 関数に追加してください。以下に、コード行の内容について上から順に説明します。

  • 1 行目では、#contacts DOM 要素内のクリック・イベントを識別します。
  • 2 行目では、クリックされたターゲットを識別します。
  • 3 行目では、クリック可能要素 ‘a’ として何がクリックされたのかをチェックします。
  • 4 行目では、id 属性を識別します。連絡先リストでは、各リンクの id 属性に、その連絡先に対応するドキュメント ID が含まれています。
  • 5 行目では、クリックされたリンクのクラスを識別します。「Edit Contact (連絡先の編集)」リンクのクラスは edit、「Remove Contact (連絡先の削除)」リンクのクラスは remove です。リンクが “edit” リンクである場合は、Apache CouchDB にアクセスしてドキュメントをロードします (openDoc() を使用)。ドキュメントが正常にロードされると、そのドキュメントのデータを引数として contactform() 関数が呼び出されます。これにより、編集対象の既存の連絡先情報を示す連絡先フォームが表示されます。

このコードの結果、連絡先の「Edit Contact (連絡先の編集)」リンクをクリックすると、その連絡先の詳細を示すフォームが表示されるようになります。

なぜ、表示される連絡先情報を使用して直接フォームを入力しないのか不思議に思っていることでしょう。その理由は、これは複数のユーザーが使用する可能性があるアプリケーションであることから、ドキュメントを編集する前に、そのドキュメントが別のユーザーによって更新 (または削除) されていないことを確実にする必要があるためです。したがって、ドキュメントが存在し、そのドキュメントがデータベースに保管されている最新バージョンであることを確認しなければなりません。

編集プロセスの後半では、フォーム上の「Submit (送信)」ボタンがクリックされたときに呼び出される関数を変更します。ここで必要となるのは、既存のレコードが更新されているかどうかを識別することです。既存のドキュメントを更新しているとすると、contactform() 関数はドキュメント ID だけを含めるため、これを使って処理のタイプを判別することができます。既存のドキュメントを更新する場合には、そのドキュメントをまずデータベースからロードする必要があります。そしてフォームの値を変更した後に、ドキュメントをデータベースに再び保存します。このコードをリスト 15 に記載します。

リスト 15. フォーム上の「Submit (送信)」ボタンがクリックされたときに呼び出される関数を変更する
$("input.update").live('click', function(event) {
var form = $(event.target).parents("form#update");

var id = form.find("input#docid").val();
if (id) {
    db.openDoc(id, {
        success: function(doc) {
            db.saveDoc(builddocfromform(doc,form), {
                success: function() {
                    $("form#update").remove();
                    updatecontacts();
                }});
        },
    });
}
else
{
    db.saveDoc(builddocfromform(null,form), {
        success: function() {
            $("form#update").remove();
            updatecontacts();
        },
    });
}
return false;
});

既存のドキュメントをロードして、その内容を更新する場合も、builddocfromform() 関数を使用します。これにより、ドキュメントの最新バージョンを更新していることが確実になります。これは重要な点です。なぜなら、Apache CouchDB はすべてのドキュメントにリビジョンと変更内容を記録するためです。したがって、更新しているドキュメントが最新バージョンであることを確実にする必要があります。そのために、リビジョン番号を使用して、適切なバージョンを更新していることを確実にするためのチェックを行います。

フィールドを更新して保存する前にドキュメントをロードすることには、もう 1 つの理由があります。現状のフォームがサポートしているのは、ドキュメントの名前 (name) フィールド、電話番号 (phone) フィールド、そして e-メール (email) フィールドだけですが、このフォームがまだサポートしていない他のフィールドがドキュメントに含まれている場合を考えてみてください。既存のドキュメント全体をロードして、フォーム上にあるフィールドだけを更新すれば、フォームに認識されていないフィールドを失うことはありません。

当然のことながら、レコードを編集するだけでなく、削除しなければならないこともあります。

既存の連絡先を削除する

既存の連絡先を削除する方法は簡単に理解できるはずです。削除するには、「Edit Contact (連絡先の編集)」リンクと同じように、「Remove Contact (連絡先の削除)」リンクに別のフックを追加するという方法を使用することができます。ただし、「Remove Contact (連絡先の削除)」リンクが誤ってクリックされた場合のために、削除が必要であるかどうかを確認するプロセスを用意することができます。

これまでに説明した原則に従って、新しいリンク一式を出力してから、クリック・イベントを使用して、これらの新しいリンクを削除リクエストの確認、または削除リクエストの取り消しのいずれかのリンクにします。

そのためのコードは、リスト 14 の “edit” リンクがクリックされた場合の処理の後に追加してください。リスト 16 にそのコードを記載します。

リスト 16. 既存の連絡先を削除する
if (target.hasClass("remove")) {
    html = '<span class="confirm">Really Delete? ' +
        '<a href="#" id="' + id + '" class="actuallydel">Delete</a>' +
        '<a href="#" id="' + id + '" class="canceldel">Cancel</a></span>';
    target.parent().append(html);
}

if (target.hasClass("actuallydel")) {

    db.openDoc(id, {
        success: function(doc) {
            db.removeDoc(doc, { success: function() {
            target.parents("div.contactrow").remove();
            }
                               });
        }
    }
               );
}

if (target.hasClass("canceldel")) {
    target.parents("span.confirm").remove();
}

ユーザーが「Remove Contact (連絡先の削除)」リンクをクリックすると、連絡先にさらに 2 つのリンクが追加されます。「Delete (削除)」リンクがクリックされた場合、(ドキュメントがまだ存在していることを確認するために) ドキュメントがロードされ、ドキュメントを削除するために removeDoc() 関数が呼び出されます。この呼び出しが成功すると、連絡先の行が完全に削除されます。該当する行は、親 DOM 要素を検索することで特定します。ユーザーが「Cancel (取り消し)」をクリックした場合は、単に確認リンクを削除するだけです。

図 3 に、削除の確認を待機中の連絡先を示します。

図 3. 削除の確認を待機中の連絡先
ブラウザーで実行中のアプリケーションにおいて、特定の連絡先の削除を確認している画面のスクリーンショット
ブラウザーで実行中のアプリケーションにおいて、特定の連絡先の削除を確認している画面のスクリーンショット

完成版のアプリケーション

プロセスに対処するための多種多様な要素によって、アプリケーション全体を理解するのが難しくなる場合があります。そこで、リスト 17 に、アプリケーションのすべての JavaScript が含まれる recordedit.js ファイルを記載します。

リスト 17. recordedit.js ファイル
db = $.couch.db("contacts");
function updatecontacts() {
    $("#contacts").empty();

    db.view("contacts/byname", {
        success: function(data) {
            for (i in data.rows) {
                $("#contacts").append('<div id="' + data.rows[i].value._id
+ '" class="contactrow"><span>' +
                                      data.rows[i].value.name +
                                      "</span><span>" +
                                      data.rows[i].value.phone +
                                      "</span><span>" +
                                      '<a href="#" id="' + data.rows[i].value._id 
+ '" class="edit">Edit Contact</a>' +
                                      "</span><span>" +
                                      '<a href="#" id="' + data.rows[i].value._id 
+ '" class="remove">Remove Contact</a>' +
                                      "</span></div>"
                                     );
            }
        }
    });
}

function contactform(doctoedit) {
var formhtml;
    formhtml =
'<form name="update" id="update" action="">';

    if (doctoedit) {
formhtml = formhtml +
    '<input name="docid" id="docid" type="hidden" value="' + doctoedit._id 
+ '"/>';
    }

    formhtml = formhtml +
'<table>';

    formhtml = formhtml +
        '<tr><td>Name</td>' +
'<td><input name="name" type="text" id="name" value="' +
(doctoedit ? doctoedit.name : '') +
'"/></td></tr>';
    formhtml = formhtml +
'<tr><td>Phone</td>' +
'<td><input name="phone" type="text" id="phone" value="' +
(doctoedit ? doctoedit.phone : '') +
'"/></td></tr>';
    formhtml = formhtml + '<tr><td>Email</td>' +
'<td><input name="email" type="text" id="email" value="' +
(doctoedit ? doctoedit.email : '') +
'"/></td></tr>';

formhtml = formhtml +
'</table>' +
'<input type="submit" name="submit" class="update" value="' +
        (doctoedit ? 'Update' : 'Add') + '"/>' +
'</form>';
    $("#contactform").empty();
    $("#contactform").append(formhtml);
}

function builddocfromform(doc,form) {
if (!doc) {
        doc = new Object;
    }
    doc.name = form.find("input#name").val();
    doc.phone = form.find("input#phone").val();
    doc.email = form.find("input#email").val();

return(doc);
}

$(document).ready(function() {

    updatecontacts();

    $("#contacts").click(function(event) {

    var target = $(event.target);
    if (target.is('a')) {
        id = target.attr("id");

        if (target.hasClass("edit")) {
            db.openDoc(id, { success: function(doc) {
        contactform(doc);
            }});
        }

if (target.hasClass("remove")) {
            html = '<span class="confirm">Really Delete? ' +
        '<a href="#" id="' + id + '" class="actuallydel">Delete</a>' +
                '<a href="#" id="' + id + '" class="canceldel">Cancel</a>
</span>';
            target.parent().append(html);
        }

if (target.hasClass("actuallydel")) {

    db.openDoc(id, {
        success: function(doc) {
            db.removeDoc(doc, { success: function() {
                    target.parents("div.contactrow").remove();
                    }
                                       });
                }
            }
                       );
        }

if (target.hasClass("canceldel")) {
            target.parents("span.confirm").remove();
        }
    }
    });

    $("a.add").live('click', function(event) {
contactform();
    });

    $("input.update").live('click', function(event) {
var form = $(event.target).parents("form#update");

        var id = form.find("input#docid").val();
        if (id) {
            db.openDoc(id, {
                success: function(doc) {
            db.saveDoc(builddocfromform(doc,form), {
                        success: function() {
                    $("form#update").remove();
                            updatecontacts();
                        }});
                },
            });
        }
        else
        {
            $db.saveDoc(builddocfromform(null,$form), {
                success: function() {
            $("form#update").remove();
                    updatecontacts();
                },
            });
        }
        return false;
    });
});

このファイルを更新した後、CouchApp を使用してアプリケーションを Apache CouchDB インスタンスにプッシュして実行してみてください。

もう 1 つの作業 ― CouchApp を複製する

Apache CouchDB の主要な機能の 1 つは、データベースに保管されたドキュメントを別のデータベースに複製できることです。複製先のデータベースは、同じ Apache CouchDB インスタンス上にあるデータベースでも、リモートのデータベースでも構いません。同期は双方向で行われます。つまり、contacts データベースをデスクトップ・マシンからノート PC に複製し、ノート PC 上で変更を行った後、これらの変更をデスクトップ・マシンに同期させることで、2 つのデータベースを同期状態に保つことができるということです。

さらに付け加えると、Apache CouchDB データベースにドキュメントとして保管されている CouchApp も同じく同期されます。つまり、contacts データベースを複製すると、CouchApp アプリケーションを構成するアプリケーション・コードも複製されることになります。これを従来型の環境で実現するのは困難です。CouchApp には、この同期化機能が Apache CouchDB 機能の一部として提供されます。

レプリケーションをセットアップするには、curl などのコマンドライン・ツールを使用して Apache CouchDB サーバーにリクエストを送信することもできますが、もう 1 つの方法として、Futon ツールを使用することもできます。Futon ツールは、あらゆる Apache CouchDB インスタンスに組み込まれる CouchApp であり、Apache CouchDB と Apache CouchDB 内のデータベースに保管されたドキュメントに対する完全な管理および編集インターフェースを提供します。

Futon を使用するには、http://127.0.0.1:5984/_utils にアクセスします。すると、図 4 に示す Futon インターフェースが表示されます。

図 4. Futon インターフェース
ブラウザーで実行中の Futon を示すスクリーンショット。左側に既存のデータベースのリストが表示されていて、右側にツールのメニューがあります。
ブラウザーで実行中の Futon を示すスクリーンショット。左側に既存のデータベースのリストが表示されていて、右側にツールのメニューがあります。

右側に記載されている「Replicator (レプリケーター)」リンクをクリックすると、図 5 に示すフォームが表示されます。

図 5. レプリケーター・フォーム
データベースを複製するための画面のスクリーンショット。画面には、複製元と複製先を選択するフィールドがあります。
データベースを複製するための画面のスクリーンショット。画面には、複製元と複製先を選択するフィールドがあります。

レプリケーションは、プッシュ (現行の Apache CouchDB インスタンスからリモート・データベースへ)、またはプル (リモート Apache CouchDB インスタンスからローカル Apache CouchDB インスタンスへ) のいずれかで実行することができます。また、レプリケーションは 1 回だけ行うことも、継続的に行われるように設定することもできます。継続的なレプリケーションでは、あるデータベースでの変更が、別のデータベース (使用できる場合) に自動的に複製されます。

例えば、ノート PC で Apache CouchDB インスタンスを起動した場合、contacts データベースを CouchDB サーバーからローカル側の contacts データベースに複製することができます。図 6 に、入力されたフォームと、レプリケーション・プロセスが開始された結果を示します。

図 6. 正常に完了したレプリケーション
レプリケーションが正常に完了した後のレプリケーション・ウィンドウを示すスクリーンショット。ウィンドウ下部の「Event (イベント)」枠に、コンソール・メッセージが表示されています。
レプリケーションが正常に完了した後のレプリケーション・ウィンドウを示すスクリーンショット。ウィンドウ下部の「Event (イベント)」枠に、コンソール・メッセージが表示されています。

アプリケーションがノート PC 上の Apache CouchDB インスタンスに複製された後も、まったく同じインターフェースを使用してデータベースを編集および更新することができます。それは、アプリケーション全体を複製したからです。その上、ノート PC 上で行った変更を、自宅に帰ってからデスクトップ・マシンに複製することもできます。

改善案

このチュートリアルに記載しているスクリーンショットのサンプルは、CSS を変更してレイアウトを多少改善しているため、皆さんのアプリケーションとは違って見えるかもしれません。幸い、さまざまなコンポーネント (フォーム、連絡先リスト、リンクなど) のすべてでクラスと ID を使用しているため、フォーマットを変更するのは難しくないはずです。CSS は、ローカル・ファイルシステムに置かれている contacts/_attachments/style/main.css ファイル内に定義されています。couchapp でアプリケーションをプッシュするときは、この CSS も組み込まれます。アプリケーションを改善するには、おそらくこの CSS を変更するのが最も簡単な方法です。

次の改善対象として考えられるのは、取り込まれるデータです (フォームとそのデータを保管するための構造を更新することによって修正することができます)。例えば、Apache CouchDB と CouchApp を紹介するセクションで概説したように、ドキュメント内の別個の構造の中に電話番号を保管すれば、複数の電話番号を追加するためのサポートを追加することができます。

表示される情報を拡張した後は、連絡先リストを改善して、このリストを複数のページで表示できるようにするという方法も考えられます。Apache CouchDB のページング機能は、ビューの一部として返されるキーを使用します。さらに、異なるビューを作成して、検索機能を提供するのも一考です。そのすべては、連絡先リストの別の表現を生成する追加のビューを作成し、組み立てることによって可能です。

まとめ

CouchApps と Apache CouchDB は、リッチなWeb アプリケーション構築環境を実現します。フォームの作成からデータの保存、そしてデータベース・コンテンツのレポートまでのプロセス全体が、Apache CouchDB データベースに完全に保管されます。JavaScript と、さらに jQuery ライブラリーを使用することで、アプリケーションを作成する上での複雑さが大幅に軽減されます。それと同時に、Apache CouchDB を使用する場合、テーブルを定義する作業や、保管した情報にアクセスするための複雑なクエリーを作成する作業から解放されます。さらに Apache CouchDB では、すべてのデータを含めたアプリケーション全体を、ノート PC や携帯電話を含め、別の Apache CouchDB インスタンスに簡単に複製することができます。


ダウンロード可能なリソース


関連トピック

  • CouchApp.org: CouchDB による単純な JavaScript アプリケーションを入手してください。
  • Couchbase Blog: ブログ投稿と、CouchDB および関連アプリケーションのレシピを調べてください。
  • JavaScript Basics and DOM Manipulation」: JavaScript の基本およびその他の要点を説明している、Siarhei Barysiuk によるスライドを見てください。
  • jQuery documentation: jQuery の詳細なドキュメントと参考資料を調べてください。
  • JavaScript and the Document Object Model」(Nicholas Chase 著、developerWorks、2002年7月): JavaScript での DOM 手法と、ユーザーがメモを追加してメモの内容を編集できる Web ページを作成する手順を詳しく説明しています。
  • JavaScript Tutorial: Web のスクリプト言語の使用方法を学んでください。
  • jQuery の「Browser Compatibility」ページ: jQuery が積極的にサポートしている推奨ブラウザーのリストを閲覧してください。
  • developerWorks podcasts: ソフトウェア開発者向けの興味深いインタビューとディスカッションを聞いてください。
  • developerWorks は Twitter を利用しています: developerWorks をフォローして最新ニュースを入手してください。
  • developerWorks Open source ゾーン: オープンソース技術による開発、そして IBM 製品でオープンソース技術を使用するときに役立つ広範囲のハウツー情報、ツール、プロジェクト・アップデート、そして人気の高い記事とチュートリアルを調べてください。
  • jQuery: MIT または GPL (GNU Public License) の下で利用可能 JavaScript ライブラリー、jQuery をダウンロードしてください。ローカルにダウンロードして使用することも、これをインクルードして Google CDN から直接ロードすることもできます。
  • Apache CouchDB: CouchDB から最新バージョンをダウンロードしてください。
  • CouchApp ツール: このツールをダウンロードするには、GitHub Web サイトにアクセスしてください。ここでは、スタンドアロンの CouchDB アプリケーション開発を単純化するユーティリティーも見つけられます。

コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source, Web development
ArticleID=839796
ArticleTitle=CouchApp を構築する
publish-date=10112012