差分

このページの2つのバージョン間の差分を表示します。

--- windowsでionic4を始める方法 [2018/09/18] – 作成 adash333
+++ windowsでionic4を始める方法 [2019/02/10] (現在) – [リンク] adash333
@@ 行 1: / 行 1: @@
 ====== WindowsでIonic4を始める方法 ======
-Ionic4.0.0-beta.0を試してみる
+スマホアプリ（&スマホ用WEBページ）作成用フレームワークIonicを始める方法を記載させていただきます。
-/7/27 2018/9/2\\
-http://twosquirrel.mints.ne.jp/?p=26519
+PWA(Progressive Web Apps)という考え方があり、Ionicで作成してPWA対応させたWEBページであれば、WEBページを閲覧するだけで、そのままスマホアプリとしてユーザーにスマホに保存してもらうことが可能だそうです。
-  -Node.jsのインストール（Node.jsのサイトからdownloadしてインストール）
+===== 開発環境 =====
-  -ionic-cliのインストール
+<code>
+Windows 8.1 Pro(もちろんMacでもOKです)
+</code>
+今回構築する環境
 <code>
-npm n install -g ionic
+VisualStudioCode
+Node 10.14.1
+Ionic CLI 4.6.0
 </code>
+なお、作成したアプリのpackage.jsonの一部を記載させていただきます。
+<code>
+"@angular/common": "~7.1.4"
+"@ionic/angular": "4.0.0-rc.0"
+"rxjs": "~6.3.3",
+</code>
+==== 1.Node.jsのインストール ====
+https://nodejs.org/ja/からインストーラー(左右に表示されていますが、左側の『LTS版』を選択してください)をダウンロードして、Node.jsをインストールします。
+https://nodejs.org/ja/
+{{:pasted:20181222-181957.png}}
+慣れてきたら、Windowsの場合は、nvm-windowsというNode.jsのバージョン管理システムをインストールしてから、そちらからNode.jsをインストールしておくと、のちに、Node.jsをバージョンアップしたくなったときにスムーズです。
+==== 1.Node.jsのインストール ====
+するのが一番簡単です。Node.jsのインストール後は、コマンドプロンプトで、
+<code>
+npm install -g ionic
+</code>
+と入力すれば、Ionic CLIがインストールされます。[[https://beta.ionicframework.com/docs/installation/cli|公式サイト]]
+==== 2.VisualStudioCodeのインストール ====
+エディタ（メモ帳のようなIonicのコードを記載するためのソフト）は、無料のVisualStudioCodeがお勧めです。以下からインストーラーをダウンロードして、インストールします。
+https://code.visualstudio.com/download
+{{:pasted:20181222-182415.png}}
+==== 3.Ionic CLIのインストール ====
+  -C:/ドライブ直下に、c:/ionic4/フォルダを作成し、VisualStudioCodeでそのフォルダを開く。
+  -Ctrl+@でターミナルを開く
+  -以下を入力
+<code>
+npm install -g ionic
+</code>
+{{:pasted:20181222-183010.png}}
+以下のコマンドを入力すると、Ionic CLIがちゃんとインストールされたことが確認できます。
+<code>
+ionic -v
+</code>
+{{:pasted:20181222-183236.png}}
+==== 4.新規Ionic4アプリ（Angularベース）の作成 ====
+Ionic3まではJavascriptフレームワークとしてAngularが必須でした。しかし、Ionic4からは、Angularの他にもReactやVueが使用できるらしく、Ionic3までと同様にAngularを用いる場合は、ターミナルで、以下のように、最後に<wrap hi>--type=angular</wrap>を入力します。
+<code>
+ionic start myApp blank --type=angular
+</code>
+{{:pasted:20181222-185151.png}}
+数分かかる。
+{{:pasted:20181222-185930.png}}
+? Install the free Ionic Appflow SDK and connect your app? (Y/n)と聞かれるので、n + Enter とする。（Yにすると、このあとかなり面倒。）
+{{:pasted:20181222-192132.png}}
+{{:pasted:20181222-192203.png}}
+言われた通りに、下記コードを入力。
+<code>
+cd myApp
+ionic serve
+</code>
+ブラウザが自動的に開いて、以下のようになる。
+{{:pasted:20181222-192914.png}}
+ちなみに、この時点で275MBの容量があります。
+==== 5.home.page.htmlの編集 ====
+src/app/home/home.page.htmlを編集してみます。
+(変更前)
+{{:pasted:20181222-193700.png}}
+(変更後)
+{{:pasted:20181222-194118.png}}
+これで、Ionic4アプリ（Angularベース）を作成することができました。
+サーバを停止したい場合は、VisualStudioCodeのcmd.exeの画面でCtrl+C, Y, Enter で停止することができます。サーバを停止しなくても、VisualStudioCodeでファイルなどを修正すると、それをionicが検知して、自動的に再コンパイルして、数十秒待つと、ブラウザの中身が更新されます。
+基本的に、ターミナル（コマンドプロンプト）での操作は、すべて、Angularのものとなるので、Angular CLIのページを参考にしてよいと思います。
+===== リンク =====
+https://beta.ionicframework.com/docs/installation/cli
+Ionic公式サイト
+http://twosquirrel.mints.ne.jp/?p=26519
+Ionic4.0.0-beta.0を試してみる
+/7/27 2018/9/2
+===== リンク =====
+目次：[[ionic4:index.html|Ionic4]]
+前：
+次：