Cordova

Cordova パッケージ構成と画面遷移実装

いかに簡単に実装するか。いかに見やすく実装するか。

モバイル開発においても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を使えばもうちょっと格好良く書けますね。今度作ってみます。

ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。

以上です。今後ともよろしくお願いします。

-Cordova

Copyright© 婿入りエンジニア、ブログ書く , 2019 All Rights Reserved.