ionic-framework チュートリアル
ionic-frameworkを使い始める

Android Angular 2 AngularJS Cordova CSS HTML ionic2 iOS JavaScript TypeScript

備考

Ionicは、HTML、CSS、およびJavaScriptを使用してモバイルアプリケーションを開発するためのフレームワークです。イオンアプリケーションはネイティブアプリケーションとして実行され、ネイティブの「ルックアンドフィール」を備えています。

IonicはAngularJSフレームワーク上に構築され、モバイルアプリケーションの設計、構築、およびパッケージ化に完全なソリューションを提供します。デザインは、テンプレートツールとカスタムアイコンライブラリのコレクションで実現します。 IonicはカスタムCSS / SASSコンポーネントとJavascript UI Extensionsを提供します。 Ionicアプリは、コマンドラインインターフェイス（CLI）を使用して構築、エミュレート、パッケージ化することができます。

イオンテンプレートは動的で応答性が高く、環境に適応してネイティブの「ルックアンドフィール」を提供します。この適応には、レイアウト、スタイル、およびアイコンが含まれます。 Ionicは独立したプラットフォームのカスタマイズも可能にします。 IonicアプリはフロントエンドWebテクノロジーを使用しているため、ブラウザで見ることもできます。

IonicアプリはデフォルトでApache Cordovaの上に構築されています。彼らは、プッシュ通知、カメラ、加速度計などのネイティブ機能を使用できるようにするすべてのCordovaプラグインにアクセスできます。Cordovaアプリケーションは、わずかな労力で複数のプラットフォームおよびデバイス（電話、タブレットなど）で動作します。 Cordovaは、 trigger.ioのような他のクロスプラットフォーム技術と交換することができます。

バージョン

バージョン	発売日
1.3.1 "エルサルバドル"	2016-05-12
1.3.0 "デリー"	2016-04-21
1.2.0 "ジルコニウム - ゼレン"	2015-12-09
1.1.0 "キセノン - キセロス"	2015-08-13
1.0.0 "ウラン - ユニコーン"	2015-05-12

インストールまたはセットアップ

1. IonicフレームワークとCordova（IonicアプリはCordovaをベースにしているため）をnpm（Node Package Manager）を使用してインストールします。

ご使用のシステムにNode.jsの最新バージョンがインストールされていることを確認してください。 Node.jsがインストールされていない場合は、ここからインストールできます。

また、Macユーザーの場合、システムに最新のXcodeバージョンがインストールされていると、コマンドラインツールとiOs Simulatorがダウンロードできます。

ターミナルウィンドウ（Mac）またはコマンドウィンドウ（Windows）を開き、CordovaとIonicをインストールします。

$ npm install -g cordova ionic

Macでは、システム構成に応じてsudoを使用する必要があります。

$ sudo npm install -g cordova ionic

お使いのコンピュータにCordovaとIonicがすでにインストールされている場合は、必ず最新のバージョンにアップデートしてください：

$ npm update -g cordova ionic

または

$ sudo npm update -g cordova ionic

AndroidおよびiOSのプラットフォームガイドに従って、必要なプラットフォームの依存関係をインストールしてください。

注：iOSの開発にはMac OS Xが必要です.IOSシミュレータにはIonic CLIを使用するためにios-sim npmパッケージが必要です。このパッケージは次のコマンドでインストールできます。

$ sudo npm -g install ios-sim

2.新しいIonicプロジェクトを開始します。

既成のアプリケーションテンプレートの1つを使用して、または新しく開始するための空白のテンプレートを使用して、Ionicプロジェクトを作成します。

$ ionic start myApp blank

または

$ ionic start myApp tabs

または

$ ionic start myApp sidemenu

3. Ionicアプリをテストします。

iOSとAndroidプラットフォームのデスクトップブラウザでIonicアプリをテストするには：

$ ionic serve --lab

ionic serve --labは複数のプラットフォームでアプリのUIをテストionic serve --labですが、Javascript ConsoleやElement Inspectionにはいくつかの問題があります。

