OS.js - アプリ追加編 -

オープンソースハックず　-open source Hack's-

オープンソースハックず 第3段。
前回に引き続き、OS.jsをハックしてみました。

今回は、アプリ追加編と題して、OS.js上(webアプリ)で動くアプリの導入に挑戦してみました。
※なお、前回OSと記載してましたが、"OS.js"は、使ってみると"OS(純粋な)"ではなく、OS風のWebアプリケーションみたいです。

さておき、これが意外にも面倒で、マニュアル通りに操作したのですが、うまくいかず...半ば諦めかけていました。
でも、これがうまくいかなければ、今後更新が途絶えるかもしれないので、頑張ってハックしたので、投稿します。

アプリ導入編 ①

---

マニュアルでは、GitHubに置いてあるアプリをコマンドでインストールする感じで記載されてます。
最後のマニュフェスト的なファイルを変更するらしいんですが、どうもうまくいかず、アプリが追加されませんでした。
またマニュアルのデフォルトだと、「src/packages」と記載されてありましたが、実際は「dist/packages」へインストールしても大丈夫です。
実際にOS.jsを起動した際、それ以上の階層にアプリケーションが存在していても、OS.js側で認識しないみたいなので、ここだけ要注意です。

---

アプリ導入編 ②

---

続いて、手動での導入方法となります。
マニュアル通りにやってうまくいかなかった人は、下記の操作方法を試してみてください。

パッケージのインストールまでは、問題ないでしょうか。
インストール対象アプリの「package.json」をテキストエディタで開きましょう。
なお、OS.jsからも操作可能です。
もしOS.js起動の状態で対象アプリの「package.json」を確認できたら、任意のエディタで開きましょう。

次に、「dist/packages.js」ファイルを開きます。
ここで注意して頂きたいのが、このファイル操作を間違えると他のアプリも起動できなくなりますので、注意してください。
操作前にコピーをあらかじめしておき、バックアップファイルの用意をしておいたほうがいいでしょう。

こちらは、jsファイルですが、操作する箇所は、json形式で記述された箇所をいじります。
以下は、参考例です。
※他にも導入していますが、対象アプリは、「Wolfenstein 3D (プレイ動画あり)」と「AceEditor」を参考例として記載しております。

packages.js

 if ( !_cache ) {
        _cache = {
    ...,
    "ApplicationWolfenstein": {
        "className": "ApplicationWolfenstein",
        "name": "Wolfenstein 3D",
        "description": "Group calls using webcam and microphone",
        "names": {
            "no_NO": "Wolfenstein 3D",
        },
        "descriptions": {
            "no_NO": "Wolfenstein 3D",
        },
        "category":   "games",
        "mime":       null,
        "icon":       "./data/favicon.png",
        "singular":   true,
        "preload":    [
          {"src": "packageName-OS.js-exprmimental/Wolfenstein3D/main.js", "type": "javascript"},
          {"src": "packageName-OS.js-exprmimental/Wolfenstein3D/main.css", "type": "stylesheet"}
        ],
        "type": "application",
        "path": "packageName-OS.js-exprmimental/Wolfenstein3D",
        "build": {}
    },
    "ApplicationAceEditor": {
        "className": "ApplicationAceEditor",
        "name":       "AceEditor",
        "mime":       null,
        "icon":       "categories/applications-system.png",
        "category":   "development",
        "mime":       ["^text", "inode\\/x\\-empty", "application\\/x\\-empty", "application\\/x\\-python", "application\\/javascript"],
        "icon":       "./ace-logo.png",
        "build":      {
          "copy": [
            "ace-logo.png",
            "package.json",
            "scheme.html",
            "main.css",
            "main.js",
            "vendor/ace/build/src"
          ]
        },
        "preload":    [
          {"src": "packageName-OS.js-extras/AceEditor/vendor/ace/build/src/ace.js", "type": "javascript"},
          {"src": "packageName-OS.js-extras/AceEditor/main.js", "type": "javascript"},
          {"src": "packageName-OS.js-extras/AceEditor/main.css", "type": "stylesheet"}
        ],
        "type": "application",
        "path": "packageName-OS.js-extras/AceEditor"
    }
};

なお、上記の記述参照をしたい場合は、あらかじめ開いておいた「package.json」にあるないようを転機しましょう。

こちら「packageName-OS.js-extras」、「packageName-OS.js-exprmimental」については、イントール時に指定しておいたディレクトリとなります。
ちなみに、className前に指定しているのは、アプリケーション名でアプリのパッケージを管理しているような働きをしているみたいです。
そのため、classNameと一致するように記述しておきましょう。

nameは変更しても、アプリ名が表示される箇所以外に影響は見受けられず、任意の名前でも可能でした。さらに「"names": {...}」、「"descriptions": {...}」内で、パッケージ名称を一括管理でき、訳を入れておけます。
なくても影響は特に見受けられませんでした。

今回導入したアプリは、「Wolfenstein 3D」と「AceEditor」です。
「Wolfenstein 3D」は世界的に有名な初代FPSゲームです。
「AceEditor」は、JavaScript製のテキストエディタです。また、100言語以上のシンタックスハイライトが実装されているそうです。

OS.jsで、アプリ導入がうまくいかなかった人は、ぜひ試す価値アリです。