MontageJS

MontageJS
開発元	コミュニティーベース
初版	2012年7月10日
最新版	17.1.1 / 2018年1月18日
リポジトリ	github.com/montagejs/montage;
対応OS	Mac OS X, Windows, Linux
サポート状況	Active
種別	JavaScript framework
ライセンス	BSD license
公式サイト	montagejs.org
	テンプレートを表示

MontageJS (あるいはMontage)はオープンソースの JavaScript フレームワークであり、スケーラブルなシングルページアプリケーションを開発するために設計されている。

その目的は実績のあるネイティブアプリケーションフレームワークの基盤の多くを採用することにより表現力豊かなHTML5のアプリケーションの開発と保守性を簡素化することである。Montageを使用すると、開発者は再利用が可能なユーザーインターフェイスコンポーネントおよびモジュールを構築したり、拡張したりが可能になり、コンポーネントとコントローラ間のプロパティをバインドし、特にリソースに制約のあるデバイス上でスムーズなユーザー体験を保証するために、DOMの更新を同期させることができる^[1]。

開発の歴史

Montageの開発はしばらくの間、モトローラ・モビリティで、2010年8月から2012年7月にブノワ·マーチャント氏と彼のチームの下で始まった。

プロジェクトは、2012年7月にGitHub上でBSDライセンスの形でオープンソース化された。

Montageは現在、シリコンバレーで開始されたときの従業員たち、マーチャントと元の開発チームのコアメンバーによってメンテナンスされている。

Montageの背後にあるアイデアは、マーチャントがAppleに在職していた1999-2010年にネイティブの（デスクトップライクな）ユーザーインターフェイスをJavaScriptで書いていた時期にさかのぼる。

マーチャントのその時点での目標は例えばCocoaやWebObjectsなどの実績のある技術と同等のものを作成することだったが、それよりもウェブとクライアント側のHTML、CSSおよびJavaScriptによるアプリケーションの構築を容易にすることだった。その成果はGianduiaであり、リッチインターネットアプリケーション向けフレームワークとして2009年のWorld of WebObjects Developer Conference上でアップルにより導入された。

2010年、マーチャントがモトローラ・モビリティに加わりモバイル向けの新しいフレームワークの仕事についたとき、アップルで学んだ教訓から、MVCデザインパターンを根底から利用してMontageアプリケーションを論理的に異なる単位に分割するようにMontageを構築した。

ロードマップ上の多くのコンポーネントが未だ発展途上にあるけれども、Montageは製品レベルのアプリケーションで用いられており、例えばそれはメモをとるためのScratchpad^[2] やTips & Tricks^[3]などのグーグルによるChromeアプリケーションである。

Webベースのアプリケーション開発の分野へのネイティブアプリケーションフレームワークのデザインやパターンを置き換えることは何も新しいものではない。Montageは、従来のフレームワーク（例えばCappuccinoなど）と異なっている場所は、Webのための新しい構文を導入しようとしないということである。

その代わりにモジュラー、自己完結型のコンポーネント、実際のオブジェクトやコレクションなどを使ったウェブスタックのトップに抽象化のクリーンなレイヤーを作成するためのCocoaライクのAPIを整備し、それによってあなたがそれらのオブジェクト、プロパティ、コレクションの変更を観察することを可能にする。

機能

MontageはECMAScript5、HTML5、およびNode.jsで普及したCommonJSモジュールシステムで構築されている。

グラフィカルユーザーインターフェイスの機能を構築し、独立性の高いUIコンポーネントのセットおよびDOMインターフェイスコンポーネントの両方へのアクセスを提供する。

しかしながら、Mustacheライクなテンプレートシステムを使う代わりに、例えばMontageは開発者にスタンドアロンなウェブページの形でユーザーインターフェイスコンポーネントを作らせる。

アプリケーションは単なるコンポーネント化されたテンプレートであり、ウェブブラウザ上で直接オープンされることになる。テンプレートはDOMスケルトンおよびいくらかのCSSを必要とするかもしれないが、識別されたDOMに接続されたコンポーネントのオブジェクトモデルと一緒に読み込まれる。

Montageは、文字列と値操作、シリアル化、および直接のグラフィカル·ユーザー·インターフェースに結び付けられていない他の機能を提供する。これは、プロパティをバインドするためにgetterおよびsetterを使用するので、バインディングの数が大きくなっても性能を維持される。

管理された描画サイクルが実装されており、これはMontageアーキテクチャーのキーとなる部分であり、読み込みおよび書き込みの処理はスケジュール化された間隔で行われ、パフォーマンスの妥協がない。

そして、アプリケーションのパフォーマンスを改善するためにイベントハンドリングおよびディスパッチを管理するイベントの移譲を行っている。

MontageJSエコシステムの一部は、より良い開発者に最適化されたエクスペリエンスを提供するツール群である。

それらは初期化ツールMinitであり、初期のひな形となるアプリケーション、コンポーネントを生成するだけでなく、ウェブアプリケーションのフロントエンド開発を目的としたモジュールを生成し、これはMR(Montage Requireの短縮形)と呼ばれるnpmスタイルのパッケージを用いる。自動生成されたアプリケーションのひな形はそれ自体がnpmの規格に準拠したnodejsモジュールであり、アプリケーションとそれを構成するコンポーネント群は階層構造を持つ。

