イオン-環境設定

この章では、Ionic Frameworkを開始する方法を示します。次の表には、Ionicで開始するために必要なコンポーネントのリストが含まれています。

Sr.No.	Software & Description
1	NodeJS これは、Ionicを使用してモバイルアプリを作成するために必要な基本プラットフォームです。 NodeJSインストールの詳細については、リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を参照してください。 NodeJSのインストール中にnpmもインストールしてください。
2	Android SDK Windowsプラットフォームで作業し、Androidプラットフォーム用のアプリを開発する場合は、マシンにAndroid SDKをセットアップする必要があります。次のリンクには、リンクに関する詳細情報があります：/android/android_environment_setup [Android Environment Setup]。
3	XCode Macプラットフォームで作業し、iOSプラットフォーム用にアプリを開発する場合は、マシンにXCodeをセットアップする必要があります。次のリンクには、リンクに関する詳細情報があります：/ios/ios_environment_setup [iOS Environment Setup]。
4	cordova and Ionic これらは、Ionicでの作業を開始するために必要な主要なSDKです。この章では、上記の表で説明されているように必要なセットアップが既にあると仮定して、簡単なステップでIonicをセットアップする方法を説明します。

CordovaとIonicのインストール

このチュートリアルでは、Windowsコマンドプロンプトを使用します。同じ手順をOSX端末に適用できます。コマンドウィンドウを開いてCordovaとIonicをインストールします-

C:\Users\Username> npm install -g cordova ionic

アプリを作成する

Ionicでアプリを作成するときに、次の3つのオプションから選択して開始できます-

タブアプリ
空白のアプリ *サイドメニューアプリ

コマンドウィンドウで、アプリを作成するフォルダーを開き、下記のオプションのいずれかを試してください。

タブアプリ

Ionicタブテンプレートを使用する場合、アプリはタブメニュー、ヘッダー、いくつかの便利な画面と機能で構築されます。これはデフォルトのIonicテンプレートです。コマンドウィンドウを開き、アプリを作成する場所を選択します。

C:\Users\Username> cd Desktop

このコマンドは、作業ディレクトリを変更します。アプリはデスクトップに作成されます。

C:\Users\Username\Desktop> ionic start myApp tabs

Ionic* Start コマンドは、 *myApp という名前のフォルダーを作成し、Ionicファイルとフォルダーをセットアップします。

C:\Users\Username\Desktop> cd myApp

次に、作成した myApp フォルダーにアクセスします。これがルートフォルダです。

Androidプラットフォーム用のCordovaプロジェクトを追加し、基本的なCordovaプラグインもインストールしましょう。次のコードを使用すると、Androidエミュレーターまたはデバイスでアプリを実行できます。

C:\Users\Username\Desktop\myApp> ionic platform add android

次のステップは、アプリをビルドすることです。次のコマンドを実行した後にビルドエラーが発生した場合は、Android SDKとその依存関係をインストールしていない可能性があります。

C:\Users\Username\Desktop\myApp> ionic build android

インストールプロセスの最後のステップは、アプリを実行することです。これにより、接続されている場合はモバイルデバイスが起動し、接続されているデバイスがない場合はデフォルトのエミュレーターが起動します。 Android Default Emulatorは遅いので、https://www.genymotion.com/#！/[Genymotion]または他の人気のあるAndroid Emulatorをインストールすることをお勧めします。

C:\Users\Username\Desktop\myApp> ionic run android

これにより、Ionic Tabsアプリである以下の結果が生成されます。

Ionic Tabs App

空白のアプリ

ゼロから始めたい場合は、Ionic blankテンプレートをインストールできます。次のように、 ionic start myApp tabs の代わりに ionic start myApp blank を追加して、上記で説明したのと同じ手順を使用します。

C:\Users\Username\Desktop> ionic start myApp blank

Ionic Start コマンドは、 myApp という名前のフォルダーを作成し、Ionicファイルとフォルダーをセットアップします。

C:\Users\Username\Desktop> cd myApp

Androidプラットフォーム用のCordovaプロジェクトを追加し、上記の基本的なCordovaプラグインをインストールしましょう。

C:\Users\Username\Desktop\myApp>ionic platform add android

次のステップはアプリをビルドすることです-

C:\Users\Username\Desktop\myApp> ionic build android

最後に、次のコードのようにアプリを起動します-

C:\Users\Username\Desktop\myApp> ionic run android

これにより、Ionic Blankアプリである次の結果が生成されます。

Ionic Blank App

サイドメニューアプリ

使用できる3番目のテンプレートは、サイドメニューテンプレートです。手順は前の2つのテンプレートと同じです。以下のコードに示すように、アプリを起動するときに sidemenu を追加するだけです。

