Ionic-quick-guide

イオン-概要

*Ionic* は、 *AngularJS* および *Cordova* の上に構築されたフロントエンドHTMLフレームワークです。 彼らの公式文書によると、このIonic Open Source Frameworkの定義は次のとおりです-

Ionicは、ハイブリッドモバイルアプリの構築を目的とした* HTML5モバイルアプリ開発フレームワーク*です。 Ionicは、アプリが魅力的なものにするために必要なすべてのルックアンドフィールとUIインタラクションを処理するフロントエンドUIフレームワークと考えてください。 「Bootstrap for Native」に似ていますが、幅広い一般的なネイティブモバイルコンポーネント、滑らかなアニメーション、美しいデザインをサポートしています。

Ionic Frameworkの機能

以下は、イオンの最も重要な機能です-

• AngularJS -Ionicは、モバイルデバイス向けに最適化されたリッチな単一ページアプリケーションを構築するために、AngularJS MVCアーキテクチャを使用しています。
• * CSSコンポーネント*-ネイティブのルックアンドフィールにより、これらのコンポーネントはモバイルアプリケーションに必要なほとんどすべての要素を提供します。 コンポーネントのデフォルトのスタイルは、独自のデザインに合わせて簡単にオーバーライドできます。
• * JavaScriptコンポーネント*-これらのコンポーネントは、HTMLおよびCSSだけでは実行できないすべてのモバイル要素をカバーするJavaScript機能を備えたCSSコンポーネントを拡張しています。
• * Cordovaプラグイン*-Apache Cordovaプラグインは、JavaScriptコードでネイティブデバイス機能を使用するために必要なAPIを提供します。
• Ionic CLI -これは、Ionicアプリケーションを起動、構築、実行、およびエミュレートするコマンドを備えたNodeJSユーティリティです。
• Ionic View -ネイティブデバイスでアプリケーションをアップロード、共有、およびテストするための非常に便利なプラットフォーム。
• ライセンス-IonicはMITライセンスの下でリリースされています。

Ionic Frameworkの利点

以下は、最も一般的に知られているIonic Frameworkの利点の一部です-

• Ionicはハイブリッドアプリ開発に使用されます。 これは、IOS、Android、Windows Phone、Firefox OS向けにアプリケーションをパッケージ化できることを意味し、多くの作業時間を節約できます。
• Ionicは、シンプルなレイアウトで便利な事前生成済みのアプリセットアップを提供するため、アプリの起動は非常に簡単です。
• アプリは非常にクリーンでモジュール式に構築されているため、メンテナンスが非常に簡単で、更新も簡単です。
• Ionic開発者チームは、Google開発者チームと非常に良い関係を持ち、フレームワークを改善するために協力しています。 更新プログラムは定期的に公開されており、Ionicサポートグループは必要なときにいつでも支援します。

イオンフレームワークの制限

以下は、最も重要なIonic Frameworkの制限の一部です-

• ブラウザは常に電話環境に関する正しい情報を提供するとは限らないため、テストは難しい場合があります。 プラットフォームと同様に非常に多くの異なるデバイスがあり、通常それらのほとんどをカバーする必要があります。
• 異なるネイティブ機能を組み合わせるのは難しい場合があります。 プラグインの互換性の問題に遭遇する多くの例があり、デバッグが困難なビルドエラーにつながります。
• ハイブリッドアプリはネイティブアプリよりも遅い傾向があります。 ただし、モバイルテクノロジーは急速に改善されているため、これは今後問題になりません。

次の章では、Ionic Open Source Frameworkの環境設定について理解します。

イオン-環境設定

この章では、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フレームワークで利用可能な実際の要素から始める前に、Ionicがさまざまな要素の色をどのように利用するかについて少し理解してみましょう。

イオン色のクラス

Ionicフレームワークは、* 9つの定義済みカラークラス*のセットを提供します。 これらの色を使用するか、独自のスタイルで上書きできます。

次の表は、Ionicが提供するデフォルトの9色のセットを示しています。 このチュートリアルでは、これらの色を使用してさまざまなイオン要素のスタイルを設定します。 今のところ、以下に示すように、すべての色を確認できます-

Class	Description	Result
light	To be used for white color
stable	To be used for light grey color
positive	To be used for blue color
calm	To be used for light blue color
balanced	To be used for green color
energized	To be used for yellow color
assertive	To be used for red color
royal	To be used for violet color
dark	To be used for black color

イオン色の使用

Ionicは、要素ごとに異なるクラスを使用します。 たとえば、ヘッダー要素には bar クラスがあり、ボタンには button クラスがあります。 使用法を簡素化するために、色名の要素クラスに接頭辞を付けることで異なる色を使用します。

たとえば、青色のヘッダーを作成するには、次のように bar-calm を使用します-

<div class = "bar bar-header bar-calm">
   ...
</div>

同様に、灰色のボタンを作成するには、次のように button-stable クラスを使用します。

<div class = "button button-stable">
   ...
</div>

他のCSSクラスと同様にIonicカラークラスを使用することもできます。 次に、バランスの取れた（緑色）と通電された（黄色）色で2つの段落をスタイルします。

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは、次の画面を生成します-

イオン色

さまざまなクラスを使用してさまざまな要素を作成するときに、後続の章で詳細に説明します。

CSSを使用して色をカスタマイズする

CSSを使用してIonicのデフォルトの色の一部を変更する場合は、 lib/css/ionic.css ファイルを編集して変更できます。 場合によっては、すべての要素（ヘッダー、ボタン、フッターなど）が独自のスタイリングクラスを使用するため、このアプローチはあまり生産的ではありません。

したがって、「light」クラスの色をオレンジに変更する場合は、このクラスを使用するすべての要素を検索して変更する必要があります。 これは、単一の要素の色を変更する場合に役立ちますが、時間がかかりすぎるため、すべての要素の色を変更するにはあまり実用的ではありません。

SASSを使用した色のカスタマイズ

SASS（これは– Syntactically Awesome Style Sheet の短縮形です）は、すべての要素の色を一度に変更する簡単な方法を提供します。 SASSを使用する場合は、コマンドウィンドウでプロジェクトを開き、次のように入力します-

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

これにより、プロジェクトのSASSが設定されます。 scss/ionic.app.scss ファイルを開き、この行の前に次のコードを入力して、デフォルトの色を変更できます。 @ import "www/lib/ionic/scss/ionic";

バランスのとれた色を濃い青に変更し、通電した色をオレンジに変更します。 上記で使用した2つの段落は、濃い青とオレンジになりました。

$balanced: #000066 !default;
$energized: #FFA500 !default;

さて、次の例を使用する場合-

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは、次の画面を生成します-

Ionic Colors SCCS

これらのクラスを使用しているすべてのイオン要素は、濃い青とオレンジに変わります。 Ionicのデフォルトカラークラスを使用する必要がないことを考慮してください。 いつでも好きな方法で要素をスタイルできます。

重要な注意点

SASSをインストールすると、 www/css/style.css ファイルがindexlのヘッダーから削除されます。 それでも使用する場合は、手動でリンクする必要があります。 indexlを開き、ヘッダー内に次のコードを追加します。

<link href = "css/style.css" rel = "stylesheet">

イオン-コンテンツ

ほとんどすべてのモバイルアプリには、いくつかの基本的な要素が含まれています。 通常、これらの要素には、画面の上部と下部を覆うヘッダーとフッターが含まれます。 他のすべての要素は、これら2つの間に配置されます。 Ionicは、作成する他のすべての要素をラップするコンテナとして機能する ion-content 要素を提供します。

このコンテナーにはいくつかの固有の特性がありますが、これはJavaScriptベースのコンポーネントであるため、このリンクの後半で取り上げます：/ionic/ionic_js_content [tutorial]。

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

イオン-ヘッダー

• Ionicヘッダーバー*は画面の上部にあります。 タイトル、アイコン、ボタン、またはその他の要素を含めることができます。 使用可能なヘッダーの定義済みクラスがあります。 このチュートリアルですべてを確認できます。

ヘッダーを追加する

アプリで使用する可能性のあるすべてのバーのメインクラスは bar です。 このクラスは、アプリのすべてのバーに常に適用されます。 すべての* barサブクラス*は、プレフィックス- bar を使用します。

ヘッダーを作成する場合は、メインの bar クラスの後に bar-header を追加する必要があります。 www/indexl ファイルを開き、 body タグ内にヘッダークラ​​スを追加します。 アプリのすべての画面で利用できるようにするため、 indexl body にヘッダーを追加します。

*bar-header* クラスにはデフォルト（白）のスタイリングが適用されているため、その上にタイトルを追加し、画面の他の部分と区別できるようにします。

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

上記のコードは、次の画面を生成します-

イオンヘッダー

ヘッダーの色

ヘッダーのスタイルを設定する場合は、適切な色クラスを追加するだけです。 要素のスタイルを設定する場合、メイン要素クラスをカラークラスのプレフィックスとして追加する必要があります。 ヘッダーバーのスタイルを設定しているため、プレフィックスクラスは bar になり、この例で使用するカラークラスは positive （青）になります。

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

上記のコードは、次の画面を生成します-

イオンヘッダーの色

次の9つのクラスのいずれかを使用して、アプリヘッダーに選択した色を付けることができます-

Color Class	Description	Result
bar-light	To be used for white color
bar-stable	To be used for light grey color
bar-positive	To be used for blue color
bar-calm	To be used for light blue color
bar-balanced	To be used for green color
bar-energized	To be used for yellow color
bar-assertive	To be used for red color
bar-royal	To be used for violet color
bar-dark	To be used for black color

ヘッダー要素

ヘッダー内に他の要素を追加できます。 次のコードは、ヘッダー内に menu ボタンと home ボタンを追加する例です。 また、ヘッダーボタンの上にアイコンを追加します。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

上記のコードは、次の画面を生成します-

イオンヘッダーボタン

サブヘッダー

ヘッダーバーのすぐ下に配置されるサブヘッダーを作成できます。 次の例は、アプリにヘッダーとサブヘッダーを追加する方法を示します。 ここでは、サブヘッダーを「アサーティブ」（赤）カラークラスでスタイル設定しました。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

上記のコードは、次の画面を生成します-

Ionic Sub Header

ルートをアプリ画面のいずれかに変更すると、下のスクリーンショットに示すように、ヘッダーとサブヘッダーが一部のコンテンツをカバーしていることがわかります。

イオン隠しコンテンツ

これを修正するには、画面の ion-content タグに*「has-header」または「has-subheader」クラスを追加する必要があります。 *www/templates からHTMLファイルの1つを開き、 has-subheader クラスを ion-content に追加します。 アプリでヘッダーのみを使用する場合は、代わりに has-header クラスを追加する必要があります。

<ion-content class = "padding has-subheader">

上記のコードは、次の画面を生成します-

Ionic Sub Header

イオン-フッター

• イオンフッター*はアプリ画面の下部に配置されます。 フッターの操作は、ヘッダーの操作とほぼ同じです。

フッターを追加する

Ionicフッターのメインクラスは bar （ヘッダーと同じ）です。 画面にフッターを追加する場合は、メインの bar クラスの後に要素に bar-footer クラスを追加する必要があります。 アプリのすべての画面でフッターを使用したいので、それを indexl ファイルの body に追加します。 フッターのタイトルも追加します。

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

上記のコードは、次の画面を生成します-

Ionic Footer

フッターの色

フッターのスタイルを設定する場合は、適切なカラークラスを追加するだけです。 要素のスタイルを設定するとき、メイン要素クラスをカラークラスのプレフィックスとして追加する必要があります。 フッターバーのスタイルを設定しているため、プレフィックスクラスは bar になり、この例で使用するカラークラスは assertive （赤）です。

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

上記のコードは、次の画面を生成します-

Ionic Footer Color

次の9つのクラスのいずれかを使用して、アプリのフッターに好みの色を付けることができます-

Color Class	Description	Result
bar-light	To be used for white color
bar-stable	To be used for light grey color
bar-positive	To be used for blue color
bar-calm	To be used for light blue color
bar-balanced	To be used for green color
bar-energized	To be used for yellow color
bar-assertive	To be used for red color
bar-royal	To be used for violet color
bar-dark	To be used for black color

フッター要素

フッターには要素を含めることができます。 ほとんどの場合、フッター内にアイコン付きのボタンを追加する必要があります。

追加された最初のボタンは常に左隅にあります。 最後のものは右側に配置されます。 間にあるボタンは、フッターの左側の最初のボタンの隣にグループ化されます。 次の例では、ボタンの上にアイコンを追加するために icon クラスを使用していることもわかります。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

上記のコードは、次の画面を生成します-

Ionic Footer Icons

ボタンを右に移動する場合は、 pull-right クラスを追加できます。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

上記のコードは、次の画面を生成します-

Ionic Footer Icons

イオン-ボタン

Ionic Frameworkにはいくつかのタイプのボタンがあり、これらのボタンは微妙にアニメーション化され、アプリを使用するときのユーザーエクスペリエンスがさらに向上します。 すべてのボタンタイプのメインクラスは button です。 このクラスは常にボタンに適用され、サブクラスを操作するときにプレフィックスとして使用します。

ブロックボタン

ブロックボタンは、常に親コンテナの100％幅になります。 また、小さなパディングが適用されます。 ブロックボタンを追加するには、 button-block クラスを使用します。 パディングを削除したいが、全幅を保持したい場合は、 button-full クラスを使用できます。

以下は、両方のクラスの使用法を示す例です-

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

上記のコードは、次の画面を生成します-

イオンボタン

ボタンのサイズ

ボタンサイズを変更するための2つのイオンクラスがあります-

• button-small および
• ボタン大。

以下は、それらの使用法を示すための例です-

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

上記のコードは、次の画面を生成します-

イオンボタン

ボタンの色

ボタンのスタイルを設定する場合は、適切なカラークラスを追加するだけです。 要素のスタイルを設定するとき、メイン要素クラスをカラークラスのプレフィックスとして追加する必要があります。 フッターバーのスタイルを設定しているため、プレフィックスクラスは bar になり、この例で使用するカラークラスは assertive （赤）になります。

<button class = "button button-assertive">
   button-assertive
</button>

上記のコードは、次の画面を生成します-

イオンボタンの色

次の9つのクラスのいずれかを使用して、アプリボタンに選択した色を付けることができます-

Color Class	Description	Result
button-light	To be used for white color
button-stable	To be used for light grey color
button-positive	To be used for blue color
button-calm	To be used for light blue color
button-balanced	To be used for green color
button-energized	To be used for yellow color
button-assertive	To be used for red color
button-royal	To be used for violet color
button-dark	To be used for black color

ボタンのアウトライン

ボタンを透明にしたい場合は、 button-outline クラスを適用できます。 このクラスのボタンには、アウトラインの境界線と透明な背景があります。

ボタンから境界線を削除するには、 button-clear クラスを使用できます。 次の例は、これら2つのクラスの使用方法を示しています。

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

上記のコードは、次の画面を生成します-

イオンボタンのアウトライン

アイコンを追加する

アイコンをボタンに追加する場合、 icon クラスを使用するのが最善の方法です。 icon-left または icon-right を使用して、ボタンの片側にアイコンを配置できます。 以下に説明するように、ボタンの上にテキストがある場合、通常はアイコンを片側に移動します。

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

上記のコードは、次の画面を生成します-

イオンボタンアイコン

ボタンバー

いくつかのボタンをグループ化する場合は、 button-bar クラスを使用できます。 デフォルトでは、ボタンのサイズは同じです。

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div>

上記のコードは、次の画面を生成します-

イオンボタンバー

イオン-リスト

• リスト*は、Webまたはモバイルアプリケーションで最も人気のある要素の1つです。 これらは通常、さまざまな情報を表示するために使用されます。 これらを他のHTML要素と組み合わせて、異なるメニュー、タブを作成したり、純粋なテキストファイルの単調さを破ったりすることができます。 Ionicフレームワークには、さまざまなリストタイプが用意されており、簡単に使用できます。

イオンリストの作成

すべてのリストは2つの要素で作成されます。 基本リストを作成する場合、 <ul> タグには list クラスを割り当てる必要があり、 <li> タグは item クラスを使用します。 もう1つの興味深い点は、リストに <ul> 、 <ol> 、および <li> タグを使用する必要さえないことです。 他の要素も使用できますが、重要なのは list クラスと item クラスを適切に追加することです。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは、次の画面を生成します-

イオンリスト

差し込みリスト

独自のコンテナを満たすためにリストが必要な場合は、 list クラスの後に list-insets を追加できます。 これによりマージンが追加され、リストのサイズがコンテナに合わせて調整されます。

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは、次の画面を生成します-

イオンリストインセット

アイテムディバイダー

仕切りは、いくつかの要素を論理グループに編成するために使用されます。 Ionicはこのために item-divider クラスを提供します。 繰り返しますが、他のすべてのIonic要素と同​​様に、 item クラスの後に item-divider クラスを追加するだけです。 アイテム区切り線は、デフォルトで他のリストアイテムよりもスタイルが強いため、リストヘッダーとして便利です。

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

上記のコードは、次の画面を生成します-

イオンアイテムディバイダー

アイコンを追加する

ボタンにアイコンを追加する方法は既に説明しました。 リストアイテムにアイコンを追加するときは、アイコンを配置する面を選択する必要があります。 これには item-icon-left および item-icon-right クラスがあります。 両側にアイコンを配置する場合は、これら2つのクラスを組み合わせることもできます。 最後に、アイテムにテキストメモを追加する item-note クラスがあります。

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>

   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオン項目アイコン

アバターとサムネイルの追加

アバターとサムネイルは似ています。 主な違いは、アバターがサムネイルよりも小さいことです。 これらのサムネイルはリストアイテムのほぼ全高をカバーしていますが、アバターは中くらいのサイズの円形の画像です。 使用されるクラスは item-avatar および item-thumbnail です。 以下のサムネイルコード例に示すように、アバターとサムネイルをどちら側に配置するかを選択することもできます。

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンアバターのサムネイル

