CordovaでiOSアプリをビルドして実機実行する方法2019年5月7日SHAREツイートシェアはてブLINEどうも、タカフです。Framework7、いいですよね。数年前からスマホアプリを作る際には、どのUIフレームワークよりも使いやすくていいなと思い、Version1からよくお世話になっていました。Framework7を知らない人の為に簡単に説明しますと、Framework7とはスマホアプリのUIをWebの技術(HTML/CSS/JS)で作るためのライブラリです。スマホアプリ作るのにWebの技術で作るというのは非常にコスパがいいです。どんなメリットがあるというと、iOS/Androidアプリをほとんど同時に開発出来るWeb開発者ならHTML/CSS/JavaScriptの技術が活かせるちょっとしたUIの変更ならストアを通さず改修することも出来るといったところです。Cordovaを使ったiOSアプリのビルドして実機実行する方法を記事にしてみます。※本記事はiOSビルドの作業があるのでMacでしか出来ません。Cordovaなの?Framework7はWeb技術で作るスマホUIの部品群ライブラリなので、普通にWebViewを用意してそこにhtmlファイルとしてsrcをセットしてやれば、アプリライクなUIは開発できちゃいます。現状WebViewをガワとして中身はhtmlで動作させ、さらいネイティブAPIとの連携もたくさんあるという開発手法の時は、ほとんどCordova以外の選択肢はありません。いうコマンドラインを用意してくれていて手順に従ってコマンドを叩いていけば非常に簡単にアプリの土台を作ることができます。いう組み合わせを使うわけなのです。Cordovaを使うようにするにはnpmの環境が必須です。ここではnpmのインストール方法は割愛させて頂きます。以下のページなんかを参考にされたし。https://qiita.com/PolarBear/items/62c0416492810b7ecf7cFramework7アプリを作るnpm環境が用意出来たら実際にFramework7アプリの土台アプリを作っていきましょう。基本的には土台アプリを作ってその基本コードに対してガシガシ開発していくスタイルがオススメです。CLIなるものをインストールしましょう。つければグローバルインストールとなります。複数アプリを作るとしてもこの作業は一回でOKです。framework7-cli初期土台アプリを作る次が実際の土台アプリを作るコマンドです。最初にアプリ名となるディレクトリを作成して(ここでは例としてMyF7Appとします)、その中でframework7コマンドを呼び出します。どんなアプリを作るのか対話形式で質問されるので、順番に回答していきます。appを選択すること。BundleIDにはデフォルト値だとビルド出来ないので任意のIDを設定することです。あとはお好みでどうぞです。この質問でわかることですがWebpackやsassが一緒にインストール出来るというのが非常に嬉しいポイントですね。これらはWebベースでスマホアプリを開発する上では必須技術です。ここまで完了すると、以下のように表示されます。startこれだけでローカルWebサーバーが起動し、webpackやsassを使ったフロントエンジニアリングを使った開発が可能となります。iOSビルドをしてみるさて、先程の次のステップのうちiOSビルドに関するコマンドを実行してみましょう。**と表示されているはずです。ビルドが失敗している場合、大抵はプロビジョニングプロファイルの設定だと思います。次のステップに進みましょう。ファイルが生成されているはずなのでこれを開いてみましょう。初期生成時はプロビジョニングプロファイルのあたりが設定されていないはずなので、ビルドが出来るものに変えておきます。xcode上でビルドして実機実行してみるここまでくればxcode上でビルドが出来て実機のiPhoneでも実行出来るはずです。メニューからBuildを実行して、iPhoneをUSBで接続して実行してみましょう。実行するとFramework7のきれいなスプラッシュ画像が表示されます。その後アプリ画面も表示されます。Cordovaを使ってiPhoneで実機実行するところまで出来ました。あとはこの土台アプリからFramework7のUI部品を使って開発を進めると、比較的簡単にスマホアプリを作ることが出来ます。Blueprint)この記事を書いた人タカフ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の最強モニターな件。