画面が切り替わるようにする 編
今回は画面が切り替わるようにする。
1. ライブラリの導入
前回、画面を追加したが、画面が重なったままだった。これをまずはなんとかする。いよいよJavaScriptを書く訳だが、ここで便利なライブラリを導入する。
Backbone.js
ごちゃごちゃになりがちなJavaScriptをすっきりした状態にしてくれる。
ModelとViewにレイヤー分けしてJavaScriptが読みやすくなる。
http://backbonejs.org/ よりbackbone-min.jsをダウンロード。
Backbone.jsは以下のライブラリに依存しているのでこれもダウンロード。
・Underscore.js ( >= 1.4.3) またはLo-Dash
・json2.js
・jQuery ( >= 1.7.0)またはZepto
全部、www/jsフォルダにコピー。
www/index.htmlに以下を追加。
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript" src="js/underscore-min.js"></script>
<script type="text/javascript" src="js/backbone-min.js"></script>
2. 重なった画面をなおす
JavaScriptで画面を切り替える。Opening画面だけを表示して他は非表示にする。
www/js/index.jsに以下を追加。
var ViewOpening = Backbone.View.extend({
el : "#opening",
});
var ViewSettings = Backbone.View.extend({
el : "#settings",
});
var ViewMain = Backbone.View.extend({
el : "#main",
});
var viewOpening = new ViewOpening;
var viewSettings = new ViewSettings;
var viewMain = new ViewMain;
var view = {
showOpening: function() {
viewOpening.$el.show();
viewSettings.$el.hide();
viewMain.$el.hide();
},
showSettings: function() {
viewOpening.$el.hide();
viewSettings.$el.show();
viewMain.$el.hide();
},
showMain: function() {
viewOpening.$el.hide();
viewSettings.$el.hide();
viewMain.$el.show();
},
};
view.showOpening();
3. 設定画面を表示
オープニング画面の右上のギア（設定アイコン）を押すと設定画面に切り替わるようにする。まず、ギア（設定アイコン）にIDを付ける。
www/index.htmlに以下を追加。
<span id="settings_button" class="icon icon-settings">settings</span>
www/js/index.jsに以下を追加。
var ViewOpening の中に追加
events : {
"click #settings_button" : "settingsButtonClicked",
},
settingsButtonClicked: function() {
view.showSettings();
},
4. 設定から戻る
設定画面が表示されるようになった。今度は、「done」を押すとオープニング画面に戻るようにする。
「done」ボタンにIDを付ける。
www/index.htmlに以下を追加。
<button id="settings_done">done</button>
www/js/index.jsに以下を追加。
var ViewSettings の中に追加
events : {
"click #settings_done" : "settingsDoneClicked",
},
settingsDoneClicked: function() {
view.showOpening();
},
5. メイン画面を表示
オープニング画面の「Start」ボタンを押すとメイン画面に切り替わるようにする。「Start」ボタンにIDを付ける。
www/index.htmlに以下を追加。
<button id="start_button">Start</button>
www/js/index.jsに以下を追加。
var ViewSettings の中に追加
events : {
"click #settings_done" : "settingsDoneClicked",
"click #start_button" : "startButtonClicked", //これを追加
},
startButtonClicked: function() {
view.showMain();
},
今日の全ソースはこちら
これで、Cordovaで「Hello World」はおしまい。
次回は、これをベースにしてちょっとしたアプリを作ってマーケットプレイスにリリースするまでをやりたい。
