スマートフォン向けSPAの画面遷移機能

こんにちは。

なぞってピグキッチン
のフロントエンドを担当しているgoohtaniです。

今回、なぞってピグキッチンで使われている機能の一つであるComposition/Componentについて紹介させて頂きます。

どのような機能か？

Composition/Componentは、ネイティブアプリによくみられる画面遷移をサポートする機能です。
例えば、iPhoneの設定アプリではユーザ操作に応じて以下のように画面が遷移します。

これと同等の画面遷移機能を提供するのがComposition/Componentです。

CompositionとComponentの役割

CompositionとComponentは和訳すると
Composition : 組み立てられたもの、構成物、合成物、混合物
Component : 構成要素、成分
という意味になります。

これをふまえて、Composition/Component機能でそれぞれは
Composition : Component群をまとめるもの、またComponent間の連携を担うもの
Component : Compositionの構成要素
な立場にあります。

図にすると以下のようになります。

iPhoneの設定アプリに当てはめて考えると、

となります。
Compositon : 設定アプリ本体
Component : 設定アプリ内の各ページ
考えるとわかりやすいかと思います。

なぞってピグキッチンでは、各モジュールは一つのCompositionと複数のComponentで作られるパターンが多く、クエストモジュールは以下の様な作りになっています。

作成例

簡単にですが、Composition/Componentの作成例を示します。

// CompositionとComponentのコンストラクタを用意
var CompositionView = require('quest/view/composition');
var ComponentFirstView = require('quest/view/first');
var ComponentSecondView = require('quest/view/second');
var ComponentThirdView = require('quest/view/third');

// CM(CompositionとComponentをまとめる作業を行うオブジェクト)
CM.create(
    'quest'// 生成された構造体名を指定
    CompositionView,// Compositionを指定
    [ComponentFirstView, ComponentSecondView, ComponentThirdView]// Componentを順に指定
);

これで構造体が作成されます。

操作方法

次に作成した構造体を操作してみます。

// ①開く(画面内に表示させる)
CM.open('quest');

// ②FirstからSecondへ画面遷移
CM.move('quest', 'second');

// ③SecondからThirdへ画面遷移
CM.move('quest', 'third');

// ④履歴を一つ戻る
CM.back('quest');

// ⑤閉じる
CM.close();

このように、Component間の遷移が可能になっています。

Component間遷移中のタイミング

また、Componentは遷移中の様々なタイミングをキャッチすることが可能になっています。

onBeforeMoveIn - 自身(=Component)が画面内に遷移する直前
onEndMoveIn - 自身が画面内に遷移した直後
onBeforeMoveOut - 自身が画面外に遷移する直前
onEndMoveOut - 自身が画面外に遷移した直後

これにより、
「遷移前後にローディングを表示する」
「遷移後に非同期処理を実行し、完了時に○○する」
といったことが容易に行えるようになります。

さいごに

機能の紹介だけで終わってしまいましたが、
是非、なぞってピグキッチンをプレイして頂ければと思います。