差分

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

--- windowsでionicを始める方法 [2017/06/08] – adash333
+++ windowsでionicを始める方法 [2018/10/07] (現在) – 外部編集 127.0.0.1
@@ 行 1: / 行 1: @@
 =====WindowsでIonicを始める方法=====
-Ionicをインストールするためには、Node.js 6以上が必要ですので、以下の順番でインストールを行います。今回は、エディタとして、筆者の趣味で、VisualStudioCodeも一緒にインストールします。
+ころころVersionが変わるので、注意が必要です。
+/6/9時点での、インストール方法を記載させていただきます(2017/5/9に、Ionic CLI v3がリリースされました)。
+Ionicをインストールするためには、Node.js 6以上が必要ですので、以下の順番でインストールを行います。今回は、エディタとして、筆者の趣味で、VisualStudioCodeも一緒にインストールします。以下の画面は、Windows 8.1 Proの画面ですが、Windows7やWindows10でもほぼ同じです。
+このページを動画にまとめてみました（約6分）。
+<html>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/H1HxPFdKDSw" frameborder="0" allowfullscreen></iframe>
+</html>
+===== 開発環境 =====
+Windows 8.1 Pro
+===== WindowsにIonic3をインストールする流れ =====
+  -Node.jsのインストール
+  -VisualStudioCodeのインストール
+  -Ionicとcordovaのインストール
+  -ionic3でHello world!する。（アプリの作成）
+  -androidアプリ(apkファイル)の作成
+  -apkファイルをGdriveを経由してandroidスマホにインストール
+===== WindowsでIonicを始める方法 =====
 (1)Node.jsのインストール
@@ 行 24: / 行 47: @@
 {{:pasted:20170608-230852.png}}
+(3)Ionicとcordovaのインストール
+今回は、C:\ドライブ直下にionicという名前のフォルダを作成し、その中に、ionicアプリを作成していくこととします。
+{{:pasted:20170608-233326.png}}
+C:\ionic\ フォルダの中で、右クリックで、「Open with code」をクリックすると、VisualStudioCodeが起動して、以下のような画面になります。
+{{:pasted:20170608-235732.png}}
+Ctrl＋@　を押すと、右下の方にcmd.exeが出てきます。
+{{:pasted:20170608-235828.png}}
+このcmd.exeの画面で、
+<code>
+npm install -g ionic cordova
+</code>
+と入力して、Enter.
+{{:pasted:20170609-000236.png}}
+かなり長い時間待ちますが、我慢。インストールが終了した後、
+<code>
+ionic -v
+</code>
+と入力して、Enterすると、以下のようにionic-cliがインストールされたことが分かります。
+{{:pasted:20170609-001830.png}}
+(4)ionic3でHello world!する。（アプリの作成）
+<code>
+ionic start cutePuppyPics
+</code>
+{{:pasted:20170609-002258.png}}
+tabs が選択された状態になっているので、そのままEnterを押すと、以下のような画面になります。
+{{:pasted:20170609-002331.png}}
+{{:pasted:20170609-003807.png}}
+? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、Enterを押しておきます。（ionicにloginしていなければ、どちらにしろ、以下のような画面になります。）
+{{:pasted:20170609-004058.png}}
+作成したアプリの起動を行います。
+<code>
+cd cutePuppyPics
+ionic serve
+</code>
+とすると、以下のように表示されて、
+{{:pasted:20170609-004318.png}}
+その後、自動的にブラウザが開いて、以下のような画面が表示されます。
+{{:pasted:20170609-004400.png}}
+これであなたもIonic3デビューです！
+なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、以下のようにサーバを停止することができます。
+{{:pasted:20170609-004540.png}}
+(5)androidアプリの作成
+<code>
+ionic cordova platform add android
+ionic cordova build android
+</code>
+もし、「? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to inst
+all it and continue?」と聞かれたら、Yesとしておきます。
+{{:pasted:20170609-010352.png}}
+{{:pasted:20170609-010624.png}}
+だいぶ時間がかかります。
+{{:pasted:20170609-010755.png}}
+{{:pasted:20170609-010949.png}}
+指定されたフォルダを開いて、android-debug.apkというファイル（約4MB）を、自分のスマホにメールして、インストールします。なお、スマホの設定については、[[http://qiita.com/knakamigawa/items/5b8bd2793920b517bf25|こちらのリンク]]をご覧ください。
+(6)上記アプリを、arrows M03にインストールして起動した画面は、以下のようになります。
+{{:pasted:20170609-011923.png}}
+これで、Hello worldはおしまいです。
+（参考）
+Installing Ionic（公式サイト：英語）\\
+http://ionicframework.com/docs/intro/installation/
+以下は、ionic-cli v2のときのものであり、今は微妙にコマンドが異なっています。Ionicはversion変更がめまぐるしく、そのたびに、新しいコマンドなどを覚えてなければならなかったりするのが非常に面倒です。また、何かエラーが出たときには、そのエラー内容をGoogle検索して、英語のStackoverflowなどの回答を見て、自分のパソコンで修正していく必要があります。
@@ 行 64: / 行 197: @@
 =>ionic2で調べたいことを検索すると、必ずこのページが出てきます。英語ですが、お勧めです。
+=====リンク=====
 前：
 <wrap hi>