イオン-カード

モバイルデバイスの画面サイズは小さいため、カードは情報を表示するのに最適な要素の1つであり、使いやすいと感じられます。 前の章では、リストを挿入する方法について説明しました。 カードは差し込みリストに非常に似ていますが、より大きなリストのパフォーマンスに影響を与える可能性のある追加のシャドウを提供します。

カードを追加する

デフォルトのカードは、 card クラスを要素に追加することで作成できます。 カードは通常、 item クラスを持つリストとして形成されます。 最も有用なクラスの1つは item-text-wrap です。 これは、テキストが多すぎる場合に役立つので、カード内にラップする必要があります。 次の例の最初のカードには item-text-wrap クラスが割り当てられていませんが、2番目のカードはそれを使用しています。

<div class = "card">
   <div class = "item">
      This is a Ionic card without item-text-wrap class.
   </div>

   <div class = "item item-text-wrap">
      This is a Ionic card with item-text-wrap class.
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンカード

カードのヘッダーとフッター

前の章では、リストをグループ化するために item-divider クラスを使用する方法についてすでに説明しました。 このクラスは、カードを操作してカードヘッダーを作成するときに非常に役立ちます。 次のコードに示すように、同じクラスをフッターに使用できます-

<div class = "card list">
   <div class = "item item-divider">
      Card header
   </div>

   <div class = "item item-text-wrap">
      Card text...
   </div>

   <div class = "item item-divider">
      Card Footer
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンカード要素

完全なカード

カードの上に任意の要素を追加できます。 次の例では、 full-image クラスと item-body を使用して、カード内で見栄えの良いウィンドウ画像を取得する方法を示します。

<div class = "card">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h2>Card Name</h2>
   </div>

   <div class = "item item-body">
      <img class = "full-image" src = "my-image.png">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci.
      Nam tristique elit massa, quis faucibus augue finibus ac.
   </div>
</div>

上記のコードは、次の画面を生成します-

Ionic Complete Card

イオン-フォーム

• イオンフォーム*は、主にユーザーとのやり取りや必要な情報の収集に使用されます。 この章では、さまざまなテキスト入力フォームについて説明します。以降の章では、Ionicフレームワークを使用して他のフォーム要素を使用する方法について説明します。

入力フォームを使用する

フォームを使用する最良の方法は、 list と item をメインクラスとして使用することです。 通常、アプリは複数のフォーム要素で構成されるため、リストとして整理することは理にかなっています。 次の例では、item要素が label タグであることがわかります。

他の要素を使用できますが、ラベルを使用すると、要素の任意の部分をタップして、テキスト入力に集中できます。 入力テキストとは異なる外観の*プレースホルダー*を設定でき、入力を開始するとすぐに非表示になります。 これは次の例で確認できます。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンフォーム入力

イオンラベル

Ionicは、ラベルに他のいくつかのオプションを提供します。 テキストを入力するときにプレースホルダーを左側に配置する場合は、 input-label クラスを使用できます。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオン入力ラベル

積み上げラベル

*Stacked label* は、入力の上または下にラベルを移動できる他のオプションです。 これを実現するには、ラベル要素に *item-stacked-label* クラスを追加し、新しい要素を作成して *input-label* クラスを割り当てる必要があります。 一番上に配置する場合は、 *input* タグの前にこの要素を追加するだけです。 これを次の例に示します。

*span* タグは *input* タグの前にあることに注意してください。 場所を変更すると、画面の下に表示されます。

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオン積み上げラベル

フローティングラベル

フローティングラベル*は、使用できる3番目のオプションです。 これらのラベルは、入力を開始する前に非表示になります。 タイピングが開始されるとすぐに、エレメントの上に浮遊アニメーションが表示されます。 スタックラベルを使用したのと同じ方法でフローティングラベルを使用できます。 唯一の違いは、今回は *item-floating-label クラスを使用することです。

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンフローティングラベル

インセット入力

最後の章では、イオン要素を挿入する方法について説明しました。 item-input-inset クラスをアイテムに追加し、 item-input-wrapper をラベルに追加して、入力を挿入することもできます。 ラッパーはラベルにスタイルを追加します。

ラベルの横に他の要素を追加すると、ラベルのサイズは新しい要素に合わせて調整されます。 ラベル内に要素（通常はアイコン）を追加することもできます。

次の例は、2つの挿入入力を示しています。 最初のラベルにはラベルの横にボタンがあり、2番目のラベルにはアイコンがあります。 placeholder-icon クラスを使用して、プレースホルダーテキストと同じ色のアイコンを作成しました。 これがないと、アイコンはラベルの色を使用します。

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <input type = "text" placeholder = "Placeholder 1"/>
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2"/>
      </label>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンインセット入力

イオン-トグル

ユーザーが使用できるオプションは2つあります。 この状況を処理する最も効率的な方法は、トグルフォームを使用することです。 Ionicは、アニメーション化され、実装が簡単なトグル要素のクラスを提供します。

トグルを使用する

Toggleは、2つのIonicクラスを使用して実装できます。 まず、前の章で説明したのと同じ理由で label を作成し、それに toggle クラスを割り当てる必要があります。

ラベル内に*が作成されます。 次の例では、さらに2つのイオンクラスが使用されています。 *track クラスは、トグルがタップされたときにチェックボックスとカラーアニメーションに背景スタイルを追加します。 handle クラスは、サークルボタンを追加するために使用されます。

次の例は、2つのトグルフォームを示しています。 最初のものはチェックされ、2番目のものはチェックされません。

<label class = "toggle">
   <input type = "checkbox"/>
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

<br>

<label class = "toggle">
   <input type = "checkbox"/>
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

上記のコードは、次の画面を生成します-

イオントグル

複数のトグル

ほとんどの場合、Ionicで同じ種類の複数の要素を追加する場合、最良の方法はリストアイテムを使用することです。 複数のトグルに使用されるクラスは item-toggle です。 次の例は、トグルのリストを作成する方法を示しています。 最初のものと2番目のものがチェックされます。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle 1
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 2
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 3
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 4
      <label class = "toggle">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオントグルリスト

スタイリングトグル

すべてのIonic色クラスをトグル要素に適用できます。 プレフィックスは toggle になります。 これを label 要素に適用します。 次の例は、適用されるすべての色を示しています。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle Light
      <label class = "toggle  toggle-light">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Stable
      <label class = "toggle toggle-stable">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Positive
      <label class = "toggle toggle-positive">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Calm
      <label class = "toggle toggle-calm">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Balanced
      <label class = "toggle toggle-balanced">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Energized
      <label class = "toggle toggle-energized">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Assertive
      <label class = "toggle toggle-assertive">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Royal
      <label class = "toggle  toggle-royal">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Dark
      <label class = "toggle toggle-dark">
         <input type = "checkbox"/>
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオントグルカラー

イオン-チェックボックス

• イオンチェックボックス*はトグルとほぼ同じです。 これら2つのスタイルはそれぞれ異なりますが、同じ目的で使用されます。

チェックボックスを追加する

チェックボックスフォームを作成するときは、ラベルと入力要素の両方に checkbox クラス名を追加する必要があります。 次の例は、2つの単純なチェックボックスを示しています。1つはチェックされ、もう1つはチェックされていません。

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

上記のコードは、次の画面を生成します-

イオンチェックボックス

複数のチェックボックス

すでに示したように、リストは複数の要素に使用されます。 次に、各リスト項目に item-checkbox クラスを使用します。

<ul class = "list">
   <li class = "item item-checkbox">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオンチェックボックスリスト

スタイリングチェックボックス

チェックボックスのスタイルを設定する場合は、 checkbox プレフィックスが付いたIonicカラークラスを適用する必要があります。 次の例を確認して、どのように見えるかを確認してください。 この例では、チェックボックスのリストを使用します。

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox"/>
      </label>
   </li>
</ul>

上記のコードは、次の画面を生成します-

イオンチェックボックスの色

イオン-ラジオボタン

• ラジオボタン*は別の形式の要素であり、この章で説明します。 トグルフォームとチェックボックスフォームのラジオボタンの違いは、前者を使用する場合、リストからラジオボタンを1つだけ選択することです。 後者では、複数を選択できます。

ラジオボタンを追加する

常に複数のラジオボタンを選択できるため、最良の方法はリストを作成することです。 複数の要素が必要なときはいつでもこれを行いました。 リスト項目クラスは item-radio になります。 繰り返しますが、他のすべてのフォームで使用したように、これには label を使用します。 入力には name 属性があります。 この属性は、可能な選択肢として使用するすべてのボタンをグループ化します。 item-content クラスは、オプションを明確に表示するために使用されます。 最後に、 radio-icon クラスを使用して、ユーザーが選択したオプションをマークするために使用されるチェックマークアイコンを追加します。

次の例では、4つのラジオボタンがあり、2番目のラジオボタンが選択されています。

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンラジオボタン

複数のラジオボタングループ

複数のグループを作成したい場合があります。 これが name 属性の目的です。次の例では、最初の2つのボタンと最後の2つのボタンを2つのオプショングループとしてグループ化します。

*item-divider* クラスを使用して、2つのグループを分離します。 最初のグループの *name* 属性は *group1* に等しく、2番目のグループは *group2* を使用していることに注意してください。

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1"/>
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2"/>
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2"/>
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオンラジオボタングループ

イオン-範囲

イオン範囲は、何かのレベルを選択して表示するために使用されます。 これは、最大値と最小値の相関関係にある実際の値を表します。 IonicはRangeを操作する簡単な方法を提供します。

範囲を使用する

範囲は内部アイテム要素として使用されます。 使用されるクラスは*範囲*です。 このクラスを item クラスの後に配置します。 これにより、範囲が配置されるコンテナが準備されます。 コンテナを作成したら、 input を追加し、それに range タイプと name 属性を割り当てる必要があります。

<div class = "item range">
   <input type = "range" name = "range1">
</div>

上記のコードは、次の画面を生成します-

イオン範囲

アイコンを追加する

通常、範囲にはデータを明確に表示するためのアイコンが必要です。 範囲入力の前後にアイコンを追加して、範囲要素の両側に配置するだけです。

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

上記のコードは、次の画面を生成します-

イオン範囲アイコン

スタイリング範囲

次の例では、イオン色で範囲をスタイルする方法を示します。 カラークラスは、 range プレフィックスを使用します。 9つの範囲を持つリストを作成し、異なるスタイルを設定します。

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>

   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

上記のコードは、次の画面を生成します-

イオン範囲の色

イオン-選択

*Ionic Select* は、ユーザーが選択する選択オプションを備えたシンプルなメニューを作成します。 この選択メニューは、そのスタイルがブラウザによって処理されるため、プラットフォームごとに外観が異なります。

選択を使用する

まず、 label を作成し、 item-input クラスと item-select クラスを追加します。 2番目のクラスは、選択フォームに追加のスタイリングを追加し、その中に名前を選択要素に追加するために使用される input-label クラスを追加します。 また、内部に option を含む select を追加します。 これは通常のHTML5 select要素です。 次の例は、3つのオプションを持つイオン選択を示しています。

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>

   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

上記のコードは、次の画面を生成します-

イオン選択

スタイリングセレクト

次の例は、選択にスタイルを適用する方法を示します。 イオン色を使用して、9つの異なるスタイルの選択要素を含むリストを作成しています。 アイテムを含むリストを使用しているため、 item がカラークラスのプレフィックスになります。

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>

      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

上記のコードは、次の画面を生成します-

イオン選択色

イオン-タブ

• Ionicタブ*は、ほとんどの場合モバイルナビゲーションに使用されます。 スタイリングは、さまざまなプラットフォームに最適化されています。 これは、Androidデバイスではタブが画面の上部に配置され、IOSではタブが下部に配置されることを意味します。 タブを作成するにはさまざまな方法があります。 この章では、タブの作成方法について詳しく説明します。

シンプルなタブ

*tabs* クラスを使用して、単純なタブメニューを作成できます。 このクラスを使用している内部要素には、 *tab-item* 要素を追加する必要があります。 通常、タブはナビゲーションに使用されるため、タブ項目には *<a>* タグを使用します。 次の例は、4つのタブを持つメニューを示しています。

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>

   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

上記のコードは、次の画面を生成します-

イオンタブ

アイコンを追加する

Ionicは、タブにアイコンを追加するクラスを提供します。 タブにテキストのないアイコンが必要な場合は、 tabs クラスの後に tabs-icon-only クラスを追加する必要があります。 もちろん、表示したいアイコンを追加する必要があります。

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>

   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>

   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

上記のコードは、次の画面を生成します-

イオンタブアイコン

アイコンとテキストを一緒に追加することもできます。 tabs-icon-top および tabs-icon-left は、それぞれアイコンの上または左側にアイコンを配置するクラスです。 実装は上記の例と同じです。使用する新しいクラスとテキストを追加するだけです。 次の例は、テキストの上に配置されたアイコンを示しています。

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>

   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>

   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

上記のコードは、次の画面を生成します-

Ionic Tab Icon Top

ストライプタブ

ストライプタブは、 tabs-striped クラスを使用してタブの周りにコンテナを追加することで作成できます。 このクラスでは、タブメニューにいくつかのイオン色を追加するために、 tabs-background および tabs-color プレフィックスを使用できます。

次の例では、 tabs-background-positive （青）クラスを使用してメニューの背景のスタイルを設定し、 tabs-color-light （白）クラスを使用してタブアイコンのスタイルを設定します。 アクティブな2番目のタブとそうでない他の2つのタブの違いに注意してください。

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>

      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>

      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

上記のコードは、次の画面を生成します-

イオンタブストリップ

イオン-グリッド

*Ionic Grid System* の操作は簡単です。 主に2つのクラスがあります。行を操作する *row* と列を操作する *col* です。

必要な数の列または行を選択できます。 これらはすべて、使用可能なスペースに合わせてサイズを調整しますが、ニーズに合わせてこの動作を変更できます。

注-このチュートリアルのすべての例では、わかりやすい方法でグリッドを表示できるように、グリッドに境界線が適用されます。

シンプルグリッド

次の例は、 col クラスと row クラスの使用方法を示しています。 2つの行を作成します。 最初の行には5つの列があり、2番目の行には3つしかありません。 列の幅が1行目と2行目でどのように異なるかに注目してください。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは、次の画面を生成します-

イオングリッド

列サイズ

列サイズを自動的に割り当てたままにしたくない場合があります。 この場合、 col プレフィックスの後に、 row 幅のパーセンテージを表す数値を選択できます。 これは、特定のサイズが適用された列にのみ適用されます。 他の列は、残っている使用可能なスペースに合わせて調整されます。

次の例では、最初の列は全幅の50％を使用し、他の列はそれに応じて調整します。

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは、次の画面を生成します-

イオングリッド列

次の表は、イオングリッドシステムが提供する利用可能なパーセンテージオプションを示しています-

列パーセントのクラス名

Class Name	Percentage Used
col-10	10%
col-20	20%
col-25	25%
col-33	33.3333%
col-50	50%
col-67	66.6666%
col-75	75%
col-80	80%
col-90	90%

水平および垂直位置決め

列は左からオフセットできます。 列の特定のサイズに対して同じように機能します。 今回は接頭辞が col-offset になり、上の表に示されているのと同じパーセンテージの数値を使用します。 次の例は、両方の行の2番目の列を25％オフセットする方法を示しています。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは、次の画面を生成します-

イオングリッドオフセット

行内の列を垂直方向に整列させることもできます。 使用できる3つのクラスがあります。つまり、 top 、 center 、 col プレフィックス付きの bottom クラスです。 次のコードは、両方の行の最初の3列を垂直に配置する方法を示しています。

注-次の例では、CSSに*“。col \ {height：120px}” *を追加して、列の垂直方向の配置を示しています。

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

上記のコードは、次の画面を生成します-

イオン垂直グリッド

レスポンシブグリッド

Ionic Gridは、レスポンシブレイアウトにも使用できます。 使用可能なクラスは3つあります。 responsive-sm クラスは、ビューポートが横長の電話よりも小さい場合、列を単一の行に折りたたみます。 ビューポートがポートレートタブレットよりも小さい場合、 responsive-md クラスが適用されます。 ビューポートがランドスケープタブレットより小さい場合、 responsive-lg クラスが適用されます。

次の例の後の最初の画像は、モバイルデバイスでの responsive-sm クラスの外観を示し、2番目の画像は、タブレットデバイスでの同じレスポンシブグリッドの外観を示しています。

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

モバイルグリッドビュー

モバイルグリッドビュー

タブレットグリッドビュー

タブレットグリッドビュー

イオン-アイコン

Ionicが提供する* 700以上のプレミアムアイコンがあります。 AndroidとIOS用に提供されるアイコンの異なるセットもあります。 必要なものはほぼすべて見つけることができますが、必要ない場合は使用する必要があります。 代わりに、独自のカスタムアイコンまたは他のアイコンセットを使用できます。 すべてのIonicアイコンhttps://ionicons.com/[こちら]を確認できます。

アイコンの使用方法

イオンアイコンを使用する場合は、ページ（https://ionicons.com/）で必要なアイコンを見つけます。 イオン要素を追加するときは、常に最初にメインクラスを追加してから、必要なサブクラスを追加します。 すべてのアイコンのメインクラスは icon です。 サブクラスは、必要なアイコンの名前です。 以下に示す例では、6つのアイコンを追加します-

<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>

上記のコードは、次の画面を生成します-

イオンアイコン

これらのアイコンのサイズは、Ionic CSSファイルの font-size プロパティで変更できます。

.icon {
   font-size: 50px;
}

アイコンのサイズが設定されると、同じコードが出力として次のスクリーンショットを生成します-

イオンアイコン

デフォルトのアイコン