Montageには開発者に最適化されたエクスペリエンスをユーザーに最適化されたエクスペリエンスに変換するMop(Montage optimizerの短縮形)と呼ばれるコマンドラインツールも付属している。

Mopは製品レベルのMontageアプリケーションを出力する。アプリケーションの全体的なファイルサイズを削減し、たくさんのダウンロードをプリロードすることを可能にし、リクエスト数を減らすことで開発者にContent Security Policiesの制限のあるMontageアプリケーションのリリースを可能にする。

構成

minit create:app -n your-app をコマンドライン上で実行すると、カレントディレクトリ上に your-app ディレクトリが作成される。これが自動生成されたMontageアプリケーションである。

典型的なMontageアプリケーションは以下の構造を持つ。

+ your-app
 + assets
 - index.html
 + node_modules
 - package.json
 - README.md
 - run-tests.html
 + ui
  +  main.reel
   -   main.css
   -   main.html
   -   main.js
  +  version.reel
   -   version.css
   -   version.html
   -   version.js

index.html
- アプリケーションのエントリポイントであり、ブラウザは最初にこのページをロードする
node_modulesディレクトリ
- アプリケーションが使用するnodejsモジュールがここに入る。digit、matte、nativeなどのMontage標準のUIコンポーネントもこの中に全て収録される。モジュールを追加したいときはnpm installを実行するだけでよい。
package.json
- Montageアプリケーションはそれ自体が完全なnpmモジュールであり、アプリケーションが必要とするnpmモジュールが列挙されている。アプリケーション本体がロードされる前にpackage.jsonに記述されたnodejsモジュールがロードされるため、node_modulesと内容を同期させる必要がある。
uiディレクトリ
- Montageアプリケーションの実体はこのディレクトリ以下に格納される
main.reelディレクトリ
- 内部にはmain.css、main.html、main.jsが格納されているが、これらは通常のHTMLと変わらない。index.htmlがロードされた後、main.reelコンポーネントがロードされ、後はmain.reelに記述された内容にそって他のコンポーネントが順にロードされる。^[4]

コンポーネントの構造

例えば ui/main.reel/main.html を開くと以下のように記述されている。

<script type="text/montage-serialization">
    {
        "owner": {
            "properties": {
                "element": {"#": "main"}
            }
        },
        "montageVersion": {
            "prototype": "ui/version.reel",
            "properties": {
                "element": {"#": "montageVersion"}
            }
        }
    }
</script>
<body>
    <div data-montage-id="main" data-montage-skin="light" class="Main">
      <footer data-montage-id="montageVersion"></footer>
    </div>
</body>

<script type="text/montage-serialization"> はMontageで特徴的な宣言であり、JSON形式でコンポーネントの役割を意味づけることができる。

"owner" では<div data-montage-id="main"> がコンポーネントの本体であることを示している。

<div data-montage-id="main">には<footer data-montage-id="montageVersion">が含まれており、JSONの"montageVersion"上で"ui/version.reel"をコンポーネントのプロトタイプとして用いることが分かる。

同様に ui/version.reel/version.html を開くと以下のように記述されている。

<script type="text/montage-serialization">
{
    "owner": {
        "properties": {
            "element": {"#": "version"}
        }
    },
    "montageVersion": {
        "prototype": "montage/ui/text.reel",
        "properties": {
            "element": {"#": "montageVersion"}
        },
        "bindings": {
            "value": {"<-": "@owner.montageDescription.version"}
        }
    }
}
</script>
<body>
   <footer data-montage-id="version" class="Version">
       Montage version: <span data-montage-id="montageVersion"></span>
   </footer>
</body>

ui/version.reelコンポーネントにおいてその本体は"version"であり、Montageのバージョンを表示しようとしている。

<span data-montage-id="montageVersion">はJSON上で"montage/ui/text.reel"コンポーネントを参照することになっており、これはMontageフレームワーク上で変更可能なtext-elementである。

"bindings"で"value": {"<-": "@owner.montageDescription.version"}という関連付け設定が行われており、この場合アプリケーション本体のMontageフレームワークからversionを取得し、それをtext-elementの値として入力することを意味する。

このように、Montageアプリケーションでは非常に明瞭かつ明確に区分けされた形でウェブアプリケーションを実装することが可能になっている。

互換性

Montageは一般的なブラウザの機能に依拠しており、近代的なブラウザでよく動作する。Google Chrome、Firefox、Safari 5以降、Internet Explorer 10、Safari MobileおよびAndroidブラウザなどである。

参考

リリース日

2012年 7月10日 - 0.11 - first public release
November 12, 2012 - 0.12
June 10, 2013 - 0.13
December 9, 2013 - 0.13.9
January 16, 2014 - 0.13.11

参照

^ Kowal et al., Kris. “Ninja power: open-source HTML5 toolset aims to enable richer Web apps”. Ars Technica. 2013年5月15日閲覧。
^ “Scratchpad application”. 2013年5月15日閲覧。
^ “Tips & Tricks application”. 2013年5月15日閲覧。
^ Hello MontageJS

外部リンク

[1] Kowal et al., Kris. “Ninja power: open-source HTML5 toolset aims to enable richer Web apps”. Ars Technica. 2013年5月15日閲覧。

[2] “Scratchpad application”. 2013年5月15日閲覧。

[3] “Tips & Tricks application”. 2013年5月15日閲覧。

[tutorial_hello-4] Hello MontageJS

[1]

[2]

[3]

[4]