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

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

Node-RED Advent Calendar 2017 に参加しました(ちなみにアドベントカレンダーに参加するのは初めて)! 12月9日のネタは「Node-RED で(普通の)ウェブアプリケーションを作る」です。

Node-RED を早くから活用している方の多くは IoT 連携であったり、組み込み機械との連携のデータフローとして使っているケースが多いと思っています。でもそんなケースばかりではなく、自分自身は Node-RED でデータベースを読み書きする REST API だけを作ったり、その REST API を呼び出すフロントエンドまでも含めて Node-RED で作ることがあります。今日はその作り方をスクリーンショットを交えて紹介します。


【普通のウェブアプリケーション】
最初に、今回作成する「(普通の)ウェブアプリケーション」を定義します。ここでの「ウェブアプリケーション」とは「アプリケーションサーバーとデータベースサーバーから構成」されていて、「アプリケーションサーバーのユーザー画面を通じて、データの保存、読み込み、検索、・・といった処理ができる」ものとします:
2017111702


これを Node-RED で作ります。具体的にはアプリケーションサーバー部分を Node-RED として、外部のデータベースサーバーに対する読み書きを行う API を Node-RED 上に定義します。そしてそれらの API を使う UI となる HTML も Node-RED で作ることで、ウェブアプリケーションとしての機能を実現します。なお今回はデータベースサーバーに IBM Cloudant を使い、全ての機能を IBM Cloud 上に作成することにします:
2017111901


【環境準備】
というわけで、まず Node-RED を用意します。Node-RED 環境が既に手元にある方は読み飛ばしていただいてもいいのですが、この後 IBM Cloudant を利用するので IBM Cloud のアカウントを取得し、IBM Cloudant のサービスインスタンスを用意するようにしてください(まあそこまでやるなら Node-RED も IBM Cloud で作っちゃうのがいいと思います)。

Node-RED はローカルで作ってしまってもいいと思いますが、このあとデータベース連携を行うので、(IBM Bluemix 改め)IBM Cloud の Node-RED 環境を使うことにします。無料のライトプランで契約している場合は Internet of Things Platform Starter ボイラープレートからランタイムを作成してください:
2017111701


ランタイムが稼働するまでしばらく待ちます。このボイラープレートから作成すると Node-RED の(Node.js の)ランタイムに加えて、Cloudant データベースのサービスインスタンスも同時に使えるようになります:
2017111701


実際に Node-RED を使おうとすると、初回のみアクセス用の ID とパスワードの設定を求められます。推測しにくいものを指定して、設定してください:
2017111702


改めて作成したアプリケーションの URL を指定し、Node-RED の画面になったら "Go to your Node-RED flow editor" をクリックしてフローエディタ画面に移動します(この際に認証が求められるので、直前に設定した ID とパスワードを指定します):
2017111703


Node-RED フローエディタ画面が表示されました。IBM Cloud 環境では画面左のパレットリスト内にデータベースや IBM Watson など初めから多くのサービスノードが有効になっているのが便利です(この後実際に使います):
2017111704


なお、Node-RED 環境をローカルで(IBM Cloud を使わずに)用意した場合は別途データベースを用意する必要があります。以下では IBM Cloudant を使う前提で紹介するので、IBM Cloud から Cloudant サービスをインスタンス化してください:
2017112101


【API を作成】
ではここから「普通のウェブアプリケーション」を作っていきます。改めて今回作成するウェブアプリケーションの構成を確認しておきます:
2017111901


今回のアプリケーションでは Node-RED 上に用意する HTML 内のフォームで入力した値を Cloudant に格納し、また格納済みの値を Cloudant から取り出して一覧表示できるようにします。 ということは、今回作成する必要があるのは以下の3つです:
 (1) ユーザー画面の HTML ページ
 (2) (1) 画面で入力した値を Cloudant に保存する API
 (3) (2) で保存した値を Cloudant から一括で取り出す API

この (2) と (3) を最初に作ることにします。

最初に (2) の格納用 API を作ることにします。機能としては((1) で用意する)ユーザー画面で指定した値を受け取ってデータベース(IBM Cloudant)に格納する API です。なので、このような仕様の REST API を作ります:
メソッドパスデータ挙動
POST/myrecordCloudant に保存するデータ(JSON)送信したデータを Cloudant データベースに保存


