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