タグ：web

2023/11/06

nsf2dxl2web の挑戦（１）

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

ブログ更新が２か月ほど滞っておりました。いろいろなアプリ開発にいそしんでいたり、業務が忙しかったりもしたのですが、まあ言い訳はやめます。失礼しました。

で、その「いろいろなアプリ開発」の中の１つを何回かにわけて紹介したいと思います。もともと公開前提では作ってなかったのですが、友人の助言などから考えを変えて、とりあえずツールとしては近い将来に最初は招待制みたいな感じで（無料で）公開しようと思っています。

で、そのツールは名前を nsf2dxl2web（読み方は「えぬえすえふ・つー・でぃーえっくすえる・つー・うぇぶ」）です。正式名称ではないので公開時には変えるかもしれませんが、現在はこの名前でいくつもりです。この名称が用途を表しているともいえるのですが nsf2dxl2web は「ノーツデータベースのウェブ化」ツールの１つです。ただユースケースは限られていると思っています。

このシリーズの第一回目は紹介編と位置づけ、 nsf2dxl2web の持つ機能と、自分が考えているそのユースケースを紹介します。

【機能】
本当はまず開発背景を紹介したい気持ちもあるのですが、まずは nsf2dxl2web がどんなツールなのかを簡単に紹介します。以下のような機能と特徴を持ったツールです：

・指定したノーツデータベース (.nsf) をウェブ化する（ツール利用後は Domino サーバーは不要で、nginx などの HTTP サーバーで動きます）
・ノーツデータベースはウェブ用に作られている必要はない（実行時に HTTP タスク不要、というか Domino サーバー不要）。ノーツクライアント向けの UI をウェブで可能な限り再現することを目指しています
・対象ノーツデータベースの設計を理解している必要はない。標準データベースでも独自データベースでもノーツデータベースの設計内容から UI を再現します
・ウェブ化対象コンテンツはビュー／フォルダ一覧、全ビュー／フォルダ、ビュー／フォルダからリンクされた文書だけ（文書が参照するフォーム／サブフォーム／共有フィールドも対象、ページやアウトライン、ナビゲーター、エージェントなどは対象外）。オプションで検索エンジンによるコンテンツの検索が可能になる
・文書やフォーム内のリッチテキストは画像や添付ファイルを含めて再現される（添付ファイルはウェブ化後もダウンロード可）
・文書内の DB リンク、ビューリンク、文書リンクも再現される。リンク先が他 DB の場合、その DB も nsf2dxl2web でウェブ化されていれば各種リンクが有効になる
・UI はカスタマイズ可。文書の UI はウェブ化後のフォームの UI データをカスタマイズすることで全文書の UI が変わる
・ウェブ化されたコンテンツは ACL がなく、リードオンリーとなる

2023-11-06 の現時点で上記はすべて実現できています。ノーツのウェブ化ツールは数あれど、誰が作ったかもわからないような（作った人と連絡が取れなくなっているような）カスタムデータベースまでツール一発でウェブ化できるというのはかなり珍しいはず。

（上がノーツ、下がブラウザで同じビューの同じ文書を見ている様子です。以下同様）

またノーツの超便利な機能といえるリッチテキストは可能な限り再現することを心掛けています。テーブルやタブ、セクション、フォントなどの情報はもちろん、画像（添付されていたり、イメージリソースだったり、画像データのコピペだったり、・・）や添付ファイルも再現します。添付ファイルはクリックすればダウンロードできる形で表示されます：

DB リンクやビューリンク、文書リンクも再現され、リンク先が同じデータベース内である必要はありません（ただし外部データベースの場合、そのリンク先のデータベースも nsf2dxl2web でウェブ化されている必要があります）：

ただし「ノーツをウェブで完全に再現するツール」ではありません。この辺りは↓の背景で補足します。自分の思いが含まれていて長いので（笑）、背景に興味はなく単に使ってみたいという人は読み飛ばしてください。

【背景】
そもそも何故この nsf2dxl2web を作ろうと思い立ったのか？　理由は１つだけではないのですが、最も大きな理由を紹介します。

まず私自身が元ノーツの製品開発者として働いていた時期があり、ノーツはその設計思想含めて非常に素晴らしい製品であると思っています（今もです）。

そして様々な理由でノーツデータベースは「塩漬け」と呼ばれるような運用形態になることがあります。ノーツからウェブに移行したいけど技術的なものも含めた様々な理由からあきらめるか、膨大な移行コストを覚悟する必要が生じてしまい、「それならやっぱりノーツで」と判断されるケースです。といっても引き続き有効活用されるというよりは「過去のデータ資産を捨てるという決断ができない」ために仕方なく使い続けるような形態です（この状態を「塩漬け」と呼んでいます）。これは利用者にとっても残念ですが、以前ノーツを提供する立場にあった自分としても非常に残念な運用形態です。積極的に使いたいわけではないのに移行できないから、参照のためだけであってもノーツを使い続けなければならない、というのは誰もが不幸な状態であって、そのような状態を解決できないだろうか、とずっと考えていたのでした。

