2016/03

2016/03/18

PouchDB と JavaScript でリモートの CouchDB をローカルから操作する

コメント数:
0 コメント
by dotnsf

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

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

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

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

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

CentOS に CouchDB をインストールする

CouchDB の Access-Control-Allow-Origin ヘッダを設定する

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

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

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

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

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

次にダウンロードした 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 データベースの情報を表示する、という内容の処理が記述されています：

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

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

タグ：: #pouchdb; #couchdb; #javascript

2016/03/17

CouchDB の Access-Control-Allow-Origin ヘッダを設定する

コメント数:
0 コメント
by dotnsf

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

上記の方法で自由に使うことのできる CouchDB サーバー１ノードが手元の環境に出来上がります。が、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 を使って外部からのアクセスが可能であることを示すコードは別のエントリで用意する予定です。

タグ：: #couchdb; #pouchdb; #javascript

2016/03/16

CentOS に CouchDB をインストールする

コメント数:
0 コメント
by dotnsf

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

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 が稼働していることを確認できます：

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

タグ：: #erlang; #centos; #couchdb

2016/03/08

Qiita の情報を RSS で取得する

コメント数:
0 コメント
by dotnsf

特定の技術カテゴリの文書（特に日本語文書）をまとめて探したい場合、いくつかの方法が考えられます。ただ最近は Qiita が人気で、ここからタグを使って
　　https://qiita.com/tags/（技術タグ名）
にアクセスする、といった方法が考えられます。

例えば Qiita 内の "Bluemix" の日本語技術文書を探すのであれば、
　　https://qiita.com/tags/bluemix
といった具合です：

さて、これらの文書をまとめて（API 的に）取得したい、となった場合はどうしましょう？　よくある方法としては RSS で取得する、という方法が考えられますが、では Qiita のタグ一覧ページを RSS で取得するにはどうすればいいのでしょうか？　これが今日のお題です。

答は簡単で、URL の最後に /feed.atom を付けるだけです：
　　https://qiita.com/tags/（技術タグ名）/feed.atom

"Bluemix" 記事を対象にするのであれば、こんな感じになります：
　　http://qiita.com/tags/bluemix/feed.atom

Qiita の記事をタグを指定して RSS リーダーで読む、といった場合でも使えるワザだと思いますが、記述文書を API 的に収集する、という用途でも便利な方法だと思いました。

タグ：: #qiita; #rss; #feed

2016/03/06

FireFox と HTML5 で音声入力

コメント数:
1 コメント
by dotnsf

JavaScript(HTML5) の機能だけで、PC に付属したマイクから音声を入力（つまり PC の前で喋った音声データを取り込む）してみました。なお、この機能を使うには UserMedia に対応したブラウザが必要です。以下のコードは Windows 版の FireFox で動作確認をしています。

サンプルのコードはこんな感じになります：

<html>
<head>
<title>HTML5 Audio</title>
<script type="text/javascript"> 
//. ブラウザによる差異を吸収
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
 
//. バッファサイズ等
var audioContext = new AudioContext();
var bufferSize = 4096;
var cnt = 0;
 
//. 音声処理
function onAudioProcess( e ){
  //. 取得した音声データ
  var input = e.inputBuffer.getChannelData(0);

  //. ↑この input に音声データが入っているので、これをストリーミングなどで処理すればよい。
  //. 以下は実際にデータが入っていることを確認するためのサンプル処理

  //. 音声データの最大・最小値を求める
  var mx = 0, mn = 0;
  for( var i = 0; i < bufferSize; i ++ ){
    if( mx < input[i] ){
      mx = input[i];
    }
    if( mn > input[i] ){
      mn = input[i];
    }
  }

  //. 一度に取得した音声データの最大・最小値を求める（特に意味は無いが、データが取得できている確認）
  cnt ++;
  console.log( "[" + cnt + "] min = " + mn + ", max = " + mx );
}
 
//. 音声処理開始
function initialize(){
  navigator.getUserMedia(
    { audio: true },
    function( stream ){
      //. 音声処理
      var javascriptnode = audioContext.createScriptProcessor( bufferSize, 1, 1 );
      var mediastreamsource = audioContext.createMediaStreamSource( stream );
      window.dotnsf_hack_for_mozzila = mediastreamsource;  //. https://support.mozilla.org/en-US/questions/984179
      mediastreamsource.connect( javascriptnode );
      javascriptnode.onaudioprocess = onAudioProcess;
      javascriptnode.connect( audioContext.destination );
    },function( e ){
      console.log( e );
    }
  );
}
</script>
</head>
<body onload="initialize()">
</body>
</html>

余談ですが、上記コードの赤字部分は今回一番迷った所。どうも FireFox のバグらしく、取得したメディアストリームがいつの間にか消えて（音声入力処理が止まって）しまう、という現象に遭遇しました。そのバグを回避するため、無理やり取得した値をグローバル変数化して消えないようにしています。バグの詳細についてはこちら：
https://support.mozilla.org/en-US/questions/984179

この HTML をマイク入力を ON にした状態で対象ブラウザで開くと、「PC のマイクをこのアプリと共有しますか？」という確認メッセージが表示されます。ここで「共有」を選択してください：
2016030301