最近、MonacaアプリをFramework7を利用して作るようになっています。Framework7はOnsen UIやIonic FrameworkのようなUIフレームワークであり、コンポーネントが多種多様なのが特徴です。
Monacaアプリでも手軽にFramework7を使えるようにhttps://github.com/NCMBMania/MonacaFramework7Baseを用意していますが、開発する中で徐々にFramework7のバージョンが古くなっていきます。その際のアップデート方法について紹介します。
現状の確認
現在はすでにバージョンアップしているのですが、その前の状態ではじめたとします。
$ git clone git@github.com:NCMBMania/MonacaFramework7Base.git YOUR_MONACA_APP
$ cd YOUR_MONACA_APP
$ npm install
この状態で、古いバージョンがあるか確認します。
% npm outdated
Package Current Wanted Latest Location Depended by
dom7 3.0.0 3.0.0 4.0.6 node_modules/dom7 MonacaFramework7Base
framework7 7.1.1 7.1.5 7.1.5 node_modules/framework7 MonacaFramework7Base
swiper 8.4.5 8.4.7 9.0.3 node_modules/swiper MonacaFramework7Base
このようにFramework7のバージョンが若干古くなっているのが分かります。
Framework7の更新
npm update でライブラリを更新します。
% npm update
changed 18 packages, and audited 698 packages in 11s
89 packages are looking for funding
run `npm fund` for details
7 vulnerabilities (5 moderate, 2 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
更新したら、再度古いバージョンがないか確認します。
% npm outdated
Package Current Wanted Latest Location Depended by
dom7 3.0.0 3.0.0 4.0.6 node_modules/dom7 MonacaFramework7Base
swiper 8.4.7 8.4.7 9.0.3 node_modules/swiper MonacaFramework7Base
dom7やswiperが残っているのは、Framework7が各ライブラリのメジャーアップデートに対応していないためと考えられます。
Monacaアプリに反映する
この状態では、 node_modules 以下のFramework7がバージョンアップしただけなので、Monacaアプリ側（www以下）にも反映します。
% npm run update-f7
> framework7-tab-view@1.2.0 update-f7
> npm run copy-f7 && npm run copy-f7-font
> framework7-tab-view@1.2.0 copy-f7
> cp node_modules/framework7/*.js node_modules/framework7/*.css ./www/framework7/
> framework7-tab-view@1.2.0 copy-f7-font
> cp ./node_modules/framework7-icons/fonts/*.* ./www/fonts/
バージョンを確認する
www/framework7/framework7.js の最初にFramework7のバージョンが書かれているので、確認します。
/**
* Framework7 7.1.5
* Full featured mobile HTML framework for building iOS & Android apps
* https://framework7.io/
*
* Copyright 2014-2023 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: February 2, 2023
*/
バージョンが更新されていれば問題ありません。
注意点
今回はマイナーバージョンのアップデートなので、まず問題はありません。しかし、バージョン8系になったりすると、後方互換性がないアップデートが行われる可能性もあるので注意してください。
Gitなどでバージョン管理した上で、アップデート後に不具合があれば戻せるようにしてください。
まとめ
Framework7は開発が活発で、バージョンアップが頻繁に行われます。それらはセキュリティ的な問題に対応するものもあるので、なるべく追従した方が良いでしょう。コマンドを数回実行するだけで完了しますので、Framework7プロジェクトを最新状態に保つのに役立ててください。
NCMBMania/MonacaFramework7Base: Monaca × Framework7 × NCMBのベースアプリです。