本格的なビジネスソフトウェアのためのTotal.js

もっと速く作り、スタックを自分たちのものにしましょう。

不要なレイヤーのないビジネスソフトウェア。

Total.jsは、高速なNode.jsフレームワーク、プロダクション向けUIコンポーネント、実運用で使われているアプリケーションを組み合わせることで、チームがダッシュボード、ポータル、SaaSプロダクト、社内ツールを、より少ないグルーコードとより高いコントロールで構築できるようにします。

0依存関係
300+UI コンポーネント
MITオープンソース
totaljs.es / ソフトウェアスタック
バックエンドコア

ルーティング、アクション、REST、WebSocket、スキーマ、ファイル、ビュー、メール、実行時制御を1か所にまとめています。

jComponents

入力フィールド、データグリッド、フォーム、チャート、ダッシュボード、モーダル、プロダクション対応のインターフェース。

# Node.js server-side framework
# Total.js v5
$ npm install total5
# バックエンド、フロントエンド、UIのための一つの土台
Node.js
NoSQL
WebSocket
API/REST
Actions
堅牢な土台から始めましょう

理解しやすく、拡張しやすく、自分たちのものとして扱えるスタック

Total.jsは、バックエンド、UI、データ、リアルタイム通信、ビジネスロジックといった重要な要素を近くに保ち、不要なレイヤーにプロダクトが分散しないようにします。

フレームワーク

API、ソケット、管理画面、ポータル、社内アプリ、長期運用のプロダクトのための、余計な依存関係のないNode.jsベース。

  • ダイレクトなルーティングと無駄のないアクション
  • スキーマ、バリデーション、データアクセス
  • REST、WebSocket、メール、ファイル、ビュー

jComponents

ビジネスアプリケーションのために設計されたUIレイヤー。実用的なコンポーネント、シンプルなバインディング、重いフロントエンドスタックなしですぐに使える画面。

  • フォーム、データグリッド、チャート、ダッシュボード
  • 自動バインディングと軽量ビュー
  • 300以上のプロダクションコンポーネント
フレームワーク + jComponents

1つのバックエンド。1つのUI哲学。

ルート、アクション、スキーマ、ビュー、バインディング、コンポーネントが自然に組み合わさります。グルーコードを減らし、決定事項を減らし、アイデアからプロダクションまでの道筋をすっきりさせます。

ピュアフレームワーク

total5 / node.js

ビジネスロジック、API、ソケット、ジョブ、実際の処理のための明確な構造を、フレームワークのノイズなしで提供します。

framework.js
// ルート、アクション、スキーマ、データベース、ソケット、メール
require('total5');

exports.install = function() {
	ROUTE('GET /', 'view');
	ROUTE('+API ? orders-list      --> find');
	ROUTE('+POST /api/orders/      --> create');
	ROUTE('SOCKET / @text <1MB', socket); // "text" means only the plain text communication
};

	NEWACTION('find', {
		query: 'page:Number, sort:String',
		route: 'API ?',
		params: 'projectid:String',
		action: function($) {
			// $.query
			// $.params
			$.success();
		}
	});

	NEWACTION('create', {
		name: 'description',
		route: '+POST /api/orders/',
		input: '*name:String, age:Number',
		output: 'success:Boolean',
		params: 'projectid:String, id:String',
		action: function($, model) {
			// $.query
			// $.params
			// $.model or model "is prepared according to the input data schema"

			// $.success();
			// $.callback({ success: true });

			// TMS:
			// $.publish(model);
		}
	});

	function socket($) {

		// $ === WebSocketController

		// List of all clients in the controller
		// $.connections {Object} ID1:CLIENT, ID2:CLIENT, ID3:CLIENT
		/*
			for (var id of $.connections) {
				var client = $.connections[id];
				client.send({ name: 'Hello' });
			}
		*/

		// Automatically destroys the controller after all clients are disconnected.
		$.autodestroy();

		$.on('open', function(client) {
			// @client {Controller}
			client.send('Hello world');
		});

		$.on('close', function(client) {
			client.send('Bye Bye!');
		});

		$.on('message', function(client, message) {
			console.log(message);
		});

	}

Total.run();
直感的なルーティング
再利用可能なアクション
統合 WebSocket
NoSQL とスキーマ
MVC とサーバーレス
スケーラブルかつシンプル

jComponents ベースの UI

spa.min@20

実際のビジネス画面向けに設計されたコンポーネントで、フォーム、ダッシュボード、テーブル、ワークフロー全体を構築できます。

ui.html
<!-- Client-side UI library -->
<script src="https://cdn.componentator.com/spa.min@20.js"></script>
<link rel="stylesheet" href="https://cdn.componentator.com/spa.min@20.css" />

