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
プロパティ名 | 型 | デフォルト値 | 説明 |
---|
width | number | 240 | 表示領域の幅を設定します。 |
height | number | 240 | 表示領域の高さ設定します。 |
fps | number | 12 | 1秒間に何回描画するかを指定します。 |
Option settings
プロパティ名 | 型 | デフォルト値 | 説明 |
---|
base | string | empty | 相対パスでJSONを取得する場合、ここで設定したURLがrootとして適用されます。絶対パスの場合はここで設定したURLは適用されません。 |
fullScreen | boolean | false | Stageクラスで設定した幅と高さを超えて画面全体に描画されます。 |
tagId | string | null | IDを指定すると、指定したIDのエレメント内で描画を行います。 |
bgColor | array | null | 背景色の[R,G,B,A]の配列は0~255で指定できます。falseは無色透明です。 |
config.json
| 環境毎に異なった変数値を設定できます。`all`で設定した値はすべての環境で利用可能です。
プロパティ名 | 型 | デフォルト値 | 説明 |
---|
spa | boolean | true | Single Page Applicationとして、URLでシーンを制御することが可能です。 |
loading .callback | string | Loading | 画面遷移の準備が完了するまでの間、ローディング画面を表示するかどうかを設定する。コールバックとして設定されたクラスの開始関数と終了関数を呼び出す。 |
gotoView .callback | string or array | ["callback.Background"] | gotoView関数が終了した後にコールバックするクラスを指定することができます。 |
routing.json
ルーティングに設定できるプロパティの上位は、英数字、スラッシュ、ハイフン、アンダースコアです。スラッシュ、ハイフン、アンダースコアをキーとして、CamelCaseでViewクラスにアクセスします。
Example
以下のサンプルの場合、`https://example.com/quest/list`でアクセスを有効にし、`QuestListView.js`をコンテキストに設定します。
{
"quest/list": {
"requests": []
}
}
第2階層のプロパティ設定
プロパティ名 | 型 | デフォルト値 | 説明 |
---|
private | boolean | false | SPAモードでの直接アクセスを制御するために使用します。trueを設定して直接アクセスした場合、redirectで設定したViewが読み込まれます。 |
redirect | string | empty | privateがtrueの場合、ここで設定されたページが読み込まれます。設定されていない場合は、TopViewがロードされる。 |
requests | array | null | Viewにアクセスする前に、指定された場所にリクエストを送信します。受け取った情報は、nameをキーにnext2d.fw.responseに設定されます。 |
`requests`プロパティで設定可能なプロパティ。
プロパティ名 | 型 | デフォルト値 | 説明 |
---|
type | string | content | このプロパティには、以下の固定値が利用可能である。`json`, `content`, `image` および `custom` です。 |
path | string | empty | config.jsonから{{***}}で囲まれた文字列の値を取得 例){{ api.endPoint }}path/to/apiの場合 |
name | string | empty | 名前を設定すると、その名前をキーとして取得したデータがレスポンス・マップに設定されます。 |
cache | boolean | false | name に設定された値をキーとして、取得したデータをキャッシュする。 |
callback | string or array | null | リクエスト完了後にコールバックするクラスを指定することができます。指定されたクラスのコントラクターの第一引数に値が設定され、引き継がれます。 |
class | string | empty | リクエストを実行するクラスを指定することができます。(typeがcustomのときのみ呼び出されます。) |
access | string | public | リクエストを実行する関数へのアクセスを指定できるようにします。`public` または `static` を指定することができます。(type が custom の場合のみ起動される) |
method | string | empty | リクエストを実行する関数を指定することができます。(typeがcustomのときのみ実行されます) |