いかに簡単に実装するか。いかに見やすく実装するか。
モバイル開発においてもWeb画面を作成するのと、根幹は変わりません。
クロスプラットフォームをWeb技術で行えるCordovaであればなおのことです。
そこで、簡単に実装するためのパッケージ構成と、画面遷移の実装方法をご提案します。
開発環境
・Windows 10 Pro
・Visual Studio Code
・Apache Cordova 8.1.2
・jQuery mobile 1.5.0
※バージョンはなんでもOKです。jQueryモバイルをインストールしていない場合は以下を参照ください。
https://mukoiri-engineer.com/cordova-jquery-transition/
なお、今回の手順は「C:\cordovaTest」に「test」プロジェクトを作成して、jQUeryMobileをインストールして、
パッケージ構成が以下のようになっていることを前提とします。
C:\CORDOVATEST\TEST\WWW | index.html | +---css | index.css | +---img | logo.png | \---js index.js jquery-1.11.1.min.js jquery-1.5.0.mobile.min.css jquery-1.5.0.mobile.min.js
パッケージ構成
ライブラリ用フォルダ生成
C:\cordovaTest\test\www\js にjQueryがインストールされている状態で管理しづらいので、
C:\cordovaTest\test\www\lib\jquery を掘って、移動します。
mkdir C:\cordovaTest\test\www\lib\ mkdir C:\cordovaTest\test\www\lib\jquery mv C:\cordovaTest\test\www\js\jquery* C:\cordovaTest\test\www\lib\jquery\
以降、ライブラリが増えたら、libに突っ込んでいきます。
共通モジュールの生成
命名変更。ない場合は作成してください。
index.js → common.js
index.css → common.css
この段階でパッケージ構成はこんな感じになっています。
C:\CORDOVATEST\TEST\WWW | index.html | +---css | common.css | +---img | logo.png | +---js | common.js | \---lib \---jquery jquery-1.11.1.min.js jquery-1.5.0.mobile.min.css jquery-1.5.0.mobile.min.js
個別モジュール生成
桁数と命名ルールは予め決めておいてください。htmlとjsは1:1にしておいた方が見やすいです。
今回は以下のルールで作成します。
s9999.html/s9999.js形式
s:screenの略
9999:枝番4桁(機能によって番号の範囲を変える)
上記の場合、s0001.htmlとs0001.jsを作成します。
cssは作っても良いですが、モバイルは画面に配置するものが少ないので、あまり恩恵は得れません。
C:\CORDOVATEST\TEST\WWW | s0001.html | s0002.html | s0003.html | +---css | common.css | +---img | logo.png | +---js | common.js | s0001.js | s0002.js | s0003.js | \---lib \---jquery jquery-1.11.1.min.js jquery-1.5.0.mobile.min.css jquery-1.5.0.mobile.min.js
パッケージ構成は以上です。画面が増える度にjsとhtmlが増えていく感じです。
もし、index.htmlをおくのであれば、htmlフォルダは掘ったほうがいいです。
ファイルの修正方法は、画面遷移の実装方法にて記載します。
画面遷移の実装
config.xmlの修正
現状の設定のままだと、アプリ起動時に最初に見る画面は初期設定「index.html」になっているのでcontent.srcを修正。
修正後 ============== <content src="s0001.html" />
なお、index.htmlを一度かませてから初期画面に飛ばすとかであれば、修正の必要はないです。
htmlの修正
遷移元画面はこんな感じです。
ポイントはボタンに付与している以下の2属性です。遷移先の画面IDを属性値にします。
data-tran-target:遷移先の画面ID
data-before-tran:遷移イベントを行う前に実施するイベントがあれば、メソッド名を記載
s0001.html ======================== <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="lib/jquery/jquery-1.5.0.mobile.min.css"> <title>s0001</title> </head> <body> <div class="app"> <h1>s0001</h1> <div class="blink"> <button type="button" style="width:150px;" data-tran-target="s0002">s0002へ</button> <button type="button" style="width:150px;" data-tran-target="s0003" data-before-tran="beforeTranS0003">s0003へ</button> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="lib/jquery/jquery-1.11.1.min.js" id="cordova-jquery"></script> <script type="text/javascript" src="lib/jquery/jquery-1.5.0.mobile.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/s0001.js"></script> </body> </html>
遷移先画面は「data-tran-target」属性は未設定でOKです。
s0002.html ※s0003.htmlは内容を置換して作成してください。 ======================== <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" type="text/css" href="lib/jquery/jquery-1.5.0.mobile.min.css"> <title>s0002</title> </head> <body> <div class="app"> <h1>s0002</h1> <div class="blink"> <button type="button" style="width:150px;" data-tran-target>戻る</button> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="lib/jquery/jquery-1.11.1.min.js" id="cordova-jquery"></script> <script type="text/javascript" src="lib/jquery/jquery-1.5.0.mobile.min.js"></script> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/s0002.js"></script> </body> </html>
jsの修正
個別メソッドはpersonal変数、共通メソッドはcommon変数で管理します。
personalは各画面側でoverrideします。
common.js ================== var personal = {}; var common = { /** コンストラクタ */ initialize: function () { // イベント定義 $('button[data-tran-target]').on('click', this, this.onClickTran); }, /** 画面遷移ボタン押下 */ onClickTran: function (event) { let $this = $(this); if ($this.attr('data-before-tran')){ if (!personal[($this.attr('data-before-tran'))]()){ return; } } let target = $this.attr('data-tran-target'); if (!target){ history.back(); return; } location = target +'.html'; } }; common.initialize();
s0001.js ※s0002.js/s0003.jsはbeforeTranS0003を削除してコピー ================== var personal = { /** コンストラクタ */ initialize: function () { // TODO 必要に応じてイベント定義 }, /** s0003遷移前イベント */ beforeTranS0003: function (event) { if (confirm("次の画面に遷移します。")){ return true; } return false; } }; personal.initialize();
動作確認
「s0002へ」をクリック
s0002が表示される。「戻る」をクリック
s0001が表示される。「s0003へ」をクリック
アラートが表示される。「キャンセル」をクリック
画面遷移しない。「s0003へ」をクリック
アラートが表示される。「OK」をクリック
s0003が表示される。
確認できました。
最後に
今回の実装によって、画面遷移情報は基本的にView(html)に集約されました。
遷移先を追加するときも、基本的にViewをいじるだけで済むし、
割り込み処理を行いたいときでも「data-before-tran」属性を利用すれば実現可能です。
1つ1つのボタンにわざわざイベントを紐づける必要もなくなったので、ステップ数は大幅に削減できました。
TypeScriptを使えばもうちょっと格好良く書けますね。今度作ってみます。
ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。
以上です。今後ともよろしくお願いします。