ではこの API を Node-RED で作ります。Node-RED のキャンバスをクリアします(初期状態で何か配置されているものは全て消します(マウスで選んで DELETE キー))。そして、以下のように3つのノードを配置&接続します:
2017112102


一番左は HTTP Request ノードです(パレット上では "http" と表示されていて、右側だけにジョイントが設定されています)。このノードをダブルクリックして、以下のような属性を指定し、POST /myrecord として動くようにします。最後に「完了」をクリックします:
2017112103


水色のノードは IBM Cloudant out ノードです("cloudant" と表示され、左側にだけジョイントが設置されているものです)。HTTP Request ノードの payload の値を受け取って、そのまま IBM Cloudant に格納する、という目的のノードです。IBM Cloud のボイラープレートから Node-RED 環境を作成した場合はこの部分は自動的にバインド先のサービス名が代入されるはずなので特に変更は不要です。格納先のデータベース名は属性として指定する必要があるので、ダブルクリックしてデータベース名を指定します(以下の例では mydb という名前のデータベースを指定しています)。また msg.payload 内の値だけを格納してほしいので、"Only store msg.payload object?" にチェックを入れておきます:
2017112104


なお、IBM Cloud のボイラープレートを使わずに、IBM Cloudant のインスタンスを別途作った場合は、ここで IBM Cloudant に接続するための username や password も指定する必要があります。


右下にあるのは HTTP Response ノードです。HTTP Request とペアで設定する必要があります。HTTP Request ノードからは IBM Cloudant ノードと HTTP Response ノードに分岐しています。この結果この POST API では HTTP Request ノードに送信されたデータがそのまま HTTP Response として返されると同時に、同じ値が IBM Cloudant の指定データベース(mydb)内に格納される、という挙動になります。ここまでの設定で下のような見た目になります。これだけで (2) のデータ保存用 REST API が出来てしまいました。簡単ですね:
2017112105



では続けて (3) の、データベースから保存されている全レコードを取り出す REST API も追加します。(2) で格納したデータを全て取り出せるように、以下のような API を定義します:
メソッドパスデータ挙動
GET/myrecords(なし)Cloudant データベースから全データを取り出して JSON 配列で返す


先程と同様に、キャンバスに以下のように3つのノードを配置して接続します:
2017112106



一番左は HTTP Request ノードです。このノードをダブルクリックして、以下のような属性を指定し、GET /myrecords として動くようにします:
2017112107


真ん中にあるのは IBM Cloudant in ノードです("cloudant" と表示され、左右両方にジョイントが設置されているものです)。HTTP Request に対して、IBM Cloudant の指定データベースから全レコードを取り出して返すようにするため、ダブルクリックして以下のように属性を指定します(以下の例では mydb という名前のデータベースから全データを取り出す指定をしています):
2017112108


右側にあるのが HTTP Response ノードです。直前の IBM Cloudant in ノードで取得した値を HTTP レスポンスの結果として返します。これで (3) の REST API も完成です:
2017112101


【HTML を作成】
では最後にここまでに作った API を呼び出して使う HTML ページ(利用者向けページ)を作ります。最終的にはそれなりに凝ったものを作りますが、とりあえずは (2) の API の挙動を確認するためのページを作ってみます。キャンバスに以下のように3つのノードを配置して接続します:
2017112102


一番左は HTTP Request ノードです。このノードをダブルクリックして、以下のような属性を指定し、GET /home として動くように(ブラウザから /home にアクセスした時に以下の HTML が表示されるように)します:
2017112103


真ん中は template ノードです。ノードをダブルクリックして以下の HTML 構文を入力します:
2017112104


(テンプレートの入力内容)
<form method="post" action="/myrecord">
Country:<input type="text" name="country" value=""/><br/>
Capital:<input type="text" name="capital" value=""/><br/>
<input type="submit" value="Submit"/>
</form>

↑ country (国名)と capital (首都)を指定して送信ボタンをクリックすると POST /myrecord を呼び出して保存する、という HTML です。


ここまでの作業で3本のフローができました。この状態で右上の「デプロイ」をクリックしてデプロイします:
2017112101


【動作確認】
まずデータを作成する前に IBM Cloud のダッシュボードから、IBM Cloudant のサービスインスタンスを選び、"LAUNCH" ボタンから Cloudant のダッシュボード画面を表示します:
2017112101