Code	Result
<i class="icon ion-ionic"></i>	__
<i class="icon ion-arrow-up-a"></i>	__
<i class="icon ion-arrow-right-a"></i>	__
<i class="icon ion-arrow-down-a"></i>	__
<i class="icon ion-arrow-left-a"></i>	__
<i class="icon ion-arrow-up-b"></i>	__
<i class="icon ion-arrow-right-b"></i>	__
<i class="icon ion-arrow-down-b"></i>	__
<i class="icon ion-arrow-left-b"></i>	__
<i class="icon ion-arrow-up-c"></i>	__
<i class="icon ion-arrow-right-c"></i>	__
<i class="icon ion-arrow-down-c"></i>	__
<i class="icon ion-arrow-left-c"></i>	__
<i class="icon ion-arrow-return-right"></i>	__
<i class="icon ion-arrow-return-left"></i>	__
<i class="icon ion-arrow-swap"></i>	__
<i class="icon ion-arrow-shrink"></i>	__
<i class="icon ion-arrow-expand"></i>	__
<i class="icon ion-arrow-move"></i>	__
<i class="icon ion-arrow-resize"></i>	__
<i class="icon ion-chevron-up"></i>	__
<i class="icon ion-chevron-right"></i>	__
<i class="icon ion-chevron-down"></i>	__
<i class="icon ion-chevron-left"></i>	__
<i class="icon ion-navicon-round"></i>	__
<i class="icon ion-navicon"></i>	__
<i class="icon ion-drag"></i>	__
<i class="icon ion-log-in"></i>	__
<i class="icon ion-log-out"></i>	__
<i class="icon ion-checkmark-round"></i>	__
<i class="icon ion-checkmark"></i>	__
<i class="icon ion-checkmark-circled"></i>	__
<i class="icon ion-close-round"></i>	__
<i class="icon ion-close"></i>	__
<i class="icon ion-close-circled"></i>	__
<i class="icon ion-plus-round"></i>	__
<i class="icon ion-plus"></i>	__
<i class="icon ion-plus-circled"></i>	__
<i class="icon ion-minus-round"></i>	__
<i class="icon ion-minus"></i>	__
<i class="icon ion-minus-circled"></i>	__
<i class="icon ion-information"></i>	__
<i class="icon ion-informaticon ion-circled"></i>	__
<i class="icon ion-help"></i>	__
<i class="icon ion-help-circled"></i>	__
<i class="icon ion-backspace-outline"></i>	__
<i class="icon ion-backspace"></i>	__
<i class="icon ion-help-buoy"></i>	__
<i class="icon ion-asterisk"></i>	__
<i class="icon ion-alert"></i>	__
<i class="icon ion-alert-circled"></i>	__
<i class="icon ion-refresh"></i>	__
<i class="icon ion-loop"></i>	__
<i class="icon ion-shuffle"></i>	__
<i class="icon ion-home"></i>	__
<i class="icon ion-search"></i>	__
<i class="icon ion-flag"></i>	__
<i class="icon ion-star"></i>	__
<i class="icon ion-heart"></i>	__
<i class="icon ion-heart-broken"></i>	__
<i class="icon ion-gear-a"></i>	__
<i class="icon ion-gear-b"></i>	__
<i class="icon ion-toggle-filled"></i>	__
<i class="icon ion-toggle"></i>	__
<i class="icon ion-settings"></i>	__
<i class="icon ion-wrench"></i>	__
<i class="icon ion-hammer"></i>	__
<i class="icon ion-edit"></i>	__
<i class="icon ion-trash-a"></i>	__
<i class="icon ion-trash-b"></i>	__
<i class="icon ion-document"></i>	__
<i class="icon ion-document-text"></i>	__
<i class="icon ion-clipboard"></i>	__
<i class="icon ion-scissors"></i>	__
<i class="icon ion-funnel"></i>	__
<i class="icon ion-bookmark"></i>	__
<i class="icon ion-email"></i>	__
<i class="icon ion-email-unread"></i>	__
<i class="icon ion-folder"></i>	__
<i class="icon ion-filing"></i>	__
<i class="icon ion-archive"></i>	__
<i class="icon ion-reply"></i>	__
<i class="icon ion-reply-all"></i>	__
<i class="icon ion-forward"></i>	__
<i class="icon ion-share"></i>	__
<i class="icon ion-paper-airplane"></i>	__
<i class="icon ion-link"></i>	__
<i class="icon ion-paperclip"></i>	__
<i class="icon ion-compose"></i>	__
<i class="icon ion-briefcase"></i>	__
<i class="icon ion-medkit"></i>	__
<i class="icon ion-at"></i>	__
<i class="icon ion-pound"></i>	__
<i class="icon ion-quote"></i>	__
<i class="icon ion-cloud"></i>	__
<i class="icon ion-upload"></i>	__
<i class="icon ion-more"></i>	__
<i class="icon ion-grid"></i>	__
<i class="icon ion-calendar"></i>	__
<i class="icon ion-clock"></i>	__
<i class="icon ion-compass"></i>	__
<i class="icon ion-pinpoint"></i>	__
<i class="icon ion-pin"></i>	__
<i class="icon ion-navigate"></i>	__
<i class="icon ion-location"></i>	__
<i class="icon ion-map"></i>	__
<i class="icon ion-lock-combination"></i>	__
<i class="icon ion-locked"></i>	__
<i class="icon ion-unlocked"></i>	__
<i class="icon ion-key"></i>	__
<i class="icon ion-arrow-graph-up-right"></i>	__
<i class="icon ion-arrow-graph-down-right"></i>	__
<i class="icon ion-arrow-graph-up-left"></i>	__
<i class="icon ion-arrow-graph-down-left"></i>	__
<i class="icon ion-stats-bars"></i>	__
<i class="icon ion-connecticon ion-bars"></i>	__
<i class="icon ion-pie-graph"></i>	__
<i class="icon ion-chatbubble"></i>	__
<i class="icon ion-chatbubble-working"></i>	__
<i class="icon ion-chatbubbles"></i>	__
<i class="icon ion-chatbox"></i>	__
<i class="icon ion-chatbox-working"></i>	__
<i class="icon ion-chatboxes"></i>	__
<i class="icon ion-person"></i>	__
<i class="icon ion-person-add"></i>	__
<i class="icon ion-person-stalker"></i>	__
<i class="icon ion-woman"></i>	__
<i class="icon ion-man"></i>	__
<i class="icon ion-female"></i>	__
<i class="icon ion-male"></i>	__
<i class="icon ion-transgender"></i>	__
<i class="icon ion-fork"></i>	__
<i class="icon ion-knife"></i>	__
<i class="icon ion-spoon"></i>	__
<i class="icon ion-soup-can-outline"></i>	__
<i class="icon ion-soup-can"></i>	__
<i class="icon ion-beer"></i>	__
<i class="icon ion-wineglass"></i>	__
<i class="icon ion-coffee"></i>	__
<i class="icon ion-icecream"></i>	__
<i class="icon ion-pizza"></i>	__
<i class="icon ion-power"></i>	__
<i class="icon ion-mouse"></i>	__
<i class="icon ion-battery-full"></i>	__
<i class="icon ion-battery-half"></i>	__
<i class="icon ion-battery-low"></i>	__
<i class="icon ion-battery-empty"></i>	__
<i class="icon ion-battery-charging"></i>	__
<i class="icon ion-wifi"></i>	__
<i class="icon ion-bluetooth"></i>	__
<i class="icon ion-calculator"></i>	__
<i class="icon ion-camera"></i>	__
<i class="icon ion-eye"></i>	__
<i class="icon ion-eye-disabled"></i>	__
<i class="icon ion-flash"></i>	__
<i class="icon ion-flash-off"></i>	__
<i class="icon ion-qr-scanner"></i>	__
<i class="icon ion-image"></i>	__
<i class="icon ion-images"></i>	__
<i class="icon ion-wand"></i>	__
<i class="icon ion-contrast"></i>	__
<i class="icon ion-aperture"></i>	__
<i class="icon ion-crop"></i>	__
<i class="icon ion-easel"></i>	__
<i class="icon ion-paintbrush"></i>	__
<i class="icon ion-paintbucket"></i>	__
<i class="icon ion-monitor"></i>	__
<i class="icon ion-laptop"></i>	__
<i class="icon ion-ipad"></i>	__
<i class="icon ion-iphone"></i>	__
<i class="icon ion-ipod"></i>	__
<i class="icon ion-printer"></i>	__
<i class="icon ion-usb"></i>	__
<i class="icon ion-outlet"></i>	__
<i class="icon ion-bug"></i>	__
<i class="icon ion-code"></i>	__
<i class="icon ion-code-working"></i>	__
<i class="icon ion-code-download"></i>	__
<i class="icon ion-fork-repo"></i>	__
<i class="icon ion-network"></i>	__
<i class="icon ion-pull-request"></i>	__
<i class="icon ion-merge"></i>	__
<i class="icon ion-xbox"></i>	__
<i class="icon ion-playstation"></i>	__
<i class="icon ion-steam"></i>	__
<i class="icon ion-closed-captioning"></i>	__
<i class="icon ion-videocamera"></i>	__
<i class="icon ion-film-marker"></i>	__
<i class="icon ion-disc"></i>	__
<i class="icon ion-headphone"></i>	__
<i class="icon ion-music-note"></i>	__
<i class="icon ion-radio-waves"></i>	__
<i class="icon ion-speakerphone"></i>	__
<i class="icon ion-mic-a"></i>	__
<i class="icon ion-mic-b"></i>	__
<i class="icon ion-mic-c"></i>	__
<i class="icon ion-volume-high"></i>	__
<i class="icon ion-volume-medium"></i>	__
<i class="icon ion-volume-low"></i>	__
<i class="icon ion-volume-mute"></i>	__
<i class="icon ion-levels"></i>	__
<i class="icon ion-play"></i>	__
<i class="icon ion-pause"></i>	__
<i class="icon ion-stop"></i>	__
<i class="icon ion-record"></i>	__
<i class="icon ion-skip-forward"></i>	__
<i class="icon ion-skip-backward"></i>	__
<i class="icon ion-eject"></i>	__
<i class="icon ion-bag"></i>	__
<i class="icon ion-card"></i>	__
<i class="icon ion-cash"></i>	__
<i class="icon ion-pricetag"></i>	__
<i class="icon ion-pricetags"></i>	__
<i class="icon ion-thumbsup"></i>	__
<i class="icon ion-thumbsdown"></i>	__
<i class="icon ion-happy-outline"></i>	__
<i class="icon ion-happy"></i>	__
<i class="icon ion-sad-outline"></i>	__
<i class="icon ion-sad"></i>	__
<i class="icon ion-bowtie"></i>	__
<i class="icon ion-tshirt-outline"></i>	__
<i class="icon ion-tshirt"></i>	__
<i class="icon ion-trophy"></i>	__
<i class="icon ion-podium"></i>	__
<i class="icon ion-ribbon-a"></i>	__
<i class="icon ion-ribbon-b"></i>	__
<i class="icon ion-university"></i>	__
<i class="icon ion-magnet"></i>	__
<i class="icon ion-beaker"></i>	__
<i class="icon ion-erlenmeyer-flask"></i>	__
<i class="icon ion-egg"></i>	__
<i class="icon ion-earth"></i>	__
<i class="icon ion-planet"></i>	__
<i class="icon ion-lightbulb"></i>	__
<i class="icon ion-cube"></i>	__
<i class="icon ion-leaf"></i>	__
<i class="icon ion-waterdrop"></i>	__
<i class="icon ion-flame"></i>	__
<i class="icon ion-fireball"></i>	__
<i class="icon ion-bonfire"></i>	__
<i class="icon ion-umbrella"></i>	__
<i class="icon ion-nuclear"></i>	__
<i class="icon ion-no-smoking"></i>	__
<i class="icon ion-thermometer"></i>	__
<i class="icon ion-speedometer"></i>	__
<i class="icon ion-model-s"></i>	__
<i class="icon ion-plane"></i>	__
<i class="icon ion-jet"></i>	__
<i class="icon ion-load-a"></i>	__
<i class="icon ion-load-b"></i>	__
<i class="icon ion-load-c"></i>	__
<i class="icon ion-load-d"></i>	__

iOSスタイルのアイコン

