HTML5 framework 
1
who is 
Katayama Hideo 
age:36 
仕事はWeb系業務アプリ(java, python , php, etc)がメインで 
す。 
子だくさん 
新しいものずき 
友人には「悪魔」とか「腹黒い」って言ってくる人がいます 
。
今日のお題 
LTしろ 
(by N澤)
ってことで 
HTML5 + frameworkで検索 
して見つかった何かを調べて 
発表してみてます。
取上げるframework 
MontageJ 
S
日本語にすると 
MontageJS = 「異なった種 
々の画面[要素]を並べて一つ 
の画面[作品]にまとめる手法 
+javascript」
MontageJSの定義的に 
は 
オープンソースのJavaScript フレームワークであり、スケーラブルなシ 
ングルページアプリケーションを開発するために設計されている。その 
目的は実績のあるネイティブアプリケーションフレームワークの基盤の 
多くを採用することにより表現力豊かなHTML5のアプリケーションの 
開発と保守性を簡素化することである。Montageを使用すると、開発者 
は再利用が可能なユーザーインターフェイスコンポーネントおよびモジ 
ュールを構築したり、拡張したりが可能になり、コンポーネントとコン 
トローラ間のプロパティをバインドし、特にリソースに制約のあるデバ 
イス上でスムーズなユーザー体験を保証するために、DOMの更新を同 
期させることができる。(by wikipedia : 
http://ja.wikipedia.org/wiki/MontageJS)
HTML5とは 
白石さんがなんとかしてくれてるはず。(丸投げ)
Single-Page 
Applications(SPAs) 
単一ページのアプリケーション?? 
まずはサンプルをみてみますか。多 
分見れば「これかっ。知ってる知っ 
てる」って言う感じに 
9
Sample 
http://montagestud 
io.com/gallery/
ちなみに 
ちょっとまぎらわしいですが、 
「シングルページ」ってデザイ 
ン手法?!も有るようです。 
http://ascii.jp/elem/000/000/9 
21/921580/
つづき 
これ見て「あれ期待してた 
ものと違う、やべっLTや 
めようかな。」っと考えて 
ました。
why use SPAs 
ページ遷移うざいぃ(作る方も、使う方も) 
他にも色々理由はあるとは思いますが省略
why use SPAs 
画面遷移があると画面ロードに時間がかかる 
。 
遷移時に画面間の値の受け渡しとか考えるの 
面倒(HTTPの行って来いで1セットってプ 
ロトコルの制約)
SPAsとHTML5との関 
連は 
HTML5の表現力により 
、1ページ内でおさめられ 
るアプリケーションが作 
れるようになった。
でも 
別にHTML5じゃなくても 
いいんじゃね 
って思いませんでした? 
あのプラグインとか使えば
why use montageJs 
こんなことよくありますよね?? 
あのプラグイン()とかあのプラグイン( 
)とか、入れなきゃ使えネェのかよ!! 
あのプラグイン()とかあのプラグイン( 
)とか、このブラウザで使えネェじゃネェ 
か・・・orz
why use montageJs 
JSならどこでも 
呼出せるでしょ
why use montageJs 
ブラウザの互換性問題は 
残るけど、montageJS 
が吸収してくれるんでし 
ょ(ある程度)
どこら辺楽になんの? 
これを使うと何が楽 
になるん?
ここら辺 
View Model 
Controller 
データモデル 
javascriptクラス 
画面コンポーネント 
テキストボックス 
スライダー 
関連づ 
け 
ビジネスロジック
ソース見た方が分かりやすい 
http://montagejs.github.io/mfiddle/#!/590446 
8
で、montageJsとHTML5 
は 
HTML5をラップしたコンポーネントを提 
供してくれています。 
http://docs.montagestudio.com/montagejs/the 
me-digit-components.html
実際に使えるのか? 
はっきり言えばまだ厳しいか。 
ただ途中見ていただいた、見た目重視なサン 
プルアプリみたいなのはいけるんじゃないか 
な。
実際に使えるのか 
業務アプリは? 
UI部分の工数は増えそう。 
montageJsだけじゃバリデーションとかDBアク 
セスとかの部分は何かみつけてこなきゃ行けない 
パラダイム変換が必要。やるとしてもスモールス 
タート
課題もあるが 
ユーザには見た目で喜ばれそう。 
数年後にはユーザからSPAsでできるかって 
言われそう。 
新しいものは面白い。
montageJSじゃなくても 
他にも色々frameworkあるので興味持ったらし 
らべてみてください。angularjsとか同じよう 
なことできる?のかな・・??? 
ちなみにこんな本ももう発売しています。 
http://www.amazon.co.jp/dp/4873116732
おしまい

Html5 framework montagejs