IBM Cloudant のダッシュボード画面の左ペインの上から2番目のデータベースアイコンを選択し、現在の Cloudant データベースの一覧を確認します(nodered というデータベースが1つだけ存在していて、この時点では mydb データベースも、その中身のドキュメントも存在していません):
2017112102


ではデータを格納する前に、格納先である mydb データベースを作っておきます。画面右上の "Create Database" をクリックします:
2017112106


データベース作成のダイアログが表示されるので、作成するデータベースの名前(今回の場合は "mydb")を指定して "Create" ボタンをクリックします:
2017112107


すると mydb データベースが作成され、同時に画面は mydb データベースを表示するページに切り替わります(現時点では1つもドキュメントは入っていないので何も表示されません)。元のデータベース一覧に戻るにはデータベース一覧アイコンを再度クリックするか、画面左上の mydb の左にある "<" 印をクリックします:
2017112108


データベース一覧画面に戻りました。今度は nodered データベースに加えて、mydb データベースが追加されていること(そしてドキュメント数がゼロになっていること)が確認できます:
2017112109



改めて先程作成した HTML ページにウェブブラウザでアクセスします。上記では /home というパスに GET リクエストした際に表示される HTML を定義したので、ウェブブラウザで https://(Node-RED のサーバー名)/home にアクセスして、以下のような画面が表示されることを確認します:
2017112103


この Country に国名、Capital にその国の首都を入力して Submit ボタンをクリックします。たとえばこんな感じで:
2017112104


Submit ボタンをクリックすると(実際には POST /myrecord が実行されて)アドレスのパスが /myrecord に変わります。そして画面には POST /myrecord のフローで最後に定義した HTTP Response ノードから結果(送信データを同じもの)が返されます:
2017112105


同時にこのデータは Cloudant out ノードによって Cloudant の mydb データベースに格納されています。Cloudant のデータベース一覧ページをリロードすると、先程まで文書数がゼロだった mydb データベースに1件データが格納されていることが確認できます:
2017112104


具体的なデータの内容を確認するために mydb データベースを選択して中身を見てみましょう。All Documents を Table 状態で確認すると、一件のドキュメントが格納されていて、その capital は Tokyo、country は Japan となっていることが確認できます。期待通りにデータ保存 API が動いていることが確認できました:
2017112102


次にデータ一覧取得 API の挙動を確認します。その前に同様の手順を繰り返して、もう何件かデータを格納しておきます:
2017112103


とりあえず、以下のような5件のデータが入っている状態にしました。このデータを (3) の API で取り出します:
2017112105


ウェブブラウザのアドレス欄に https://(Node-RED のサーバー名)/myrecords と入力してアクセスします。すると (3) で作成した API が実行され、その結果が返ります。以下のように mydb データベース内の5件のドキュメントレコードが JSON 配列になって返されることが確認できます:
2017112106


API が正しく動くことを確認できたので、改めて HTML の見た目を改良します。(1) の(GET /home のフローの) template ノードの属性にて、HTML の内容を以下のように変更して、デプロイします:
<html>
<head>
<title>Countries & Capitals</title>
<script src='//code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(function(){
  $('#myform').submit( function(){
    $.ajax({
      type: 'POST',
      url: '/myrecord',
      data: { country: $('#country').val(), capital: $('#capital').val() },
      success: function( data ){
        console.log( data );
        setTimeout( 'list()', 1000 );
      },
      error: function(){
        console.log( 'error' );
      }
    });
    return false;
  });
  list();
});
function list(){
  $('#list').html( '' );
  $.ajax({
    type: 'GET',
    url: '/myrecords',
    success: function( data ){
      if( data && data.length > 0 ){
        for( var i = 0; i < data.length; i ++ ){
          var doc = data[i];
          var tr = '<tr><td>' + doc.country + '</td><td>' + doc.capital + '</td></tr>';
          $('#list').append( tr );
        }
      }
    },
    error: function(){
      console.log( 'error' );
    }
  });
}
</script>
</head>
<body>
  <table border='1'>
  <thead>
  <tr><th>Country</th><th>Capital</th><tr>
  </thead>
  <tbody id='list'>
  </tbody>
</table>
<hr/>

<form method='POST' id='myform'>
  Country: <input type='text' id='country' name='country' value=''/><br/>
  Capital: <input type='text' id='capital' name="capital" value=''/><br/>
  <input type='submit' value='click'/>
</form>
</body>
</html>