このような背景の中で nsf2dxl2web を設計しています。つまりこれが nsf2dxl2web の設計思想の１つです。このような背景があるため、上述の機能一覧の最後に記述されている「ウェブ化されたコンテンツは ACL がなく、リードオンリーとなる」があります。今でもノーツを使って業務で新規に文書データを作ったり、編集したりしてる人に向けたウェブアプリケーション化ツールではありません。そのようなケースの場合は（今でもノーツの機能を使っている場合は）私自身はノーツを使い続けることが正しいと考えています。

【パフォーマンス】
ノーツの .nsf ファイル（データベースファイル）を nsf2dxl2web ツールを使ってウェブで（HTTP サーバーで）参照できるようになるまでに必要な時間は従来の方法と比べて劇的に改善されていると思っています。数字は私の手元にあるノーツのメールデータベース（文書数＝約 75,000 、ファイルサイズ＝約 12 GB）を私が使っている Windows 11 PC （AMD Ryzen 5 Pro 6650U + 16GB メモリ）で変換した場合の参考速度だと思ってほしいのですが、約４時間弱でした（作った私の感覚ですが、このツールに関して GPU は高速化にあまり役立ってないかも）。これは文書数が多いことに加えて設計自体がかなり複雑なデータベースでしたが、それでも４時間あればなんとかなる、ということです。ここまで文書数が多くなく、1000 程度の普通（？）の独自設計ノーツデータベースであれば変換に必要な時間は軒並み一瞬でした。

我ながらかなりの高パフォーマンスが実現できていると思います。12 GB のノーツデータベースの設計なんて調べるのも嫌なレベル（苦笑）だと思っていますし、そんなノーツデータベースのビューなんて何も考えずに <table> などでウェブ化したら、ビューを開こうにも（ブラウザが） out of memory エラーを多発することになるはずです。それをコマンドを数回実行して４時間待つだけ、でウェブ移行できるならかなり楽ですよね。

【カスタマイズ】
残念ながらすべてのノーツデータベースのすべての文書でフォーム定義された通りの UI を完全再現することはできていません。最大の理由は式言語やスクリプトといったマクロでカスタマイズされているケースが多く、例えば画面内に表示される値がマクロの実行結果に依存していると（このツールはマクロの実行エンジンを再現しているわけではないので）、ツールで変換しただけでは表示結果が期待通りにならないことがあります。

ノーツ標準のディスカッションテンプレートから作ったデータベースの例。上がノーツで下が nsf2dxl2web で変換後。式言語を使った複雑なフォーム定義を完全に変換することができず、表示が乱れてしまっています：

このような標準ツールだけでは UI が乱れてしまうケースのためにカスタマイズを可能にしています。nsf2dxl2web ではノーツの（サブフォームや共有フィールドを含む）フォームに相当する設計ファイルを設計から自動生成し、文書データを表示する際には、その文書が表示用に使っていたフォームの設計ファイルを参照して文書 UI を動的に生成します（具体的にな仕組みには XML と XSL を使っているのですが、そのあたりはまたいずれ詳しく・・）。なので、フォームの XSL をカスタマイズすることでそのフォームを使う全文書の見栄えをまとめて変更することができるようにしています。この辺りはノーツの設計思想を残しつつウェブ移行していて、これによってカスタマイズ作業そのものを容易にできています（ノーツ標準のメール、ディスカッション、ドミノディレクトリーのカスタマイズサンプルを提供します）：

nsf2dxl2web が標準で提供するサンプルを適用してカスタマイズすると↑のように表示の乱れを修正することができるようになります。自分があまり UI が得意でないこともあって、実際の業務データベースをウェブ移行する際にはこの「カスタマイズ」が必要になるケースもあるのではないかと思っていますが、この辺りを（有償サービスのような形で）支援していただけるような人に使っていただけないかと考えています。ただその場合であってもゼロから移行支援するのではなく、ある程度動くようになっている状態での UI カスタマイズになるので、作業量を減らすことはできるのではないかと考えています。

【ユースケース】
想定ユーザーというか「想定利用シーン」として、「ノーツデータベースをノーツの機能としては使っていないのにデータのウェブ移行ができなくて困っている」というユースケースを想定しています。そのようなケースであればほぼカスタマイズ不要（見栄えを変更したい場合にカスタマイズが必要になるかも）でウェブ化できます。ノーツデータベースをファイルサーバーとして利用しているようなケースであればピッタリだと思っていますが、そのようなケースがどのくらいあるのかは正直よくわかってないです。

逆に「ノーツをノーツとして使っているんだけど、ライセンスのコストを下げたいからウェブ化したい」というケースにはあまり当てはまらないと思っています。このツールでウェブ化したノーツデータベースは参照可能になりますが、新規作成や既存データの編集はできなくなります。繰り返しになりますが、このようなケースは個人的にはノーツを使い続けるべきケースだと思っています。

