いかに簡単に実装するか。いかに見やすく実装するか。
モバイル開発においても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を使えばもうちょっと格好良く書けますね。今度作ってみます。
ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。
以上です。今後ともよろしくお願いします。