具体的には jQuery で AJAX を使ってシングルページの中でデータの追加と一覧表示ができるようにしています。/home にアクセスしてロードすると、まず現在のデータベース内のレコード一覧が表示され、新しいデータを POST すると一覧が同一ページ内で更新されます:
2017112101


※完成形の Node-RED フロー定義をこちらに用意しました。クリップボード経由で読み込むことで再現できると思います:
https://raw.githubusercontent.com/dotnsf/samples/master/nodered_webapp.json




以前に PHP で同様のコードを作ったことがあった(知る人ぞ知る)のですが、訳あって Node.js で動かしたくなって移植に挑戦しました。

2017120600


Amazon の Product Advertising API はどちらかというと「AWS ではない Amazon の API」で、エンジニアには馴染みのない人がいるかもしれませんが、アフィリエイトのための商品情報を集める場合に使う API です。こちらで紹介している方法を使うなどして、事前にアクセスキーとアクセスシークレットを取得した上で利用します:
http://dotnsf.blog.jp/archives/1064227473.html


ここで取得したアクセスキーとアクセスシークレットを(7、8行目に)使い、以下のような Node.js コード(amazon.js)を作りました:
//. amazon.js
var crypto = require( 'crypto' );
var request = require( 'request' );
var urlencode = require( 'urlencode' );
var xml2js = require( 'xml2js' );

var aws_key = 'aws_key'; //. アクセスキー
var aws_secret = 'aws_secret'; //. アクセスシークレット

var node = '52905051'; //. スキンケアのカテゴリコード


var request_url = 'http://ecs.amazonaws.jp/onca/xml?';
var local_dt = new Date();
var dt = local_dt.toISOString();  //. GMT timestamp

//. パラメータ
var params = 'AWSAccessKeyId=' + aws_key + '&BrowseNode=' + node;
params += ( '&MaximumPrice=1000&MinimumPrice=1&Operation=ItemSearch&ResponseGroup=ItemAttributes%2CSmall%2CImages&SearchIndex=Beauty&Service=AWSECommerceService&Timestamp=' + urlencode( dt ) + '&Version=2009-01-06' );

//. 署名
var str = 'GET\necs.amazonaws.jp\n/onca/xml\n' + params;
var hash = crypto.createHmac( 'sha256', aws_secret );
hash.update( str );
var hashed_str = hash.digest( 'base64' );

request_url += ( params + '&Signature=' + urlencode( hashed_str ) );

var options = { url: request_url, headers: { 'Host': 'ecs.amazonaws.jp' }, method: 'GET' };

request( options, ( err, res, body ) => {
  if( err ){
    console.log( 'error: ' );
    console.log( err );
  }else{
    //. XML で送られてくる結果を JSON 化して解析
    xml2js.parseString( body, ( err0, xml ) => {
      if( err0 ){
        console.log( err0 );
      }else{
        if( xml && xml.ItemSearchResponse && xml.ItemSearchResponse.Items ){
          var Items = xml.ItemSearchResponse.Items[0];

          var totalpages = Items.TotalPages[0];
          for( var idx = 0; idx < Items.Item.length; idx ++ ){
            var Item = Items.Item[idx];

            var image_url = '', manufacturer = '', brand = '', title = '', listprice = '', ean = '', asin = '';

            try{
              image_url = Item.MediumImage[0].URL[0];
            }catch( e ){
            }
            try{
              manufacturer = Item.ItemAttributes[0].Manufacturer[0];
            }catch( e ){
            }
            try{
              brand = Item.ItemAttributes[0].Brand[0];
            }catch( e ){
            }
            try{
              title = Item.ItemAttributes[0].Title[0];
            }catch( e ){
            }
            try{
              listprice = Item.ItemAttributes[0].ListPrice[0].Amount[0];
            }catch( e ){
            }
            try{
              ean = Item.ItemAttributes[0].EAN[0];
            }catch( e ){
            }
            try{
              asin = Item.ASIN[0];
            }catch( e ){
            }

            if( listprice == '' ){
              listprice = 0;
            }

            console.log( 'ean = ' + ean + ', title = ' + title + ', image_url = ' + image_url + ', manufacturer = ' + manufacturer + ', brand = ' + brand + ', listprice = ' + listprice + ', asin = ' + asin );
          }
        }
      }
    });
  }
});

