windowsでionic4を始める方法
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
windowsでionic4を始める方法 [2018/12/22] – [3.Ionic CLIのインストール] adash333 | windowsでionic4を始める方法 [2019/02/10] (現在) – [リンク] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
====== WindowsでIonic4を始める方法 ====== | ====== WindowsでIonic4を始める方法 ====== | ||
+ | スマホアプリ(& | ||
+ | PWA(Progressive Web Apps)という考え方があり、Ionicで作成してPWA対応させたWEBページであれば、WEBページを閲覧するだけで、そのままスマホアプリとしてユーザーにスマホに保存してもらうことが可能だそうです。 | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 15: | 行 17: | ||
Ionic CLI 4.6.0 | Ionic CLI 4.6.0 | ||
</ | </ | ||
+ | なお、作成したアプリのpackage.jsonの一部を記載させていただきます。 | ||
+ | < | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | </ | ||
==== 1.Node.jsのインストール ==== | ==== 1.Node.jsのインストール ==== | ||
https:// | https:// | ||
行 53: | 行 60: | ||
==== 4.新規Ionic4アプリ(Angularベース)の作成 ==== | ==== 4.新規Ionic4アプリ(Angularベース)の作成 ==== | ||
- | Ionic3まではJavascriptフレームワークとしてAngularが必須であったのですがIonic4からは、Angularの他にもReactやVueが使用できるらしく、Ionic3までと同様にAngularを用いる場合は、ターミナルで、以下のように、最後に< | + | Ionic3まではJavascriptフレームワークとしてAngularが必須でした。しかし、Ionic4からは、Angularの他にもReactやVueが使用できるらしく、Ionic3までと同様にAngularを用いる場合は、ターミナルで、以下のように、最後に< |
< | < | ||
ionic start myApp blank --type=angular | ionic start myApp blank --type=angular | ||
</ | </ | ||
+ | {{: | ||
+ | 数分かかる。 | ||
+ | {{: | ||
+ | ? Install the free Ionic Appflow SDK and connect your app? (Y/ | ||
+ | {{: | ||
+ | {{: | ||
+ | 言われた通りに、下記コードを入力。 | ||
+ | < | ||
+ | cd myApp | ||
+ | ionic serve | ||
+ | </ | ||
+ | ブラウザが自動的に開いて、以下のようになる。 | ||
+ | {{: | ||
+ | |||
+ | ちなみに、この時点で275MBの容量があります。 | ||
+ | ==== 5.home.page.htmlの編集 ==== | ||
+ | src/ | ||
+ | |||
+ | (変更前) | ||
+ | {{: | ||
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | これで、Ionic4アプリ(Angularベース)を作成することができました。 | ||
+ | |||
+ | サーバを停止したい場合は、VisualStudioCodeのcmd.exeの画面でCtrl+C, | ||
+ | |||
+ | 基本的に、ターミナル(コマンドプロンプト)での操作は、すべて、Angularのものとなるので、Angular CLIのページを参考にしてよいと思います。 | ||
+ | |||
+ | |||
===== リンク ===== | ===== リンク ===== | ||
- | 公式サイト | ||
https:// | https:// | ||
+ | Ionic公式サイト | ||
http:// | http:// | ||
Ionic4.0.0-beta.0を試してみる | Ionic4.0.0-beta.0を試してみる | ||
2018/7/27 2018/9/2 | 2018/7/27 2018/9/2 | ||
+ | |||
+ | ===== リンク ===== | ||
+ | 目次:[[ionic4: | ||
+ | |||
+ | 前: | ||
+ | |||
+ | 次: | ||
+ |
windowsでionic4を始める方法.txt · 最終更新: 2019/02/10 by adash333