<ui-plugin path="scope">
	<ui-component name="input" path="?.filter" config="placeholder:注文を検索する;autofill:1"></ui-component>
	<ui-component name="validate" path="?.form">
		<button class="exec" data-exec="?/submit">注文を保存する</button>
	</ui-component>

	<ui-component name="datagrid" path="?.orders" config="margin:0;click:?/detail">
		<script type="text/plain">
		[
			{ name: 'email', text: '顧客', width: 220 },
			{ name: 'total', text: 'Total', align: 2, template: "{{ total | format(2) }}" },
			{ name: 'dtcreated', text: '作成日', template: "{{ dtcreated | format('dd.MM.yyyy') }}" }
		]
		</script>
	</ui-component>

	<ui-component name="linechart" path="?.sales" config="height:180;type:curves"></ui-component>
	<ui-bind path="?.online" config="text:value + ' オンライン'"></ui-bind>
</ui-plugin>

<script>
PLUGIN('scope', function(exports) {
	exports.submit = function() {
		var modal = exports.modal;
		exports.tapi('orders-list', modal, function(response) {
			exports.set('scope.orders', response);
		});
	};
});
</script>
300 以上のコンポーネント
データグリッドとフォーム
自動バインディング
ダッシュボードとチャート
ビジネス対応の UI
高速なページ
Total.js 上に構築されたアプリ

スタックの実力を示すアプリケーション

Flow、OpenPlatform、CMS、その他のTotal.jsアプリケーションはデモではありません。同じ土台の上に構築された、実際に稼働している製品です。その土台を、あなた自身のプラットフォームにも使えます。

Flow

API、サービス、AIと連携する自動化、インテグレーション、ビジネスプロセス。

OpenPlatform

アイデンティティ、アプリケーション、ユーザー、制御されたアクセスを備えたプライベートポータルの基盤。

CMS

単体のCMSとしても、より大きなビジネスソリューションの一部としても使えるコンテンツ管理。

さらに多くのアプリ

同じ思想で作られたツール群。実務的で、まっすぐで、すぐに仕事に使えます。

パフォーマンスとシンプルさ

オーバーヘッドを減らします。
さらに自分たちでコントロールできます。

Total.jsは、高速で分かりやすく、構築しているプロダクトに近い場所にとどまるよう設計されています。

フレームワーク速度比較
Total.js
100%
Fastify
90%
Koa
77%
Express
70%
NestJS
67%
Sails
60%
Meteor
55%
Hapi
50%
接続されたネイティブアプリ

TotalDesktop Suite

実際のTotal.jsワークフロー(リソース、コード、監視、プロジェクト、日々の業務)に合わせて設計された、MacとiPad向けのネイティブツール。

TotalResources app icon

TotalResources

ネイティブアプリから多言語コンテンツを管理できます。翻訳、スペルチェック、レビュー、AIによるサポートを、すべての製品テキストに対して行えます。

多言語対応
Total.js API
Athena AI
MCP / MVP
TotalCode app icon

TotalCode

ローカル制御と複数インスタンスに対応した、Total.js Code用のネイティブワークスペース。

ネイティブ IDE
複数インスタンス
MCP / MVP
TotalMonitor app icon

TotalMonitor

プロジェクトの状態、メトリクス、アラート、ルールをリアルタイムで監視し、問題が緊急になる前に気付けるようにします。

リアルタイム
アラート
MCP / MVP
More applications icon

さらに多くのアプリケーション

今後、ネイティブツールがさらに増え、開発・運用・監視・プロダクト進化まで、同じエコシステムを拡張していきます。

進行中
新しいアプリ
エコシステム
可用性

Mac と iPad 専用、近日登場

初期リリースは Apple エコシステムにフォーカスします。Windows と Linux は後日対応予定ですが、現時点で日付は未定です。

Mac
iPad
App Store
Mac App Store
プロフェッショナル開発

長く使えるTotal.jsソフトウェアを構築します

アプリケーション、ダッシュボード、ポータル、SaaSプロダクト、プライベートプラットフォームを、一貫した土台の上に構築し、偶然の複雑さに頼らないようにします。

社内アプリケーション
プライベートポータル
コントロールパネル
SaaS プロダクト
リファクタと改善
技術サポート

カスタム開発

Total.js で構築されたアプリケーション、ダッシュボード、ポータル、社内ツール、デジタルプロダクト。

アーキテクチャとコンサルティング

プロダクトが大きくなる前に行う技術判断、土台のレビュー、実行可能なプラン。

実装と進化

最初のバージョンから継続的な改善まで、同じ技術的な方針で進めています。

保守と改善

既存プラットフォームの最適化、リファクタリング、新機能追加、段階的な進化。

Spanish Total.js Platform

あなたのビジネスがもっと良く動くために何が必要か、教えてください。

私たちは、明確な技術基盤と、運用開始までの現実的な道筋を持つTotal.jsアプリケーションを設計・開発します。

ビジネスアプリケーションとダッシュボード
プライベートなプラットフォームとポータル
アーキテクチャ、実装、進化

世界中のチームが、すでにTotal.jsを使ってプロダクトを構築しています。

すべてのリファレンスを見る
Siemens
Orange
Datalan
Metrostav
Slovalco
Volkswagen
プロジェクトについて教えてください

作りたいものを教えてください。次に取るべき具体的なステップをご提案します。