差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

--- windowsでionicを始める方法 [2017/06/08]
adash333 [WindowsでIonicを始める方法]
+++ windowsでionicを始める方法 [2018/10/07] (現在)
@@ ライン 5: / ライン 5: @@
 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のインストール
@@ ライン 52: / ライン 71: @@
 {{:pasted:20170609-000236.png}}
-かなり長い時間待つが、我慢。インストールが終了した後、
+かなり長い時間待ちますが、我慢。インストールが終了した後、
 <code>
@@ ライン 76: / ライン 95: @@
 {{:pasted:20170609-003807.png}}
-? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、Enterを押しておく。（ionicにloginしていなければ、以下のような画面になる。）
+? Link this app to your Ionic Dashboard to use tools like Ionic View? と聞かれても、とりあえず、Enterを押しておきます。（ionicにloginしていなければ、どちらにしろ、以下のような画面になります。）
 {{:pasted:20170609-004058.png}}
+作成したアプリの起動を行います。
 <code>
@@ ライン 89: / ライン 110: @@
 {{:pasted:20170609-004318.png}}
-その後、自動的にブラウザが開いて、以下のような画面が表示される。
+その後、自動的にブラウザが開いて、以下のような画面が表示されます。
 {{:pasted:20170609-004400.png}}
-なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、以下のようにサーバを停止することができる。
+これであなたもIonic3デビューです！
+なお、サーバを停止するときは、VisualStudioCodeのcmd.exeの画面で、Ctrl+Cを押して、Y+Enterを押すと、以下のようにサーバを停止することができます。
 {{:pasted:20170609-004540.png}}
@@ ライン 99: / ライン 122: @@
 (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はおしまいです。
 （参考）
@@ ライン 108: / ライン 153: @@
 Installing Ionic（公式サイト：英語）\\
 http://ionicframework.com/docs/intro/installation/
+以下は、ionic-cli v2のときのものであり、今は微妙にコマンドが異なっています。Ionicはversion変更がめまぐるしく、そのたびに、新しいコマンドなどを覚えてなければならなかったりするのが非常に面倒です。また、何かエラーが出たときには、そのエラー内容をGoogle検索して、英語のStackoverflowなどの回答を見て、自分のパソコンで修正していく必要があります。
@@ ライン 148: / ライン 197: @@
 =>ionic2で調べたいことを検索すると、必ずこのページが出てきます。英語ですが、お勧めです。
+=====リンク=====
 前：
 <wrap hi>

サルでもわかる機械学習

ユーザ用ツール

サイト用ツール

差分

ページ用ツール