$ ionic serve

エミュレータでIonicアプリをテストするには：

$ cd myApp
$ ionic platform add ios android
$ ionic build ios
$ ionic emulate ios

Androidのエミュレータテストでは、アンドロイドとiOSを置き換えてください：

$ ionic build android
$ ionic emulate android

USB経由で接続されたAndroidデバイスでIonicアプリをテストするには：

$ ionic run android

USB経由で接続されたiOSデバイスでIonicアプリをテストするには：

$ ionic run ios --device

イオンフレームワークの紹介とインストールとセットアップ

イオンフレームワーク

Angular JSとFront End Web技術を使用したクロスプラットフォームのモバイルアプリケーション開発フレームワーク。

公式サイト ： http : //ionicframework.com/

ドキュメンテーション ： http : //ionicframework.com/docs/

インストールとセットアップ

インストールには、必要なNPM（ノードパッケージマネージャ）とCordovaが必要です。

あなたはダウンロードしてからNpde JSインストールすることができ、ここで、箱から出してNPMが付属しています。

Apache Cordovaをダウンロードするには、コマンドラインからNPMを使用できます

npm install -g cordova

すでにNPMとCordovaをお持ちの場合、次のコマンドを使用してコマンドラインからイオンフレームワークをインストールすることができます。

npm install -g ionic

これはコマンドラインから使用するイオンフレームワークをインストールして設定します。

注意*システム環境に基づいて、管理者権限で実行する必要があります。

新しいプロジェクトを開始する

新しいIonic Frameworkプロジェクトを開始するには、以下のコマンドを使用します

ionic start myproject

または

ionic start myproject [template_name]

テンプレート：

Ionicでは、組み込みのテンプレートを使用してプロジェクトを作成できます

tabs （デフォルト）：タブ表示付きのシンプルなアプリケーションを作成します。

sidemenu ：サイドメニューとイオンアプリを作成します。

blank ：空のイオンアプリを作成します。

すべてのイオンプロジェクトファイルを含むmyprojectという名前の新しいフォルダが作成されmyproject 。

あなたのブラウザでプロジェクトをテストするには、以下のコマンドを使用できます

ionic serve --lab

または

ionic serve

エミュレートを実行するエミュレータまたは携帯電話でアプリを実行またはテストするには、まず次のコマンドで使用できるプラットフォームを追加する必要があります

ionic platform [Platform Name]
ionic build [Platform Name]
ionic emulate [platform name]

プラットフォーム名それぞれのプラットフォームでAndroid and IOSを直接記述することができます。複数のプラットフォーム名もスペースで区切って指定できます。

あなたのアプリを実行するには、使用することができます

ionic run [platform name]

あなたが使用できるヘルプについては

ionic --help

または

ionic help

ionic cliの詳細については、このリンクを参照してください。

ionicで利用可能なCSSコンポーネントについてはこのリンクを参照してください。

ionicのJavascript APIリファレンスについては、このリンクを参照してください。

イオンで速く開発するには、イオンプレイグラウンドも試してみてください。

イオンフレームワークのベスト

イオンフレームワークHello World App

すべての設定後、Hello World Appを作成する

シンプルブランクアプリケーションを作成するには、端末で以下のコマンドを実行します。

ionic start HelloWorld blank  // create new project

cd HelloWorld                 // get into HelloWorld directory

subline / webstrome IDEでHelloWorldプロジェクトを開きます：
- www / ditectoryのindex.htmlを編集する

 <body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Ionic Hello World App</h1>
     </ion-header-bar>
     <ion-content>
        <div class="center">Hello World..!</div>
     </ion-content>
    </ion-pane>
 </body>

端末からブラウザで実行するには：

ionic serve                  // run the app in browser

プラットフォームを追加するには：

ionic platform add android   // add android platform
ionic platform add ios       // add ios platform

デバイスで実行するには：

adb devices                  // to check devices is connected
ionic run android            // to run on android devices
ionic run ios                // to run on ios devices