Code	Result
<i class="icon ion-ios-ionic-outline"></i>	__
<i class="icon ion-ios-arrow-back"></i>	__
<i class="icon ion-ios-arrow-forward"></i>	__
<i class="icon ion-ios-arrow-up"></i>	__
<i class="icon ion-ios-arrow-right"></i>	__
<i class="icon ion-ios-arrow-down"></i>	__
<i class="icon ion-ios-arrow-left"></i>	__
<i class="icon ion-ios-arrow-thin-up"></i>	__
<i class="icon ion-ios-arrow-thin-right"></i>	__
<i class="icon ion-ios-arrow-thin-down"></i>	__
<i class="icon ion-ios-arrow-thin-left"></i>	__
<i class="icon ion-ios-circle-filled"></i>	__
<i class="icon ion-ios-circle-outline"></i>	__
<i class="icon ion-ios-checkmark-empty"></i>	__
<i class="icon ion-ios-checkmark-outline"></i>	__
<i class="icon ion-ios-checkmark"></i>	__
<i class="icon ion-ios-plus-empty"></i>	__
<i class="icon ion-ios-plus-outline"></i>	__
<i class="icon ion-ios-plus"></i>	__
<i class="icon ion-ios-close-empty"></i>	__
<i class="icon ion-ios-close-outline"></i>	__
<i class="icon ion-ios-close"></i>	__
<i class="icon ion-ios-minus-empty"></i>	__
<i class="icon ion-ios-minus-outline"></i>	__
<i class="icon ion-ios-minus"></i>	__
<i class="icon ion-ios-informaticon ion-empty"></i>	__
<i class="icon ion-ios-informaticon ion-outline"></i>	__
<i class="icon ion-ios-information"></i>	__
<i class="icon ion-ios-help-empty"></i>	__
<i class="icon ion-ios-help-outline"></i>	__
<i class="icon ion-ios-help"></i>	__
<i class="icon ion-ios-search"></i>	__
<i class="icon ion-ios-search-strong"></i>	__
<i class="icon ion-ios-star"></i>	__
<i class="icon ion-ios-star-half"></i>	__
<i class="icon ion-ios-star-outline"></i>	__
<i class="icon ion-ios-heart"></i>	__
<i class="icon ion-ios-heart-outline"></i>	__
<i class="icon ion-ios-more"></i>	__
<i class="icon ion-ios-more-outline"></i>	__
<i class="icon ion-ios-home"></i>	__
<i class="icon ion-ios-home-outline"></i>	__
<i class="icon ion-ios-cloud"></i>	__
<i class="icon ion-ios-cloud-outline"></i>	__
<i class="icon ion-ios-cloud-upload"></i>	__
<i class="icon ion-ios-cloud-upload-outline"></i>	__
<i class="icon ion-ios-cloud-download"></i>	__
<i class="icon ion-ios-cloud-download-outline"></i>	__
<i class="icon ion-ios-upload"></i>	__
<i class="icon ion-ios-upload-outline"></i>	__
<i class="icon ion-ios-download"></i>	__
<i class="icon ion-ios-download-outline"></i>	__
<i class="icon ion-ios-refresh"></i>	__
<i class="icon ion-ios-refresh-outline"></i>	__
<i class="icon ion-ios-refresh-empty"></i>	__
<i class="icon ion-ios-reload"></i>	__
<i class="icon ion-ios-loop-strong"></i>	__
<i class="icon ion-ios-loop"></i>	__
<i class="icon ion-ios-bookmarks"></i>	__
<i class="icon ion-ios-bookmarks-outline"></i>	__
<i class="icon ion-ios-book"></i>	__
<i class="icon ion-ios-book-outline"></i>	__
<i class="icon ion-ios-flag"></i>	__
<i class="icon ion-ios-flag-outline"></i>	__
<i class="icon ion-ios-glasses"></i>	__
<i class="icon ion-ios-glasses-outline"></i>	__
<i class="icon ion-ios-browsers"></i>	__
<i class="icon ion-ios-browsers-outline"></i>	__
<i class="icon ion-ios-at"></i>	__
<i class="icon ion-ios-at-outline"></i>	__
<i class="icon ion-ios-pricetag"></i>	__
<i class="icon ion-ios-pricetag-outline"></i>	__
<i class="icon ion-ios-pricetags"></i>	__
<i class="icon ion-ios-pricetags-outline"></i>	__
<i class="icon ion-ios-cart"></i>	__
<i class="icon ion-ios-cart-outline"></i>	__
<i class="icon ion-ios-chatboxes"></i>	__
<i class="icon ion-ios-chatboxes-outline"></i>	__
<i class="icon ion-ios-chatbubble"></i>	__
<i class="icon ion-ios-chatbubble-outline"></i>	__
<i class="icon ion-ios-cog"></i>	__
<i class="icon ion-ios-cog-outline"></i>	__
<i class="icon ion-ios-gear"></i>	__
<i class="icon ion-ios-gear-outline"></i>	__
<i class="icon ion-ios-settings"></i>	__
<i class="icon ion-ios-settings-strong"></i>	__
<i class="icon ion-ios-toggle"></i>	__
<i class="icon ion-ios-toggle-outline"></i>	__
<i class="icon ion-ios-analytics"></i>	__
<i class="icon ion-ios-analytics-outline"></i>	__
<i class="icon ion-ios-pie"></i>	__
<i class="icon ion-ios-pie-outline"></i>	__
<i class="icon ion-ios-pulse"></i>	__
<i class="icon ion-ios-pulse-strong"></i>	__
<i class="icon ion-ios-filing"></i>	__
<i class="icon ion-ios-filing-outline"></i>	__
<i class="icon ion-ios-box"></i>	__
<i class="icon ion-ios-box-outline"></i>	__
<i class="icon ion-ios-compose"></i>	__
<i class="icon ion-ios-compose-outline"></i>	__
<i class="icon ion-ios-trash"></i>	__
<i class="icon ion-ios-trash-outline"></i>	__
<i class="icon ion-ios-copy"></i>	__
<i class="icon ion-ios-copy-outline"></i>	__
<i class="icon ion-ios-email"></i>	__
<i class="icon ion-ios-email-outline"></i>	__
<i class="icon ion-ios-undo"></i>	__
<i class="icon ion-ios-undo-outline"></i>	__
<i class="icon ion-ios-redo"></i>	__
<i class="icon ion-ios-redo-outline"></i>	__
<i class="icon ion-ios-paperplane"></i>	__
<i class="icon ion-ios-paperplane-outline"></i>	__
<i class="icon ion-ios-folder"></i>	__
<i class="icon ion-ios-folder-outline"></i>	__
<i class="icon ion-ios-paper"></i>	__
<i class="icon ion-ios-paper-outline"></i>	__
<i class="icon ion-ios-list"></i>	__
<i class="icon ion-ios-list-outline"></i>	__
<i class="icon ion-ios-world"></i>	__
<i class="icon ion-ios-world-outline"></i>	__
<i class="icon ion-ios-alarm"></i>	__
<i class="icon ion-ios-alarm-outline"></i>	__
<i class="icon ion-ios-speedometer"></i>	__
<i class="icon ion-ios-speedometer-outline"></i>	__
<i class="icon ion-ios-stopwatch"></i>	__
<i class="icon ion-ios-stopwatch-outline"></i>	__
<i class="icon ion-ios-timer"></i>	__
<i class="icon ion-ios-timer-outline"></i>	__
<i class="icon ion-ios-clock"></i>	__
<i class="icon ion-ios-clock-outline"></i>	__
<i class="icon ion-ios-time"></i>	__
<i class="icon ion-ios-time-outline"></i>	__
<i class="icon ion-ios-calendar"></i>	__
<i class="icon ion-ios-calendar-outline"></i>	__
<i class="icon ion-ios-photos"></i>	__
<i class="icon ion-ios-photos-outline"></i>	__
<i class="icon ion-ios-albums"></i>	__
<i class="icon ion-ios-albums-outline"></i>	__
<i class="icon ion-ios-camera"></i>	__
<i class="icon ion-ios-camera-outline"></i>	__
<i class="icon ion-ios-reverse-camera"></i>	__
<i class="icon ion-ios-reverse-camera-outline"></i>	__
<i class="icon ion-ios-eye"></i>	__
<i class="icon ion-ios-eye-outline"></i>	__
<i class="icon ion-ios-bolt"></i>	__
<i class="icon ion-ios-bolt-outline"></i>	__
<i class="icon ion-ios-color-wand"></i>	__
<i class="icon ion-ios-color-wand-outline"></i>	__
<i class="icon ion-ios-color-filter"></i>	__
<i class="icon ion-ios-color-filter-outline"></i>	__
<i class="icon ion-ios-grid-view"></i>	__
<i class="icon ion-ios-grid-view-outline"></i>	__
<i class="icon ion-ios-crop-strong"></i>	__
<i class="icon ion-ios-crop"></i>	__
<i class="icon ion-ios-barcode"></i>	__
<i class="icon ion-ios-barcode-outline"></i>	__
<i class="icon ion-ios-briefcase"></i>	__
<i class="icon ion-ios-briefcase-outline"></i>	__
<i class="icon ion-ios-medkit"></i>	__
<i class="icon ion-ios-medkit-outline"></i>	__
<i class="icon ion-ios-medical"></i>	__
<i class="icon ion-ios-medical-outline"></i>	__
<i class="icon ion-ios-infinite"></i>	__
<i class="icon ion-ios-infinite-outline"></i>	__
<i class="icon ion-ios-calculator"></i>	__
<i class="icon ion-ios-calculator-outline"></i>	__
<i class="icon ion-ios-keypad"></i>	__
<i class="icon ion-ios-keypad-outline"></i>	__
<i class="icon ion-ios-telephone"></i>	__
<i class="icon ion-ios-telephone-outline"></i>	__
<i class="icon ion-ios-drag"></i>	__
<i class="icon ion-ios-location"></i>	__
<i class="icon ion-ios-locaticon ion-outline"></i>	__
<i class="icon ion-ios-navigate"></i>	__
<i class="icon ion-ios-navigate-outline"></i>	__
<i class="icon ion-ios-locked"></i>	__
<i class="icon ion-ios-locked-outline"></i>	__
<i class="icon ion-ios-unlocked"></i>	__
<i class="icon ion-ios-unlocked-outline"></i>	__
<i class="icon ion-ios-monitor"></i>	__
<i class="icon ion-ios-monitor-outline"></i>	__
<i class="icon ion-ios-printer"></i>	__
<i class="icon ion-ios-printer-outline"></i>	__
<i class="icon ion-ios-game-controller-a"></i>	__
<i class="icon ion-ios-game-controller-a-outline"></i>	__
<i class="icon ion-ios-game-controller-b"></i>	__
<i class="icon ion-ios-game-controller-b-outline"></i>	__
<i class="icon ion-ios-americanfootball"></i>	__
<i class="icon ion-ios-americanfootball-outline"></i>	__
<i class="icon ion-ios-baseball"></i>	__
<i class="icon ion-ios-baseball-outline"></i>	__
<i class="icon ion-ios-basketball"></i>	__
<i class="icon ion-ios-basketball-outline"></iGTGT	__
<i class="icon ion-ios-tennisball"></i>	__
<i class="icon ion-ios-tennisball-outline"></i>	__
<i class="icon ion-ios-football"></i>	__
<i class="icon ion-ios-football-outline"></i>	__
<i class="icon ion-ios-body"></i>	__
<i class="icon ion-ios-body-outline"></i>	__
<i class="icon ion-ios-person"></i>	__
<i class="icon ion-ios-person-outline"></i>	__
<i class="icon ion-ios-personadd"></i>	__
<i class="icon ion-ios-personadd-outline"></i>	__
<i class="icon ion-ios-people"></i>	__
<i class="icon ion-ios-people-outline"></i>	__
<i class="icon ion-ios-musical-notes"></i>	__
<i class="icon ion-ios-musical-note"></i>	__
<i class="icon ion-ios-bell"></i>	__
<i class="icon ion-ios-bell-outline"></i>	__
<i class="icon ion-ios-mic"></i>	__
<i class="icon ion-ios-mic-outline"></i>	__
<i class="icon ion-ios-mic-off"></i>	__
<i class="icon ion-ios-volume-high"></i>	__
<i class="icon ion-ios-volume-low"></i>	__
<i class="icon ion-ios-play"></i>	__
<i class="icon ion-ios-play-outline"></i>	__
<i class="icon ion-ios-pause"></i>	__
<i class="icon ion-ios-pause-outline"></i>	__
<i class="icon ion-ios-recording"></i>	__
<i class="icon ion-ios-recording-outline"></i>	__
<i class="icon ion-ios-fastforward"></i>	__
<i class="icon ion-ios-fastforward-outline"></i>	__
<i class="icon ion-ios-rewind"></i>	__
<i class="icon ion-ios-rewind-outline"></i>	__
<i class="icon ion-ios-skipbackward"></i>	__
<i class="icon ion-ios-skipbackward-outline"></i>	__
<i class="icon ion-ios-skipforward"></i>	__
<i class="icon ion-ios-skipforward-outline"></i>	__
<i class="icon ion-ios-shuffle-strong"></i>	__
<i class="icon ion-ios-shuffle"></i>	__
<i class="icon ion-ios-videocam"></i>	__
<i class="icon ion-ios-videocam-outline"></i>	__
<i class="icon ion-ios-film"></i>	__
<i class="icon ion-ios-film-outline"></i>	__
<i class="icon ion-ios-flask"></i>	__
<i class="icon ion-ios-flask-outline"></i>	__
<i class="icon ion-ios-lightbulb"></i>	__
<i class="icon ion-ios-lightbulb-outline"></i>	__
<i class="icon ion-ios-wineglass"></i>	__
<i class="icon ion-ios-wineglass-outline"></i>	__
<i class="icon ion-ios-pint"></i>	__
<i class="icon ion-ios-pint-outline"></i>	__
<i class="icon ion-ios-nutrition"></i>	__
<i class="icon ion-ios-nutriticon ion-outline"></i>	__
<i class="icon ion-ios-flower"></i>	__
<i class="icon ion-ios-flower-outline"></i>	__
<i class="icon ion-ios-rose"></i>	__
<i class="icon ion-ios-rose-outline"></i>	__
<i class="icon ion-ios-paw"></i>	__
<i class="icon ion-ios-paw-outline"></i>	__
<i class="icon ion-ios-flame"></i>	__
<i class="icon ion-ios-flame-outline"></i>	__
<i class="icon ion-ios-sunny"></i>	__
<i class="icon ion-ios-sunny-outline"></i>	__
<i class="icon ion-ios-partlysunny"></i>	__
<i class="icon ion-ios-partlysunny-outline"></i>	__
<i class="icon ion-ios-cloudy"></i>	__
<i class="icon ion-ios-cloudy-outline"></i>	__
<i class="icon ion-ios-rainy"></i>	__
<i class="icon ion-ios-rainy-outline"></i>	__
<i class="icon ion-ios-thunderstorm"></i>	__
<i class="icon ion-ios-thunderstorm-outline"></i>	__
<i class="icon ion-ios-snowy"></i>	__
<i class="icon ion-ios-moon"></i>	__
<i class="icon ion-ios-moon-outline"></i>	__
<i class="icon ion-ios-cloudy-night"></i>	__
<i class="icon ion-ios-cloudy-night-outline"></i>	__

Androidスタイルのアイコン

Code	Result
<i class="icon ion-android-arrow-up"></i>	__
<i class="icon ion-android-arrow-forward"></i>	__
<i class="icon ion-android-arrow-down"></i>	__
<i class="icon ion-android-arrow-back"></i>	__
<i class="icon ion-android-arrow-dropup"></i>	__
<i class="icon ion-android-arrow-dropup-circle"></i>	__
<i class="icon ion-android-arrow-dropright"></i>	__
<i class="icon ion-android-arrow-dropright-circle"></i>	__
<i class="icon ion-android-arrow-dropdown"></i>	__
<i class="icon ion-android-arrow-dropdown-circle"></i>	__
<i class="icon ion-android-arrow-dropleft"></i>	__
<i class="icon ion-android-arrow-dropleft-circle"></i>	__
<i class="icon ion-android-add"></i>	__
<i class="icon ion-android-add-circle"></i>	__
<i class="icon ion-android-remove"></i>	__
<i class="icon ion-android-remove-circle"></i>	__
<i class="icon ion-android-close"></i>	__
<i class="icon ion-android-cancel"></i>	__
<i class="icon ion-android-radio-button-off"></i>	__
<i class="icon ion-android-radio-button-on"></i>	__
<i class="icon ion-android-checkmark-circle"></i>	__
<i class="icon ion-android-checkbox-outline-blank"></i>	__
<i class="icon ion-android-checkbox-outline"></i>	__
<i class="icon ion-android-checkbox-blank"></i>	__
<i class="icon ion-android-checkbox"></i>	__
<i class="icon ion-android-done"></i>	__
<i class="icon ion-android-done-all"></i>	__
<i class="icon ion-android-menu"></i>	__
<i class="icon ion-android-more-horizontal"></i>	__
<i class="icon ion-android-more-vertical"></i>	__
<i class="icon ion-android-refresh"></i>	__
<i class="icon ion-android-sync"></i>	__
<i class="icon ion-android-wifi"></i>	__
<i class="icon ion-android-call"></i>	__
<i class="icon ion-android-apps"></i>	__
<i class="icon ion-android-settings"></i>	__
<i class="icon ion-android-options"></i>	__
<i class="icon ion-android-funnel"></i>	__
<i class="icon ion-android-search"></i>	__
<i class="icon ion-android-home"></i>	__
<i class="icon ion-android-cloud-outline"></i>	__
<i class="icon ion-android-cloud"></i>	__
<i class="icon ion-android-download"></i>	__
<i class="icon ion-android-upload"></i>	__
<i class="icon ion-android-cloud-done"></i>	__
<i class="icon ion-android-cloud-circle"></i>	__
<i class="icon ion-android-favorite-outline"></i>	__
<i class="icon ion-android-favorite"></i>	__
<i class="icon ion-android-star-outline"></i>	__
<i class="icon ion-android-star-half"></i>	__
<i class="icon ion-android-star"></i>	__
<i class="icon ion-android-calendar"></i>	__
<i class="icon ion-android-alarm-clock"></i>	__
<i class="icon ion-android-time"></i>	__
<i class="icon ion-android-stopwatch"></i>	__
<i class="icon ion-android-watch"></i>	__
<i class="icon ion-android-locate"></i>	__
<i class="icon ion-android-navigate"></i>	__
<i class="icon ion-android-pin"></i>	__
<i class="icon ion-android-compass"></i>	__
<i class="icon ion-android-map"></i>	__
<i class="icon ion-android-walk"></i>	__
<i class="icon ion-android-bicycle"></i>	__
<i class="icon ion-android-car"></i>	__
<i class="icon ion-android-bus"></i>	__
<i class="icon ion-android-subway"></i>	__
<i class="icon ion-android-train"></i>	__
<i class="icon ion-android-boat"></i>	__
<i class="icon ion-android-plane"></i>	__
<i class="icon ion-android-restaurant"></i>	__
<i class="icon ion-android-bar"></i>	__
<i class="icon ion-android-cart"></i>	__
<i class="icon ion-android-camera"></i>	__
<i class="icon ion-android-image"></i>	__
<i class="icon ion-android-film"></i>	__
<i class="icon ion-android-color-palette"></i>	__
<i class="icon ion-android-create"></i>	__
<i class="icon ion-android-mail"></i>	__
<i class="icon ion-android-drafts"></i>	__
<i class="icon ion-android-send"></i>	__
<i class="icon ion-android-archive"></i>	__
<i class="icon ion-android-delete"></i>	__
<i class="icon ion-android-attach"></i>	__
<i class="icon ion-android-share"></i>	__
<i class="icon ion-android-share-alt"></i>	__
<i class="icon ion-android-bookmark"></i>	__
<i class="icon ion-android-document"></i>	__
<i class="icon ion-android-clipboard"></i>	__
<i class="icon ion-android-list"></i>	__
<i class="icon ion-android-folder-open"></i>	__
<i class="icon ion-android-folder"></i>	__
<i class="icon ion-android-print"></i>	__
<i class="icon ion-android-open"></i>	__
<i class="icon ion-android-exit"></i>	__
<i class="icon ion-android-contract"></i>	__
<i class="icon ion-android-expand"></i>	__
<i class="icon ion-android-globe"></i>	__
<i class="icon ion-android-chat"></i>	__
<i class="icon ion-android-textsms"></i>	__
<i class="icon ion-android-hangout"></i>	__
<i class="icon ion-android-happy"></i>	__
<i class="icon ion-android-sad"></i>	__
<i class="icon ion-android-person"></i>	__
<i class="icon ion-android-people"></i>	__
<i class="icon ion-android-person-add"></i>	__
<i class="icon ion-android-contact"></i>	__
<i class="icon ion-android-contacts"></i>	__
<i class="icon ion-android-playstore"></i>	__
<i class="icon ion-android-lock"></i>	__
<i class="icon ion-android-unlock"></i>	__
<i class="icon ion-android-microphone"></i>	__
<i class="icon ion-android-microphone-off"></i>	__
<i class="icon ion-android-notifications-none"></i>	__
<i class="icon ion-android-notifications"></i>	__
<i class="icon ion-android-notifications-off"></i>	__
<i class="icon ion-android-volume-mute"></i>	__
<i class="icon ion-android-volume-down"></i>	__
<i class="icon ion-android-volume-up"></i>	__
<i class="icon ion-android-volume-off"></i>	__
<i class="icon ion-android-hand"></i>	__
<i class="icon ion-android-desktop"></i>	__
<i class="icon ion-android-laptop"></i>	__
<i class="icon ion-android-phone-portrait"></i>	__
<i class="icon ion-android-phone-landscape"></i>	__
<i class="icon ion-android-bulb"></i>	__
<i class="icon ion-android-sunny"></i>	__
<i class="icon ion-android-alert"></i>	__
<i class="icon ion-android-warning"></i>	__

社会的なアイコン

