この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| 
                    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でもほぼ同じです。 | 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のインストール | (1)Node.jsのインストール | ||
| ライン 103: | ライン 122: | ||
| (5)androidアプリの作成 | (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はおしまいです。 | ||
| (参考) | (参考) | ||
| ライン 112: | ライン 153: | ||
| Installing Ionic(公式サイト:英語)\\ | Installing Ionic(公式サイト:英語)\\ | ||
| http://ionicframework.com/docs/intro/installation/ | http://ionicframework.com/docs/intro/installation/ | ||
| + | |||
| + | |||
| + | |||
| + | 以下は、ionic-cli v2のときのものであり、今は微妙にコマンドが異なっています。Ionicはversion変更がめまぐるしく、そのたびに、新しいコマンドなどを覚えてなければならなかったりするのが非常に面倒です。また、何かエラーが出たときには、そのエラー内容をGoogle検索して、英語のStackoverflowなどの回答を見て、自分のパソコンで修正していく必要があります。 | ||
| ライン 152: | ライン 197: | ||
| =>ionic2で調べたいことを検索すると、必ずこのページが出てきます。英語ですが、お勧めです。 | =>ionic2で調べたいことを検索すると、必ずこのページが出てきます。英語ですが、お勧めです。 | ||
| + | |||
| + | |||
| + | |||
| + | =====リンク===== | ||
| 前: | 前: | ||
| <wrap hi> | <wrap hi> | ||