JavaScript (HTML5): Tupai.js 導入

Tupai.js とは

AngularJS や Backbone.js などのような MV* フレームワークで、HTML 更新無しでシームレスな遷移を行うウェブアプリ(シングル HTML でマルチページ)を実現することができます。

公式サイト
http://tupaijs.com

 

Tupai.js のインストール

$ [sudo] npm install tupaijs -g

まずインストールの確認。バージョン確認は --version オプションを使用します。

$ tupaijs --version
0.1

ヘルプ表示は --help オプション。

$ tupaijs --help
  Usage: tupaijs [options] [command]

  Commands:

    server [options]      
    configs [options]     
    template [options] <input> <outputDir> <packageName>
    templates [options] <inputDir> <outputDir> [packageName]
    merge [options]       
    check [options]       
    list [options]        
    compress [options] [file]
    new [options] <name>  
    make [debug|release|clean]
    generate [options] <controller|view|template|endpoint> <name>
    g [options] <controller|view|template|endpoint> <name>

  Options:

    -h, --help     output usage information
    -V, --version  output the version number

 

Tupai.js プロジェクトの作成

$ tupaijs new helloworld

tupaijs new プロジェクト名で生成。

helloworld
└── helloworld
    ├── README.md
    ├── configs
    │   ├── api_manager.json
    │   ├── cache_manager.json
    │   └── routes.json
    ├── package.json
    ├── src
    │   ├── README.md
    │   └── helloworld
    │       ├── ResponseDelegate.js
    │       └── RootViewController.js
    ├── templates
    │   ├── README.md
    │   └── helloworld
    │       └── Templates.html
    ├── tests
    │   └── README.md
    ├── tupai.conf.json
    └── web
        ├── app.js
        ├── css
        │   └── base.css
        ├── index.html
        └── js
            ├── README.md
            └── tupai.min.js

 

Tupai.js でサーバーを実行

http://localhost:9800 で実行を確認できます。

$ cd helloworld
$ tupaijs server

 

Tupai.js プロジェクトの設定ファイル

設定ファイルは tupai.conf.json にまとまっています。

{
    "name": "helloworld",
    "version": "0.0.1",
    "package": "helloworld",
    "server": {
        "proxies": {
            "/search": "http://api.host:8080/search",
            "/api2": "http://api.host:8080/"
        },
        "routers": {
            "/src/*": "./src/{0}",
            "/*.json": {
                "path": "./testdatas/{0}.json",
                "template": true
            }
        },
        "port": 9800
    }
}

 

Tupai.js プロジェクトにページを追加する

1. ページの生成

generate オプションでクラスを追加できます。
コントローラーを追加するには generate の後に controller と記述し、名称を小文字で入力します。

$ tupaijs generate controller sub
    create src/helloworld/SubViewController.js
    modify templates/helloworld/Templates.html add template helloworld.SubViewController.content
    modify configs/routes.json add helloworld.SubViewController

コントローラー用の JavaScript ファイルと、表示される HTML の Templates.html と、遷移を制御する routes.json に SubViewController が追加されます。

2. テンプレートの修正

Root から Sub へリンクを追加する作業を行います。

HTML: templates/helloworld/Templates.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="/css/base.css">
<title>Demo</title>
</head>
<body>

<div data-ch-template="helloworld.RootViewController.content">
    <div data-ch-name="lbl"></div>
</div>

<div data-ch-template="helloworld.SubViewController.content">
    <div data-ch-name="lbl"></div>
</div>

<!-- __templates_body__ -->
</body>
</html>

helloworld.RootViewController.content の中に以下を追加します。

<button data-ch-id="btnGotoSub">goto sub</button>

helloworld.SubViewController.content の中に以下を追加します。

<button data-ch-id="btnBack">back</button>

3. イベントを追加

src/helloworld/RootViewController.js の viewDidLoad に sub への遷移を記述します。

var that = this;
view.findViewById('btnGotoSub').bind('click', function() {
    that._window.transitWithHistory('/sub');
});

src/helloworld/SubViewController.js の viewDidLoad に window.back を記述します。

var that = this;
view.findViewById('btnBack').bind('click', function() {
    that._window.back();
});

4. サーバーを起動

server オプションで起動して正しく動作しているか確認できます。

$ tupaijs server