Code	Result
<i class="icon ion-social-twitter"></i>	__
<i class="icon ion-social-twitter-outline"></i>	__
<i class="icon ion-social-facebook"></i>	__
<i class="icon ion-social-facebook-outline"></i>	__
<i class="icon ion-social-googleplus"></i>	__
<i class="icon ion-social-googleplus-outline"></i>	__
<i class="icon ion-social-google"></i>	__
<i class="icon ion-social-google-outline"></i>	__
<i class="icon ion-social-dribbble"></i>	__
<i class="icon ion-social-dribbble-outline"></i>	__
<i class="icon ion-social-octocat"></i>	__
<i class="icon ion-social-github"></i>	__
<i class="icon ion-social-github-outline"></i>	__
<i class="icon ion-social-instagram"></i>	__
<i class="icon ion-social-instagram-outline"></i>	__
<i class="icon ion-social-whatsapp"></i>	__
<i class="icon ion-social-whatsapp-outline"></i>	__
<i class="icon ion-social-snapchat"></i>	__
<i class="icon ion-social-snapchat-outline"></i>	__
<i class="icon ion-social-foursquare"></i>	__
<i class="icon ion-social-foursquare-outline"></i>	__
<i class="icon ion-social-pinterest"></i>	__
<i class="icon ion-social-pinterest-outline"></i>	__
<i class="icon ion-social-rss"></i>	__
<i class="icon ion-social-rss-outline"></i>	__
<i class="icon ion-social-tumblr"></i>	__
<i class="icon ion-social-tumblr-outline"></i>	__
<i class="icon ion-social-wordpress"></i>	__
<i class="icon ion-social-wordpress-outline"></i>	__
<i class="icon ion-social-reddit"></i>	__
<i class="icon ion-social-reddit-outline"></i>	__
<i class="icon ion-social-hackernews"></i>	__
<i class="icon ion-social-hackernews-outline"></i>	__
<i class="icon ion-social-designernews"></i>	__
<i class="icon ion-social-designernews-outline"></i>	__
<i class="icon ion-social-yahoo"></i>	__
<i class="icon ion-social-yahoo-outline"></i>	__
<i class="icon ion-social-buffer"></i>	__
<i class="icon ion-social-buffer-outline"></i>	__
<i class="icon ion-social-skype"></i>	__
<i class="icon ion-social-skype-outline"></i>	__
<i class="icon ion-social-linkedin"></i>	__
<i class="icon ion-social-linkedin-outline"></i>	__
<i class="icon ion-social-vimeo"></i>	__
<i class="icon ion-social-vimeo-outline"></i>	__
<i class="icon ion-social-twitch"></i>	__
<i class="icon ion-social-twitch-outline"></i>	__
<i class="icon ion-social-youtube"></i>	__
<i class="icon ion-social-youtube-outline"></i>	__
<i class="icon ion-social-dropbox"></i>	__
<i class="icon ion-social-dropbox-outline"></i>	__
<i class="icon ion-social-apple"></i>	__
<i class="icon ion-social-apple-outline"></i>	__
<i class="icon ion-social-android"></i>	__
<i class="icon ion-social-android-outline"></i>	__
<i class="icon ion-social-windows"></i>	__
<i class="icon ion-social-windows-outline"></i>	__
<i class="icon ion-social-html5"></i>	__
<i class="icon ion-social-html5-outline"></i>	__
<i class="icon ion-social-css3"></i>	__
<i class="icon ion-social-css3-outline"></i>	__
<i class="icon ion-social-javascript"></i>	__
<i class="icon ion-social-javascript-outline"></i>	__
<i class="icon ion-social-angular"></i>	__
<i class="icon ion-social-angular-outline"></i>	__
<i class="icon ion-social-nodejs"></i>	__
<i class="icon ion-social-sass"></i>	__
<i class="icon ion-social-python"></i>	__
<i class="icon ion-social-chrome"></i>	__
<i class="icon ion-social-chrome-outline"></i>	__
<i class="icon ion-social-codepen"></i>	__
<i class="icon ion-social-codepen-outline"></i>	__
<i class="icon ion-social-markdown"></i>	__
<i class="icon ion-social-tux"></i>	__
<i class="icon ion-social-freebsd-devil"></i>	__
<i class="icon ion-social-usd"></i>	__
<i class="icon ion-social-usd-outline"></i>	__
<i class="icon ion-social-bitcoin"></i>	__
<i class="icon ion-social-bitcoin-outline"></i>	__
<i class="icon ion-social-yen"></i>	__
<i class="icon ion-social-yen-outline"></i>	__
<i class="icon ion-social-euro"></i>	__
<i class="icon ion-social-euro-outline"></i>	__

イオン-パディング

Ionicは、要素にパディングを追加する簡単な方法を提供します。 使用できるクラスがいくつかあり、それらはすべて、要素の境界とそのコンテンツの間に 10px を追加します。 次の表は、使用可能なすべてのパディングクラスを示しています。

パディングクラス

Class Name	Class Info
padding	Adds padding around every side.
padding-vertical	Adds padding to the top and bottom.
padding-horizontal	Adds padding to the left and right.
padding-top	Adds padding to the top.
padding-right	Adds padding to the right.
padding-bottom	Adds padding to the bottom.
padding-left	Adds padding to the left.

パディングを使用する

要素にパディングを適用する場合は、上の表のクラスの1つを割り当てるだけです。 次の例は、2つのブロックボタンを示しています。 最初のものは padding クラスを使用していますが、2番目のものは使用していません。 10px のパディングが適用されているため、最初のボタンが大きくなっていることがわかります。

<div class = "button button-block padding">Padding</div>
<div class = "button button-block">No padding</div>

上記のコードは、次の画面を生成します-

イオンパディング

Ionic-JavaScriptアクションシート

• アクションシート*は、画面の下部にあるスライドアップペインをトリガーするIonicサービスで、さまざまな目的に使用できます。

アクションシートを使用する

次の例では、イオンアクションシートの使用方法を示します。 最初に $ ionicActionSheet サービスをコントローラーの依存関係として挿入し、次に* $ scope.showActionSheet（）*関数を作成し、最後に作成した関数を呼び出すボタンをHTMLテンプレートに作成します。

コントローラコード

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() {
     //Show the action sheet
      var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],

         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',

         cancel: function() {
           //add cancel code...
         },

         buttonClicked: function(index) {
            if(index === 0) {
              //add edit 1 code
            }

            if(index === 1) {
              //add edit 2 code
            }
         },

         destructiveButtonClicked: function() {
           //add delete code..
         }
      });
   };
})

HTMLコード

<button class = "button">Action Sheet Button</button>

コードの説明

ボタンをタップすると、 $ ionicActionSheet.show 関数がトリガーされ、アクションシートが表示されます。 オプションの1つがテープで録音されたときに呼び出される独自の関数を作成できます。 cancel 関数はペインを閉じますが、ペインを閉じる前にキャンセルオプションがタップされたときに呼び出される他の動作を追加できます。

*buttonClicked* 関数は、編集オプションの1つがタップされたときに呼び出されるコードを記述できる場所です。 *index* パラメーターを使用して、複数のボタンを追跡できます。 *destructiveButtonCLicked* は、削除オプションがタップされたときにトリガーされる関数です。 このオプションは、デフォルトで赤です。

イオンアクションシート

• $ ionicActionSheet.show（）*メソッドには、他にも便利なパラメーターがいくつかあります。 次の表でそれらすべてを確認できます。

メソッドオプションの表示

Properties	Type	Details
buttons	object	Creates button object with a text field.
titleText	string	The title of the action sheet.
cancelText	string	The text for cancel button.
destructiveText	string	The text for a destructive button.
cancel	function	Called when cancel button, backdrop or hardware back button is pressed.
buttonClicked	function	Called when one of the buttons is tapped. Index is used for keeping track of which button is tapped. Return true will close the action sheet.
destructiveButtonClicked	function	Called when destructive button is clicked. Return true will close the action sheet.
cancelOnStateChange	boolean	If true (default) it will cancel the action sheet when navigation state is changed.

イオン-Javascriptの背景

*Ionic Backdrop* を適用すると、画面のコンテンツがオーバーレイされます。 他のオーバーレイ（ポップアップ、ロードなど）の下に表示されます。 背景サービスの管理に使用できる方法は2つあります。 * $ ionicBackdrop.retain（）*はコンポーネントに背景幕を適用し、* $ ionicBackdrop.release（）*はそれを削除します。

背景を使用する

次の例は、背景の使用方法を示しています。 コントローラへの依存関係として $ ionicBackdrop を追加してから、すぐに* retainメソッド*を呼び出す* $ scope.showBackdrop（）関数を作成しています。 次に、3秒後に、 releaseメソッド*を呼び出します。 releaseメソッドに $ timeout を使用しているため、コントローラーの依存関係としても追加する必要があります。

.controller('myCtrl', function($scope, $ionicBackdrop, $timeout) {
   $scope.showBackdrop = function() {
      $ionicBackdrop.retain();

      $timeout(function() {
         $ionicBackdrop.release();
      }, 3000);
   };
})

背景が適用されているため、次の画像では画面がどのように暗くなっているかがわかります。

イオン背景

イオン-Javascriptコンテンツ

ほとんどすべてのモバイルアプリには、いくつかの基本的な要素が含まれています。 通常、これらの要素にはヘッダーとフッターが含まれ、画面の上部と下部をカバーします。 他のすべての要素は、これら2つの間に配置されます。 Ionicは、コンテナとして機能するイオンコンテンツ要素を提供します。これは、作成する他のすべての要素をラップします。

私たちは次の例を考えてみましょう-

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1"/>
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2"/>
   </label>
</div>

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

イオン-Javascriptフォーム

この章では、JavaScriptフォームとは何かを理解し、JavaScriptチェックボックス、ラジオボタン、トグルとは何かを学びます。

イオンチェックボックスを使用する

Ionic JavaScriptチェックボックスの使用方法を見てみましょう。 まず、HTMLファイルに ion-checkbox 要素を作成する必要があります。 この中で、角度のある$$ scope に接続される *ng-model 属性を割り当てます。 モデルの値を定義するときに、それがなくても機能する場合でも dot を使用していることに気付くでしょう。 これにより、常に子スコープと親スコープ間のリンクを維持できます。

これは、将来発生する可能性のある問題を回避するのに役立つため、非常に重要です。 要素を作成したら、角度式を使用してその値をバインドします。

<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>
<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>

<p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p>
<p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p>

次に、コントローラー内のモデルに値を割り当てる必要があります。 未使用のチェックボックスから開始するため、使用する値は false です。

$scope.checkboxModel = {
   value1 : false,
   value2 : false
};

上記のコードは、次の画面を生成します-

Ionic Checkbox Unchecked

これで、チェックボックス要素をタップすると、次のスクリーンショットに示すように、モデル値が自動的に*“ true” *に変更されます。

Ionic Checkbox checked

イオンラジオを使用する

まず、HTMLに3つの ion-radio 要素を作成し、それに ng-model と ng-value を割り当てる必要があります。 その後、選択した値を角度式で表示します。 3つの放射性要素すべてのチェックを外すことから始めて、値が画面に割り当てられないようにします。

<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>

<p>Radio value is: <b>{{radioModel.value}}</b></p>

上記のコードは、次の画面を生成します-

Ionic Radio unchecked

2番目のチェックボックス要素をタップすると、それに応じて値が変更されます。

Ionic Radioチェック

イオントグルを使用する

トグルはチェックボックスに似ていることがわかります。 チェックボックスで行ったのと同じ手順に従います。 HTMLファイルでは、まず ion-toggle 要素を作成し、次に ng-model 値を割り当ててから、式の値をビューにバインドします。

<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>
<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>
<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>

<p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p>
<p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p>
<p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p>

次に、コントローラーの $ scope.toggleModel に値を割り当てます。 トグルはブール値を使用するため、最初の要素に true を割り当て、他の2つの要素に false を割り当てます。

$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false
};

上記のコードは、次の画面を生成します-

Ionic Toggle Mixed

次に、2番目と3番目のトグルをタップして、値がfalseからtrueに変化する様子を示します。

Ionic Toggle Checked

イオン-Javascriptイベント

さまざまなIonicイベントを使用して、ユーザーとの対話機能を追加できます。 次の表は、すべてのIonicイベントを説明しています。

Event Name	Event Detail
on-hold	Called when duration of the touch is more than 500ms.
on-tap	Called when duration of the touch is less than 250ms.
on-double-tap	Called when there is double tap touch.
on-touch	Called immediately when touch begins.
on-release	Called when touch ends.
on-drag	Called when touch is moved without releasing around the page in any direction.
on-drag-up	Called when element is dragged up.
on-drag-right	Called when the element is dragged to the right.
on-drag-left	Called when the element is dragged to the left.
on-drag-down	Called when the element is dragged down.
on-swipe	Called when any dragging has high velocity moving in any direction.
on-swipe-up	Called when any dragging has high velocity moving up.
on-swipe-right	Called when any dragging has high velocity moving to the right.
on-swipe-left	Called when any dragging has high velocity moving to the left.
on-swipe-down	Called when any dragging has high velocity moving down.

イベントを使用する

すべてのIonicイベントを同じ方法で使用できるため、 on-touch イベントの使用方法を示し、同じ原則を他のイベントに適用することができます。 まず、ボタンを作成し、 on-touch イベントを割り当てます。これにより、* onTouchFunction（）*が呼び出されます。

<button on-touch = "onTouchFunction()" class="button">Test</button>

次に、コントローラースコープでその関数を作成します。

$scope.onTouchFunction = function() {
  //Do something...
}

現在、タッチイベントが発生すると、* onTouchFunction（）*が呼び出されます。

Ionic-Javascriptヘッダー

これは、ヘッダーバーを追加するIonicディレクティブです。

JavaScriptヘッダーを使用する

JavaScriptヘッダーバーを作成するには、HTMLファイルに ion-header-bar ディレクティブを適用する必要があります。 デフォルトのヘッダーは白なので、 title を追加して、白い背景に表示されるようにします。 それを indexl ファイルに追加します。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上記のコードは、次の画面を生成します-

イオンヘッダーバー

スタイリングヘッダー

CSSヘッダーバーと同様に、JavaScriptの同等物も同様の方法でスタイル設定できます。 色を適用するには、 bar プレフィックスを持つ色クラスを追加する必要があります。 したがって、青色のヘッダーを使用する場合は、 bar-positive クラスを追加します。 align-title 属性を追加して、タイトルを画面の片側に移動することもできます。 この属性の値は、 center 、 left 、または right です。

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上記のコードは、次の画面を生成します-

イオンヘッダースタイリング

要素を追加する

通常、いくつかの要素をヘッダーに追加します。 次の例は、イオンヘッダーバーの左側に*ボタン*を、右側に*アイコン*を配置する方法を示しています。 ヘッダーに他の要素を追加することもできます。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

上記のコードは、次の画面を生成します-

イオンヘッダーバー要素

サブヘッダーの追加

*bar-subheader* クラスが *ion-header-bar* に追加されると、Subヘッダーが作成されます。 *bar-assertive* クラスを追加して、サブヘッダーに赤色を適用します。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

上記のコードは、次の画面を生成します-

Ionic Header Bar Sub-Header

イオン-Javascriptフッター

このディレクティブは、画面の下部にフッターバーを追加します。

フッターを使用する

Iionフッターを追加するには、 ion-footer-bar クラスを適用します。 これを使用することは、ヘッダーを使用することと同じです。 align-title 属性を使用して、タイトルを追加し、それを画面の左側、中央、または右側に配置できます。 接頭辞 bar を使用すると、イオン色を使用できます。 タイトルを中央に配置した赤いフッターを作成しましょう。

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

上記のコードは、次の画面を生成します-

Ionic Javascript Footer

要素を追加する

ボタンアイコンまたはその他の要素を ion-footer-bar に追加すると、スタイルが適用されます。 フッターにボタンとアイコンを追加しましょう。

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

上記のコードは次の画面を生成します

Ionic Javascript Footer Elements

サブフッターを追加する

サブヘッダーの使用方法を示しました。 サブフッターを作成できるのと同じ方法。 フッターバーの上に配置されます。 必要なのは、 bar-subfooter クラスを ion-footer-bar 要素に追加することだけです。

以下の例では、以前に作成したフッターバーの上にサブフッターを追加します。

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>

   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

上記のコードは、次の画面を生成します-

Ionic Javascript Sub Footer

Ionic-Javascriptキーボード

キーボードは、Ionicの自動化された機能の1つです。 これは、Ionicがキーボードを開く必要があるときに認識できることを意味します。

キーボードを使用する

開発者がIonicキーボードを操作しながら調整できる機能がいくつかあります。 キーボードが開いているときにいくつかの要素を非表示にする場合は、 hide-on-keyboard-open クラスを使用できます。 これがどのように機能するかを示すために、キーボードが開いているときに非表示にする必要がある入力とボタンを作成しました。

<label class = "item item-input">
   <input type = "text" placeholder = "Input 1">
</label>

<button class = "button button-block hide-on-keyboard-open">
   button
</button>

上記のコードは、次の画面を生成します-

Ionic Keyboard Button

入力フィールドをタップすると、キーボードが自動的に開き、ボタンが非表示になります。

Ionic Keyboard

Ionicの優れた機能は、画面上の要素を調整するため、キーボードが開いているときにフォーカスされた要素が常に表示されることです。 次の図は10個の入力フォームを示しており、最後のフォームは青です。

Ionic Keyboard False

青いフォームをタップすると、Ionicが画面を調整するため、青いフォームが常に表示されます。

Ionic Keyboard True

注意-これは、画面が Scroll View を持つディレクティブ内にある場合にのみ機能します。 Ionicテンプレートの1つから始めると、すべてのテンプレートが ion-content ディレクティブを他の画面要素のコンテナとして使用するため、スクロールビューが常に適用されることに気付くでしょう。

Ionic-Javascriptリスト

前の章ですでにIonic CSSリスト要素について説明しました。 この章では、JavaScriptリストを示します。 それらにより、スワイプ、ドラッグ、*削除*などのいくつかの新機能を使用できます。

リストを使用する

リストおよびアイテムの表示に使用されるディレクティブは、以下に示すように ion-list および ion-item です。

<ion-list>
   <ion-item>
      Item 1
   </ion-item>

   <ion-item>
      Item 2
   </ion-item>

   <ion-item>
      Item 3
   </ion-item>
</ion-list>

上記のコードは、次の画面を生成します-

イオンリスト

削除ボタン

このボタンは、 ion-delete-button ディレクティブを使用して追加できます。 任意のアイコンクラスを使用できます。 ユーザーが誤ってボタンをタップして削除プロセスをトリガーする可能性があるため、削除ボタンを常に表示する必要はないため、 show-delete 属性を ion-list に追加し、 ng-modelに接続できます。 。

次の例では、 ion-toggle をモデルとして使用します。 トグルが削除されると、リスト項目にボタンが表示されます。

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>

   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

上記のコードは、次の画面を生成します-

イオンリスト削除ボタン

並べ替えボタン

並べ替えボタンのIonicディレクティブは ion-reorder-button です。 作成した要素には on-reorder 属性があり、ユーザーがこの要素をドラッグするたびにコントローラーから関数をトリガーします。

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon"
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

上記のコードは、次の画面を生成します-

Ionic List Reorder 1

右側のアイコンをクリックすると、要素をドラッグしてリスト内の他の場所に移動できます。

Ionic List Reorder 2

オプションボタン

オプションボタンは、 ion-option-button ディレクティブを使用して作成されます。 これらのボタンは、リストアイテムを左にスワイプしたときに表示され、アイテム要素を右にスワイプすることで再び非表示にできます。