livereloadで実行するには：

ionic run android -c -s -l    // to check app in live reload with console.

Yo（Yeoman）イオンプロジェクトのためのイオンプラットフォーム（Ionic Cloud）

イオンプラットフォーム：

簡単にIonicアプリを構築、プッシュ、デプロイ、スケーリングできます。

タイトル説明：

Ionic Platformは、クロスプラットフォームのモバイルアプリケーションを管理および拡張するためのクラウドプラットフォームです。統合されたサービスにより、あなたとあなたのチームは、アプリケーションを効率的に構築、展開、拡張することができます。

ドキュメントの目的：
Ionic Platformは標準的なイオンプロジェクトとうまく機能します。しかし、非標準ディレクトリ構造に従ったプロジェクトは、いくつかのハードルに直面するかもしれません。この文書は、Yeomanを使用して作成されたIonicプロジェクトでIonic Platformを使用する手順を示しています。

ドキュメントの範囲：
このドキュメントでは、Yeomanを使用してIonicプロジェクトを作成し、Ionic Platform Web Clientを使用してIonicプラットフォームと統合するための基本的な手順について説明します。このドキュメントでは、Ionic Deploy、Ionic Analytics、Ionic Pushを使用するための基本的な手順について説明します。

対象とする訪問者：
このドキュメントの対象読者は、初心者レベルと専門家レベルの両方の専門知識を持つWeb / Mobile App開発者で、以下の前提条件に精通しています。

前提条件：
このドキュメントを試す前に、以下のフレームワーク/ツールに精通している必要があります。

AngularJs： https : //docs.angularjs.org/guide
IonicFramework： http ://ionicframework.com/docs/guide
Yeoman： http : //yeoman.io/codelab/index.html
イオン発生器： https : //github.com/diegonetto/generator-ionic
イオンプラットフォーム： https : //ionic.io/platform

イオンフレームワークジェネレータ

YeomanのIonic Framework用ジェネレータ、最新のWebアプリケーション用のWebの足場ツール

Node.jsは、ChromeのV8 JavaScriptエンジンで構築されたJavaScriptランタイムです。 npmはJavaScriptのパッケージマネージャです。 http://nodejs.orgからNode（およびnpm）をダウンロードしてインストールします。

$ npm install npm –g
$ npm install -g yo

Yeomanは、新しいプロジェクトを開始し、ベストプラクティスとツールを処方して生産性を維持するのに役立ちます。

$ yo ionic [app-name]

package.jsonにdevDependenciesに次のコードを記述します

"grunt-string-replace": "^1.2.1"

bower.jsonには以下のものが含まれています

"ionic-platform-web-client": "^0.7.1"

Gruntfile.jsでスクリプトフォルダを'js'に変更します。必要に応じてindex.htmlも変更してください。

grunt.initConfig({   yeoman: {…………
    scripts: 'js',
    ………… } })

その後、

$ bower install && npm install
$ grunt
$ grunt serve

$ cordova platform add android 
$ grunt build:android --debug

ionic-platform-web-client

Ionicプラットフォームとの相互作用を提供するWebクライアント。

私たちはあなたのアプリがIonic Platformに話すためのコードが必要です。プラグインとIonic.ioプラットフォームとのインターフェースをとるために、Ionicアプリ用のIonicプラットフォームWebクライアントを追加する必要があります。

$ ionic io init

あなたのapp.jsに'ionic.service.core'モジュールの依存関係を追加します。 Gruntfile.jsで以下のようにgruntタスク'ionicSettings'を追加します。

grunt.initConfig({
ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js',

'string-replace': {
  ionicSettings: {
    files: {
      '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>',
    },
    options: {
      replacements: [
        {
          pattern: 
        '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"',
          replacement: 
        '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";'
        }
      ]
    }
  }
},
       copy: {
    ionicPlatform:{
                expand: true,
                cwd: 'app/bower_components/ionic-platform-web-client/dist/',
                src: ['**'],
                dest: 'www/bower_components/ionic-platform-web-client/dist'
               }
    }
});

grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']);

initに 'ionicSettings'を追加し、 コピー後にタスクを圧縮します。 index.htmlでは、下のタグをすべてのタグ宣言の後に移動します。

<script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>

その後、

$ Grunt serve

イオン配置

実稼働アプリケーションのリアルタイム更新をプッシュし、バージョン履歴を管理します。

Ionic Deployを使用すると、バイナリの変更を必要としない変更がある場合はオンデマンドでアプリケーションを更新し、数日または数週間の待ち時間を節約できます。以下の手順に従って、アプリケーションのIonic Deployを設定します。

Gruntfile.jsで 、以下のようにgruntタスク'deploy'を追加します。

grunt.registerTask('deploy', function () {
  return grunt.task.run(['init', 'ionic:upload' + this.args.join()]);
});

実行する

$ ionic plugin add ionic-plugin-deploy

イオン配置コード：

var deploy = new Ionic.Deploy();

// Check Ionic Deploy for new code
deploy.check().then(function(hasUpdate) {
}, function(err) {
});

// Update app code with new release from Ionic Deploy
deploy.update().then(function(result) {
}, function(error) {
}, function(progress) {
});

アップデートの導入：

あなたのアプリの新しいコードを送信してください。

apkを作成してアプリをインストールします。あなたのコードを少し変更して、 ' grunt deploy 'を使って変更を展開してください。その後、あなたのアプリからそれを更新します。

また、 apps.ionic.ioダッシュボードから展開することもできます。 deployパラメータなしでアプリケーションをデプロイできます。次に、ダッシュボードにメタデータとバージョニングの詳細を追加し、そこからアプリをデプロイすることができます。

$ grunt build:android --debug

$ grunt deploy --note "release notes"
$ grunt deploy --note "release notes" --deploy=production

イオン解析

イベントのライブフィード、または時間の経過に伴う未処理/一意のイベント/ユーザー数を表示します。

現在、あなたのアプリには何人のユーザーがいますか？明日、または来週あなたのアプリをどれだけ使用するのですか？情報がなければ、あなたのアプリがあなたが期待する方法で使用されているかどうかを知る方法がありません。以下の手順に従って、アプリケーションにIonic Analyticsを設定します。

あなたのapp.jsで 、 ionic.service.coreの後に ' ionic.service.analytics 'モジュールの依存関係を追加します。私たちのモジュールのrun関数でanalytics registerメソッドを実行します。

$ionicAnalytics.register();

Ionic Analyticsでは、ユーザーがアプリケーション内で行った各追跡アクションは、イベントオブジェクトで表されます。イベントとは、特定の時点で実行される単一のアクションです。自分のイベントを追跡するには、アクションが発生するたびに$ionicAnalytics.track(eventType, eventData)呼び出します。

$ionicAnalytics.track('User Login', {
  user: $scope.user
});

ion-track-tap指令は、そのホスト要素がタップされたときにイベントを送信します。関連するion-track-data指令はイベントデータを添付します。

<button ion-track-tap="eventType" ion-track-data="expression"></button>

apps.ionic.ioダッシュボードでは、次の分析データを表示できます。

イベント：時間の経過に伴う生の数、またはイベントを完了した一意のユーザーの数を表示します。イベントは、アプリを読み込んでいるユーザーから購入を確認することまで何でもかまいません。

目標到達プロセス：目標到達目標に達するまで、ユーザーがアプリ内で行動すると考えられる一連のアクションです。漏斗を慎重に使用すると、コンバージョン率を向上させるのに役立ちます。

セグメント：特定のプロパティでグループ化されたイベントを時間の経過と共に表示します。または、特定のプロパティに一致するイベントの割合を計算します。セグメントは、ユーザーベースの理解を助け、時間の経過とともにプロパティがどのように変化するかを確認するのに役立ちます。

