Noodlアプリに引数を渡す #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上から引数を渡すことで、任意の初期値を設定することに成功しました。