Cordova

CordovaにjQueryMobileを導入する

WEB屋の人がCordovaを使ってクロスプラットフォーム開発を行おうとする時、
一番学習コストをかけずに実装を行うにはどうしたらいいか?

答えは簡単、jQueryです。

フロントサイドエンジニアの登竜門、デザイナーでも使える人が多いjQueryは、
Web屋の必須知識となっています。

そんなわけで、皆さんの慣れ親しんだjQueryをCordova環境に導入してみます。

※私は導入段階で出てContentSecurityPolicy警告が出て、一度投げましたがなんとか解決できました。

ついでに簡単な画面遷移サンプルまで作成します。

画面数の少ないアプリの場合は、当手順で作成するパッケージ構成で十分だと思うので、
是非参考にしてください。

開発環境

・Windows 10 Pro
・Visual Studio Code
・Apache Cordova 8.1.2

環境構築から行う場合、以下を参考にしてください。

Cordovaハイブリッドアプリ開発環境構築

なお、今回の手順は
「C:\cordovaTest」に「test」プロジェクトを立てて行います。
リンク先の手順でつくってますが、割愛する人は以下のコマンド打てば環境ができます。(npmは任意)

npm install -g cordova 
mkdir C:\cordovaTest
cd C:\cordovaTest
cordova create test com.example.hello HelloWorld
cd C:\cordovaTest\test
cordova platform add android
cordova platform add ios

JQueryの導入

jQueryMobileのインストール

cd C:\cordovaTest\test
npm install cordova-jquery

以下のような警告がでることはありますが、
新しいバージョンが出ているという警告なので無視して進めます。

PS C:\cordovaTest\test> npm install cordova-jquery
npm WARN deprecated CSSselect@0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat@0.4.7: the module is now available as 'css-what'

jQueryをcordovaプロジェクトに導入

1.C:\cordovaTest\testで以下を実行

node node_modules/cordova-jquery/cordova-jquery

実行直後にindex.htmlは書き換わり、jquery-mobileを参照するようになります。

2.選択肢の入力
次に以下の質問が表示されます。
Would you like to add jQuery mobile to the current Apache Cordova project? (Y/n)
google翻訳:現在のApache CordovaプロジェクトにjQueryモバイルを追加しますか?

もちろん「y」→「Enter」

What would you like to do now that jQuery is enabled?
google翻訳:jQueryが有効になった今、あなたは何をしたいですか?

意味合いとしては、
applyTemplate:既存のindex.htmlを上書いて、画面が生成される。
insertElement:特定エレメントに以下のようなタグが埋め込まれる。

<div data-role="popup" id="jpop"><p>Hello from a popup</p></div><a href="#jpop" data-rel="popup">Open popup</a>

どちらもjQuery確認用ですね。

今回は何もしなくていいので「exit」を選択します。

「test\www」以下が更新されているのでtreeコマンドで確認します。

tree C:\cordovaTest\test\www /a /f
==================================
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

jsフォルダの下が更新されていますね。

パッケージ整理

1.jQuery移動
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に突っ込んでいけば良いです。

2.index.html書き換え
IDE上で文字列置換で良いです。
VSCodeだとこんな感じです。別のIDEを使ってる場合はそちらで置換して下さい。
VSCODEで文字列置換を行ってる画像

画面遷移の実装

遷移先画面の作成

次画面を作成します。今回はnext.htmlにしましょう。
jQueryのバージョンは適宜変更してください。

今回は遷移が確認できればいいので、htmlだけ作成します。

next.html
<!DOCTYPE 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>NEXT</title>
    </head>
    <body>
        <div class="app">
            <h1>NEXT</h1>
		</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>
    </body>
</html>

遷移元画面の修正

次は遷移元を変更します。
遷移元はindex.htmlとindex.jsを書き換えます。

index.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>INDEX</title>
    </head>
    <body>
        <div class="app">
            <h1>INDEX</h1>
            <div class="blink">
                <button id="next" type="button" style="width:150px;">NEXT PAGE</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/index.js"></script>
    </body>
</html>
index.js
================================
var app = {
    /** コンストラクタ  */
    initialize: function () {
        $('#next').on('click', this, this.onClickNext.bind(this));
    },
    // ----------------------
    // 次ページへ
    // ----------------------
    onClickNext: function () {
        location = 'next.html';
    }
};

app.initialize();

動作確認

NEXT PAGEボタン押下で次画面遷移します。
index.html画面

表示されました。
next.html画面

最後に

これでjQueryをバリバリ使ってCordovaの開発を行っていけますね。

画面遷移に関して、今回は簡易的に実装しましたが、以下でより汎用的に共通化してみました。
是非ご一読ください。
http://mukoiri-engineer.com/cordova-package-transition/

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

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

関連記事

  1. Cordova

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

    いかに簡単に実装するか。いかに見やすく実装するか。モバイル開発…

  2. Cordova

    Cordovaハイブリッドアプリ開発環境構築

    今回はApache Cordovaのハイブリッドアプリ環境構築を行い、…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ARCHIVE

  1. ツール

    Docker環境構築 Windows10で仮想環境を楽々構築
  2. AWS

    AWS SAM CLI x Windows10 環境構築
  3. Cordova

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

    GolangでJava屋が最初にすべきこと
  5. ブログ

    [GoogleAdSense]技術ブログで審査突破するまで
PAGE TOP