Index

Quick Start

ビルド設定なしで、Next2Dアプリを作成する事ができます。

npx create-next2d-app app-name
cd app-name
npm start

ディレクトリ構成

project
├── src
│   ├── index.js
│   ├── App.js
│   ├── Packages.js // It will be generated automatically.
│   │
│   ├── component
│   │   └── default empty
│   │
│   ├── config
│   │   ├── config.json  // Configuration files for each environment.
│   │   ├── routing.json // Request settings before loading the view.
│   │   ├── stage.json   // Display(Stage) area setting. 
│   │   └── Config.js    // It will be generated automatically.
│   │
│   ├── content // Symbolic access to JSON created with NoCode Tool
│   │   ├── TopContent.js
│   │   └── HomeContent.js
│   │
│   ├── image
│   │   └── default empty
│   │
│   ├── model // business logic
│   │   ├── api
│   │   │   └── HomeText.js
│   │   └── callback
│   │       └── Background.js
│   │
│   └── view // Per-page View, ViewModel files.
│       ├── top
│       │   ├── TopView.js
│       │   └── TopViewModel.js
│       └── home
│           ├── HomeView.js
│           └── HomeViewModel.js
│
└── __tests__ // Unit Test directory
    └── model
        └── default empty

フローチャート

コマンド

  • 開発サーバーを起動します。
npm start
  • ルーティングJSONファイルから必要なViewクラスとViewModelクラスを生成します。
npm run generate
  • 指定した環境変数の本番アプリを書き出します。
npm run build -- --env="prd"
  • テストランナーを起動します。
npm test

JSON設定

stage.json

プロパティ名デフォルト値説明
widthnumber240表示領域の幅を設定します。
heightnumber240表示領域の高さ設定します。
fpsnumber121秒間に何回描画するかを指定します。
Option settings
プロパティ名デフォルト値説明
basestringempty相対パスでJSONを取得する場合、ここで設定したURLがrootとして適用されます。絶対パスの場合はここで設定したURLは適用されません。
fullScreenbooleanfalseStageクラスで設定した幅と高さを超えて画面全体に描画されます。
tagIdstringnullIDを指定すると、指定したIDのエレメント内で描画を行います。
bgColorarraynull背景色の[R,G,B,A]の配列は0~255で指定できます。falseは無色透明です。

config.json

| 環境毎に異なった変数値を設定できます。`all`で設定した値はすべての環境で利用可能です。

プロパティ名デフォルト値説明
spabooleantrueSingle Page Applicationとして、URLでシーンを制御することが可能です。
loading.callbackstringLoading画面遷移の準備が完了するまでの間、ローディング画面を表示するかどうかを設定する。コールバックとして設定されたクラスの開始関数と終了関数を呼び出す。
gotoView.callbackstring or array["callback.Background"]gotoView関数が終了した後にコールバックするクラスを指定することができます。

routing.json

ルーティングに設定できるプロパティの上位は、英数字、スラッシュ、ハイフン、アンダースコアです。スラッシュ、ハイフン、アンダースコアをキーとして、CamelCaseでViewクラスにアクセスします。

Example

以下のサンプルの場合、`https://example.com/quest/list`でアクセスを有効にし、`QuestListView.js`をコンテキストに設定します。

{
  "quest/list": {
    "requests": []
  }
}

第2階層のプロパティ設定

プロパティ名デフォルト値説明
privatebooleanfalseSPAモードでの直接アクセスを制御するために使用します。trueを設定して直接アクセスした場合、redirectで設定したViewが読み込まれます。
redirectstringemptyprivateがtrueの場合、ここで設定されたページが読み込まれます。設定されていない場合は、TopViewがロードされる。
requestsarraynullViewにアクセスする前に、指定された場所にリクエストを送信します。受け取った情報は、nameをキーにnext2d.fw.responseに設定されます。

`requests`プロパティで設定可能なプロパティ。

プロパティ名デフォルト値説明
typestringcontentこのプロパティには、以下の固定値が利用可能である。`json`, `content`, `image` および `custom` です。
pathstringemptyconfig.jsonから{{***}}で囲まれた文字列の値を取得 例){{ api.endPoint }}path/to/apiの場合
namestringempty名前を設定すると、その名前をキーとして取得したデータがレスポンス・マップに設定されます。
cachebooleanfalsename に設定された値をキーとして、取得したデータをキャッシュする。
callbackstring or arraynullリクエスト完了後にコールバックするクラスを指定することができます。指定されたクラスのコントラクターの第一引数に値が設定され、引き継がれます。
classstringemptyリクエストを実行するクラスを指定することができます。(typeがcustomのときのみ呼び出されます。)
accessstringpublicリクエストを実行する関数へのアクセスを指定できるようにします。`public` または `static` を指定することができます。(type が custom の場合のみ起動される)
methodstringemptyリクエストを実行する関数を指定することができます。(typeがcustomのときのみ実行されます)