OS.js - アプリ自作編 -

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

![alt](https://qiita-image-store.s3.amazonaws.com/0/12007/69ba7e41-2ee4-c86a-dc34-f3bfd53b7283.png)
## 事前準備:

OS.js:
http://os.js.org/
Brython:
http://brython.info/
brython_console: (自作アプリ)
https://github.com/jack-low/brython_console

---
## ■はじめに

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

今回は、アプリを自作してみました。
英語とか読めないからテキトーなアプリのソースを解読しながら作ったので、
結構苦戦しましたw
また、MacにしてからGitHubへのコミットにも初挑戦。

こちらが[操作時の動画](https://youtu.be/RwWCljqRdmQ)です。
如何でしたか。

Pythonを触ったことのある人なら知ってる操作かと思います。
「文字列フォーマット操作」です。
こちらは、Brythonという、JavaScriptでできた擬似?Pythonとなってます。

今回は、どこまで組み合わせが可能かも含め、実装してみました。

---

## ◆目的
簡易なコンソール(ターミナル)的なものがほしい。
JavaScriptでもいいけど、どうせならもっと面白いことをしたい。

そんなわがままな条件を叶えてくれたのが、JavaScript製のPython「Brython」でした。

---

## ◆導入方法
まずは、OS.jsが起動できる状態とします。
まだ導入前の人は、[公式サイト](http://os.js.org/)より正式な手順に沿って、正規ルートで導入してください。

続いて、Brythonの導入です。
こちらも公式サイトより正規ルートにて導入し、正規の手順に沿って、動作が可能な状態にしてください。
なお、OS.jsとBrythonは同ポートがデフォルトとなってますので、同時に起動はできないと思います。する必要もないですが...念のため。
基本的には、OS.jsのみ起動状態にしておいてください。

導入後は、[前回記事](http://qiita.com/jack-low@github/items/5d3898564178cbe5d795)と同様にアプリ「packages.js」ファイルを操作します。
その際、下記のディレクトリとして、説明を進めます。

![スクリーンショット 2016-01-21 2.09.57.png](https://qiita-image-store.s3.amazonaws.com/0/12007/3aad1c94-1084-51ee-61f8-522901508cfe.png)

## ◆アプリ制作編
まずは、アプリのパッケージとなる「packages.js」「main.js」「main.css」の記述から説明します。

```json:packages.js
{
  "className": "ApplicationPython",
  "name": "Brython console",
  "description": "Brython Console",
  "singular": true,
  "category": "development",
  "icon": "apps/python.png",
  "type": "application",
  "path": "add/brython_console",
  "build": {},
  "preload":    [
    {"src": "main.js", "type": "javascript"},
    {"src": "main.css", "type": "stylesheet"}
  ]
}
```
「packages.js」内では、基本的アプリ読み込み前に関する情報を記述します。
なお、アプリパッケージでの「preload」内は、pathに関連して動作しているようなので、srcでは、各ディレクトリに合わせて、読み込むようにしておきましょう。
例えば、「main.js」がpathよりもさらに下位の「js」というディレクトリにある場合は、「js/main.js」という感じです。

```js:main.js
(function(IFrameApplicationWindow, Application, Window, GUI, Dialogs, Utils, API, VFS) {


  /////////////////////////////////////////////////////////////////////////////
  // WINDOWS
  /////////////////////////////////////////////////////////////////////////////

  /**
   * Main Window Constructor
   */
  var ApplicationPythonWindow = function(app, metadata) {
    var src = API.getApplicationResource(app, 'app/index.html');

    IFrameApplicationWindow.apply(this, ['ApplicationPythonWindow', {
      src: src,
      focus: function(frame, win) {
        win.postMessage('resume', window.location.href);
      },
      blur: function(frame, win) {
        win.postMessage('pause', window.location.href);
      },
      icon: metadata.icon,
      title: metadata.name,
      width: 630,
      height: 375,
      allow_resise: false,
      allow_restore: false,
      allow_maximize: false
    }, app]);
  };

  ApplicationPythonWindow.prototype = Object.create(IFrameApplicationWindow.prototype);

  /////////////////////////////////////////////////////////////////////////////
  // APPLICATION
  /////////////////////////////////////////////////////////////////////////////

  /**
   * Application constructor
   */
  var ApplicationPython = function(args, metadata) {
    Application.apply(this, ['ApplicationPython', args, metadata]);
  };

  ApplicationPython.prototype = Object.create(Application.prototype);

  ApplicationPython.prototype.init = function(settings, metadata, onInited) {
    Application.prototype.init.apply(this, arguments);
    this._addWindow(new ApplicationPythonWindow(this, metadata));
    onInited();
  };

  //
  // EXPORTS
  //
  OSjs.Applications = OSjs.Applications || {};
  OSjs.Applications.ApplicationPython = OSjs.Applications.ApplicationPython || {};
  OSjs.Applications.ApplicationPython.Class = ApplicationPython;

})(OSjs.Helpers.IFrameApplicationWindow, OSjs.Core.Application, OSjs.Core.Window, OSjs.GUI, OSjs.Dialogs, OSjs.Utils, OSjs.API, OSjs.VFS);

```
続いて、「main.js」について、こちらはアプリの設計書的な役割となっており、ここでアプリの皮ができてるようなものです。
今回は、インラインフレームとして、読み込むため、


```js:main.js(抽出)
(function(IFrameApplicationWindow,...) {
  ...{
      var src = API.getApplicationResource(app, 'app/index.html');
      IFrameApplicationWindow.apply(this, ['ApplicationPythonWindow', {
    ...}, app]);
  ...};
})(OS.js....);
```
とします。

次に、cssです。
こちらは、インラインフレームの外側となりますので、任意のレイアウトでも問題ございません。

```css:main.css

.ApplicationPythonWindow application-window-content {
  background-color : #fff;
  color : #000;
  text-align : center;
}
.ApplicationPythonWindow application-window-content > div > div {
  padding : 10px;
}
.ApplicationPythonWindow h1 {
  margin : 0;
  padding : 10px;
}
.ApplicationPythonWindow h2 {
  margin : 0;
  padding : 10px;
  font-weight : normal;
}
```

---
## ◆アプリ内部

最後に、アプリ内部に関する記述となります。
Brythonに入っていたサンプルをそのまま移植していますので、説明は省略させていただきます。

```html:index.html
<!doctype html>
<html>
<head>
    <title>Brython interactive mode</title>
    <meta charset="UTF-8">
    <meta name=robots content="index, follow">
    <meta name=description content=Brython >
    <meta name=author content="Pierre Quentel">
    <meta name=keywords content="Python, Brython">
    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" type="image/png" href="favicon.png" />
    <noscript>Please enable Javascript to view this page correctly.</noscript>

    <link rel=stylesheet href="doc/doc_brython.css">

    <script src="src/brython.js"></script>

    <style>
    .codearea {
        background-color:#000;
        color: #4df607;
        font-family:'Oxygen Mono', Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace;
        font-size:14px;
        overflow:auto
    }
    div, textarea {
        height:100%;
        width:98%
    }
    </style>
</head>


<body onload="brython(1)">
    <table id=banner cellpadding=0 cellspacing=0>
        <tr id=banner_row >
    </table>

    <textarea id=code class=codearea rows=20></textarea>

    <div id=content></div>

    <script type="text/python3" src="py/console.py"></script>


</body>

</html>

```

以上で、ほぼ下準備が完了しました。
あとは、Brythonのindex.html内にあるファイルを各ディレクトリへ移動してあげることで、簡単にアプリができます。

その他詳細は、[GitHub](https://github.com/jack-low/brython_console)に上がってるアプリを参照いただけますと幸いです。