「シンプル体重管理」や「ナンバーズサーチ」など、これまでAngularJSとOnsen UIの組み合わせでアプリ開発を行ってきたが、ユーザー側から「重い」「遅い」などの声が上がってきており、以前から軽いと評判のRiot.jsというUIライブラリを使用してアプリ開発できないだろうか・・・と思いつつも時間だけが経過。
やっと重い腰を上げてみた。
今回は、Onsen UIの基本的な動きであるons-navigatorで画面遷移を試みる。
MonacaクラウドIDEで、「Onsen UI V2 JS Minimum」を作成し、最新版の「riot+compiler.min.js」を[/www/lib/liotjs/]フォルダにアップロードする。
このとき「+」がスペースに置き換わる場合があるので「名前を変更」でファイル名を修正する。
[/www/tag/]フォルダに各tagファイルを作成する。
はまったところは、Onsen UIのtemplate、ons-page、ons-toolbarの間にRiot.jsのカスタムタグを入れると、Onsen UIのコンテンツ領域が正しく設定されない、CSSが適用されない点。
いろいろと試した結果、下記のようなコードとなった。
Android 6.0.1
iOS 10.3.3
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> ons.ready(function () { console.log("Onsen UI is ready!"); window.myNavigator = document.getElementById("navigator"); }); </script> </head> <body> <ons-navigator id="navigator" animation="slide" page="page1.html"></ons-navigator> <template id="page1.html"> <ons-page> <ons-toolbar> <div class="center">Page1</div> <div class="right"><ons-toolbar-button onclick="window.myNavigator.pushPage('page2.html')"><ons-icon icon="md-plus"></ons-icon></ons-toolbar-button></div> </ons-toolbar> <div id="content-page1" class="content"></div> <script> riot.mount(document.getElementById("content-page1"), "page1"); </script> </ons-page> </template> <template id="page2.html"> <ons-page> <ons-toolbar> <div class="left"><ons-back-button></ons-back-button></div> <div class="center">Page2</div> </ons-toolbar> <div id="content-page2" class="content"></div> <script> riot.mount(document.getElementById("content-page2"), "page2"); </script> </ons-page> </template> <script type="riot/tag" src="tag/page1.tag"></script> <script type="riot/tag" src="tag/page2.tag"></script> <script type="text/javascript" src="lib/riotjs/riot+compiler.min.js"></script> </body> </html> |
page1.tag
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<page1> <ons-list> <ons-list-item modifier="chevron" tappable="true" each="{item in items}" onclick={showPage.bind(this, item.name)}> {item.name} </ons-list-item> </ons-list> <ons-fab position="bottom right" class="fab-plus" onclick={showPage.bind(this, "")}><ons-icon icon="md-plus"></ons-icon></ons-fab> <script> this.items = [ { name:"sato" }, { name:"suzuki" }, { name:"takahashi" }, { name:"tanaka" }, { name:"ito" } ]; this.showPage = function (name) { var param = { name: name }; window.myNavigator.param = param; window.myNavigator.pushPage("page2.html"); }; </script> <style> .fab-plus { color: #fff; background-color: #faa; } </style> </page1> |
page2.tag
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<page2> <ons-list> <ons-list-item> <ons-input value={param.name}></ons-input> </ons-list-item> <ons-list-item> <ons-button modifier="large" class="button-ok">O K</ons-button> </ons-list-item> </ons-list> <script> this.param = window.myNavigator.param; </script> <style> .button-ok { margin-right: 10px; color: #fff; background-color: #faa; } </style> </page2> |
