まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:couchdb

 は IBM CloudantApache CouchDB と API 互換のある NoSQL データベースです。JavaScript で操作することができます。npm を使ってサーバーサイドで動かすこともできますが、ブラウザから JavaScript ライブラリをロードして、個々のブラウザ内で使うことも可能です。

特にこれをブラウザから使う場合、マスターデータはクラウドの IBM Cloudant で保持しつつ、必要なデータをユーザーのブラウザと同期して、ほぼすべての処理をローカルブラウザ内で完結させる(=時間のかかるDBアクセスをローカルDBだけを対象に行えばよくなるので、アプリケーションとしての安定性やパフォーマンス向上も期待できる)、ということが可能になります。とても強力な同期機能を持ったデータベースエンジンと言えます。
2018040900


この「同期」を具体的にどうやるか、という内容が今回のブログエントリです。


今回の説明では、サーバー側の DB を IBM Cloudant で用意することにします。IBM Cloud のライトアカウントを作成すると容量 1GB まで使えるライトプランの DBaaS が無料で用意できます。

で、この Cloudant DB をブラウザに同期・・・するわけですが、IBM Cloudant を使う場合はその前に1つ設定が必要です。標準状態の IBM Cloudant はクロスオリジンからのアクセスを許可していません。そのため、標準設定のままウェブブラウザから同期をとろうとするとクロスオリジンアクセスになってしまい、エラーとなってしまいます。したがってクロスオリジンアクセスを許可するよう、設定を変更する必要があります。詳しくはこちらにも記載していますが、curl コマンドと IBM Cloudant の API を使って IBM Cloudant の CORS アクセスを有効にするための設定を行います:
$ curl -i -u 'db_username:db_password' -XPUT 'https://db_username.cloudant.com/_api/v2/user/config/cors' -H 'Content-type: application/json' -d '{"enable_cors":true,"allow_credentials":true,"origins":["*"]}'

↑db_username, db_password は IBM Cloudant のインスタンスにアクセスするためのユーザー名およびパスワードです。


次にブラウザ内の JavaScript で DB の同期を行います。普通に「データベースそのものの同期をとる」のであれば話は単純で、以下のようなコードを記述するだけです:
  :
  :
<html>
<head>
<script src="https://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>
<script>
var localDB = new PouchDB( 'testdb' );
var remoteDB = new PouchDB( 'https://db_username:db_password@db_username.cloudant.com/testdb' );

remoteDB.sync( localDB, {
live: true, retry: true });
: :

まず CDN を指定して PouchDB のライブラリをロードします。そして IBM Cloudant のユーザー名(db_username)とパスワード(db_password)を指定して、'testdb' という名前のデータベースインスタンスを remoteDB 変数に代入します。これで IBM Cloudant 上のリモートデータベースを remoteDB から操作できるようになりました。同時にローカルブラウザ内に(同じ名前の)'testdb' という名前のデータベースインスタンスを作って localDB 変数に代入しています(こちらは作成時点では空です)。 この2つのリモート/ローカルデータベースを sync() 関数で同期するように指定しています。これによってこれら2つのデータベースインスタンス変数の内容は自動同期され、一方(例えばブラウザ内の localDB)に変化が起こるともう一方(サーバーの remoteDB)にその変化内容が勝手に反映される、という仕組みが実現できます。

ちなみに sync() 実行時の live:true オプションはリアルタイム同期の指定で、retry:true オプションは一度接続が切れた後に自動的にリトライして接続が戻った時に同期も復活させるための指定です。ここまでは超簡単です。


さて、本来やりたかったのはデータベースをまるごと同期するのではなく、データベースの一部だけを同期する、というものです。上記例だと remoteDB はサーバー側のものなので、全部で数ギガバイトになったりそれ以上になったりすることも想定しないといけないのですが、localDB はブラウザ内で作るものなのであまり大きくなっては困ります。そこで(一般的には部分同期とか Partial Sync とか呼ばれる方法で)特定条件を満たす一部の文書だけを対象にローカルに同期し、ローカルでの変更・追加・削除といった処理をサーバー側のマスターに同期し直す方法を紹介します。

PouchDB にも部分同期機能は存在しています。ただそこで「この条件を満たす文書だけ」を指定する方法がかなり限られていて、現時点では文書 ID を配列で指定する方法しかないように見えます(このフィールドがこの値で・・・みたいなクエリーではできないっぽい)。具体的にはこんな感じ:
  :
  :
