独自アプリの作り方（app.yml）

MintJams CMS は「プラットフォーム」です。標準アプリと同じ仕組みで、あなたのチーム独自のアプリを仮想デスクトップ（Webtop）に追加できます。必要なのは HTML / JavaScript（または TypeScript）と、アプリ定義 app.yml だけです。

アプリの置き場所と検出

アプリは、Webtop の apps/<app-name>/ 以下に置きます。各アプリフォルダーには次を含めます。

apps/my-app/
├── app.yml        # アプリ定義（メタデータ）
├── index.html     # エントリーポイント
├── app.ts         # アプリのロジック（ichigojs）→ ビルドで app.js に
└── assets/        # アイコン・CSS など
    ├── css/style.css
    └── icons/icon.svg

サーバーは app.yml を検出してアプリ一覧（GraphQL の apps クエリ）に載せます。一覧はデスクトップのメニューに表示され、isAdminOnly のアプリは管理者にのみ表示されます。

app.yml

identifier: 12345678-1234-5678-1234-567812345678  # 一意な UUID
title: My App                                      # 表示名
icon: assets/icons/icon.svg                        # アイコン（相対パス）
actions:
  open:
    icon: open
    label: Open
minimumWidth: 480        # 最小ウィンドウ幅（px）
minimumHeight: 480       # 最小ウィンドウ高さ（px）
customWindowControls: true   # 最小化/最大化/閉じるを自前で描画

主なフィールド:

フィールド 意味
identifier 一意なアプリ ID（UUID）
title デスクトップ・Dock・ウィンドウに表示する名前
icon アイコン（SVG 推奨、アプリフォルダーからの相対パス）
editor true で、contentTypes に対する「エディター」として登録（Content Browser の「アプリで開く」に表示）
contentTypes 編集できる MIME タイプ（editor: true のとき）。例 ['text/*', 'application/json']
isAdminOnly true で管理者にのみ表示
singleton true で同時に 1 つだけ起動（再起動時は既存ウィンドウへ）
minimumWidth / minimumHeight ウィンドウの最小サイズ（px）
customWindowControls true でウィンドウ制御を自前で描画
actions.<id>.{icon,label} メニュー等に出すアクション（標準は open）

アプリの起動シーケンス

index.html はデザインシステムの CSS を読み込み、ルート要素をマウントします。app.ts で ichigojs アプリを作り、シェルから渡される ApplicationInstance を受け取ります。

import { VDOM } from '@mintjamsinc/ichigojs';

const App = {
  data() { return { instance: null, greeting: 'Hello, World!' }; },
  methods: {
    onMounted() {
      const vm = this;
      window.appLaunch = async (instance) => {
        vm.instance = vm.\$markRaw(instance);
        instance.windowTitle = 'My App';
        instance.notifyLaunched();   // 準備完了をシェルへ通知
      };
    }
  }
};
VDOM.createApp(App).mount('#app');

window.appLaunch はウィンドウが開かれるときにシェルが呼びます。instance.notifyLaunched() で「読み込み中」を解除します。

プラットフォーム連携

instance を通じて、プラットフォームの機能を利用できます。

  • コンテンツ / JCR — GraphQL でノードの取得・作成・更新・削除
  • アイデンティティ / Preferences / i18n — 現在のユーザー、ロケール、メッセージ
  • テーマ — document.documentElement.dataset.theme がライト/ダークに追従
  • イベント — コンテンツ変更やジョブ進捗の購読
  • ウィンドウ — タイトル、表示情報、最小化/最大化、クローズ前コールバック

テーマとデザインシステム

アプリは共通のデザインシステム CSS（webtop-app.css）を読み込み、CSS カスタムプロパティ（--primary-color、--body-bg、--text-color など）で見た目を標準アプリと揃えます。テーマ（ライト/ダーク）はシェルが切り替え、CSS 変数を通じて自動的に反映されます。アイコンは Bootstrap Icons（<i class="bi bi-...">）が使えます。

最小アプリを作る手順

  1. apps/my-app/ に app.yml、index.html、app.ts、assets/ を作成
  2. app.yml に一意な identifier と title を設定
  3. index.html でデザインシステム CSS を読み込み、#app をマウント
  4. app.ts で appLaunch を実装し、notifyLaunched() を呼ぶ
  5. ビルドして、デスクトップを再読み込み — メニューにアプリが現れます

多言語対応

UI 文字列は i18n バンドル（app.<appId>.*）に置き、テンプレートで t('app.my-app.greeting', undefined, 'Hello') のように参照します。詳しくは「多言語とロケール」を参照してください。

さらに高度なサーバー側拡張が必要なら、OSGi バンドルも利用できます。「OSGi 拡張・BPM/EIP 連携」を参照してください。