Cordova12 + OnsenUI + ons-tabbarの初期設定

プロジェクト作成

Cordova最新版をインストール。

 npm install -g cordova

バージョンをチェック。

cordova -v

12.0.0 (cordova-lib@12.0.1)

プロジェクトを作成する。

cordova create appsTest

プロジェクトに移動。

cd appsTest

Onsen UIの最新版をダウンロードする。

https://ja.onsen.io/v2/guide/installation.html

Jqueryの最新版をダウンロードする。ここでは3.7.1とする。

Download jQuery
Jqueryダウンロード

ダウンロードしたOnsen UIを解凍後、フォルダ名をonsenuiとし、「www/lib/onsenui/」として設置する。

ダウンロードしたjQueryを「www/components/jquery/dist/jquery-3.7.1.min.js」として配置する。

ons-tabbarの設定

Onsen UI間にてデザイン崩れが発生するため、不要となる「www/css/index.css」の中身を空にする。

「www/index.html」を次のコードに書き換える。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=auto">
        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <script src="components/jquery/dist/jquery-3.7.1.min.js"></script>
        <script src="lib/onsenui/js/onsenui.min.js"></script>

        <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
        <link rel="stylesheet" href="css/index.css">
        <script>
        ons.ready(function() {
        console.log("Onsen UI is ready!");
        });

        document.addEventListener('show', function(event) {
        var page = event.target;
        var titleElement = document.querySelector('#toolbar-title');

        if (page.matches('#first-page')) {
            titleElement.innerHTML = 'My app - Page 1';
        } else if (page.matches('#second-page')) {
            titleElement.innerHTML = 'My app - Page 2';
        }
        });
    </script>

        <title>apps Test</title>
    </head>
    <body>
        <ons-page>
            <ons-toolbar>
                <div class="center" id="toolbar-title"></div>
            </ons-toolbar>
            <ons-tabbar position="auto">
                <ons-tab label="タブ1" page="tab1.html" icon="fa-user" active>
                </ons-tab>
                <ons-tab label="タブ2" page="tab2.html" icon="fa-book">
                </ons-tab>
            </ons-tabbar>
        </ons-page>

        <template id="tab1.html">
            <ons-page id="first-page">
                <p style="text-align: center;">
                    This is the first page.<i class="fa-solid fa-user"></i>
                </p>
            </ons-page>
        </template>

        <template id="tab2.html">
            <ons-page id="second-page">
                <p style="text-align: center;">
                    This is the second page.
                </p>
            </ons-page>
        </template>
        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

必要なプラグインをインストール

ons-tabbarにて外部ファイルを参照する際に必要なプラグインをインストールする。

cordova plugin add cordova-plugin-wkwebview-engine
cordova plugin add cordova-plugin-wkwebview-file-xhr

config.xmlに以下を追加。

<platform name="ios">
    <preference name="WKWebViewOnly" value="true"/>
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" /> 
</platform>

そのほか

アイコンを充実させたいため、最新版のfont awesomeをダウンロードし、置き換える。
以下よりフリー版をダウンロードする。

https://fontawesome.com/download

ダウンロードしたfont awesomeから「css」と「webfonts」を取り出し、「www/lib/onsenui/css/font_awesome/」以下に上書きする。