保存期間：ユーザーがアプリの使用を停止するまでの期間を追跡します。または、完了した販売のように、ユーザーが定義された目標に達するのにかかる時間を特定します。

Pulse：ユーザーからのイベントのライブフィード。

イオンプッシュ

ターゲット設定され自動化されたプッシュ通知をユーザーに送信します。

Ionic Pushを使用すると、ユーザーが特定の条件に一致すると自動的に送信されるシンプルなダッシュボードを使用してプッシュ通知を作成し、サーバーからプッシュ通知を送信する簡単なAPIを提供できます。

Androidプッシュプロファイル：

Androidのプッシュ通知はGoogle Cloud Messaging （GCM）サービスを使用します。 Google Developers Consoleを開き、プロジェクトを作成します。 プロジェクト番号をコピーします。これはGCM送信者IDまたはGCMプロジェクト番号になります。

[ APIマネージャー]セクションで、 Google Cloud Messaging APIを有効にします。次に、「 Credentials」セクションにナビゲートし、「Create Credentials 」を選択し、「API Key」、「Server Key」の順に選択します。あなたのAPIキーに名前をつけて、 Accept requests from ...フィールドを空白のままにして、 Createをクリックします。 APIキーを保存してください！

認証：

Ionic Platformのアプリケーションのダッシュボードに移動し、 設定 - >証明書に移動します。まだ作成していない場合は、新しいセキュリティプロファイルを作成し、 編集を押します。 プロファイルタグをメモしてください。

Androidタブをクリックして、 Google Cloud Messagingのセクションを見つけ、Googleデベロッパーコンソールで生成したAPIキーを入力して[ 保存 ]をクリックします。 設定 - > APIキーに移動します。 APIトークンで、新しいトークンを作成してコピーします。これがあなたのAPIトークンになります。

$ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER"
$ ionic config set gcm_key <your-gcm-project-number>
$ ionic config set dev_push false
$ ionic io init

注：phonegap-plugin-pushにはAndroidサポートリポジトリバージョン32以上が必要です

あなたのapp.jsでionic.service.core後に「ionic.service.push」モジュールの依存関係を追加

イオンプッシュコード：

サービスを初期化し、モジュールの実行機能でデバイスを登録します。ユーザーに通知を送信するためにユーザーが登録したデバイストークンが必要です。

$ionicPush.init({
  debug: true,
  onNotification: function (notification) {
    console.log'token:', notification.payload);
  },
  onRegister: function (token) {
    console.log('Device Token:', token);
    $ionicPush.saveToken(token); // persist the token in the Ionic Platform
  }
});

$ionicPush.register();

実行する

$ grunt build:android --debug

Ionic Pushを使用すると、ダッシュボードから目的のプッシュ通知を作成できます。以下の形式で通知をサーバーから送信することもできます。

curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{
    "tokens": ["DEVICE_TOKEN"],
        "profile": "PROFILE_TAG",
        "notification": {
                "message": "Hello World!"
        "android": {
                  "title": "Hi User",
                  "message": "An update is available for your App",
                  "payload": {
                        "update": true
                  }
            }
    } }' "https://api.ionic.io/push/notifications"

注：iOS用のIonic Pushを設定する手順は、プッシュプロファイルの作成を除いて同じです。 iOSプッシュプロファイルを作成するには、 http：//docs.ionic.io/v2.0.0-beta/docs/ios-push-profilesを参照してください。

サンプルアプリケーション

ここでサンプルアプリケーションをダウンロードしてください。

参照用にここにサンプルアプリケーションが添付されています。

IonicApp:
│
│   bower.json
│   Gruntfile.js
│   package.json    
│       
└───app
    │   index.html
    │   
    ├───js
    │       app.js
    │       controllers.js
    │       
    └───templates
            home.html
            menu.html

注：これはスタンドアロンプロジェクトではありません。このコードは、問題またはエラーが発生した場合に、この文書で前述した手順を使用して作成および実装されたプロジェクトと比較するためのものです。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

備考