というわけで、そんなツールを現在進行形で作っています。このブログエントリのタイトルにもありますが、これは自分のプログラマーとしての「（色々な意味での）挑戦」の意味合いが強いものだと思っています。　とはいえ夢物語を語っているつもりはなく、スクリーンショットがあるように一応稼働できる状態には開発できています。次回は nsf2dxl2web がノーツデータベースをウェブ化する上での仕組みについて紹介する予定です。

（続きはこちらです）
nsf2web2dxl の挑戦（１）
nsf2web2dxl の挑戦（２）
nsf2web2dxl の挑戦（３）
nsf2web2dxl の挑戦（４）
nsf2web2dxl の挑戦（５）

タグ：: #nsf; #dxl; #web; #nsf2dxl2web

2018/10/04

HTML5 の Web Audio API を使ってマイクから入力した音声データを可視化する

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

楽器苦手なオッサンエンジニアの Web Audio API 勉強シリーズ（！？）、前回はマイクから入力した音声をオーディオバッファ・インスタンスに変換して再生するコードを紹介しました。今回は前回作成したコードを改良して、音声データを折れ線グラフで可視化することに調整してみました。

作成したコードはこんな感じです。前回のものからの差分を紫で示しています：

<html>
<head>
<title>Audio Buffer Chart</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

window.onload = function(){
}

var processor = null;
var num = 0;
var duration = 0.0;
var length = 0;
var sampleRate = 0;
var floatData = null;
function handleSuccess( stream ){
  var source = context.createBufferSource();
  var input = context.createMediaStreamSource( stream );
  processor = context.createScriptProcessor( 1024, 1, 1 );
  
  //window.dotnsf_hack_for_mozzila = input;
  input.connect( processor );
  processor.onaudioprocess = function( e ){
    //. 音声データ
    var inputdata = e.inputBuffer.getChannelData(0);
    //console.log( inputdata );

    if( !num ){
      num = e.inputBuffer.numberOfChannels;
      floatData = new Array(num);
      for( var i = 0; i < num; i ++ ){
        floatData[i] = [];
      }
      sampleRate = e.inputBuffer.sampleRate;
    }
    
    var float32Array = e.inputBuffer.getChannelData( 0 );
    if( availableData( float32Array ) ){
      duration += e.inputBuffer.duration;
      length += e.inputBuffer.length;
      for( var i = 0; i < num ; i ++ ){
        float32Array = e.inputBuffer.getChannelData( i );
        Array.prototype.push.apply( floatData[i], float32Array );
      }
    }
  };
  processor.connect( context.destination );
}

function startRec(){
  $('#recBtn').css( 'display', 'none' );
  $('#stopBtn').css( 'display', 'block' );

  navigator.mediaDevices.getUserMedia( { audio: true } ).then( handleSuccess );
}

function stopRec(){
  $('#recBtn').css( 'display', 'block' );
  $('#stopBtn').css( 'display', 'none' );

  if( processor ){
    processor.disconnect();
    processor.onaudioprocess = null;
    processor = null;
    
    var audioBuffer = context.createBuffer( num, length, sampleRate );
    for( var i = 0; i < num; i ++ ){
      audioBuffer.getChannelData( i ).set( floatData[i] );
    }
    
    console.log( audioBuffer ); //. これを再生する
    
    var source = context.createBufferSource();

    source.buffer = audioBuffer;           //. オーディオデータの実体（AudioBuffer インスタンス）
    source.loop = false;                   //. ループ再生するか？
    source.loopStart = 0;                  //. オーディオ開始位置（秒単位）
    source.loopEnd = audioBuffer.duration; //. オーディオ終了位置（秒単位）
    source.playbackRate.value = 1.0;       //. 再生速度＆ピッチ

    source.connect( context.destination );

    //. for lagacy browsers
    source.start( 0 );
    source.onended = function( event ){
      //. イベントハンドラ削除
      source.onended = null;
      document.onkeydown = null;
      num = 0;
      duration = 0.0;
      length = 0;

      //. オーディオ終了
      source.stop( 0 );

      console.log( 'audio stopped.' );
    };
    
    //. floatData[] （の先頭の一部）をグラフ描画する
    var dotnum = 1024;
    var ctx = document.getElementById( 'myChart' ).getContext( '2d' );
    var labels = [];
    var datasets = [];
    var colors = [ "rgba( 255, 0, 0, 0.4 )", "rgba( 0, 0, 255, 0.4 )" ];
    for( var i = 0; i < dotnum; i ++ ){
      labels.push( "" + ( i + 1 ) );
    }
    for( var i = 0; i < num; i ++ ){
      datasets.push({
        label: "data " + i,
        data: floatData[i].slice(1024,1024+dotnum),
        backgroundColor: colors[i%2]
      });
    }
    
    var myChart = new Chart( ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: datasets
      }
    });
  }
}

function availableData( arr ){
  var b = false;
  for( var i = 0; i < arr.length && !b; i ++ ){
    b = ( arr[i] != 0 );
  }
  
  return b;
}
</script>
</head>
<body>
  <div id="page">
    <div>
      <h2>オーディオバッファ視覚化</h2>
      <input type="button" id="recBtn" value="Rec" onClick="startRec();" style="display:block;"/>
      <input type="button" id="stopBtn" value="Stop" onClick="stopRec();" style="display:none;"/>
    </div>
    <div>
      <canvas id="myChart"></canvas>
    </div>
  </div>
