【トップページ画面】
ショップのトップページです。タイトル下の部分はスクロール式のバナーになっています。

解説

起動直後画面

　Noodlで文字を表示するには「Textノード」を使用します。文字をジワ～っと表示させる仕組みとしてTextノードのOpacityを動的に設定しています。Opacityとは”透明度”です。設定値が0に近づくにつれて透明になります。
　Opacityの初期値を0とし、ページが表示されたらカウントを開始して50msごとにOpacityを0.1インクリメントするようにしています。
　フローは次のようになっています。

　フローの中にTimer Counterというノードがありますが、これは自作コンポーネントです。中身は次のようなフローになっています。Noodlのテクニック「無限タイマー」を利用しています。

　javascriptノードでは無限タイマーの出力をトリガにしてカウントをしています。
コードは次のようになっています。

define({
    inputs: {
        trig: "boolean",
        inc:"number"
    },
    outputs: {
        stop:"boolean",
        count:"number"
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {
        outputs.count = 0;
    },
    run: function(inputs, outputs, changedInputs) {
        if(inputs.trig === true)
        {
            if(outputs.count > 1){
                outputs.stop = true;
            }
            else
            {
                outputs.count += inputs.inc;
            }
        }
    }
});

トップページ画面

　この画面では次の5種類の要素で構成されています。

• お店の名前
• バナー
• SNS
• 別ページ遷移ボタン
• 背景

お店の名前

　この部分は起動直後画面のフローをコピペして利用し、テキストの配置を変えました。フローは次のようになっています。
　「Stack Layoutノード」で縦並びから横並びに変えています。

バナー

　Webサイトによくある横スクロール式のバナーです。今回は「クリスマスフェアー」と「12月のオススメ」コンテンツを要しました。


　フローは次のようになっています。「Scroll Viewノード」でスライドして表示するコンテンツを変えることができます。コンテンツは自作コンポーネントbannerの中に構築しました。今回は画像を表示させています。

SNS

　お店のSNSへのリンクに画像アイコンを用意しました。　

　画像はインスタグラムとTwitterの公式サイトで配布しているものを利用しました。フローは次のようになっています。今回はリンクを実装していません。

別ページ遷移ボタン

　メニューや予約ページに遷移するためのボタンを用意してみました。　

　フローは次のようになっています。今回はページ遷移を用意していませんが「Page Navigationノード」を使うとページ遷移ができます。

背景

　背景には動画を利用しています。後ろで料理中の動画が流れています。

　フローは次のようになっています。動画表示は「Videoノード」で行っています。このVideoノードもOpacityを調整してあまり強調しないようにしています。
　

おわりに

　それっぽい画面は作れても、自分以外のユーザに使ってもらうこと考えたら「見やすさ」「操作のしやすさ」「店側が伝えたいことがユーザへ的確に伝わるか」など考えることが沢山あると感じました。

　ショップ名の「Noodl」はオシャレにしたかったので様々な文字フォントを試しました。この文字フォントを探すだけで1時間くらいかかっています(笑)バナーのクリスマスフェアーに使っている文字フォントも特殊なものです。