10行目に検索する商品のカテゴリーブラウズノードを指定します。上記のデフォルト状態では「スキンケア製品」を意味する '52905051' が指定されていますが、変更することもできます。その場合は以下のサイトからブラウズノード一覧をダウンロード&参照し、希望のカテゴリーのノード番号に書き換えて使ってください:
https://affiliate.amazon.co.jp/help/topic/t100


コードの内容はカテゴリや価格帯(今回の例では1円以上1000円未満)を含めた URL に署名付きのパラメータを付けてアクセスし、XML で取得した結果を JSON に変換して取り出す、というシンプルなものです。署名の方法について Node.js でのサンプルがなかったので、別の言語向けに書かれたものを移植して作ってみました。なお、この API では1回の実行で条件を満たす商品を最大10個同時に取得できます。今回のコードでは指定したカテゴリーの商品を10個だけ取得するようになっています(ページング非対応です)。

このコード(amazon.js)を node コマンドで実行すると、以下のように指定したカテゴリーの商品情報を取得して表示します:
$ node amazon.js

ean = 3253581244760, title = ロクシタン(L'OCCITANE) ボンメールソープ ヴァーベナ 100g, image_url = https://images-fe.ssl-images-amazon.com/images/I/41QyQaO75HL._SL160_.jpg, manufacturer = ロクシタンジャポン, brand = ロクシタン(L'OCCITANE), listprice = 864, asin = B00AJFBDKM
ean = 3253581244777, title = ロクシタン(L'OCCITANE) ボンメールソープ ラベンダー 100g, image_url = https://images-fe.ssl-images-amazon.com/images/I/412BXX-d86L._SL160_.jpg, manufacturer = ロクシタンジャポン, brand = ロクシタン(L'OCCITANE), listprice = 864, asin = B00BMW80M0
  :
  :

今回紹介した Amazon Product Advertising API は(特にアフィリエイトサイトの管理を自動化する場合などに)非常に有用なのですが、サイトトップによると「セルフサービスでのご利用を前提としており、Amazon での技術的なサポートは現在行っておりません」とのことです。ハードル高め:
2017120601


自分は「ねっぴ」(http://neppi.co/)の運用を通じて 2014 年くらいから本格的に使っていて、最新情報を追いかけながらとかいうわけではないのですが、ノウハウなども分かってきた所もあるので、こういった場を通じて(今回みたいな形で)少しずつコミュニティに還元できればと思っています。


jQuery を使って HTML の iframe の内側コンテンツを、iframe の外側の JavaScript からスクロールさせる方法を紹介します。

今回は2つの HTML ファイル(main.html と sub.html)を使います。main.html が iframe の外側(というか、iframe を記述する側)のファイルで、main.html の中の iframe に sub.html が指定されて埋め込まれて表示される、という関係だと想定します。sub.html はどんな内容でも構いませんが、強制スクロールさせて表示することを想定しているので、それなりに縦長の、普通に見ても縦スクロールさせないと全体が見えないくらいの大きさのページを使ってください:
2017113001

一方、iframe の外側である main.html が今回の主役で、main.html 内の JavaScript で sub.html をスクロールさせて表示させることが今回の目的です。実現するためには以下のような内容で記述します:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(function(){
  $('#sub').load( function(){
    iframe_scroll( 100 );
  });
});

function iframe_scroll( top ){
  //. 「0.8 秒で 100 ピクセルスクロールし、0.2 秒待つ」を繰り返す
  $('body,html', $('#sub').contents() ).animate( {scrollTop: top}, 800, 'swing' );
  setTimetout( iframe_scroll, 1000, top + 100 );
}
</script>
<title>main</title>
</head>
<body>
<h1>main</h1>
<hr/>
<iframe id="sub" src="./sub.html" width="90%" height="50%"></iframe>
</body>
</html>

jQuery を使って、まず sub.html がロードされた直後に( $('#sub').load() 関数内で)iframe_scroll 関数を実行しています。この関数では iframe 要素のコンテンツを取り出し、animate 関数を使ってスクロールさせています。この例では 0.8 秒かけて 100 ピクセル下にスクロールし、0.2 秒(1000 ミリ秒 - 800 ミリ秒)止まって繰り返す、という例を実装しています。

なお、sub.html をローカルで用意する代わりに外部コンテンツ(http://www.xxx.com/xxxxx.html など)を指定した場合、iframe 内に表示はされますが、クロスドメイン制約にかかって iframe 内の要素にアクセスすることができず、スクロールは行われません。ご注意ください。


このページのトップヘ