次の例では、2つのボタンが非表示になっていることがわかります。

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

上記のコードは、次の画面を生成します-

非表示のイオンリストオプション

item要素を左にスワイプすると、テキストが左に移動し、右側にボタンが表示されます。

Ionic List Option Visible

その他の機能

*collection-repeat* 関数は、* AngularJS ng-repeatディレクティブ*の更新バージョンです。 画面上に表示されている要素のみをレンダリングし、スクロールすると残りが更新されます。 これは、大きなリストを操作しているときの重要なパフォーマンスの向上です。 このディレクティブは、リスト項目をさらに最適化するために *item-width* および *item-height* 属性と組み合わせることができます。

リスト内の画像を操作するための他の便利な属性がいくつかあります。 item-render-buffer 関数は、表示されるアイテムの後にロードされるアイテムの数を表します。 この値が高いほど、より多くのアイテムがプリロードされます。 force-refresh-images 関数は、スクロール中の画像のソースに関する問題を修正します。 これらのクラスは両方とも、パフォーマンスに悪影響を及ぼします。

Ionic-JavaScriptの読み込み

イオンローディングは、表示されたときにユーザーとの対話を無効にし、必要なときに再び有効にします。

ロードの使用

コントローラー内部でロードがトリガーされます。 まず、依存関係として $ ionicLoading をコントローラーに注入する必要があります。 その後、* $ ionicLoading.show（）メソッドを呼び出す必要があり、ロードが表示されます。 無効にするために、 $ ionicLoading.hide（）*メソッドがあります。

コントローラ

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() {
      $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){
      $ionicLoading.hide();
   };
});

HTMLコード

<button class = "button button-block" ng-click = "showLoading()"></button>

ユーザーがボタンをタップすると、ロードが表示されます。 通常、時間のかかる機能が終了したら、読み込みを非表示にする必要があります。

イオンローディングショー

ロードを操作する場合、他のオプションパラメータを使用できます。 説明を下の表に示します。

オプションパラメータの読み込み

Options	Type	Details
templateUrl	string	Used to load HTML template as loading indicator.
scope	object	Used to pass custom scope to loading. Default is the $rootScope.
noBackdrop	Boolean	Used to hide the backdrop.
hideOnStateChange	Boolean	Used to hide the loading when state is changed.
delay	number	Used to delay showing the indicator in milliseconds.
duration	number	Used to hide the indicator after some time in milliseconds. Can be used instead of hide() method.

設定の読み込み

Ionic configは、アプリ全体のすべての $ ionicLoading サービスで使用するオプションを構成するために使用されます。

これは、 $ ionicLoadingConfig を使用して実行できます。 定数はメインアプリモジュールに追加する必要があるため、 app.js ファイルを開き、モジュール宣言の後に定数を追加します。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

上記のコードは、次の画面を生成します-

イオン負荷定数

イオン-Javascriptモーダル

Ionicモーダルがアクティブになると、コンテンツペインが通常のコンテンツの上に表示されます。 モーダルは基本的に、より多くの機能を備えた大きなポップアップです。 モーダルはデフォルトで画面全体をカバーしますが、必要に応じて最適化できます。

モーダルの使用

Ionicでモーダルを実装するには2つの方法があります。 1つの方法は、個別のテンプレートを追加することであり、もう1つは、 script タグ内の通常のHTMLファイルの上に追加することです。 最初に行う必要があるのは、角度依存性注入を使用してモーダルをコントローラーに接続することです。 次に、モーダルを作成する必要があります。 スコープを渡し、モーダルにアニメーションを追加します。

その後、モーダルを開く、閉じる、破棄する関数を作成します。 最後の2つの関数は、モーダルが非表示または削除された場合にトリガーされるコードを記述できる場所に配置されます。 機能をトリガーしたくない場合、モーダルが削除または非表示になったときに、最後の2つの機能を削除できます。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modall', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

HTMLコード

<script id = "my-modall" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>

      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

最後の例で示した方法は、 script タグが既存のHTMLファイル内のモーダルのコンテナとして使用される場合です。

2番目の方法は、 templates フォルダー内に新しいテンプレートファイルを作成することです。 前の例と同じコードを使用しますが、 script タグを削除し、コントローラーの fromTemplateUrl を変更して、モーダルを新規作成テンプレートに接続する必要があります。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-templatel', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

HTMLコード

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>

   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Ionicモーダルを使用する3番目の方法は、HTMLをインラインで挿入することです。 fromTemplateUrl の代わりに fromTemplate 関数を使用します。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +

      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +

   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

3つの例はすべて同じ効果があります。 * $ ionicModal.show（）*をトリガーしてモーダルを開くボタンを作成します。

HTMLコード

<button class = "button" ng-click = "openModal()"></button>

モーダルを開くと、モーダルを閉じるために使用されるボタンが含まれます。 このボタンをHTMLテンプレートに作成しました。

イオンモード

モーダル最適化には他のオプションもあります。 scope と animation の使用方法は既に示しました。 次の表に、他のオプションを示します。

Option	Type	Detail
focusFirstInput	boolean	It will auto focus first input of the modal.
backdropClickToClose	boolean	It will enable closing the modal when backdrop is tapped. Default value is true.
hardwareBackButtonClose	boolean	It will enable closing the modal when hardware back button is clicked. Default value is true.

イオン-Javascriptナビゲーション

ナビゲーションは、すべてのアプリのコアコンポーネントの1つです。 Ionicは、ナビゲーションの処理に AngularJS UI Router を使用しています。

ナビゲーションを使用する

ナビゲーションは app.js ファイルで設定できます。 Ionicテンプレートのいずれかを使用している場合、 $ stateProvider サービスがアプリ config に挿入されていることに気付くでしょう。 アプリの状態を作成する最も簡単な方法を次の例に示します。

*$ stateProvider* サービスはURLをスキャンし、対応する状態を見つけて、 *app.config* で定義したファイルをロードします。

app.jsコード

.config(function($stateProvider) {
   $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/homel'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1l'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2l',});
});

状態は ion-nav-view 要素に読み込まれ、 indexl 本体に配置できます。

indexlコード

<ion-nav-view></ion-nav-view>

上記の例で状態を作成したときは、 templateUrl を使用していたため、状態が読み込まれると、テンプレートファイルに一致するものが検索されます。 次に、 templates フォルダーを開き、アプリのURLが /state1 に変更されたときに読み込まれる state1l という新しいファイルを作成します。

• state1lコード*

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

イオンナビゲーション状態

ナビゲーションメニューの作成

「ion-nav-bar」*要素を追加することで、 *indexl 本体のアプリにナビゲーションバーを追加できます。 ナビゲーションバー内に、アイコン付きの ion-nav-back-button を追加します。 これは、前の状態に戻るために使用されます。 状態が変更されると、ボタンが自動的に表示されます。 この機能を処理するために $ ionicHistory サービスを使用する* goBack（）関数を割り当てます。 したがって、ユーザーがホーム状態を離れて *state1 に移動すると、ユーザーがホーム状態に戻りたい場合、テープで貼り付けることができる戻るボタンが表示されます。

indexlコード

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

コントローラコード

.MyCtrl($scope, $ionicHistory) {
   $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}

Ionic Navigation Back Button

ナビゲーション要素の追加

ボタンは、 ion-nav-buttons を使用してナビゲーションバーに追加できます。 この要素は、 ion-nav-bar または ion-view 内に配置する必要があります。 4つのオプション値を持つ side 属性を割り当てることができます。 primary および secondary の値は、使用されているプラ​​ットフォームに応じてボタンを配置します。 IOSでもAndroidでも、ボタンを片側に配置したい場合があります。 その場合は、代わりに left または right 属性を使用できます。

ナビゲーションバーに ion-nav-title を追加することもできます。 すべてのコードは indexl 本文に配置されるため、どこでも使用できます。

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>

   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

それは次の画面を生成します-

イオンナビゲーション要素

その他のナビゲーション属性

次の表は、イオンナビゲーションで使用できる他のいくつかの機能を示しています。

ナビゲーション属性

Attribute	Options	Detail
nav-transition	none, iOS, Android	Used to set animation that should be applied when transition occurs.
nav-direction	forward, back, enter, exit, swap	Used to set the direction of the animation when transition occurs.
hardwareBackButtonClose	Boolean	It will enable closing the modal when hardware back button is clicked. Default value is true.

キャッシング

Ionicには、パフォーマンスを改善するために最大10個のビューをキャッシュする機能があります。 キャッシュを手動で処理する方法も提供します。 後方ビューのみがキャッシュされ、ユーザーがアクセスするたびに前方ビューがロードされるため、次のコードを使用して前方ビューをキャッシュするように簡単に設定できます。

$ionicCinfigProvider.views.forwardCache(true);

キャッシュするステートの数も設定できます。 3つのビューをキャッシュする場合、次のコードを使用できます。

$ionicConfigProvider.views.maxCache(3);

キャッシュは、 $ stateProvider 内で、または属性を ion-view に設定することで無効にできます。 両方の例を以下に示します。

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1l'
})

<ion-view cache-view = "false"></ion-view>

ナビゲーションバーの制御

*$ ionicNavBarDelegate* サービスを使用して、ナビゲーションバーの動作を制御できます。 このサービスをコントローラーに注入する必要があります。

HTMLコード

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

コントローラコード

$scope.setNavTitle = function(title) {
   $ionicNavBarDelegate.title(title);
}

*$ ionicNavBarDelegate* サービスには他の便利なメソッドがあります。 これらのメソッドの一部を次の表にリストします。

$ ionicNavBarDelegateのメソッド

Method	Parameter	Type	Detail
align(parameter)	center, left, right	string	Used to align the title.
showBackButton(parameter)	show	Boolean	Used to show or hide the back button.
title(parameter)	title	string	Used to show the new title.

追跡履歴

*$ ionicHistory* サービスを使用して、以前のビュー、現在のビュー、およびフォワードビューの履歴を追跡できます。 次の表に、このサービスのすべてのメソッドを示します。

$ ionicHistoryのメソッド

Method	Parameter	Type	Detail
viewHistory	/	object	Returns the app view history data.
currentView()	/	object	Returns the current view.
title(parameter)	title	string	Returns the ID of the view which is parent of the current view.
currentTitle(parameter)	val	string	Returns the title of the current view. It can be updated by setting new val value.
backView()	/	string	Returns the last back view.
backTitle()	/	string	Returns the title of last back view.
forwardView()	/	object	Returns the last forward view.
currentStateName()	/	string	Returns the current state name.
goBack()	backCount	number	Used to set how many views to go back. Number should be negative. If it is positive or zero it will have no effect.
clearHistory()	/	/	Used to clear entire view history.
clearCache()	/	promise	Used to clear all cached views.
nextViewOptions()	/	object	Sets the options of the next view. You can look the following example for more info.

• nextViewOptions（）*メソッドには、次の3つのオプションがあります。
• disableAnimate は、次のビュー変更のアニメーションを無効にするために使用されます。
• disableBack は、背面ビューをヌルに設定します。
• historyRoot は、次のビューをルートビューとして設定します。

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});

イオン-Javascript Popover

これは、通常のビューの上に表示されるビューです。

ポップオーバーの使用

Popionは、 ion-popover-view 要素を使用して作成できます。 この要素をHTMLテンプレートに追加し、 $ ionicPopover サービスをコントローラーに挿入する必要があります。

ポップオーバーを追加するには3つの方法があります。 1つ目は fromTemplate メソッドで、インラインテンプレートを使用できます。 ポップオーバーを追加する2番目と3番目の方法は、 fromTemplateUrl メソッドを使用することです。

以下で説明する fromtemplate メソッドを理解しましょう。

Fromtemplateメソッドのコントローラーコード

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
  //.fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

  //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

  //Execute action on hide popover
   $scope.$on('popover.hidden', function() {
     //Execute action
   });

  //Execute action on remove popover
   $scope.$on('popover.removed', function() {
     //Execute action
   });
})

上記で説明したように、ポップオーバーを追加する2番目と3番目の方法は、 fromTemplateUrl メソッドを使用することです。 コントローラーコードは、 fromTemplateUrl 値を除いて、両方の方法で同じです。

HTMLが既存のテンプレートに追加される場合、URLは popoverl になります。 HTMLをテンプレートフォルダーに配置する場合、URLは templates/popoverl に変更されます。

両方の例を以下に説明しました。

fromTemplateUrlのコントローラーコード

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popoverl', {
      scope: $scope
   }).then(function(popover) {
      $scope.popover = popover;
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

  //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.popover.remove();
   });

  //Execute action on hide popover
   $scope.$on('popover.hidden', function() {
     //Execute action
   });

  //Execute action on remove popover
   $scope.$on('popover.removed', function() {
     //Execute action
   });
})

次に、HTMLファイルにテンプレート付きの script を追加します。これは、ポップオーバー関数の呼び出しに使用します。

既存のHTMLファイルからのHTMLコード

<script id = "popoverl" type = "text/ng-template">
   <ion-popover-view>

      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>

      <ion-content>
         Popover Content!
      </ion-content>

   </ion-popover-view>
</script>

HTMLを別のファイルとして作成する場合は、 templates フォルダーに新しいHTMLファイルを作成し、 script タグなしで上記の例で使用したものと同じコードを使用できます。

新しく作成されたHTMLファイルは次のとおりです。

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>

   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

最後に必要なことは、ポップオーバーを表示するためにクリックされるボタンを作成することです。

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

上記の例からどのように選択しても、出力は常に同じになります。

Popover Js

次の表は、使用できる $ ionicPopover メソッドを示しています。

Method	Option	Type	Detail
initialize(options)	scope, focusFirst, backdropClickToClose, hardwareBackButtonClose	object, boolean, boolean, boolean	Scope *is used to pass custom scope to popover. Default is the $rootScope. focusFirstInput is used to auto focus the first input of the popover. backdropClickToClose is used to close popover when clicking the backdrop. hardwareBackButtonClose* is used to close popover when hardware back button is pressed.
show($event)	$event	promise	Resolved when popover is finished showing.
hide()	/	promise	Resolved when popover is finished hiding.
remove()	/	promise	Resolved when popover is finished removing.
isShown()	/	Boolean	Returns true if popover is shown or false if it is not.

Ionic-JavaScriptポップアップ

このサービスは、ユーザーとの対話に使用される通常のビューの上にポップアップウィンドウを作成するために使用されます。 4種類のポップアップがあります- show 、 confirm 、 alert 、 prompt 。

ポップアップを表示する

このポップアップはすべての中で最も複雑です。 ポップアップをトリガーするには、コントローラーに $ ionicPopup サービスを挿入し、使用するポップアップをトリガーするメソッド（この場合は* $ ionicPopup.show（））を追加するだけです。 * onTap（e）*関数を使用して e.preventDefault（）*メソッドを追加できます。これは、入力に変更が適用されていない場合にポップアップを開いたままにします。 ポップアップが閉じられると、約束されたオブジェクトは解決されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}

     //Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,

         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {

                  if (!$scope.data.model) {
                    //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

Ionic Popup Show

おそらく、上記の例でいくつかの新しいオプションが使用されていることに気づいたでしょう。 次の表では、これらのオプションとそのユースケースをすべて説明します。

ポップアップオプションを表示

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
scope	Scope	A scope of the popup.
buttons	Array[Object]	Buttons that will be placed in footer of the popup. They can use their own properties and methods. text *is displayed on top of the button, type is the Ionic class used for the button, onTap* is function that will be triggered when the button is tapped. Returning a value will cause the promise to resolve with the given value.

ポップアップの確認の使用

Confirm Popupは、Ionicポップアップのよりシンプルなバージョンです。 ユーザーには、キャンセルボタンとOKボタンを押して、対応する機能をトリガーできます。 いずれかのボタンが押されたときに解決される約束されたオブジェクトを返します。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
       var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
    };
})

HTMLコード

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

Ionic Popup Confirm

次の表は、このポップアップに使用できるオプションを説明しています。

ポップアップオプションの確認

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
cancelText	string	The text for the Cancel button.
cancelType	string	The Ionic button type of the Cancel button.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.

アラートポップアップの使用

アラートは、アラート情報をユーザーに表示するために使用される単純なポップアップです。 ポップアップを閉じて、ポップアップの約束されたオブジェクトを解決するために使用されるボタンは1つだけです。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
        //Custom functionality....
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

それは次の画面を生成します-

Ionic Popup Alert

次の表に、アラートポップアップに使用できるオプションを示します。

アラートポップアップオプション

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.

プロンプトポップアップの使用

Ionicを使用して作成できる最後のIonicポップアップは prompt です。 入力からの値でプロミスを解決する[OK]ボタンと、未定義の値で解決する[キャンセル]ボタンがあります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });

      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

それは次の画面を生成します-

Ionic Popup Prompt

次の表に、プロンプトポップアップに使用できるオプションを示します。

プロンプトポップアップオプション

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
inputType	string	The type for the input.
inputPlaceholder	string	A placeholder for the input.
cancelText	string	The text for the Cancel button.
cancelType	string	The Ionic button type of the Cancel button.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.

Ionic-JavaScriptスクロール

イオンアプリでのスクロール操作に使用される要素は、 ion-scroll と呼ばれます。

スクロールを使用する

次のコードスニペットは、スクロール可能なコンテナを作成し、スクロールパターンを調整します。 最初に、HTML要素を作成し、プロパティを追加します。 → direction = "xy" を追加して、すべての側にスクロールできるようにします。 スクロール要素の幅と高さも設定します。

HTMLコード

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

次に、 ion-scroll 内で作成した div 要素に世界地図の画像を追加し、幅と高さを設定します。

CSSコード

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

アプリを実行すると、地図をあらゆる方向にスクロールできます。 次の例は、マップの北米部分を示しています。

Ionic Javascript Scroll Start

このマップを必要な部分にスクロールできます。 スクロールして、アジアを示しましょう。

Ionic Javascript Scroll End