</body>
</html>

本当は再生する音声データ全てを折れ線グラフとして表示できるとよかったのですが、数10万～数100万個の配列データを扱うことになり、処理がかなり重くなる（見栄えもつまりすぎて折れ線に見えなくなる）ことがわかったので、上記では全データの 1024 個目から 500 個だけ取り出して折れ線グラフにするようなコードにしています（後述のように、このくらいだとかろうじて折れ線に見えます）。

変更点としてはまず HTML ボディ内に折れ線グラフを表示するための canvas 要素を記述しています。そしてこの canvas の中に Chart.js を使って折れ線グラフを描いていきます。今回は Chart.js の CDN を使ってロードしています。

今回の例ではマイクから入力した音声データ（波形データ）は floatData[] 配列に格納しています。入力がモノラルの場合は floatData[0] に、ステレオの場合は floatData[0] （左）と floatData[1] （右）に、それぞれ波形データが配列で格納されます。この中身を折れ線表示すればよいことになります。

※マイクからの入力であれば、このように波形データをあらかじめ配列に格納させておくことができますが、オーディオファイルを再生させる場合であればオーディオバッファ・インスタンスを取得してから
　　audioBuffer.getChannelData( n ); ※ n: 0 または 1
を実行することで同じ配列を取り出すことができます。

このコードを実行して、マイクから音声入力するとこんな感じで音声が折れ線グラフ表示されます（以下はモノラルの例）：

最初はチンプンカンプンでしたが、だんだんオーディオバッファの中身がわかってきました。 v(^o^)

タグ：: #html5; #web; #audio; #api; #chart; #chart.js

2018/10/01

HTML5 の Web Audio API を使ってマイクから入力した音声データを再生する

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

勉強中の HTML5 Web Audio API の備忘録を兼ねたブログエントリ記事です。前回はローカルシステム上のオーディオファイルを File API で読み取った上でオーディオバッファに変換して Audio API で再生する、というオーディオ出力処理に挑戦しました。今回は逆にオーディオ入力処理を扱ってみました。具体的にはマイクから入力した音声データをオーディオバッファに変換する処理を調べてみました（コードではオーディオバッファに変換した上で前回同様にそのまま再生させています）。

とりあえず完成形の HTML ファイルは以下のとおりです。「とりあえず」と書いたのは現時点では環境によって動いたり動かなかったりする挙動が見られて、まだ不安定版といった感じな所が理由です。手元の Windows 10 の FireFox および Chrome では動作しましたが Ubuntu 16.04 の FireFox だとエラーになりました：

<html>
<head>
<title>Voice Replay</title>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

var processor = null;
var num = 0;
var duration = 0.0;
var length = 0;
var sampleRate = 0;
var floatData = null;
function handleSuccess( stream ){
  var source = context.createBufferSource();
  var input = context.createMediaStreamSource( stream );
  processor = context.createScriptProcessor( 1024, 1, 1 );
  
  input.connect( processor );
  processor.onaudioprocess = function( e ){
    //. 音声データ
    var inputdata = e.inputBuffer.getChannelData(0);
    //console.log( inputdata );

    if( !num ){
      num = e.inputBuffer.numberOfChannels;
      floatData = new Array(num);
      for( var i = 0; i < num; i ++ ){
        floatData[i] = [];
      }
      sampleRate = e.inputBuffer.sampleRate;
    }
    
    var float32Array = e.inputBuffer.getChannelData( 0 );
    if( availableData( float32Array ) ){
      duration += e.inputBuffer.duration;
      length += e.inputBuffer.length;
      for( var i = 0; i < num ; i ++ ){
        float32Array = e.inputBuffer.getChannelData( i );
        Array.prototype.push.apply( floatData[i], float32Array );
      }
    }
  };
  processor.connect( context.destination );
}

function startRec(){
  $('#recBtn').css( 'display', 'none' );
  $('#stopBtn').css( 'display', 'block' );

  navigator.mediaDevices.getUserMedia( { audio: true } ).then( handleSuccess );
}

function stopRec(){
  $('#recBtn').css( 'display', 'block' );
  $('#stopBtn').css( 'display', 'none' );

  if( processor ){
    processor.disconnect();
    processor.onaudioprocess = null;
    processor = null;
    
    var audioBuffer = context.createBuffer( num, length, sampleRate );
    for( var i = 0; i < num; i ++ ){
      audioBuffer.getChannelData( i ).set( floatData[i] );
    }
    
    console.log( audioBuffer ); //. これを再生する
    
    var source = context.createBufferSource();

    source.buffer = audioBuffer;           //. オーディオデータの実体（AudioBuffer インスタンス）
    source.loop = false;                   //. ループ再生するか？
    source.loopStart = 0;                  //. オーディオ開始位置（秒単位）
    source.loopEnd = audioBuffer.duration; //. オーディオ終了位置（秒単位）
    source.playbackRate.value = 1.0;       //. 再生速度＆ピッチ

    source.connect( context.destination );

    //. for lagacy browsers
    source.start( 0 );
    source.onended = function( event ){
      //. イベントハンドラ削除
      source.onended = null;
      document.onkeydown = null;
      num = 0;
      duration = 0.0;
      length = 0;

      //. オーディオ終了
      source.stop( 0 );

      console.log( 'audio stopped.' );
    };
  }
}

