イオンフレームワークは、最も広く議論されているフレームワークの1つです。 公式ウェブサイトによると、Ionicはハイブリッドモバイルアプリケーション、AngularJS、SASS、Apache Cordovaに基づくCSSおよびJSコンポーネントのセットを作成するためのSDKです。
執筆時点で、Ionicリポジトリには15,300個の星があり、製品がIonicであるDriftyへの投資はすでに370万ドルに達しています。
Ionicが開発者に提供する興味深いものを見てみましょう。
オニッククリ
実際、これは追加機能を提供するCordova CLIのラッパーです。
- テンプレートを選択して基本的なアプリケーションを作成する（たとえば、サイドメニューのあるアプリケーション、タブのあるアプリケーション、Googleマップ、空のアプリケーション）。
- エミュレーター、実デバイス、ブラウザーでのアセンブリと起動。
- ブラウザとデバイスでのライブリロード
- アイコン、スプラッシュ画面などの生成
Ionic CLIを使用する必要はまったくありませんが、アプリケーションの開発がはるかに簡単になります。 私たちの意見では、最も重要な機会：
$ ionic resources
このコマンドを使用すると 、ソースファイル（.psd、.png、.ai）からすべてのサイズのアイコン、ターゲットプラットフォームのスプラッシュスクリーンを生成できます 。 これを行うには、元のアイコンのサイズが少なくとも192×192pxで、スプラッシュスクリーンの元の画像が特別なPSDテンプレートに従って準備され、少なくとも2208×2208pxのサイズで十分です。
$ ionic serve --lab
iOSおよびAndroidプラットフォームのブラウザーでアプリケーションを同時に表示します
このオプションは、ライブリロードもサポートしています。
$ ionic upload
このコマンドを使用すると、アプリケーションをクラウドにアップロードして、 Ionicビューでさらにテストすることができます。 ここでは、さらに詳細に滞在する必要があります。
Ionic ViewはiOSおよびAndroid 用のモバイルアプリケーションであり、これを使用して、開発したアプリケーションを顧客、テスター、同僚と共有できます。 コマンド「$ ionic upload」は、コンピューター上のアプリケーションをサーバーと同期し、その後、電話で起動できます。
これは、デバイス上のIonic Viewの外観です 
現在、Ionic Viewがベータ版であることは注目に値します。 Androidで使用する過程で、奇妙なバグに遭遇することがよくありました-生命の兆候のない白いページで、その後アプリケーションがまったく起動しませんでした。 判明したように、Ionic Viewの現在のバージョンでは、 すべてのCordovaプラグインがサポートされているわけではありません 。
コマンドを使用する
`$ ionic share ` "" , email , .
Ionic Box
IonicBox - Vagrant Ionic. (Ubuntu 14.04) Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
:
$ vagrant init drifty/ionic-android $ vagrant up
`$ ionic share ` "" , email , .
Ionic Box
IonicBox - Vagrant Ionic. (Ubuntu 14.04) Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
:
$ vagrant init drifty/ionic-android $ vagrant up
`$ ionic share ` "" , email , .
Ionic Box
IonicBox - Vagrant Ionic. (Ubuntu 14.04) Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
:
$ vagrant init drifty/ionic-android $ vagrant up
`$ ionic share ` "" , email , .
Ionic Box
IonicBox - Vagrant Ionic. (Ubuntu 14.04) Node.js, Git, Java SDK 7, Apache Ant, Android SDK Cordova, Ionic.
:
$ vagrant init drifty/ionic-android $ vagrant up
この場合、構成済みのVagrantBoxがダウンロードされ、アプリケーションのコードは
/vagrant
沿った共有フォルダーから利用可能になります。
Ionic Boxを使用すると、Androidアプリケーションのみを開発できることに注意してください。 デフォルトでは、
$ ionic run android
を起動すると、USBで接続された実際のデバイスにアプリケーションがインストールされます。 ここでは、Genymotionを使用して仮想デバイスでアプリケーションを実行する方法を読むことができます。
それでも、コンピューターに開発ツールをセットアップすることをお勧めしますが、Ionic Boxはクイックスタートに適したオプションです。
ジェニモーション
Ionicエコシステムの一部ではありませんが、注意する価値があります。 Genymotionは、VirtualBoxに基づいて構築された非常に（！）高速のAndroidエミュレーターです。 彼は非常に速いので、他のものを使用することはもはやできません。 試してみてください。
Genymotion + Ionicの場合、アプリケーションの起動はわずかに変わります。
$ ionic emulate android
emulate
$ ionic emulate android
代わりに
$ ionic emulate android
$ ionic run android
必要があり
$ ionic run android
。 このエミュレータは、仮想デバイスではなく、実際のデバイスとして定義されています。
Android Studioをお持ちの場合は、ダイアログボックスで実行中の仮想マシンの1つを選択することで、そこから直接Genymotionでプロジェクトを簡単に実行できます。 たとえば、異なるバージョンのAndroidで4つの仮想マシンを実行し、それぞれでアプリケーションをすばやく開くことができます-非常に便利です。 さらに、Android Studio用のGenymotion プラグインにより、仮想マシン（エミュレーター）を管理できます。
マイナスの点-すべての仮想マシンが同等に高速に動作するわけではありません。 たとえば、Nexus 5（Android 5.0）は何らかの理由でゆっくりと動作し、たとえばGalaxy S3（Android 4.1）は超高速で動作します。
個人的な使用の場合、Genymotionは無料です。
オニッククリエーター
Ionic Creator-画像から推測できるように、これはアプリケーションインターフェイスのドラッグアンドドロップビルダーです。 最近、公開されました 。 ここで入力または登録できます 。
Creatorには、プロトタイピングを簡素化する基本的なページテンプレートが組み込まれています。 現在、次のテンプレート：
ページに追加できる要素は多数あります：ボタン、フォーム、セパレータ、HTML / Markdown挿入、画像など。 ページは互いにリンクすることができ、ボタンのクリックイベントで、アプリケーションの他のページへの遷移を切断できます。
アプリケーションをエクスポートすることが可能です。 オプションがあります-これ
- またはモーダルウィンドウから直接コピーできるHTML
- またはファイルを含むZIPアーカイブ
- Ionic CLIを介したインストールオプション
後者の場合、インストールは次のようになります。
$ ionic start [appName] creator:%your_unique_hash%
Creatorで作成したアプリケーションをIonic Viewで直接テストする機能が要求されます。 ただし、Androidバージョンではこのような可能性は見つかりませんでした。
マイナスの点-CreatorはFirefoxでうまく機能しません。ChromeでCreatorを使用する方が良いです。
テーマのジェネレーターは 、Ionicアプリケーションの基本要素がどのように見えるかを簡単に確認できるので、面白そうです。
イオンアイコン
Ioniconsは、Ionicに組み込まれているアイコンの巨大なセットです。 多くの場合、アイコンは補充され、キーワードで目的のアイコンをすばやく見つけるためのクイックフィルター検索が実装されます。
ng-cordova
ng-cordovaは、最も人気のあるCordovaおよびPhonegapプラグインのAngularJSラッパーである60を超えるプラグインのセットであり、バーコードのスキャン、ファイルのダウンロード、ソーシャルネットワークでの作業、ジオロケーション、ネットワークステータスの決定、バイブロと連携するためのAPIなどの多くの機能を提供しますなどなど。
イオンショーケース
Ionic Showcaseは、Ionicの専門家などによって作成されたアプリケーションのコレクションです。 アプリケーションを送信することは可能です。
Ionicブログでは、Ionic Showcaseの最も人気のあるアプリのレビューを頻繁に投稿しています。 実際、これは、ハイブリッドアプリケーションがそのニッチを占有し、急速に開発されており、場合によってはネイティブアプリケーションに絶対に劣らないというもう1つの確認です。
AngularJS 2 + Ionic 2
確かに、すべてのAngularJS開発者はAngularJS 2の登場を待っています、そして疑問が生じます-まだバージョン1.0を持っていないIonicはどうなりますか？
開発者が保証するように、Ionic 2での作業はすでに進行中であり、AngularJS 2のリリース後、Ionicは完全にサポートします。 詳細については、公式ブログのこの投稿をご覧ください。
一般に、IonicチームはAngularJS開発者と緊密に連携しており、AngularJS 2の意図は非常に勇気づけられます。 先週から、 Angular 2シリーズの投稿がブログに掲載され始めました。新しいフレームワークのさまざまな部分と機能に関する短いメモです。
イオン材料
Ionic Material-インターフェースを具体化するためのIonicフレームワーク上のアドオン。 一度見たほうがいい-クリック可能なすばらしいデモがあります。
怠け者の絵 
Ionic Materialは、Ionicフレームワークの標準スタイルおよびクラスと競合せず、開発者によると、Googleのガイドラインに厳密に従って作成されています。
興味のある機能
分割ビュー
分割ビューは、特定の画面幅に達したときに、閉じていないサイドメニューでページを表示する機能です。
この機能を追加するには、サイドメニュータグに
expose-aside-when
Whenディレクティブを記述するだけです。
<ion-side-menus> <!-- Center content --> <ion-side-menu-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu expose-aside-when="large"> </ion-side-menu> </ion-side-menus>
任意の幅を指定するのも簡単です：
<ion-side-menu expose-aside-when="(min-width:750px) and (max-width:1200px)"
横断歩道の統合
Crosswalkは、Androidの古いバージョン（4.0-4.3）でChrome WebViewを使用できるオープンソース製品ですが、Chrome WebViewは必要なバージョンを示します。
Crosswalkの存在により、HTML / CSSのレンダリング速度が最大10倍に向上し、Javascriptのパフォーマンスが向上すると同時に、アプリケーションのサイズが10〜15 MB増加します。
また、開発者はChrome DevToolsを使用してアプリケーションをデバッグする機会があります。
次のコマンドを使用して、IonicアプリケーションにCrosswalkを追加できます。
$ ionic browser add crosswalk $ ionic run android
特定のバージョンをインストールすることもできます。
$ ionic browser add crosswalk@11.40.277.7
プルしてリフレッシュ
Ionicを使用したスワイプでコンテンツを更新する機能を追加すると、7〜10分しかかかりません。 実際のアプリケーションの例を次に示します-タスクリストにプルツーリフレッシュ機能を追加する必要があります。 まず、既存のコードに
<ion-refresher>
タグを追加して、HTMLを変更する必要があります。
<ion-content class="has-header"> <ion-refresher pulling-text="Pull to refresh..." on-refresh="refresh()"></ion-refresher> <ion-list class="todos" show-delete="false" can-swipe="true"> ... ... </ion-list> </ion-content>
コードから、下にスワイプすると、現在のコントローラーのrefresh（）関数が呼び出されることを理解するのは簡単です。 書きましょう：
$scope.refresh = function() { Task.get().then(function (tasks) { $scope.tasks = tasks; }) .finally(function() { // $scope.$broadcast('scroll.refreshComplete'); }); };
すべて完了しました。 ここでコードを試してみることができます 。
最後に、Ionicで読んで見ることができるもの
Ionicで最も活発で興味深いブログの1つ：
- blog.nraboy.com Nic Raboyと彼のビデオブログ
- ionicinaction.com -Ionic In Actionブック