*ion-scroll* に適用できる他の属性があります。 次の表で確認できます。

スクロール属性

Attribute	Type	Details
direction	string	Possible directions of the scroll. Default value is *y *
delegate-handle	string	Used for scroll identification with* $ionicScrollDelegate*.
locking	boolean	Used to lock scrolling in one direction at a time. Default value is true.
paging	boolean	Used to determine if the paging will be used with scroll.
on-refresh	expression	Called on pull-to-refresh.
on-scroll	expression	Called when scrolling.
scrollbar-x	boolean	Should horizontal scroll bar be shown. Default value is true.
scrollbar-y	string	Should vertical scroll bar be shown. Default value is true.
zooming	boolean	Used to apply pinch-to-zoom.
min-zoom	integer	Minimal zoom value.
max-zoom	integer	Maximal zoom value.
scrollbar-x	boolean	Used to enable bouncing. Default value on IOS is true, on Android false.

無限スクロール

スクロールがページの下部を通過するときに、無限スクロールを使用していくつかの動作をトリガーします。 次の例は、これがどのように機能するかを示しています。 コントローラーで、リストにアイテムを追加する関数を作成しました。 スクロールが最後に読み込まれた要素の10％を通過すると、これらのアイテムが追加されます。 これは、ロードされた30個の要素に到達するまで続きます。 ロードが完了するたびに、 on-infinite は scroll.infiniteScrollComplete イベントをブロードキャストします。

HTMLコード

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()"
   distance = "10%"></ion-infinite-scroll>

コントローラコード

.controller('MyCtrl', function($scope) {
   $scope.items = [];
   $scope.noMoreItemsAvailable = false;

   $scope.loadMore = function() {
      $scope.items.push({ id: $scope.items.length});

      if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true;
      }

      $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

*ion-infinite-scroll* では他の属性も使用できます。 それらのいくつかは、以下の表にリストされています。

スクロール属性

Attribute	Type	Details
on-infinite	expression	What should be called when scrolled to the bottom.
distance	string	The distance from the bottom needed to trigger on-infinite expression.
spinner	string	What spinner should be shown while loading
immediate-check	Boolean	Should ‘on-infinite’ be called when screen is loaded

スクロールデリゲート

Ionicは、スクロール要素を完全に制御するデリゲートを提供します。 これは、コントローラーに $ ionicScrollDelegate サービスを注入し、それが提供するメソッドを使用することで使用できます。

次の例は、20個のオブジェクトのスクロール可能なリストを示しています。

HTMLコード

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

コントローラコード

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() {
      $ionicScrollDelegate.scrollTop();
   };
})

上記のコードは、次の画面を生成します-

Ionic Javascript Scroll Bottom

ボタンをタップすると、スクロールが上部に移動します。

Ionic Javascript Scroll Top

ここで、すべての $ ionicScrollDelegate メソッドを調べます。

デリゲートメソッド

Method	Parameters	Type	Details
scrollTop(parameter)	shouldAnimate	boolean	Should scroll be animated.
scrollBottom(parameter)	shouldAnimate	boolean	Should scroll be animated.
scrollTo(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	First two parameters determine value of the x, and y-axis offset.
scrollBy(parameter1, parameter2, parameter3)	left, top, shouldAnimate	number, number, integer	First two parameters determine value of the x, and y-axis offset.
zoomTo(parameter1, parameter2, parameter3, parameter4)	level, animate, originLeft, originTop	number, boolean, number, number	level *is used to determine level to zoom to. originLeft and originRight* coordinates where the zooming should happen.
zoomBy(parameter1, parameter2, parameter3, parameter4)	factor, animate, originLeft, originTop	number, boolean, number, number	factor *is used to determine factor to zoom by. originLeft and originRight *coordinates where the zooming should happen.
getScrollPosition()	/	/	Returns object with two number as properties:* left and right*. These numbers represent the distance the user has scrolled from the left and from the top respectively.
anchorScroll(parameter1)	shouldAnimate	boolean	It will scroll to the element with the same id as the window.loaction.hash. If this element does not exist, it will scroll to the top.
freezeScroll(parameter1)	shouldFreeze	boolean	Used to disable scrolling for particular scroll.
freezeAllScrolls(parameter1)	shouldFreeze	boolean	Used to disable scrolling for all the scrolls in the app.
getScrollViews()	/	object	Returns the scrollView object.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular scroll view with the same handle. $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();

Ionic-JavaScriptサイドメニュー

サイドメニューは、最もよく使用されるIonicコンポーネントの1つです。 サイドメニューを開くには、左または右にスワイプするか、その目的のために作成されたボタンをトリガーします。

サイドメニューを使用する

必要な最初の要素は ion-side-menus です。 この要素は、サイドメニューを使用するすべての画面にサイドメニューを接続するために使用されます。 ion-side-menu-content 要素はコンテンツが配置される場所であり、 ion-side-menu 要素は side ディレクティブを配置できる場所です。 indexl にサイドメニューを追加し、サイドメニューのコンテンツ内に ion-nav-view を配置します。 このようにして、アプリ全体でサイドメニューを使用できます。

インデックス

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

ここで、menu-toggle = "left" *ディレクティブを使用してボタンを作成します。 通常、このボタンはアプリのヘッダーバーに配置されますが、理解を深めるためにテンプレートファイルに追加します。

ボタンをタップするか、右にスワイプすると、サイドメニューが開きます。 サイドメニューを閉じるためだけに1つのボタンを使用したい場合は、 menu-close ディレクティブを設定することもできますが、これにはトグルボタンを使用します。

HTMLテンプレート

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

上記のコードは、次の画面を生成します-

Ionic Javascript Side Menu

*ion-side-menus* 要素にいくつかの追加属性を追加できます。 戻るボタンが表示されたときに、サイドメニューを無効にするには、 *enable-menu-with-back-views* をfalseに設定できます。 これにより、ヘッダーの *menu-toggle* ボタンも非表示になります。 他の属性は *delegate-handle* で、これは *$ ionicSideMenuDelegate* との接続に使用されます。

*ion-side-menu-content* 要素は独自の属性を使用できます。 *drag-content* 属性をfalseに設定すると、コンテンツ画面をスワイプしてサイドメニューを開く機能が無効になります。 *edge-drag-threshold* 属性のデフォルト値は25です。 つまり、スワイプは画面の左端と右端から25ピクセルのみ許可されます。 この数値を変更するか、 *false* に設定して画面全体でスワイプを有効にするか、 *true* に設定して無効にすることができます。

*ion-side-menu* は、上記の例で示した *side* 属性を使用できます。 メニューを左側から表示するか、右側から表示するかを決定します。 *'is-enabled'* 属性がfalse値の場合、サイドメニューは無効になり、 *width* 属性値はサイドメニューの幅を表す数値です。 デフォルト値は275です。

サイドメニューデリゲート

*$ ionicSideMenuDelegate* は、アプリ内のすべてのサイドメニューを制御するために使用されるサービスです。 使用方法を説明し、利用可能なすべてのオプションを確認します。 すべてのIonicサービスと同様に、コントローラーに依存関係として追加し、コントローラーのスコープ内で使用する必要があります。 これで、ボタンをクリックすると、すべてのサイドメニューが開きます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

次の表は、 $ ionicScrollDelegate メソッドを示しています。

デリゲートメソッド

Method	Parameters	Type	Details
toggleLeft(parameter)	isOpen	Boolean	Used for opening or closing side menu.
toggleRight(parameter)	isOpen	Boolean	Used for opening or closing side menu.
getOpenRatio()	/	/	Returns ratio of open part over menu width. If half of the menu is open from the left, the ration will be 0.5. If side menu is closed, it will return 0. If half of the menu is open from the right side, it will return -0.5.
isOpen()	/	Boolean	Returns true if side menu is open, false if it is closed.
isOpenLeft()	/	Boolean	Returns true if left side menu is open, false if it is closed.
isOpenRight()	/	Boolean	Returns true if right side menu is open, false if it is closed.
getScrollPosition()	/	/	Returns object with two number as properties: left *and right*. These numbers represent the distance the user has scrolled from the left and from the top respectively.
canDragContent(parameter1)	canDrag	Boolean	Whether the content can be dragged to open side menu.
edgeDragThreshold(parameter1)	value	Boolean	number
If the value is true, the side menu can be opened by dragging 25px from the edges of the screen. If it is false, dragging is disabled. We can set any number that will represent pixel value from the left and right edge of the screen.	$getByHandle(parameter1)	handle	string

Ionic-JavaScriptスライドボックス

スライドボックスには、コンテンツ画面をスワイプすることで変更できるページが含まれています。

スライドボックスを使用する

スライドボックスの使い方は簡単です。 ion-slide-box をコンテナとして追加し、 ion-slide をそのコンテナ内のボックスクラスに追加するだけです。 視認性を高めるために、ボックスに高さと境界線を追加します。

HTMLコード

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

出力は、次のスクリーンショットに示すようになります-

Ionic Javascript Slide Box 1

コンテンツを右にドラッグして、ボックスを変更できます。 左にドラッグして前のボックスを表示することもできます。

Ionic Javascript Slide Box 2

次の表に、スライドボックスの動作を制御するために使用できるいくつかの属性を示します。

デリゲートメソッド

Attribute	Type	Details
does-continue	Boolean	Should slide box loop when first or last box is reached.
auto-play	Boolean	Should slide box automatically slide.
slide-interval	number	Time value between auto slide changes in milliseconds. Default value is 4000.
show-pager	Boolean	Should pager be visible.
pager-click	expression	Called when a pager is tapped (if pager is visible). *$index *is used to match with different slides.
on-slide-changed	expression	Called when slide is changed.* $index *is used to match with different slides.
active-slide	expression	Used as a model to bind the current slide index to.
delegate-handle	string	Used for slide box identification with* $ionicSlideBoxDelegate*.

スライドボックスデリゲート

*$ ionicSlideBoxDelegate* は、すべてのスライドボックスの制御に使用されるサービスです。 コントローラーに注入する必要があります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() {
      $ionicSlideBoxDelegate.next();
   }
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

次の表は、 $ ionicSlideBoxDelegate メソッドを示しています。

デリゲートメソッド

Method	Parameters	Type	Details
slide(parameter1, parameter2)	to, speed	number, number	Parameter to *represents the index to slide to. speed *determines how fast is the change in milliseconds.
enableSlide(parameter1)	shouldEnable	boolean	Used for enambling or disabling sliding.
previous(parameter1)	speed	number	The value in miliseconds the change should take.
stop()	/	/	Used to stop the sliding.
start()	/	/	Used to start the sliding.
currentIndex()	/	number	Returns index of the curent slide.
slidesCount()	/	number	Returns total number of the slides.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular slide box with the same handle.* $ionicSlideBoxDelegate. $getByHandle('my-handle').start();*

Ionic-Javascriptタブ

タブは、ナビゲーションタイプやアプリ内のさまざまなページを選択する場合に便利なパターンです。 Androidデバイスの場合は画面の上部に、IOSデバイスの場合は下部に同じタブが表示されます。

タブを使用する

*ion-tabs* をコンテナ要素として、 *ion-tab* をコンテンツ要素として使用して、タブをアプリに追加できます。 これを *indexl* に追加しますが、アプリ内の任意のHTMLファイルに追加できます。 CSSの問題を回避するために、 *ion-content* 内に追加しないでください。

indexlコード

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing"
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home"
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star"
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

出力は次のスクリーンショットのようになります。

Ionic Javascript Tabs

*ion-tab* 要素に利用可能なAPIがあります。 *title* 、 *icon-on* 、および *icon-off* を使用した上記の例で示したように、属性として追加できます。 最後の2つは、選択したタブを他のタブと区別するために使用されます。 上の画像を見ると、最初のタブが選択されていることがわかります。 次の表の残りの属性を確認できます。

タブ属性

Attribute	Type	Details
title	string	The title of the tab.
href	string	The link used for tab navigation.
icon	string	The icon of the tab.
icon-on	string	The icon of the tab when selected.
icon-off	string	The icon of the tab when not selected.
badge	expression	The badge for the tab.
badge-style	expression	The badge style for the tab.
on-select	expression	Called when tab is selected
on-deselect	expression	Called when tab is deselected
hidden	expression	Used to hide the tab.
disabled	expression	Used to disable the tab.

また、タブには独自のデリゲートサービスがあり、アプリ内のすべてのタブを簡単に制御できます。 コントローラーに挿入でき、次の表に示すいくつかのメソッドがあります。

デリゲートメソッド

Method	Parameters	Type	Details
selectedIndex()	/	number	Returns the index of the selected tab.
$getByHandle(parameter1)	handle	string	Used to connect methods to the particular tab view with the same handle. Handle can be added to ion-tabs *by using delegate-handle = "my-handle" attribute. $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();*

イオン-Cordova統合

Cordovaは ngCordova を提供します。これは、AngularJSで動作するように特別に設計されたラッパーのセットです。

ngCordovaのインストール

Ionicアプリを起動すると、 bower を使用していることがわかります。 ngCordovaプラグインの管理に使用できます。 bowerをインストールしている場合、このステップをスキップし、ない場合は、コマンドプロンプトウィンドウでインストールできます。

C:\Users\Username\Desktop\MyApp> npm install -g bower

ここで、 ngCordova をインストールする必要があります。 コマンドプロンプトウィンドウでアプリを開きます。 次の例は、デスクトップ上にあり、 MyApp という名前のアプリに使用されます。

C:\Users\Username\Desktop\MyApp> bower install ngCordova

次に、ngCordovaをアプリに含める必要があります。 indexl ファイルを開き、次のスクリプトを追加します。 cordova.js の前と ionic スクリプトの後にこれらのスクリプトを追加することが重要です。

<script src = "lib/ngCordova/dist/ng-cordova.js"></script>

次に、ngCordovaを角度依存性として注入する必要があります。 app.jsファイルを開き、ngCordovaをangleモジュールに追加します。 Ionicテンプレートアプリのいずれかを使用している場合、イオン、コントローラー、およびサービスが注入されていることがわかります。 その場合、配列の最後にngCordovaを追加するだけです。

angular.module('myApp', ['ngCordova'])

次のコマンドを入力して、すでにインストールされているプラ​​グインをいつでも確認できます。

C:\Users\Username\Desktop\MyApp> cordova plugins ls

これで、Cordovaプラグインを使用できます。 他のすべてのプラグインhttp://ngcordova.com/docs/plugins/[こちら]を確認できます。

イオン-Cordova AdMob

Cordova AdMobプラグインは、広告をネイティブに統合するために使用されます。 admobは廃止されるため、この章では admobpro プラグインを使用します。

AdMobを使用する

アプリで広告を使用するには、admobにサインアップしてバナーを作成する必要があります。 これを行うと、*広告発行者ID *が取得されます。これらの手順はIonicフレームワークの一部ではないため、ここでは説明しません。 Googleサポートチームのhttps://support.google.com/admob/?hl=ja#topic=2740022 [こちら]の手順に従うことができます。

Cordovaプラグインはネイティブプラットフォームでのみ機能するため、AndroidまたはiOSプラットフォームをインストールする必要もあります。 これを行う方法については、環境設定の章ですでに説明しました。

AdMobプラグインは、コマンドプロンプトウィンドウにインストールできます。

C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro

プラグインをインストールしたので、使用する前にデバイスの準備ができているかどうかを確認する必要があります。 これが、 app.js 内の $ ionicPlatform.ready 関数に次のコードを追加する必要がある理由です。

if( ionic.Platform.isAndroid() )  {
   admobid = {//for Android
      banner: 'ca-app-pub-xxx/xxx'//Change this to your Ad Unit Id for banner...
   };

   if(AdMob)
      AdMob.createBanner( {
         adId:admobid.banner,
         position:AdMob.AD_POSITION.BOTTOM_CENTER,
         autoShow:true
      } );
}

出力は次のスクリーンショットのようになります。

Ionic Cordova Admob

同じコードをiOSまたはWindows Phoneに適用できます。 これらのプラットフォームには異なるIDのみを使用します。 バナーの代わりに、画面全体をカバーするインタースティシャル広告を使用できます。

AdMobメソッド

次の表に、admobで使用できるメソッドを示します。

Method	Parameters	Details
createBanner(parameter1, parameter2, parameter3)	adId/options, success, fail	Used for creating the banner.
removeBanner()	/	Used for removing the banner.
showBanner(parameter1)	position	Used for showing the banner.
showBannerAtXY(parameter1, parameter2)	x, y	Used for showing the banner at specified location.
hideBanner();	/	Used for hiding the banner.
prepareInterstitial(parameter1, parameter2, parameter3)	adId/options, success, fail	Used for preparing interstitial.
showInterstitial();	/	Used for showing interstitial.
setOptions(parameter1, parameter2, parameter3)	options, success, fail	Used for setting the default value for other methods.

AdMobイベント

次の表に、admobで使用できるイベントを示します。

Event	Details
onAdLoaded	Called when the ad is loaded.
onAdFailLoad	Called when the ad is failed to load.
onAdPresent	Called when the ad will be showed on screen.
onAdDismiss	Called when the ad is dismissed.
onAdLeaveApp	Called when the user leaves the app by clicking the ad.

以下の例に従って、これらのイベントを処理できます。

document.addEventListener('onAdLoaded', function(e){
  //Handle the event...
});

イオン-Cordovaカメラ

Cordovaカメラプラグインは、*ネイティブカメラ*を使用して、写真を撮影したり、画像ギャラリーから画像を取得したりします。

カメラを使用する

コマンドプロンプトでプロジェクトルートフォルダーを開き、次のコマンドでCordovaカメラプラグインをダウンロードしてインストールします。

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

次に、カメラプラグインを使用するためのサービスを作成します。 * AngularJSファクトリー*と、ファクトリーに注入する必要があるオブジェクト $ q を使用します。

services.jsコード

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

このサービスをアプリで使用するには、依存関係としてコントローラーに注入する必要があります。 CordovaカメラAPIは、 getPicture メソッドを提供します。このメソッドは、ネイティブカメラを使用して写真を撮影するために使用されます。

ネイティブカメラの設定は、 options パラメーターを takePicture 関数に渡すことでさらにカスタマイズできます。 この動作をトリガーするには、上記のコードサンプルをコントローラーにコピーします。 カメラアプリケーションを開き、画像データを含む成功コールバック関数またはエラーメッセージを含むエラーコールバック関数を返します。 また、作成しようとしている機能を呼び出す2つのボタンが必要になり、画面に画像を表示する必要があります。

HTMLコード

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

コントローラコード

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) {
      var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 1
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

出力は次のスクリーンショットのようになります。

Ionic Cordova Camera

ギャラリーの画像を使用する場合、変更する必要があるのは、optionsパラメーターの sourceType メソッドのみです。 この変更により、カメラではなくダイアログポップアップが開き、デバイスから必要な画像を選択できるようになります。

次のコードを見ると、 sourceType オプションが 0 に変更されています。 これで、2番目のボタンをタップすると、デバイスからファイルメニューが開きます。

コントローラコード

.controller('MyCtrl', function($scope, Camera) {
   $scope.getPicture = function (options) {
       var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

出力は次のスクリーンショットのようになります。

Ionic Cordova Camera Gallery

撮影した画像を保存すると、画面に表示されます。 好きなようにスタイルを設定できます。

Ionic Cordova Camera Image

他のいくつかのオプションも使用できます。その一部を次の表に示します。

Parameter	Type	Details
quality	Number	The quality of the image, range 0-100
destinationType	Number	Format of the image.
sourceType	Number	Used for setting the source of the picture.
allowEdit	boolean	Used for allowing editing of the image.
encodingType	Number	Value 0 will set JPEG, and value 1 will set PNG.
targetWidth	Number	Used for scaling image width.
targetHeight	Number	Used for scaling image height.
mediaType	string	Used for setting the media type.
cameraDirection	Number	Value 0 will set the back camera, and value 1 will set the front camera.
popoverOptions	string	IOS-only options that specify popover location in iPad.
saveToPhotoAlbum	boolean	Used for saving image to photo album.
correctOrientation	boolean	Used for correcting orientation of the captured images.

イオン-Cordova Facebook

このプラグインは、Facebook APIへの接続に使用されます。 Facebookの統合を開始する前に、Facebookアプリhttps://developers.facebook.com/[こちら]を作成する必要があります。 Webアプリを作成し、クイックスタート画面をスキップします。 次に、 settings ページでWebサイトプラットフォームを追加する必要があります。 開発中は、サイトURLに次のコードスニペットを使用できます。

http://localhost:8100/

その後、 settings/advanced ページで*有効なOAuthリダイレクトURI *を追加する必要があります。 次の2つのURLをコピーするだけです。

https://www.facebook.com/connect/login_successl
http://localhost:8100/oauthcallbackl

Facebookプラグインのインストール

このプラグインを使用するときによく発生する問題に対処するために、上記のすべての手順を実行しました。 このプラグインは、多くの手順が含まれており、ドキュメントではそれらのすべてが網羅されていないため、セットアップが困難です。 他のCordovaプラグインとの互換性に関する既知の問題もいくつかあるため、アプリでは* Teleric検証済みプラグイン*バージョンを使用します。 コマンドプロンプトからアプリにブラウザープラットフォームをインストールすることから始めます。

C:\Users\Username\Desktop\MyApp>ionic platform add browser

次に、 indexl の body タグの上に root 要素を追加する必要があります。

インデックス

<div id = "fb-root"></div>

次に、アプリにCordova Facebookプラグインを追加します。 以前に作成したFacebookアプリに合わせて APP_ID と APP_NAME を変更する必要があります。

C:\Users\Username\Desktop\MyApp>cordova -d plugin add
   https://github.com/Telerik-Verified-Plugins/Facebook/
   --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

ここで indexl を開き、 body タグの後に次のコードを追加します。 ここでも、 appId と version が作成したFacebookアプリと一致していることを確認する必要があります。 これにより、アプリの残りの部分をブロックすることなく、Facebook SDKが非同期でロードされます。

インデックス

<script>
   window.fbAsyncInit = function() {
      FB.init({
         appId      : '123456789',
         xfbml      : true,
         version    : 'v2.4'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

角度サービス

すべてをインストールしたので、Facebookへの接続となるサービスを作成する必要があります。 これらのことは、*コントローラー*内のより少ないコードで実行できますが、ベストプラクティスに従うよう努めているため、Angularサービスを使用します。 次のコードは、サービス全体を示しています。 後で説明します。

services.js

.service('Auth', function($q, $ionicLoading) {
   this.getLoginStatus = function() {
      var defer = $q.defer();

      FB.getLoginStatus(function(response) {
           if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in");
         }
      });

      return defer.promise;
   }
   this.loginFacebook = function() {
      var defer = $q.defer();

      FB.login(function(response) {
           if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in!");
         }
      });

      return defer.promise;
   }
   this.logoutFacebook = function() {
      var defer = $q.defer();

      FB.logout(function(response) {
         console.log('You are logged out!');
      });

      return defer.promise;
   }
   this.getFacebookApi = function() {
      var defer = $q.defer();

      FB.api("me/?fields = id,email", [], function(response) {

         if (response.error) {
            console.log(JSON.stringify(response.error));
         } else {
            console.log(JSON.stringify(response));
         }
      });

      return defer.promise;
   }
});

上記のサービスでは、4つの関数を作成しています。 最初の3つは一目瞭然です。 4番目の関数は、FacebookグラフAPIへの接続に使用されます。 Facebookユーザーからの id と email を返します。

非同期JavaScript関数を処理する* promiseオブジェクト*を作成しています。 次に、これらの関数を呼び出すコントローラーを作成する必要があります。 理解を深めるために各関数を個別に呼び出しますが、望みの効果を得るにはおそらくそれらのいくつかを一緒に混ぜる必要があります。

コントローラコード

.controller('MyCtrl', function($scope, Auth, $ionicLoading) {

   $scope.checkLoginStatus = function() {
      getLoginUserStatus();
   }

   $scope.loginFacebook = function(userData) {
      loginFacebookUser();
   };

   $scope.facebookAPI = function() {
      getFacebookUserApi();
   }

   $scope.logoutFacebook = function() {
      logoutFacebookUser();
   };

   function loginFacebookUser() {
      return Auth.loginFacebook();
   }

   function logoutFacebookUser() {
      return Auth.logoutFacebook();
   }

   function getFacebookUserApi() {
      return Auth.getFacebookApi();
   }

   function getLoginUserStatus() {
      return Auth.getLoginStatus();
   }
})

おそらく、関数式（最初の4つの関数）から直接 Auth サービスを返さなかったのではないかと思われます。 この理由は、おそらく Auth 関数が返された後、いくつかの動作を追加する必要があるためです。 データベースにデータを送信したり、ログイン後にルートを変更したりできます。 これは、コールバックの代わりにJavaScript * then（）*メソッドを使用してすべての非同期操作を処理することで簡単に実行できます。

次に、ユーザーがアプリを操作できるようにする必要があります。 HTMLには、作成した4つの関数を呼び出すための4つのボタンが含まれます。

HTMLコード

<button class = "button" ng-click = "loginFacebook()">LOG IN</button>
<button class = "button" ng-click = "logoutFacebook()">LOG OUT</button>
<button class = "button" ng-click = "checkLoginStatus()">CHECK</button>
<button class = "button" ng-click = "facebookAPI()">API</button>

ユーザーが[ログイン]ボタンをタップすると、Facebook画面が表示されます。 ログインが成功すると、ユーザーはアプリにリダイレクトされます。

Ionic Cordova Facebook

イオン-Cordova InAppBrowser

Cordova InAppBrowserプラグインは、Webブラウザービュー内でアプリから外部リンクを開くために使用されます。

ブラウザを使用する

このプラグインを使い始めるのはとても簡単です。 必要なことは、コマンドプロンプトウィンドウを開いてCordovaプラグインをインストールすることだけです。

C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser

この手順により、 inAppBrowser の使用を開始できます。 これで、外部リンクにつながるボタンを作成し、プラグインをトリガーするための簡単な関数を追加できます。

HTMLコード

<button class = "button" ng-click = "openBrowser()">OPEN BROWSER</button>

コントローラコード

.controller('MyCtrl', function($scope, $cordovaInAppBrowser) {
   var options = {
      location: 'yes',
      clearcache: 'yes',
      toolbar: 'no'
   };

   $scope.openBrowser = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)

      .then(function(event) {
        //success
      })

      .catch(function(event) {
        //error
      });
   }
})

ユーザーがボタンをタップすると、InAppBrowserは提供されたURLを開きます。

Ionic Cordova InAppBrowser

このプラグインでは、他のいくつかの方法を使用できます。そのうちのいくつかを次の表に示します。

Cordova $ inAppBrowserメソッド

Method	Parameters	Type	Details
setDefaultOptions(parameter1)	options	object	Used to set global options for all InAppBrowsers.
open(parameter1, parameter2, parameter3)	URL, target, options	string, string, object	There are three targets available. _blank *will open new inAppBrowser instance. _system will open system browser and _self* will use current browser instance.
close	/	/	Used to close InAppBrowser.

Cordova InAppBrowserイベント

このプラグインは、 $ rootScope と組み合わせることができるイベントも提供します。

Example	Details
$rootScope.$on('$cordovaInAppBrowser:loadstart', function(e, event));	Called when inAppBrowser start loading the page.
$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event));	Called when inAppBrowser has finished loading the page.
$rootScope.$on('$cordovaInAppBrowser:loaderror', function(e, event));	Called when inAppBrowser has encountered error.
$rootScope.$on('$cordovaInAppBrowser:exit', function(e, event));	Called when inAppBrowser window is closed.

イオン-Cordova Native Audio

このプラグインは、Ionicアプリにネイティブオーディオサウンドを追加するために使用されます。

ネイティブオーディオの使用

このプラグインを使用できるようにするには、まずインストールする必要があります。 コマンドプロンプトウィンドウを開き、Cordovaプラグインを追加します。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

このプラグインの使用を開始する前に、オーディオファイルが必要です。 簡単にするために、 click .mp3 ファイルを *js フォルダー内に保存しますが、好きな場所に配置できます。

次のステップは、オーディオファイルをプリロードすることです。 利用可能な2つのオプションがあります-

• preloadSimple -一度再生される単純なサウンドに使用されます。
• preloadComplex -ループサウンドまたはバックグラウンドオーディオとして再生されるサウンド用です。

次のコードをコントローラーに追加して、オーディオファイルをプリロードします。 オーディオファイルをプリロードする前に、Ionicプラットフォームがロードされていることを確認する必要があります。

コントローラコード

$ionicPlatform.ready(function() {
   $cordovaNativeAudio
   .preloadSimple('click', 'js/click.mp3')

   .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.log(error);
   });

   $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
    .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

同じコントローラーで、オーディオを再生するためのコードを追加します。 $ timeout 関数は、5秒後にループオーディオを停止およびアンロードします。

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click');
};

$scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click');

   $timeout(function () {
      $cordovaNativeAudio.stop('click');
      $cordovaNativeAudio.unload('click');
   }, 5000);
}

最後に必要なことは、オーディオを再生およびループするためのボタンを作成することです。

HTMLコード

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

再生ボタンをタップすると、サウンドが1回聞こえ、ループボタンをタップすると、サウンドが5秒間ループして停止します。 このプラグインは、エミュレーターまたはモバイルデバイスでのみ機能します。

イオン-Cordova Geolocation

このプラグインは、位置情報プラグインをIonicアプリに追加するために使用されます。

ジオロケーションの使用

ジオロケーションプラグインを使用する簡単な方法があります。 このプラグインは、コマンドプロンプトウィンドウからインストールする必要があります。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-geolocation

次のコントローラーコードは2つの方法を使用しています。 1つ目は getCurrentPosition メソッドで、ユーザーのデバイスの現在の緯度と経度を表示します。 2つ目は watchCurrentPosition メソッドで、位置が変更されたときにデバイスの現在の位置を返します。

コントローラコード

.controller('MyCtrl', function($scope, $cordovaGeolocation) {
   var posOptions = {timeout: 10000, enableHighAccuracy: false};
   $cordovaGeolocation
   .getCurrentPosition(posOptions)

   .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
      console.log(lat + '   ' + long)
   }, function(err) {
      console.log(err)
   });

   var watchOptions = {timeout : 3000, enableHighAccuracy: false};
   var watch = $cordovaGeolocation.watchPosition(watchOptions);

   watch.then(
      null,

      function(err) {
         console.log(err)
      },
       function(position) {
         var lat  = position.coords.latitude
         var long = position.coords.longitude
         console.log(lat + '' + long)
      }
   );

   watch.clearWatch();
})

*posOptions* および *watchOptions* オブジェクトにも気づいたかもしれません。 *timeout* を使用して、ミリ秒単位で許可される最大時間を調整し、 *enableHighAccuracy* をfalseに設定しています。 最高の結果を得るために *true* に設定できますが、エラーが発生する場合があります。 古いポジションがどのように受け入れられるかを示すために使用できる *maximumAge* オプションもあります。 タイムアウトオプションと同じミリ秒を使用しています。

アプリを起動してコンソールを開くと、デバイスの緯度と経度が記録されます。 位置が変更されると、 lat と long の値が変更されます。

イオン-Cordova Media

このプラグインを使用すると、デバイスでオーディオファイルを録音および再生できます。

メディアを使用する

他のすべてのCordovaプラグインと同様に、最初に行う必要があるのは、コマンドプロンプトウィンドウからインストールすることです。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-media

これで、プラグインを使用する準備が整いました。 次のコードサンプルでは、​​ src はこのチュートリアルで使用するソースmp3ファイルです。 *js フォルダーに配置されますが、その前に /android_asset/www/ を追加する必要があるため、Androidデバイスで使用できます。

プラグインが使用される前にすべてが確実にロードされるように、完全な機能は* $ ionicPlatform.ready（）関数内にラップされます。 その後、 newMedia（src）メソッドを使用して *media オブジェクトを作成しています。 media オブジェクトは、再生、一時停止、停止、およびリリース機能の追加に使用されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) {
   $ionicPlatform.ready(function() {
      var src = "/android_asset/www/js/song.mp3";
      var media = $cordovaMedia.newMedia(src);

      $scope.playMedia = function() {
         media.play();
      };

      $scope.pauseMedia = function() {
         media.pause();
      };

      $scope.stopMedia = function() {
         media.stop();
      };

      $scope.$on('destroy', function() {
         media.release();
      });
   });
}

また、再生、一時停止、停止機能を呼び出すための3つのボタンを作成します。

<button class = "button" ng-click = "playMedia()">PLAY</button>

<button class = "button" ng-click = "pauseMedia()">PAUSE</button>

<button class = "button" ng-click = "stopMedia()">STOP</button>

このプラグインを機能させるには、エミュレーターまたはモバイルデバイスで実行する必要があります。 ユーザーが再生ボタンをタップすると、 song.mp3 が再生を開始します。

上記の例では、オプションパラメータとして src を使用していることがわかります。 newMedia メソッドに使用できるその他のオプションパラメータがあります。

オプションのパラメータ

次の表に、使用可能なすべてのオプションパラメータを示します。

Parameter	Type	Details
mediaSuccess	function	Called after current play/record or stop action has completed.
mediaError	function	Invoked when there is an error.
mediaStatus	function	Invoked to show status changes.

次の表に、使用可能なすべてのメソッドを示します。

利用可能な方法

次の表に、使用可能なすべてのメソッドを示します。

Method	Parameters	Details
newMedia(parameter1)	src	Returns media object that will be used for future methods. src is an URI of the audio content.
getCurrentPosition	/	Returns the current position within an audio file.
getDuration	/	Returns the duration of an audio file.
play	/	Used to start or resume playing.
pause	/	Used to pause playback.
stop	/	Used to stop playing.
release	/	Used to release audio resources.
seekTo(parameter1)	milliseconds	Used to set the playback position in milliseconds.
setVolume(parameter1)	volume	Used to change volume. Range is from 0 to 1
startRecord()	/	Used to start recording.
stopRecord	/	Used to stop recording.

イオン-Cordovaアイコンとスプラッシュスクリーン

すべてのモバイルアプリにはアイコンとスプラッシュスクリーンが必要です。 Ionicはそれを追加するための優れたソリューションを提供し、開発者の作業は最小限で済みます。 Ionicサーバーでは、トリミングとサイズ変更が自動化されています。

スプラッシュスクリーンとアイコンの追加

前の章では、Ionicアプリに異なるプラットフォームを追加する方法について説明しました。 プラットフォームを追加することで、Ionicはそのプラットフォーム用のCordovaスプラッシュスクリーンプラグインをインストールするため、後で何もインストールする必要はありません。 必要なのは、2つの画像を見つけることだけです。

画像は png 、 psd または ai ファイルである必要があります。 最小寸法は、アイコン画像の場合は192x192、スプラッシュスクリーン画像の場合は2208×2208でなければなりません。 この寸法はすべてのデバイスをカバーします。 この例では、両方に同じ画像を使用します。 画像はデフォルトのものではなく、 resources フォルダーに保存する必要があります。 作業が完了したら、コマンドプロンプトウィンドウで次のコマンドを実行するだけです。

C:\Users\Username\Desktop\MyApp>ionic resources

*resources/android* または *resources/ios* フォルダーをチェックすると、前に追加した画像がさまざまな画面サイズに合わせてサイズ変更およびトリミングされていることがわかります。 デバイスでアプリを実行すると、アプリが起動する前にスプラッシュ画面が表示され、デフォルトのIonicアイコンが変更されていることがわかります。

イオンコルドバスプラッシュスクリーン

Ionic Cordova Icon

注-AndroidとiOSで異なる画像を使用する場合は、 resources フォルダーの代わりに resources/android と resources/ios に追加できます。