function availableData( arr ){
  var b = false;
  for( var i = 0; i < arr.length && !b; i ++ ){
    b = ( arr[i] != 0 );
  }
  
  return b;
}
</script>
</head>
<body>
  <div id="page">
    <div>
      <h2>音声再生</h2>
      <input type="button" id="recBtn" value="Rec" onClick="startRec();" style="display:block;"/>
      <input type="button" id="stopBtn" value="Stop" onClick="stopRec();" style="display:none;"/>
    </div>
  </div>
</body>
</html>

動かし方としてはこの HTML をファイルに保存し、ウェブブラウザで開きます。サーバー上になくても構いません（ローカルファイルとして開く場合は Ctrl+O でファイルを選択します）。開くと "Rec" と書かれたボタンが１つ表示されるシンプルな画面が表示されます：
2018093001

この "Rec" ボタンが「録音」ボタンです。このボタンをクリックすると JavaScript の Audio API にマイクの利用を許可するかどうか聞かれるので、「許可」を選択してください：

この時に実行されるコードが以下です。ボタン表示を切り替えると同時に HTML5 Audio API の getUserMedia() を実行してマイクにアクセスします。Web Audio API でマイクを使う時のスタート地点がここになります：

      :
function startRec(){
  $('#recBtn').css( 'display', 'none' );
  $('#stopBtn').css( 'display', 'block' );

  navigator.mediaDevices.getUserMedia( { audio: true } ).then( handleSuccess );
}
      :

マイクへのアクセスが成功するとボタンの表示が "Rec" から "Stop" に切り替わり、同時に録音モードになります。コンピュータの標準マイクを使って、周りの音の録音が開始されます。またマイクへのアクセス成功時に handleSuccess 関数がコールバック実行され、マイクに入力されたストリーミングデータが引数として渡されます。ここでは onaudioprocess イベントをハンドリングしてチャンネル毎のサンプリングデータを floatData 配列に格納しています。この例ではサンプリングデータを 1024 個ずつ送られてくるようにしていて「その中身が全て 0 ではない（無音データではない）」という確認をした上で配列の最後に追加して、後でまとめて再生できるようにしています：

      :
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

var processor = null;
var num = 0;
var duration = 0.0;
var length = 0;
var sampleRate = 0;
var floatData = null;
function handleSuccess( stream ){
  var source = context.createBufferSource();
  var input = context.createMediaStreamSource( stream );
  processor = context.createScriptProcessor( 1024, 1, 1 );
  
  input.connect( processor );
  processor.onaudioprocess = function( e ){
    //. 音声データ
    var inputdata = e.inputBuffer.getChannelData(0);
    //console.log( inputdata );

    if( !num ){
      num = e.inputBuffer.numberOfChannels;
      floatData = new Array(num);
      for( var i = 0; i < num; i ++ ){
        floatData[i] = [];
      }
      sampleRate = e.inputBuffer.sampleRate;
    }
    
    var float32Array = e.inputBuffer.getChannelData( 0 );
    if( availableData( float32Array ) ){
      duration += e.inputBuffer.duration;
      length += e.inputBuffer.length;
      for( var i = 0; i < num ; i ++ ){
        float32Array = e.inputBuffer.getChannelData( i );
        Array.prototype.push.apply( floatData[i], float32Array );
      }
    }
  };
  processor.connect( context.destination );
}
      :

このタイミングでもう一度 "Stop" をクリックすると録音を終了します：
2018093003

"Stop" をクリックすると同時にこれまでに配列に集めてきたサンプリングデータをオーディオバッファ・インスタンスに変換します。オーディオバッファ側になれば前回紹介したのと同様の方法で再生できるので、マイクに入力した音声がそのままオウム返しのように再生されます：

function stopRec(){
  $('#recBtn').css( 'display', 'block' );
  $('#stopBtn').css( 'display', 'none' );

  if( processor ){
    processor.disconnect();
    processor.onaudioprocess = null;
    processor = null;
    
    var audioBuffer = context.createBuffer( num, length, sampleRate );
    for( var i = 0; i < num; i ++ ){
      audioBuffer.getChannelData( i ).set( floatData[i] );
    }
    
    console.log( audioBuffer ); //. これを再生する
    
    var source = context.createBufferSource();

    source.buffer = audioBuffer;           //. オーディオデータの実体（AudioBuffer インスタンス）
    source.loop = false;                   //. ループ再生するか？
    source.loopStart = 0;                  //. オーディオ開始位置（秒単位）
    source.loopEnd = audioBuffer.duration; //. オーディオ終了位置（秒単位）
    source.playbackRate.value = 1.0;       //. 再生速度＆ピッチ

    source.connect( context.destination );

    //. for lagacy browsers
    source.start( 0 );
    source.onended = function( event ){
      //. イベントハンドラ削除
      source.onended = null;
      document.onkeydown = null;
      num = 0;
      duration = 0.0;
      length = 0;

      //. オーディオ終了
      source.stop( 0 );

      console.log( 'audio stopped.' );
    };
  }
}

