FANプログラミングWordPressFramework7Appleお問い合わせホームプログラミングFramework7Framework7でiOS/Androidをビルドして実機実行する方法[2021年版]2022年1月28日SHAREツイートシェアはてブLINEこんにちは、カフーブログのタカフです。Framework7ですが、実際にこれを使ってiOS/Androidの両OSをビルドして実機実行まで行う方法を解説したいと思います。フロントエンドの技術を持っている人はこれだけでスマホアプリを作ることが出来ます。それでは参りましょう!※iOSのビルドを含むのでMac環境が対象です。環境準備:framework7コマンドを使えるようにするframework7を使った実機ビルドが出来るようにするには、ローカルマシンにframework7コマンド(f7)とcordovaを使えるようにします。framework7/crodovaを使えるようにするにはnode(npm)が必要です。nodeを使えるようにするには、nodebrewというものが必要です。nodebrewを使えるようにするには、Homebrewというものが必要です。いう順番でインストールしていきます。因みに僕はDockerでのビルドも試してみましたが、DockerコンテナからxcodeやAndroidのコマンドラインビルドを通すのは難しい為、スマホアプリを含むビルドをする場合は本記事の通りローカルPCにnodeを入れるのが妥当です。HomebrewをインストールするまずはMacにHomebrew(通称brew)をインストールします。Homebrewとは、macOS用パッケージマネージャーの事で、開発に必要なパッケージを簡単にインストール出来るようになっているシステムの事です。Homebrewのインストールは公式サイトにのっているコマンドをターミナルに貼り付けて実行するだけです。Macにあらかじめ入っているrubyを使ってインストールするんですね。上記の画像の通り、Homebrew公式サイトにコマンドが書いてますのでコピペして実行しちゃいましょう。使えるようになります。nodebrewをインストールするHomebrew(brew)をインストールしたら今度はnodebrewをインストールします。nodebrewとは、node自体をこのローカルMacの中でバージョン管理するためのシステムです。brewを使って以下のコマンドでインストール出来ます。nodebrewこれでnodebrewが使えるようになりました。1.1.0node.jsをインストールするnodebrewをインストールしたら、次に最新の安定版のnode.jsをインストールしましょう。安定版はnode.jsのサイト見ればすぐにわかります。2021年7月3日現在は14.17.2ですね。ただの最新版だとframewor7やcordovaが対応してなかったりするので、基本的には最新の安定版(推奨版)を使います。安定版のバージョンがわかったらそのバージョン指定でインストールします。メジャー番号だけでもOKです。v14初回だと以下のようなエラーが出るときがあります。https://nodejs.org/dist/v14.17.2/node-v14.17.2-darwin-x64.tar.gzこれはホームフォルダ直下に.nodebrew/srcディレクトリがないのが原因なのでサクッと作成しましょう。~/.nodebrew/src再度上記コマンドでインストールします。インストールしたか確認します。currentで現在バージョンが選ばれてない(none)ので指定しましょう。v14.17.2これで安定版node.jsのインストール自体は完了です。最後にnodeコマンドやnpmコマンドがどこからでも使えるようにパスを通しておきます。これは初回のみ必要です。2021年現在はbashではなくzshなのでzprofileを編集します。PATH=$HOME/.nodebrew/current/bin:$PATH適用します。~/.zprofilenodeコマンドが叩けるようになりました。-vv14.17.2framework7をインストールするnodeまで整ったらいよいよframework7コマンドをインストールします。Framework7公式サイトの記述通りにインストールしていきます。framework7-cli公式サイトの記述通り、Framework7-cliインストール時にアクセスエラー等の問題が発生する場合は、以下のオプションを追加して実行します。僕はなくてもいけました。-v10.0.0プロジェクト作成:Framework7プロジェクトを作成するビルド環境が整ったら実際にframework7コマンドを使ってFramework7プロジェクトを作成します。プロジェクトソースを配置したい場所に移動してディレクトリを作っていきます。TestF7Appframework7コマンドでcreateします。framework7コマンドはf7という省略コマンドでも出来ます。createそうするとframework7から対話式で聞かれるので順番に回答していきます。appを選択することです。BundleIDにはデフォルト値だとビルド出来ないので任意のユニークなIDを設定することです。あとはお好みでどうぞです。僕の場合はcssにSCSSを使うことと、Webpackは欠かせないですね。プロジェクト作成が出来たら一旦ローカルWeb版で動くかどうかを見てみます。devそして動きました。devコマンドでローカルサーバーを立ててくれて、まさにWeb技術を使ってスマホアプリ開発を進めていきます。iOSアプリをビルド&実機実行するそれでは実機ビルドと実機実行に進めていきます。iOSアプリをビルドします。iOSアプリは以下のコマンドでビルド出来ます。build-cordova-ios以下のエラーが出る時はCommandLineToolsが有効ではない時みたいです。instanceXCodeを起動して、オプションで以下の値をXCodeを指定してあげます。これでiOSビルドが通ります。次に実際のiPhoneを使った実機実行をしていきます。workspaceファイルがあるのでそれをXCodeで開きます。xcodeprojじゃなくてxcworkspaceです。XCodeを開いたら、実機iPhoneを接続して、1接続した端末を選択2Teamのところを追加済みアカウントで選択3実行ボタン押下とします。Teamで何かしらの署名がないとビルド出来ない為ですね。iPhoneを見ると実機実行出来ているのがわかります。Studioが必要なのでインストールします。上記でbrewをインストールしているのでbrew経由でインストールしちゃうのが楽です。android-studioさて、早速Androidビルドを実行してみましょう。build-cordova-android以下のようなエラーが出ました。JDKやANDROID_SDK_ROOTのパスがないというエラーですね。はい、Androidのビルドには必要ですよね。2021年現在Javaはバージョン8以降色々アップデートされ複雑になっています。このFramework7で生成されるAndroidアプリは最新のJDK11ではなく、JDK8が必要なので古いバージョンをインストールします。因みに公式ではJDK8がもう配布されてないらしくそれに準じたもの?をbrewを使ってインストールします。adoptopenjdk8入ったかどうかを以下のコマンドで確認します。8"/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home無事入りましたね。これのパスを通します。~/.zprofileに以下を記述してsourceします。ANDROID_SDK_ROOT=/Users/takafumi/Library/Android/sdkまた実機ビルドの工程に戻って進めます。build-cordova-android以下のようなエラーが出る事があります。StudioこれはAndroidビルドにgradleコマンドが必要なのですが、gradleコマンドにパスが通ってないようです。Studioのパッケージ内を調べてもgradleコマンドが見つかりませんでした。Studioプロジェクトを何か一つでも作成すると最初にGradleを自動でインストールするようです。Applicationを作成しました。すると、/Users/takafumi/.gradle/wrapper/dists/gradle-6.7.1-bin/bwlcbys1h7rz3272sye1xwiv6/gradle-6.7.1/bin/gradleがインストール?されました。gradleへのパスも通します。記述が必要となります。~/.zprofileをやったら再度Androidビルドを実行してみます。build-cordova-androidビルドは通りました。Studioから実行してみましょう。Androidプロジェクトとして開きます。実機端末を選択して、実行ボタンを押下します。Androidの実機端末で実行出来ました。👍まとめいかがでしたでしょうか。これからFramework7で実機実行を始めてみたい方にはかなり有用な記事になったかと思います。Beanstalkを使った環境構築を徹底解説!小規模から中規模まで対応可能!この記事を書いた人タカフWebエンジニア・Surface専門家Webのフロントエンド・バックエンド・インフラ(AWS)をワンストップで開発出来る事を強みとしているWebエンジニアです。ブログではWeb系プログラミングTips・オススメPC・ガジェットを中心に情報発信しています。株式会社カフーの社長さん。WordPressプラグインの「Crudiator」を開発。コメントをキャンセルメールアドレスが公開されることはありません。@kahoo365Webのフロントエンド・バックエンド・インフラ(AWS)をワンストップで開発出来る事を強みとしているWebエンジニアです。ブログではWeb系プログラミングTips・オススメPC・ガジェットを中心に情報発信しています。株式会社カフーの社長さん。WordPressプラグインの「Crudiator」を開発。執筆書籍Surfaceの使い方を詳しく解説したSurface専用解説本を出版しました!タカフ@WebエンジニアWeb系プログラミングTips・オススメPC・プログラミングスクールを中心に情報発信しています。PCの中でもノートPCが好きで、本当の買うべきノートPCに絞って紹介することが多いです。ITエンジニア歴はいつのまにか15年程。システム開発・Web運営にいそしむ日々。株式会社カフーの社長さん。WordPressのプラグイン開発もしています。Search人気記事1【レビュー】半年使ってわかった。27インチ4Kの最強モニターな件。