C:\Users\Username\Desktop> ionic start myApp sidemenu

Ionic Start コマンドは、 myApp という名前のフォルダーを作成し、Ionicファイルとフォルダーをセットアップします。

C:\Users\Username\Desktop> cd myApp

Androidプラットフォーム用のCordovaプロジェクトを追加し、以下のコードで基本的なCordovaプラグインをインストールしましょう。

C:\Users\Username\Desktop\myApp> ionic platform add android

次のステップは、次のコードでアプリをビルドすることです。

C:\Users\Username\Desktop\myApp> ionic build android

最後に、以下のコードでアプリを起動します。

C:\Users\Username\Desktop\myApp> ionic run android

これにより、Ionic Side Menuアプリである次の結果が生成されます。

Ionic Side Menu App

ブラウザでアプリをテストする

JavaScriptを使用しているため、任意のWebブラウザーでアプリを提供できます。これにより構築プロセスが高速化されますが、ネイティブエミュレーターとデバイスでアプリを常にテストする必要があります。次のコードを入力して、Webブラウザーでアプリを提供します。

C:\Users\Username\Desktop\myApp> ionic serve

上記のコマンドは、Webブラウザーでアプリを開きます。 Google Chromeは、モバイル開発テスト用のデバイスモード機能を提供します。 F12 を押して開発者コンソールにアクセスします。

Ionic Side Menu App

コンソールウィンドウのクリックの左上には、「デバイスモードの切り替え」アイコンがあります。次のステップは、右上隅の「右にドッキング」アイコンをクリックすることです。ページが更新されると、Webブラウザでテストする準備が整います。

プロジェクトフォルダー構造

Ionicは、すべての種類のアプリに対して次のディレクトリ構造を作成します。これは、Ionicの開発者がすべてのディレクトリと以下に記載するファイルの目的を理解するために重要です-

フォルダー構造

上の画像に示されているプロジェクトのフォルダー構造で利用可能なすべてのフォルダーとファイルを簡単に理解してみましょう。

フック-フックは、ビルドプロセス中にトリガーできるスクリプトです。通常、これらはCordovaコマンドのカスタマイズおよび自動プロセスの構築に使用されます。このチュートリアルでは、このフォルダーを使用しません。
プラットフォーム-これは、AndroidおよびIOSプロジェクトが作成されるフォルダーです。開発中にこれらのファイルを必要とするプラットフォーム固有の問題が発生する場合がありますが、ほとんどの場合はそのままにしておく必要があります。
プラグイン-このフォルダーにはCordovaプラグインが含まれています。 Ionicアプリを最初に作成すると、プラグインの一部がインストールされます。以降の章でCordovaプラグインをインストールする方法を示します。
リソース-このフォルダは、アイコンやスプラッシュ画面などのリソースをプロジェクトに追加するために使用されます。
Scss -IonicコアはSassで構築されているため、これはSassファイルがあるフォルダーです。プロセスを簡素化するために、このチュートリアルではSassを使用しません。スタイリングはCSSを使用して行われます。
www -wwwはIonic開発者の主な作業フォルダです。彼らはほとんどの時間をここで過ごします。 Ionicは「www」内のデフォルトのフォルダー構造を提供しますが、開発者は自分のニーズに合わせていつでも変更できます。このフォルダを開くと、次のサブフォルダが見つかります-
css フォルダー。CSSスタイリングを記述します。
画像を保存するための img フォルダー。
アプリのメイン構成ファイル（app.js）およびAngularJSコンポーネント（コントローラー、サービス、ディレクティブ）を含む js フォルダー。 JavaScriptコードはすべてこれらのフォルダー内にあります。
ライブラリが配置される libs フォルダー。
HTMLファイル用の templates フォルダー。
アプリの開始点として Indexl 。
その他のファイル-これは初心者向けのチュートリアルなので、他の重要なファイルのいくつかとその目的についても言及します。
.bowerrc は、bower構成ファイルです。
.editorconfig はエディター構成ファイルです。
.gitignore は、アプリをGitリポジトリにプッシュするときにアプリのどの部分を無視するかを指示するために使用されます。 bowerパッケージマネージャーを使用する場合、bower.json にはbowerコンポーネントと依存関係が含まれます。
gulpfile.js は、gulpタスクマネージャーを使用して自動化されたタスクを作成するために使用されます。
config.xml はCordova構成ファイルです。
package.json には、NPMパッケージマネージャーを使用してインストールされるアプリ、その依存関係、およびプラグインに関する情報が含まれています。

次の章では、Ionicオープンソースフレームワークで使用できるさまざまな色について説明します。

Ionic-environment-setup

目次