Noodlアプリに引数を渡す

概要

Noodlアプリを起動するときに引数を渡す方法を紹介します。
引数を渡せるようになると、Noodlアプリに対して様々な初期値で起動することができ。
例えば、お天気アプリを作った時に所在地を初期値として渡す。アプリのメッセージを多言語化するなどができるようになります。

サンプルアプリ

簡単なサンプルとして、URLの引数を変更することで、アプリのメッセージとフォントサイズを変更するデモを作っていきます。

　ノード設定・接続

早速始めましょう。まずはNoodlを起動し、「CreateNewProject」でプロジェクトを起動します。
起動直後のノードにJavascriptノードと、ApplicationEventsノードを追加しています。

ノードの役割

• Javascriptノード：URLから引数を取得するためのプログラムを記述します
• ApplicationEventsノード：Noodlアプリが起動したことをJavascriptに通知します

Javascriptノードの設定

次にJavascriptノードに下記コードをコピペします。
コードではURLの取得。文字列の分離(?と&）。配列取得。を行っています。

Javascriptノード

define({
	// The input ports of the Javascript node, name of input and type
	inputs:{
	    // ExampleInput:'number',
	    // Available types are 'number', 'string', 'boolean', 'color' and 'signal',
	    mySignal:'signal',
	},
	
	// The output ports of the Javascript node, name of output and type
	outputs:{
	    // ExampleOutput:'string',
	    text:'string',
	    size:'number'
	},
	
	// All signal inputs need their own function with the corresponding name that
	// will be run when a signal is received on the input.
	mySignal:function(inputs,outputs) {
	    var url   = location.href
        parameters    = url.split("?")
        params   = parameters[1].split("&")
        var paramsArray = []
        for ( it = 0; it < params.length; it++ ) {
            neet = params[it].split("=")
            paramsArray.push(neet[0])
            paramsArray[neet[0]] = neet[1]
        }
        outputs.text = paramsArray["text"]
        outputs.size = paramsArray["size"]
		// ...
	},
	
	// This function will be called when any of the inputs have changed
	change:function(inputs,outputs) {
		// ...
	}
})

ノードの接続

最後に各ノードを接続します。

• ApplicationEvents:start -> Javascript:mySignal
  としてアプリ起動時にJavascriptのmySignalが実行されるようにしています
• Javascript:text/size -> Text:text/size
  として、引数として受け取ったtext、sizeをTextノードに接続することで、メッセージを変更。文字サイズを変更しています

確認

これで完成です。実際にURLを叩いて、Noodlの簡易Webサーバから動作を確かめてみましょう。
ブラウザを立ち上げて、下記URLを入力します。

URLでの引数渡し

http://Noodlアドレス?引数1=値1&引数2=値2

確認用のURL

//引数を渡さないで起動する場合
http://localhost:8574/external/viewer/index.html

//引数を渡して起動する場合
http://localhost:8574/external/viewer/index.html?text=GoodBye&size=100

まとめ

サーバ上に置いたNoodlアプリは誰から開いてもおなじ初期値を持っていますが、
URL上から引数を渡すことで、任意の初期値を設定することに成功しました。