いくつかの環境ではこれで録音→再生できることを確認していますが、エラーになる環境もあります。手元で試した限りでは Windows10 の Firefox & Chrome は大丈夫そうで、Ubuntu 16.04 の FireFox はダメそうでした。この辺りはまだよくわかっていないのですが、動く環境があるということは根本的な考え方が間違っていることはないと思っています。

前回のと合わせて、これで音声データをマイクから入力したり、スピーカーから出力したり、という基本的な I/O 部分を取り扱うレベルのものは作れました。次はサンプリングデータ（波形データ）の中身をもう少し深掘りしてみたいと思ってます。

タグ：: #javascript; #html5; #web; #audio; #api; #audiobuffer

2017/08/15

Node.js に JSON Web Token でアクセス制御を行う

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

Node.js のアプリケーションで、以下のような処理を実装してみました：
　- 認証（ログイン）用の API には誰でもアクセスできる
　- 認証 API では ID とパスワードを与えて認証し、正しいユーザーにはトークンを発行する
　- 認証以外の主な API はこの発行されたトークンを使ってアクセスした時だけ実行を許可する
　- API 呼び出し時にトークンがなかったり、正しくなかった場合は実行せずにエラー

この仕組を実現するために JSON Web Tokens （以下 "JWT"）を使いました：
https://jwt.io/

JWT はオープンかつ Node.js ではスタンダードなトークンベースの認証ライブラリです。以下で紹介するサンプルでは Web フレームワークである Express や、POST データを扱う body-parser も合わせて使うので、まとめてインストールしておきます：

$ npm install express body-parser jsonwebtoken

これらのライブラリを使って以下のようなアプリケーションを作成します：

//. app.js

var express = require( 'express' );
var app = express();
var bodyParser = require( 'body-parser' );
var jwt = require( 'jsonwebtoken' );

//. アプリケーションサーバーの稼働ポート番号
var port = process.env.PORT || 8080

//. 任意のシークレット文字列を登録
app.set( 'superSecret', 'welovenodejs' );  //. 任意の文字列

app.use( bodyParser.urlencoded( { extended: false } ) );
app.use( bodyParser.json() );

//. ユーザー情報（本来は DB などに格納された情報を使う）
var users = [
  { name: 'user0', password: 'pass0', admin: true },
  { name: 'user1', password: 'pass1', admin: false },
  { name: 'user2', password: 'pass2', admin: false },
  { name: 'user3', password: 'pass3', admin: false }
];

//. ドキュメントルートへの GET は許可
app.get( '/', function( req, res ){
  res.send( 'Hello. The API is at http://localhost:' + port + '/api' );
});

//. API ROUTES
var apiRoutes = express.Router();

//. トークンなしでアクセスを許可する API を先に定義する

//. POST(http://localhost:8080/api/authenticate)
apiRoutes.post( '/authenticate', function( req, res ){
  for( var i = 0; i < users.length; i ++ ){
    if( users[i].name == req.body.name && users[i].password == req.body.password ){
      //. 認証したユーザーの情報を使ってトークンを生成
      var token= jwt.sign( users[i], app.get( 'superSecret' ), {
        expiresIn: '24h'
      });
      res.json( { success: true, message: 'Authentication successfully finished.', token: token } );
      return;
    }
  }

  res.json( { success: false, message: 'Authentication failed.' } );
  return;
});

//. ここより上で定義した API には認証フィルタはかけていない（そのまま使える）

//. 認証フィルタ
apiRoutes.use( function( req, res, next ){
  //. ポスト本体、URLパラメータ、HTTPヘッダいずれかにトークンがセットされているか調べる
  var token = req.body.token || req.query.token || req.headers['x-access-token'];
  if( !token ){
    //. トークンが設定されていなかった場合は無条件に 403 エラー
    return res.status(403).send( { success: false, message: 'No token provided.' } );
  }

  //. 設定されていたトークンの値の正当性を確認
  jwt.verify( token, app.get( 'superSecret' ), function( err, decoded ){
    if( err ){
      //. 正当な値ではなかった場合はエラーメッセージを返す
      return res.json( { success: false, message: 'Invalid token.' } );
    }

    //. 正当な値が設定されていた場合は処理を続ける
    req.decoded = decoded;
    next();
  });
});

//. 以下はトークンがないと使えない API

//. GET(http://localhost:8080/api/)
apiRoutes.get( '/', function( req, res ){
  res.json( { message: 'Welcome to API routing.' } );
});

//. GET(http://localhost:8080/api/users)
apiRoutes.get( '/users', function( req, res ){
  res.json( users );
});

//. /api 以下に API をルーティング
app.use( '/api', apiRoutes );


