ionic2 チュートリアル
ionic2を使い始める
サーチ…
備考
Ionic 2はクロスプラットフォームのモバイル開発技術です。このフレームワークは、ハイブリッドモバイルアプリケーションを構築するために構築されており、デスクトップアプリケーションにも使用できます。これは一度書いたもので、どこからでも実行できます。 JavaScript / Typescript、Angular 2、HTML、CSS(SCSS / LESS)などのWebテクノロジーを使用しています。 Ionic2 appsは>=android 4.4
でうまくいくが、 android 4.1
でandroid 4.3
実行するには、 クロスウォークを使用する必要がある。
インストールまたはセットアップ
Ionic 2は毎日良くなってきているので、最新の変更と改善を追跡するために、 公式の文書を常にチェックしてください。
前提条件: Ion 2プロジェクトを構築するにはNodeJSが必要です。あなたはダウンロードしてインストールするノードをすることができ、こことNPMとイオン2が使用するパッケージについての詳細はこちら 。
1. Ionic 2のインストール
Ionic 1と同様に、Ionic CLIまたはGUIを使用して、ブラウザのすぐにアプリケーションを構築してテストすることができます。それはあなたのIonic 1のアプリケーションで動作するすべての機能を持っているので、あなたはものを変更する必要はありません!
イオン2を使用するには、単にイオンをnpmからインストールします。
$ npm install -g ionic
EACCESエラーが発生した場合は、 ここで指示に従ってノードに必要な権限を与えてください。
2.最初のアプリケーションを作成する
CLIがインストールされたら、次のコマンドを実行して最初のアプリを起動します。
$ ionic start MyIonic2Project
タブテンプレートはデフォルトで使用されますが、フラグを渡して別のテンプレートを選択することもできます。例えば:
$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install
これでチュートリアルテンプレートが使用されます。
アプリケーションを実行するには、プロジェクトディレクトリに移動し、 ionic serve -lc
を実行します。
$ ionic serve -lc
-lはページのライブリロードを有効にし、-cはコンソールログを表示します。アプリの作成に問題がある場合は、package.jsonがionic2-app-baseのものと一致することを確認してください
新しいアプリをブラウザですぐに遊ぶことができます。
3.デバイスへのビルド
また、物理デバイスやデバイスエミュレータで新しいアプリケーションを構築することもできます。続行するには、 コルドバが必要です。
Cordovaをインストールするには、次のコマンドを実行します。
$ npm install -g cordova
iOSアプリケーションを構築するためのiOSシミュレータのドキュメント(注:OSX以外のOS上のiOSデバイスやエミュレータにはインストールできません)、またはAndroidアプリケーションを構築するためのGenymotionドキュメントをチェックしてください。
iOS端末で実行:
iOSアプリケーションを構築するには、OSXコンピュータで作業する必要があります.iOS用に構築できるようにするためには、ココアフレームワークが必要です。まず、コードを実行することでプラットフォームをコードバスに追加する必要がある場合次のコマンド:
$ ionic cordova platform add ios
iOSデバイスにコンパイルするにはXcodeが必要です。
最後に、次のコマンドでアプリを実行します:
$ ionic cordova run ios
Android搭載端末で実行する:
Androidの手順はほとんど同じです。まず、プラットフォームを追加します。
$ ionic cordova platform add android
それから、AndroidデバイスにコンパイルできるAndroid SDKをインストールします。 Android SDKにはエミュレータが付属していますが、実際には遅いです。 Genymotionははるかに高速です。インストールが完了したら、次のコマンドを実行してください:
$ ionic cordova run android
以上です!あなたの最初のIonic 2アプリを構築していただきありがとうございます!
イオンもライブリロードしています。したがって、あなたがあなたのアプリを開発し、エミュレータ/デバイス上で生きている変化を見たい場合は、次のコマンドを実行することでそれを行うことができます:
iOSの場合:
$ ionic cordova emulate ios -lcs
iOS 9.2.2ではライブロードが機能しないので注意してください。 livereloadで作業したい場合は、次を追加してconfig.xmlファイルを編集します。
<allow-navigation href="*"/>
次に、 <platform name="ios">
:
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</config-file>
アンドロイド用:
$ ionic cordova run android -lcs
l
ライブリロード、の略c
コンソールログ、および用s
サーバーログの。これにより、実行中にエラー/警告があるかどうかを確認することができます。
Windows用ビルド
Windows用のプロジェクトをビルドする場合は、Windowsコンピュータで作業する必要があります。まず、次のコマンドを実行して、ionic2プロジェクトにWindowsプラットフォームをインストールします。
$ionic cordova platform add windows
次に、次のコマンドを実行します。
$ionic cordova run windows
ブラウザで実行するには
$ionic serve
クロムブラウザの検査装置用(クロムブラウザのアドレスバーに入力)
chrome://inspect/#devices