<html>
<head>
<script src="https://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>
<script>
var localDB = new PouchDB( 'testdb' );
var remoteDB = new PouchDB( 'https://db_username:db_password@db_username.cloudant.com/testdb' );

var doc_ids = [ 'xxx', 'yyy', 'zzz' ];  //. 同期対象文書の _id 値配列

remoteDB.sync( localDB, {
doc_ids: doc_ids,
live: true, retry: true }); : :

上記例では 'xxx', 'yyy', 'zzz' という3つの文書ID(Cloudant 内だと文書の _id の値)を指定して、sync() 関数を doc_ids パラメータで配列指定しています。これだけで localDB には指定された3文書だけが同期され、削除を含めた変更があるとリモートにも即時に反映されるようになります。

したがって実装する場合はページロード時の最初に IBM Cloudant に対してクエリー API を実行して同期の対象となる文書(の ID 配列)をまとめて取得し、その ID 配列を指定して PouchDB と部分同期する、という流れになると思っています。この方法なら最初のロード時のネットワーク接続は必須になりますが、どのみちページをロードするにもネットワークは必須だし、同期をとった後はネットワークが切れても平気、というシステム構成が可能になります。


なお、一点だけ注意が必要なことがあります。この方法で部分同期した後に localDB に新たに文書を追加した場合です。部分同期の条件は doc_ids に指定された文書ID配列だったので、ここに含まれない新しい文書を追加してもサーバー側には同期されません。その場合は新たに doc_ids を指定しなおして(新しい文書の ID を追加して)改めて sync() 関数を実行する必要があります:
  :
  :
<html>
<head>
<script src="https://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>
<script>
var localDB = new PouchDB( 'testdb' );
var remoteDB = new PouchDB( 'https://db_username:db_password@db_username.cloudant.com/testdb' );

var doc_ids = [ 'xxx', 'yyy', 'zzz' ];