app.listen( port );
console.log( 'server started http://localhost:' + port + '/' );

肝になるのはルーティングに認証フィルタを定義している箇所です。ここよりも前（上）で定義した内容には認証フィルタは有効にならないので、認証なしで使える API となります（つまり GET / と POST /authenticate は認証していなくても使えます）。

この POST /api/authenticate API でポストデータ user, password を受取り、その値が変数 users の中で定義されているいずれかの組み合わせと一致していれば 24H 有効なトークンが発行されます（これを以下の API 実行時にパラメータ指定します）。

一方、ここよりも後（下）で定義する内容には認証フィルタが有効になり、GET /api と GET /api/users は上記方法で取得したトークンがパラメータに設定されていないと正しく処理されない API となります。

実際にこのアプリケーションを実行し（$ node app）、curl コマンドで挙動を確認してみましょう。まずは問題なく実行できるはずの GET / を実行します：

$ curl -XGET 'http://localhost:8080/'
Hello. The API is at http://localhost:8080/api

問題なく実行できました。次は認証フィルタをかけた GET /api を実行してみます：

$ curl -XGET 'http://localhost:8080/api'
{"success":false,"message":"No token provided."}

API を実行した結果、「トークンがない」時のエラーメッセージが表示されました。ここも期待通りに動いています（試しませんが、ユーザー一覧を取得する GET /api/users も同様のエラーになります）。

では POST /api/authenticate で認証してトークンを取得してみますが最初はわざとパスワードを間違えてみます：

$ curl -XPOST -H 'Content-Type:application/json' 'http://localhost:8080/api/authenticate' -d '{"name":"user1","password":"pass0"}'
{"success":false,"message":"Authentication failed."}

先程同様にエラーになりましたが、エラーメッセージが「認証失敗」に変わりました。では改めて正しいパスワードを指定して実行してみます：

$ curl -XPOST -H 'Content-Type:application/json' 'http://localhost:8080/api/authenticate' -d '{"name":"user1","password":"pass1"}'
{"success":true,"message":"Authentication successfully finished.","token":"XXXXXX...XXXXXX"}

今度は認証が成功しました。レスポンスにも "token" が含まれています。最後にここで返ってきた token の値を指定して、先程アクセスできなかった GET /api を実行してみます：

$ curl -XGET 'http://localhost:8080/api?token=XXXXXX...XXXXXX'
{"message":"Welcome to API routing."}

今度は API が実行できました。同様にして GET /api/users も実行できるはずです：

$ curl -XGET 'http://localhost:8080/api/users?token=XXXXXX...XXXXXX'
[{"name":"user0","password":"pass0","admin":true},{"name":"user1","password":"pass1","admin":false},{"name":"user2","password":"pass2","admin":false},{"name":"user3","password":"pass3","admin":false}]

こんな感じで API の実行可否をトークンで制御できるようになりました。

今回の例ではソースコード内に静的に用意されたユーザー一覧を使って認証を行いましたが、実際の運用ではデータベース内に定義されたテーブル情報などを使うことになると思います。ただ JWT の基本的な考え方はこの１つのソースファイルだけで実現できているので、応用しやすいと思っています。

タグ：: #nodejs; #json; #web; #token; #jwt; #authentication

2017/08/14

Hyperledger Composer で定義したビジネスネットワークを Web API 化する

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

以前のブログエントリの中で Hyperledger Composer を使うことでブロックチェーンのビジネスネットワークを比較的簡単な定義で動かすことができることを紹介しました：
Hyperledger Composer フレームワークを使ってみる

↑ここで紹介したように Hyperledger Fabric v1.0 と Hyperledger Composer を使うことで、"asset" と呼ばれる取扱データ、"participant" と呼ばれるユーザー、 "transaction" と呼ばれる実行処理、そして "ACL" と呼ばれるアクセス権管理を定義してブロックチェーン環境に簡単にデプロイすることができるようになります。

この方法でデプロイしたブロックチェーンネットワークを外部のプログラムから使う方法も何通りかあるのですが、今回はその中から「Composer の内容を Web API 化」して、外部からは HTTP(S) を使った REST API として使えるように公開する方法を紹介します。以下の手順を実際に試す場合はローカル環境内に Hyperledger Fabric v1.0 および Hyperledger Composer がインストールされている必要があります。その手順は以下を参照して、ローカル環境で Hyperledger Composer が使える状態を作っておいてください：
Hyperledger Composer フレームワークをインストールする

また、実際に REST API として公開する内容のビジネスネットワークを定義した .bna ファイルが必要です。今回は以下のページで紹介されている方法に従って my-network.bna ファイルを作り、それを使うことにします（以下に日本語で解説します）：
Developer Tutorial for creating a Hyperledger Composer solution

ではビジネスネットワークの定義ファイルを用意するまでの手順を紹介します。今回は github.com に公開されているサンプルをベースにクローンして用意します。

まず、上記リンク先の手順に従って Hyperledger Fabric v1.0 および Hyperledger Composer が導入された環境を用意して、両方のサービスを有効にします。

