CordovaアプリをFramework7を使って開発してみる
概要
どういう流れで見つけたのかわからないんですけど、気になるフレームワークを見つけたのです。
Framework7
みてみるとCordova対応しているみたいです。私は過去にCordovaでアプリを開発したことがあるんですけど、Cordovaのアプリって、なんかもっさりしていて...それで最近はReact Nativeに浮気なんかしちゃっているんですけど、「やっぱり自由なCSS書きたいなぁ」って思うんですよね。React Nativeってそのへんちょっと弱い感じがするんですよね...UIが決まりきっているっていうか（私の勉強不足かもしれないですけども）...それはそれでスマートでかっこいいんですけど、私はカスタマイズが自由に、できるならかわいいUIにしたいっていう思いがあるので。
じゃあちょっと試してみよう！そんな感じです。
導入
公式に「こうすればいいよ！」ってのが大抵はあります。なきゃ困る。
というわけで公式の手順に従います。その前に、プロジェクトを作成するディレクトリを作成します。（実はこの手順、最初はしなかったので、作成後に変なところにプロジェクトが作成されるという事故が起きました。）
mkdir framework7-playground cd framework7-playground
ディレクトリの準備ができたら公式の手順を始めていきましょう。まずは、
npm i framework7-cli cordova -g
こちらのコマンドを実行します。特に問題なくいきました。
アプリの作成
次に、
framework7 create --ui
こちらのコマンドを実行...
( ^ω^)「これって--uiという名前のプロジェクトを作るコマンドじゃないのかな？」
そんな疑問がわきますが、とりあえず実行してみます。
すると...
ブラウザが自動で開き、アプリの作成画面が表示されます。すごい！！
表示されている項目を確認＆入力するだけでいいのですね。
項目は2019年3月25日時点で以下のものが表示されています。とりあえず表にまとめてみました。直訳ですけど。
2019年3月26日追記 アプリ作成画面のレイアウトがちょっと変わった上に項目が1個（11個目）増えてました。
| # | 項目名 | 意味 |
|---|---|---|
| 1 | Destination | プロジェクトの作成場所 |
| 2 | App Type | アプリの形式 |
| 3 | App (project) name | アプリの名称 |
| 4 | App package (Bundle ID) | アプリのパッケージ（バンドルID） |
| 5 | Target Cordova platform | Cordovaアプリのターゲット（アプリ形式をCordovaにしたときに出現） |
| 6 | What type of framework do you prefer? | フレームワークのタイプ |
| 7 | Choose starter template | テンプレートの選択 |
| 8 | Should we setup project with bundler? | バンドラーの設定 |
| 9 | Do you want to setup CSS Pre-Processor? | CSSプリプロセッサーの設定（バンドラーをWebpackにしたときに出現） |
| 10 | Do you want to specify custom theme color? | テーマカラーの設定 |
| 11 | Include Icon Fonts? | アイコンフォントの設定 |
項目の入力ができたら一番下の「CREATE APP」と書かれた青いボタンをクリック！！するとなんかログが出てきます。歯車アイコンもくるくると...。これは作成中ということなので、気長に待ちましょう。
先ほどクリックしたボタンが「DONE」という緑色のボタンになっていれば作成完了です。
Destinationで指定された場所にあるのかも確認しましょう。（ここで最初の方で書いたディレクトリ事故に気づきました☆）
アプリを起動する
それでは早速アプリを起動してみます。
アプリの作成時のログにもNext stepsという形で表示されている、
npm start
を実行しましょう。もちろんプロジェクトのディレクトリで行なってください。
すると以下のような画面がブラウザで起動します。
デフォルトで色々揃えてくれちゃってます。すごいすごーい！
Cordovaアプリとして実行
npm startでブラウザでアプリが動きましたが、「私はスマホアプリが作りたいんだ！！具体的にはCordova！！」って場合はエミュレーター等で動かせないと意味ないですよね。以前開発した時は「build時にエラー吐いて実行できないZE☆」なんてことよくありましたからね。
というわけで、先ほどのNext stepsにある以下のコマンドを実行してみます。このコマンドを実行しないでエミュレーターで動かすとソースコードが反映されないようで、ずっとスプラッシュスクリーン的なやつがでてます。読み込み中が長いのかなーとか思ってたけど違った、ソースコードがないだけだった。
npm run build-cordova-prod
すると途中でなんか聞かれました。
May Cordova anonymously report usage statistics to improve the tool over time?
ようするに、開発レポートの送信的なアレですかね。別にYesでもいいんですけど、こういうやつなんとなく好きじゃないのでNoにしました。Cordovaちゃんごめんね。
しばらく待って、** BUILD SUCCEEDED **という文字が最後に見えるので、とりあえず成功したかな？ってところでエミュレーターで動かします。cordova/platforms/iosディレクトリの下に、XCode用のファイルがあるので、それをXCodeで開いてrunします。
すごいです、私が以前Cordovaで気になっていたもっさり具合がないです。いい感じです！
おわりに
とりあえず今回はここまで！次回は、サンプルで作ったアプリのフレームワークはFramework7のcoreを選択したので、それをどうやって書いていけばいいのかを調査できたらと思います。