remoteDB.sync( localDB, {
doc_ids: doc_ids, live: true, retry: true }); : : function add( doc ){ //. ドキュメントを追加する処理 localDB.put( doc ).then( function( res ){ //. localDB に文書(doc)追加 doc_ids.push( doc._id ); //. 文書の _id 値を配列に追加 remoteDB.sync( localDB, { //. sync() 再実行 doc_ids: doc_ids, live: true, retry: true }); }).catch( function( err ){ console.log( err ); }); }

例えば上記例では add( doc ) 関数の中で doc に指定されたオブジェクトを localDB に追加する想定で処理を記述していますが、localDB.put() が成功したら doc_ids 配列を更新した上で remoteDB.sync() を再実行して同期条件を変えるようにしています。

現実問題としては追加なのか更新なのか(どちらも put() 関数を使う)、更新だとすると _rev の値も必要になって・・・とか、多少細かい実装が必要になることも事実ですが、一応これだけでローカルDBとその部分同期を使ったアプリの実装はできることになります。

問題は上述したローカルDBに同期したい文書の ID をどうやって調べるかですが、そこはやっぱり一度サーバーにクエリー投げるしかないのかなあ・・・


なお、PouchDB の API Reference はこちらを参照ください:
https://pouchdb.com/api.html


JavaScript で Cloudant や CouchDB を操作できるようになるライブラリの1つに PouchDB があります:
https://pouchdb.com/

2016031701


PouchDB は CouchDB および CouchDB と互換性のあるローカル NoSQL データベースです。JavaScript を使ってデータを読み書きし、またリモートの CouchDB サーバーにアクセスしたり同期したりすることもできるものです。広い意味ではデータベース本体および JavaScript ライブラリを合わせて PouchDB と呼ぶこともあります。

という特徴をもった、この PouchDB の JavaScript ライブラリを使うと、リモートの CouchDB データベースにアクセスすることができるようになります。JavaScript ライブラリなのでクロスサイトスクリプティング等のセキュリティ制約を意識しながら使う必要があります。

今回、紹介するのはこんな環境で JavaScript を使ってデータベースにアクセスする、というものです。HTML ファイルがローカルディスク内にあるので、普通にアクセスするとクロスサイトスクリプティング制約にかかって使えませんが、その制約を回避する方法と合わせて紹介します:
2016031705


まずは操作先の CouchDB サーバー環境を用意します。外部からアクセスするので Access-Control-Allow-Origin ヘッダのカスタマイズも必要になります。この辺りの手順は以下2つのブログエントリを参照ください:


この CouchDB サーバーの IP アドレスは XX.XX.XX.XX、ポート番号はデフォルトの 5984 であるとして以下を記述します。まずは CouchDB サーバーの管理コンソールにアクセスして、この後リモートから操作するためのデータベースを1つ作成しておきましょう。ウェブブラウザで http://XX.XX.XX.XX:5984/_utils/ にアクセスして管理コンソール画面にアクセスし、"Create Database" と書かれた箇所をクリックします:
2016031701


作成するデータベースの名前を問われるので適当な名称(この例では mydb)を入力して "Create" ボタンをクリックします:
2016031702


指定した名称のデータベースが作成され、その内容が表示されます。この時点では作成直後なのでドキュメントは存在していないはずです。とりあえず元の画面に戻るために "Overview" と書かれた箇所をクリックします:
2016031703


もとの管理コンソールのデフォルト画面に戻ります。先程まではなかった mydb というデータベースが追加されていることがわかります。このデータベースにリモートからアクセスすることが今回の目的です:
2016031704


次にローカル側の準備です。まずなにはともあれ PouchDB ライブラリが必要なので、PouchDB のトップページから最新版の PouchDB をダウンロードします。この記事を書いている時点での最新バージョンは 5.3.0 で、ダウンロードファイル名は pouchdb-5.3.0.min.js でした:
2016031701


次にダウンロードした PouchDB ライブラリを使って、リモートの CouchDB サーバーのデータベースにアクセスするプログラムをローカルに作成します。具体的には以下の様な HTML ファイル(index.html)をダウンロードした pouchdb-5.3.0.min.js と同じディレクトリに作成します:
<html>
<head>
<script src="./pouchdb-5.3.0.min.js"></script>
<script>
var db = new PouchDB('http://XX.XX.XX.XX:5984/mydb');
db.info().then( function( info ){
  console.log( info );
});
</script>
</head>
<body>
</body>
</html>

ソース内の XX.XX.XX.XX は CouchDB サーバーのホスト名または IP アドレスです。また mydb はアクセス先のデータベース名称です。この HTML では同じディレクトリにある pouchdb-5.3.0.min.js を読み込み、http://XX.XX.XX.XX:5984/mydb にアクセスして、成功したらその情報をウェブコンソールに表示する、というものです。繰り返しになりますが、このソースファイルはローカル環境にあり、このようなファイル構成になっています。そして HTML ファイルの読み込みと同時にリモートの CouchDB サーバーにアクセスして mydb データベースの情報を表示する、という内容の処理が記述されています:
2016031706


ではこの index.html をダブルクリックしてデフォルトブラウザで開きます。注意点としてウェブサーバー上の HTML ファイルを開いているのではなく、ローカルディスク内の HTML ファイルを開いている(アドレスのプロトコル部分が file:/// で始まっていることに注目)ことを確認してください。そして F12 を押してウェブコンソールを表示すると、上記 HTML 内の JavaScript コードが実行されて XX.XX.XX.XX:5984 の mydb データベースに関する情報が出力されていることを確認してください。ローカル環境から JavaScript でリモート環境の CouchDB サーバーのデータベースの情報を取得することができました!
2016031707


もしもここで以下のようなメッセージが表示されてしまう場合は、クロスサイトスクリプティングの制約にかかって、JavaScript が実行できなくなっている可能性が高いです。その場合はこのページの上部にある「CouchDB の Access-Control-Allow-Origin ヘッダを設定する」のリンク先に書かれている設定が足りない(または間違っている)ので、この内容を確認した上で再度試してみてください:
2016031708


以前のブログエントリで CouchDB サーバーの導入手順(というかビルド手順)を紹介しました:
CentOS に CouchDB をインストールする


上記の方法で自由に使うことのできる CouchDB サーバー1ノードが手元の環境に出来上がります。が、PouchDB などの JavaScript ライブラリを使ってこのサーバー上の DB を操作しようとすると、まだ手順が足りないこともあります。

具体的には、素のままの設定状態で JavaScript を使って CouchDB の REST API を実行しようとすると、クロスサイトスクリプティングのセキュリティ制約にかかってしまい、実行時にエラーを起こしてしまうのです。

クロスサイトスクリプティング制約を回避するには、(CouchDB の)HTTP サーバーに Access-Control-Allow-Origin ヘッダを付与して、明示的に制約を回避できるアクセス元を指定して回避する必要があります。その方法を紹介します。


まずは上記サイトを参照して CouchDB サーバー環境を用意します。以下の手順では上記方法で導入した CouchDB サーバー環境を利用するものとします。

次に /usr/local/etc/couchdb/local.ini をテキストエディタで開き、以下の内容を加えます(この例では Access-Control-Allow-Origin に * を設定して、事実上アクセス元の制約なしにアクセスできるような設定にしています):
  :
  :
[httpd]
port = 5984
bind_address = 0.0.0.0
enable_cors = true

[cors]
credentials = true
origins = *

  :
  :

この状態で CouchDB を再起動すると、CouchDB の REST API はどのサーバーからでもアクセスできるようになります。
# /etc/init.d/couchdb restart


実際に PouchDB を使って外部からのアクセスが可能であることを示すコードは別のエントリで用意する予定です。

CentOS に Apache CouchDB をインストールする手順を紹介します:
2016031602


Apache CouchDB はオープンソースのドキュメント指向 NoSQL データベースシステムです。元 IBM (元 Lotus!)のエンジニアである Damien Katz が Erlang 言語で開発したもので、IBM Bluemix から提供されている Cloudant のベースとなっているデータベースでもあります。

この Apache CouchDB をローカルの CentOS に導入する手順を紹介します。いつものように CentOS 6(64bit) を前提としますが、他のバージョンやアーキテクチャでもほぼ変わらないと思います。また導入する Apache CouchDB のバージョンは 2016/Mar/16 時点の最新版である 1.6.1 を対象とします。


今回は最新版を導入するということもあって、ソースコードからビルドして環境を構築します。というわけで、まずはビルドの前提となるライブラリ群や Erlang 言語関連のライブラリをまとめてインストールしておきます:
# yum install autoconf autoconf autoconf-archive automake ncurses-devel curl-devel erlang-asn1 erlang-erts erlang-eunit erlang-os_mon erlang-xmerl help2man js-devel libicu-devel libtool perl-Test-Harness


次に Erlang 言語本体をソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://www.erlang.org/download/otp_src_R14B01.tar.gz
# tar xzvf otp_src_R14B01.tar.gz
# cd otp_src_R14B01
# ./configure
# make
# make install


続けて JavaScript エンジンである Mozilla SpiderMonkey を、これもソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz
# tar xzvf mozjs17.0.0.tar.gz
# cd mozjs17.0.0/js/src/
# ./configure
# make
# make install


ここまでの準備ができたら Apache CouchDB を、やはりソースコードからビルド&インストールします:
# cd /usr/local/src
# wget http://mirror.tcpdiag.net/apache/couchdb/source/1.6.1/apache-couchdb-1.6.1.tar.gz
# tar xzvf apache-couchdb-1.6.1.tar.gz
# cd apache-couchdb-1.6.1
# ./configure
# make
# make install


これで Apache CouchDB 本体のインストールは完了です。実行前に CouchDB 実行用のユーザーを作成し、関連モジュールのオーナーをそのユーザーに変更します。またシステム起動時に CouchDB サーバーも起動するように設定しておきます:
# adduser --no-create-home couchdb
# chown -R couchdb:couchdb /usr/local/var/lib/couchdb /usr/local/var/log/couchdb /usr/local/var/run/couchdb
# ln -sf /usr/local/etc/rc.d/couchdb /etc/init.d/couchdb
# chkconfig --add couchdb
# chkconfig couchdb on

ここまでの作業でデータベースサーバーとして動くようになっていますが、HTTP プロトコルからも利用できるよう(REST API で読み書きできるよう)設定しておきます。/usr/local/etc/couchdb/local.ini を編集し、[httpd] セクション以下のコメントを解除して、以下のようにします(ポート番号 5984 で、自分自身のデータベースサーバーを読み書きできるように設定しています):
# vi /usr/local/etc/couchdb/local.ini

[httpd]
port = 5984
bind_address = 0.0.0.0


では CouchDB を実行します:
# /etc/init.d/couchdb start

この状態でウェブブラウザを使って(local.ini で指定した)5984 番ポートにアクセスすると、以下の様な JSON メッセージが表示され、バージョン 1.6.1 の CouchDB が稼働していることを確認できます:
2016031601


また同サーバーの /_utils/ パスにアクセスすると、ウェブコンソールの概要ページにアクセスできます。この画面からであればコマンドによる API を発行しなくても、ウェブの画面から新規にデータベースやドキュメントを追加したり、確認したりすることもできます:
2016031603







 

IBM Bluemix の "Cloundant" サービスを試しに使ってみました。


まず Cloudant について説明します。Cloudant は JSON ドキュメントデータベースである Apache CouchDB をベースとする DBaaS サービスを提供しているマサチューセッツ州の企業です(2014年3月にIBM による買収が発表されました)。

このサービスが Could Foundry ベースの PaaS である IBM Bluemix のサービスの1つとして提供されている、ということになります。利用する側の観点で言えば「IBM Bluemix 内で使える Apache CouchDB」ということになります。価格等は後述します。


では実際に IBM Bluemix から Cloudant サービスを使う手順を紹介します。IBM Bluemix にログインし、ダッシュボードなどの画面から "ADD SERVICE" をクリックします:
2014081601


サービス一覧の "Data Management" カテゴリの中に "Cloudant NoSQL DB" を見つけることができます。これをクリックします:
2014081602


"Cloundant NoSQL DB" の説明が表示されます。この時点で特定のアプリケーションサーバーに紐付けるのであれば APP からアプリケーションを選択します(試しに使うだけなら特定のアプリケーションへの紐付けは不要です)。そして "CREATE" ボタンをクリックすると Cloudant サービスが生成されます:
2014081603


ちなみに、上記画面の下の方までスクロールするとサービス価格についての説明があります。データ1GBあたり 105円(1ドル?)ですが、2GB までは無料枠内で使えるようです。加えて API の実行回数についても無料枠と有料枠が設定されているようです。今回は無料枠内でしか使わないつもりです:
2014081604


Cloudant サービスが生成されるとダッシュボード内にこのようなパネルが追加されているはずです。この "Show Credentials" と書かれた箇所をクリックすると、Cloudant サーバーへアクセスするための Credentials 情報が表示されます(下図参照):
2014081605


Credentials 情報を確認している画面です。username や password などもありますが、とりあえずすぐ使うので "url" をメモしておきましょう。そしてサービス名(下図だと "Cloudant NoSQL DB-9c")が書かれた箇所をクリックしてサーバーの情報を表示します:
2014081606


Cloudant サービスについても説明が表示されている画面です。この右上に "LAUNCH" と書かれたボタンがあり、ここをクリックしてサーバーコンソールに接続します:
2014081607


別ウィンドウが起動して、Clondant のサーバーコンソールが表示されている画面です。ここでデータベースや複製、アカウントなどの情報を参照したり、実際にドキュメントを読み書きできます。画面ではデータベースタブが選択されていますが、まだデータベースを作成していないので "Add database" ボタンをクリックして最初のデータベースを作成しておきます:
2014081608


データベース名を指定します。ここでは "dotnsfdb" と指定しています:
2014081608a


"dotnsfdb" が作成されたので、Database タブ内の画面が変わりました(まだデータはありません)。画面内の "Create your first document" ボタンをクリックして最初のドキュメントを作成しておきます:
2014081609


中身はこんな感じにしました。 "value" キーに "こんにちは、Cloudant" という日本語の値を追加して、"Save" ボタンをクリックします:
2014081611


保存されました。"Return _all_docs" ボタンで一覧画面に戻ります:
2014081612


dotnsfdb の一覧画面に戻りました。先程作成したドキュメントが表示されています。"_id" の値(この例では"c82b7fb996a83c0bdaead3f75bd44a34")を確認しておきます:
2014081613


このドキュメントを API 経由で呼び出してみます。Credentials 情報から取得した URL を使って、以下の URL にアクセスします:
 (https で始まる "url" の値)/(作成したデータベース名)/(_id の値)

"url" の値にはユーザー名とパスワードも含まれているはずなので、後はデータベース名と _id 値を指定して GET すれば、いま作成したドキュメントの値が取得できるはずです:
2014081615


当たり前ですが、ちゃんと CouchDB の API で目的のドキュメントの情報が取得できました。日本語情報も問題なさそうです。





 

このページのトップヘ