次に同環境にログインし、作業ディレクトリ（以下の例では ~/work）を作って、サンプルプロジェクトを git clone します：

$ mkdir ~/work　（作業ディレクトリ）
$ cd ~/work
$ git clone https://github.com/hyperledger/composer-sample-networks.git

このサンプルプロジェクト内の basic-sample-network の内容を my-network という名前でコピーします：

$ cp -r ./composer-sample-networks/packages/basic-sample-network/  ./my-network

my-network プロジェクトの package.json ファイルを変更します。変更内容は name と prepublish 内のプロジェクト名を "my-network" にすることと、description の内容を変えることです：

    :
  "name": "my-network",
  "version": "0.1.6",
  "description": "My Commodity Trading network",
  "networkImage": "https://hyperledger.github.io/composer-sample-networks/packages/basic-sample-network/networkimage.svg",
  "networkImageanimated": "https://hyperledger.github.io/composer-sample-networks/packages/basic-sample-network/networkimageanimated.svg",
  "scripts": {
    "prepublish": "mkdirp ./dist && composer archive create --sourceType dir --sourceName . -a ./dist/my-network.bna",
    "pretest": "npm run lint",
    :

そして実際のビジネスネットワークの内容を書き換えます。定義する内容は上記ブログエントリの中で紹介したものと同じ定義をこのプロジェクト内にも作成することにします。というわけでまずは models/sample.cto ファイルを開き、以下の内容に書き換えて保存します：

/**
 * My commodity trading network
 */
namespace org.acme.mynetwork
asset Commodity identified by tradingSymbol {
    o String tradingSymbol
    o String description
    o String mainExchange
    o Double quantity
    --> Trader owner
}
participant Trader identified by tradeId {
    o String tradeId
    o String firstName
    o String lastName
}
transaction Trade {
    --> Commodity commodity
    --> Trader newOwner
}

↑ Commodity という asset と、Trader という participant と、Trade という transaction を定義しています。

同様にして lib/sample.js ファイルを開き、以下の内容に書き換えます：

/*
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Track the trade of a commodity from one trader to another
 * @param {org.acme.mynetwork.Trade} trade - the trade to be processed
 * @transaction
 */
function tradeCommodity(trade) {
    trade.commodity.owner = trade.newOwner;
    return getAssetRegistry('org.acme.mynetwork.Commodity')
        .then(function (assetRegistry) {
            return assetRegistry.update(trade.commodity);
        });
}

↑tradeCommodity という処理を定義しています。

そして同様にして permissions.acl ファイルも以下の内容に書き換えます：

/**
 * Access control rules for mynetwork
 */
rule Default {
    description: "Allow all participants access to all resources"
    participant: "ANY"
    operation: ALL
    resource: "org.acme.mynetwork.*"
    action: ALLOW
}

rule SystemACL {
  description:  "System ACL to permit all access"
  participant: "org.hyperledger.composer.system.Participant"
  operation: ALL
  resource: "org.hyperledger.composer.system.**"
  action: ALLOW
}

↑デフォルトで全参加者にリソースへのアクセス権を与えるという内容です。

ではここまでに定義した models/sample.cto, lib/sample.js, permissions.acl の内容でビジネスネットワークをビルドします：

$ cd ~/work/my-network
$ npm install

このコマンドが成功すると、 my-network/dist フォルダ内に my-network.bna ファイルが生成されます。このファイルと Hyperledger Composer を使って Hyperledger Fabric v1.0 に同ビジネスネットワークをデプロイします：

$ cd dist
$ composer network deploy -a my-network.bna -p hlfv1 -i PeerAdmin -s randomString

デプロイが成功しているかどうかは以下の ping コマンドで確認できます：

$ composer network ping -n my-network -p hlfv1 -i admin -s adminpw

ここまでの作業でビジネスネットワークを定義し、Hyperledger Fabric v1.0 上にデプロイすることができました。最後にこのビジネスネットワークを Web API 化して HTTP クライアントから REST でアクセスできるようにします。　そのためには composer-rest-server というツールを使います。composer-rest-server は npm を使ってインストールします：

$ sudo npm install -g composer-rest-server

composer-rest-server の使い方は REST API 化したい Hyperledger Composer プロジェクト上でコマンド実行するだけです：

$ cd ~/work/my-network
$ composer-rest-server

すると Hyperledger-Composer ロゴが現れ、知る人ぞ知る Strongloop loopback のようなインターフェースでのプロパティ指定画面になります：

質問内容に以下のように答えます：
　Fabric Connection Profile Name: hlfv1
　Business Network Identifier: my-network
　Fabric username: admin
　secret: adminpw
　namespaces: never use namespaces
　（ここから下はデフォルトのまま）
　REST API to be secured: No
　event publication over WebSockets: Yes
　TLS security: No

すると上記画面のように http://（IPアドレス）:3000/explorer と表示されます。ウェブブラウザでこの URL にアクセスすると、（これも知る人ぞ知る StrongLoop Loopback のような）定義したビジネスネットワークに REST API でアクセスするための Open API ドキュメントが表示されます：