Framework7 + CordovaでiOSアプリをビルドして実機実行する方法

どうも、タカフです。

Framework7、いいですよね。数年前からスマホアプリを作る際には、どのUIフレームワークよりも使いやすくていいなと思い、Version1からよくお世話になっていました。

Framework7を知らない人の為に簡単に説明しますと、
Framework7とはスマホアプリのUIをWebの技術(HTML/CSS/JS)で作るためのライブラリです。

スマホアプリ作るのにWebの技術で作るというのは非常にコスパがいいです。

どんなメリットがあるというと、

iOS/Androidアプリをほとんど同時に開発出来る
Web開発者ならHTML/CSS/JavaScriptの技術が活かせる
ちょっとしたUIの変更ならストアを通さず改修することも出来る

といったところです。

このあたりのメリットはまた別記事にするとして、本日はFramework7 + Cordovaを使ったiOSアプリのビルドして実機実行する方法を記事にしてみます。

※本記事はiOSビルドの作業があるのでMacでしか出来ません。

何故 Framework7 + Cordovaなの？

Framework7はWeb技術で作るスマホUIの部品群ライブラリなので、普通にWebViewを用意してそこにhtmlファイルとしてsrcをセットしてやれば、アプリライクなUIは開発できちゃいます。

ですが、現状WebViewをガワとして中身はhtmlで動作させ、さらいネイティブAPIとの連携もたくさんあるという開発手法の時は、ほとんどCordova以外の選択肢はありません。

その上で、Framework7は Framework7 CLI というコマンドラインを用意してくれていて手順に従ってコマンドを叩いていけば非常に簡単にアプリの土台を作ることができます。

なので、このFramework7 + Cordova という組み合わせを使うわけなのです。

npm環境を準備する

Framework7 + Cordovaを使うようにするにはnpmの環境が必須です。ここではnpmのインストール方法は割愛させて頂きます。

以下のページなんかを参考にされたし。

https://qiita.com/PolarBear/items/62c0416492810b7ecf7c

Framework7アプリを作る

npm環境が用意出来たら実際にFramework7アプリの土台アプリを作っていきましょう。

基本的には土台アプリを作ってその基本コードに対してガシガシ開発していくスタイルがオススメです。

Framework7 CLIをインストールする

Framework7に関するコマンドを実行するためにFramework7 CLIなるものをインストールしましょう。npm のインストールオプションで -g をつければグローバルインストールとなります。複数アプリを作るとしてもこの作業は一回でOKです。

terminal

$ npm install -g cordova
$ npm install -g framework7-cli

初期土台アプリを作る

次が実際の土台アプリを作るコマンドです。最初にアプリ名となるディレクトリを作成して(ここでは例としてMyF7Appとします)、その中でframework7コマンドを呼び出します。

terminal

$ mkdir MyF7App
$ cd MyF7App/
$ framework7 create

ここまでコマンドを実行してみると次にframework7 cli からどんなアプリを作るのか対話形式で質問されるので、順番に回答していきます。

コード

✔ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova app (target native iOS and Android)
? App (project) name: MyF7App
? App package (Bundle ID): jp.co.kahoo.myf7app
? Target Cordova platform: (Press <space> to select, <a> to toggle all, <i> to invert selection)iOS, Android
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? Webpack (recommended)
? Do you want to setup CSS Pre-Processor SCSS (SASS)
? Do you want to specify custom theme color? No, use default color theme
? Do you want to include Framework7 Icons and Material Icons icon fonts? Yes, include icon fonts

重要なのは
Cordova appを選択すること。また、BundleIDにはデフォルト値だとビルド出来ないので任意のIDを設定することです。あとはお好みでどうぞです。

ただ、この質問でわかることですがWebpackやsassが一緒にインストール出来るというのが非常に嬉しいポイントですね。これらはWebベースでスマホアプリを開発する上では必須技術です。

ここまで完了すると、以下のように表示されます。

terminal

✔ Done! 💪

ℹ Next steps:
  - 🔥 Run "npm start" to run development server
  - 🔧 Run "npm run build-prod" to build web app for production
  - 🔧 Run "npm run build-dev" to build web app using development mode (faster build without minification and optimization)
  - 📱 Run "npm run build-cordova-prod" to build cordova app
  - 📱 Run "npm run build-cordova-dev" to build cordova app using development mode (faster build without minification and optimization)
  - 📱 Run "npm run build-cordova-ios-prod" to build cordova iOS app
  - 📱 Run "npm run build-cordova-ios-dev" to build cordova iOS app using development mode (faster build without minification and optimization)
  - 📱 Run "npm run build-cordova-android-prod" to build cordova Android app
  - 📱 Run "npm run build-cordova-android-dev" to build cordova Android app using development mode (faster build without minification and optimization)
  - 📖 Visit documentation at https://framework7.io/docs/
  - 📖 Check README.md in project root folder with further instructions

次のステップが表示されますが、ここで試しに npm start を実行してみましょう。

terminal