Cordovaフレームワーク：IonicとFramework7

最近、Web開発者が世界を支配しています。 JavaScriptは、プログラミングできるあらゆる場所で使用されます。 これらの分野の中で、モバイルアプリの開発は最初の分岐方法の1つでした。約10年前、PhoneGapはiOSとAndroid用のHTMLおよびJavaScriptアプリのインストールを許可していました。

それ以来、テクノロジーには浮き沈みがありました。開発が容易であるにもかかわらず、これらのアプリは明らかにネイティブアプリとはかなり異なっていました。 バニラHTMLとブラウザベースのJavaScriptはブラウザを対象としており、この新しい分野に完璧に移行する方法はありませんでした。

今日でも主な問題は次のとおりです。

• ネイティブデザインとアニメーションを順守することの難しさ
• 複雑な画面遷移効果
• タッチイベントの処理
• ビッグリストでのパフォーマンス
• 固定要素の配置
• さまざまな画面サイズに適応
• ネイティブコントロール要素の場所（iOSステータスバーなど）
• さまざまなモバイルブラウザへの適応

Cordovaアプリにフレームワークを使用する理由

上記の問題があるアプリのために、Cordovaテクノロジーはしばしば過小評価されています。 フレームワークは、それらを相殺し、デザインとパフォーマンスの両方でHTMLアプリをネイティブアプリにできるだけ近づけることを目的としています。

ハイブリッドアプリの例をいくつか見てみましょう。 これらは、Onsen UI以外に、現在最も成功している2つのフレームワークで作成されています。これらのフレームワークは、現代世界でのWeb開発者の拡大を促進するように設定されています。Framework7とIonicです。

Ionicフレームワークについて

Ionicは2012年にDriftyCo.によって開発され、Angularをベースにしています。 それ以来、それは活発な開発を続けており、多大な投資と強力な開発者コミュニティを受け取っています。 公式ウェブサイトは、それに基づいて何百万ものアプリが開発されたと主張しています。

この記事を書いている時点で、最新バージョンはAngular5に基づくIonic3です。Angularからの柔軟性と独立性を目的としたIonic4は、初期のベータ版です。

UIエンジン、すばらしいコンポーネントライブラリ、およびネイティブデバイス機能にアクセスするためのインターフェイスとは別に、Ionicは複数の追加機能、サービス、およびユーティリティを提供します。

IonicCLI

Ionicのコマンドラインインターフェイスは、インタラクティブなプロジェクトの初期化（つまり、ウィザード）、ページとコンポーネントの生成、および外出先でアプリをビルドしてライブリロードできる開発サーバーの実行に使用されます。 また、Ionicクラウドサービスとの統合も提供します。

ラボとDevApp

Labは、Ionic開発者のブラウザのさまざまなプラットフォームでアプリケーションの作業を模倣できる非常に便利なミニサービスです。 DevAppは、アプリを実際のデバイスにすばやくデプロイするのに役立ちます。

パッケージ化、展開、および監視

Ionicには、テスターとユーザー向けのアプリケーションの構築、デバッグ、テスト、および更新を簡素化および高速化するWebサービスのバンドルが付属しています。

ただし、Ionicの計画は頻繁に変更されます。 Auth、Push、Analytics、Viewなどの既存のサービスの一部が閉鎖され、サブスクライバーからの抗議が発生しました。

クリエイター

これは、機能インターフェイスを開発するためのIonicのドラッグアンドドロップグラフィックエディタです。

Framework7について

このフレームワークは、ロシアのスタジオiDangeroによって2014年に開発されました。 最終的に、1人の開発者がプロ​​ジェクトに取り組んでおり、GitHubリポジトリへのマイナーな貢献者は含まれていません。

もともと、Framework7は、最近リリースされたiOS 7のスタイルのUIコンポーネントのセットで構成されていました。これから、その名前が付けられました。 その後、Androidテーマが追加され、両方のテーマが最新のiOSとマテリアルデザイン用に更新されました。

最近、プロジェクトの開発は加速し、一連のコンポーネントからモバイルアプリケーション用の本格的なフレームワークに拡大し、人気のあるテクノロジーとツールを統合しました。

Framework7のサポートとVue.jsを使用した例は、v1から存在しており、v3もReactをサポートしています。 これにより、プロジェクトは、AngularとTypeScriptのみを提供するより人気のあるIonicと真剣に競争することができます。

インストールと最初の起動

イオン

Ionicの使用を開始するには、NPMを使用してインストールします。

 npm install -g ionic

次に、将来のアプリケーション用のテンプレートを選択します。 公式のIonicWebサイトには複数のテンプレートが用意されています。または、空のテンプレートを選択して、 ionic start myApp blankを使用してアプリケーションをゼロから構築することもできます。

シンプルなデザインを選びましょう。 次のコマンドを実行します。

 ionic start Todo tabs

インストーラーが「新しいアプリをCordovaと統合して、ネイティブiOSとAndroidをターゲットにしますか？」と尋ねたら、 「はい」と答えます。 これにより、アプリケーションが自動的にCordovaと統合され、モバイルプラットフォームでの展開に備えます。

次のステップでは、インストーラーがIonicProSDKへの接続を提案します。 例を単純にするために、今のところ「いいえ」と答えてください。

追加の@ionic/labパッケージをインストールして、便利なデバッグUI（iOS、Android、およびWindowsデバイスのブラウザー内模倣）を取得します。

 cd Todo npm i --save-dev @ionic/lab

これで、アプリケーションをデバッグモードで起動できます。 これにより、Webブラウザでアプリケーションをライブで開発およびデバッグできます。

 ionic lab

その結果、いくつかの便利なアドレスを取得できます。

Ionic Labデバッグサービスはポート8200で起動されます。アプリケーション自体はポート8100で実行され、IonicLabからのOpenfullscreenリンクがそこにつながります。 IonicLabが実行されているブラウザウィンドウが自動的に開きます。

さらに、Ionicはローカルネットワークでアプリケーションアドレスを提供します。 これは、デバイスがローカルネットワークにある限り（たとえば、Wi-Fi経由で）、モバイルデバイスブラウザでアプリケーションを開くことができるため、非常に便利です。 さらに、[ホーム画面に追加]ボタンを使用して、アプリケーションを全画面モードで再度開くことができます。 これは、デバイスでアプリケーションをテストする最も簡単な方法です。

もう1つの方法は、Ionic DevAppアプリケーションです。これは、モバイルデバイスにインストールでき、ローカルネットワークを介してアプリケーションへのアクセスを提供します。 ネイティブデバイス機能にアクセスしてログを表示するためのプラグインサポート（Ionic Native）を提供します。

Framework7

F7の開発ツールはIonicの開発ツールほど高度ではなく、自動初期化CLIは文書化されていません。 ただし、公式Webサイトには、開発を開始するのに役立つテンプレートプロジェクトを含むいくつかのGitHubリポジトリが用意されています。

Ionicのタブテンプレートと同様に、F7はタブ付きビューを提供しますが、Framework7をReactと統合するより機能的なテンプレートを使用します。 Reactのサポートはv3で追加されました。 そのために、テンプレートリポジトリのクローンを作成します。

 git clone https://github.com/framework7io/framework7-template-react.git Todo

プロジェクトフォルダに切り替え、依存関係を取得して、プロセスを開始します。

 cd Todo npm install npm start

実行結果はIonicに似ています。実際のデバイスから即座にアクセスするためのローカルリンクとネットワーク内のリンクを取得します。

これで、ブラウザでhttp://localhost:3000/を開くことができます。 Framework7には組み込みのデバイスエミュレーターが含まれていないため、ChromeDevToolsのデバイスモードを使用して同様の結果を取得しましょう。

ご覧のとおり、Framework7は、iOSとマテリアルデザインの2つの標準テーマを備えているという点でIonicに似ています。 テーマはプラットフォームに基づいて選択されます。

残念ながら、公式のReactテンプレートでVue.jsをサポートする同様のテンプレートとは異なり、Webpackはまだ実装されていないため、ホットモジュール置換を使用してページをリロードせずにアプリケーションをすばやく更新することはできません。 それでも、ソースコードを変更するたびにページをリロードするデフォルトのライブリロード機能を使用できます。

コルドバのセットアップ

Cordovaを使用してデバイスとエミュレーターにアプリケーションをインストールするには、iOSとAndroid、およびCordovaCLI用の開発ツールをダウンロードしてセットアップする必要があります。 これについて詳しくは、前回の記事と、Cordovaの公式ウェブサイトのiOSプラットフォームガイドとAndroidプラットフォームガイドのセクションをご覧ください。

イオン

経験によれば、Ionicの問題の大部分をうまく解決するには、実際のデバイスで時折テストを行うブラウザベースのデバッグで十分です。

iOSとAndroidの統合を受け入れ、Ionicがconfig.xmlファイルの必要な設定とresourcesフォルダーのリソースを準備しているにもかかわらず、Cordovaを使用して両方のプラットフォームをアプリケーションに接続する必要があります。

 cordova platform add ios cordova platform add android

これで、Cordovaアプリを「実際の」エミュレーターで起動し、モバイルデバイスにインストールして、AppStoreやGooglePlayに送信することもできます。

次のコマンドは、アプリケーションがUSBで接続されている場合、iOSデバイスにアプリケーションをインストールします。 それ以外の場合、アプリはiOSシミュレーターにインストールされます。

 cordova run ios

ほとんどの場合、Xcodeコマンドラインツールは、開発者証明書を設定する必要があることを通知します。 Xcodeでプロジェクトを開き、必要なアクションを実行する必要があります。 これは1回だけ実行する必要があり、その後、CordovaCLIを使用してアプリケーションを実行できるようになります。

iOSシミュレータが自動的に起動しない場合があります。 この場合、Spotlightなどを使用して手動で開始します。

Androidエミュレーターも同様の方法で起動できます。

 cordova run android 

cordova runコマンドは、すでにコンパイルされているアプリケーションを起動してインストールすることに注意してください。このアプリケーションは、ionicserve / ionic serve ionic labサーバーを使用しないため、LiveReloadは機能しません。 アプリケーションをライブで開発およびデバッグするには、ローカルネットワークでブラウザを使用するか、IonicDevAppアプリケーションをインストールします。

経験によれば、Ionicの問題の大部分をうまく解決するには、実際のデバイスで時折テストを行うブラウザベースのデバッグで十分です。

Framework7

以前に選択した「React」Framework7テンプレートは、Cordovaのセットアップ自動化を提供しないため、プラットフォームを手動で追加する必要があります。 プロジェクトフォルダーのcordovaサブフォルダーにCordovaプロジェクトを作成します。

 cordova create cordova/ com.example.todo Todo cd cordova/ cordova platform add ios cordova platform add android cd ../

テンプレートはCreateReactAppに基づいているため、コンパイルされたプロジェクトをCordova環境で実行するには、 "homepage": "." ./package.jsonファイルに設定します。 このファイルは、プロジェクトのルートレベルにあります。

Framework7プロジェクトをコンパイルし、結果をCordovaプロジェクトにコピーします。

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/

これで、デバイスまたはエミュレーターでアプリケーションを起動できます。

 cd cordova/ cordova run ios 

これで完了です。 Framework7がIonicの開発標準と初期設定の利便性に追いつくことを期待しましょう。

タスクリストの作成

イオン

いよいよアプリケーションの作成を始めましょう！ これはToDoアプリケーションであるため、メインページ（ src/pages/home/home.htmlファイル）には、「完了をマーク」および「新規追加」機能を備えたタスクのリストが含まれます。

Ionicは、リスト用のコンポーネント<ion-list>および<ion-item>を提供しています。 まず、 <ion-content>要素からpaddingプロパティを削除して、リストを画面全体に作成します。 リストで、 <ion-label>要素を使用してテキストを配置し、 <ion-toggle>要素を追加して完了したタスクをマークします。

 <ion-content> <ion-list> <ion-item> <ion-label>Hello</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Toptal</ion-label> <ion-toggle></ion-toggle> </ion-item> <ion-item> <ion-label>Blog</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list> </ion-content>

IonicLabサービスを実行した状態でブラウザタブに戻ります。 アプリケーションは自動的に更新されました：

すごい！ 次に、タスクデータをJSオブジェクトに移動し、Angularを使用してそのHTMLプレゼンテーションを設定します。 src/pages/home/home.tsファイルに移動し、 HomePageクラスインスタンスのtasksプロパティを作成します。

 export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor() { } }

これで、HTMLコードでtasks配列を参照できます。 *ngFor Angular構造を使用して、配列要素ごとにリスト要素を繰り返し作成します。 コードは小さくなります：

 <ion-list> <ion-item *ngFor="let task of tasks"> <ion-label>{{task.name}}</ion-label> <ion-toggle></ion-toggle> </ion-item> </ion-list>

残っているのは、ページヘッダーに新しいタスクを作成するためのボタンを追加することだけです。 これを行うには、 <ion-navbar> 、 <ion-buttons> 、 <button> 、および<ion-icon>コンポーネントを使用します。

 <ion-header> <ion-navbar> <ion-title>To Do List</ion-title> <ion-buttons end> <button ion-button icon-only (click)="addTask()"> <ion-icon name="add-circle"></ion-icon> </button> </ion-buttons> </ion-navbar> </ion-header>

(click)="addTask()" Angular構造に注意してください。 ご想像のとおり、ボタンにタップハンドラーを追加し、コンポーネントのaddTask()メソッドを呼び出します。 このメソッドを実装して、ボタンがタップされたときにタスク名ダイアログウィンドウを開きます。

このためには、 AlertControllerコンポーネントが必要です。 このコンポーネントを使用するには、そのタイプをインポートします。

 import { AlertController } from 'ionic-angular';

そして、ページのコンストラクターパラメーターリストでそれを指定します。

 constructor(public alertCtrl: AlertController) { }

これで、 addTask()メソッドで呼び出すことができます。 コントローラの後に設定してください。 次の呼び出しでダイアログウィンドウを作成して表示できます。

 this.alertCtrl .create(/* options */) .present();

メッセージヘッダー、フィールドの説明、およびoptionsオブジェクトの2つのボタンを指定します。 「OK」ボタンは、 tasks配列に新しいタスクを追加します。

 handler: (inputs) => { this.tasks.push({ name: inputs.name }); }

要素を配列this.tasksに追加すると、コンポーネントがリアクティブに再構築され、新しいタスクがリストに表示されます。

フルページコードは次のようになります。

 import { Component } from '@angular/core'; import { AlertController } from 'ionic-angular'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { tasks = [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }]; constructor(public alertCtrl: AlertController) { } addTask() { this.alertCtrl .create({ title: 'Add Task', inputs: [ { name: 'name', placeholder: 'Task' } ], buttons: [ { text: 'Cancel', role: 'cancel' }, { text: 'Add', handler: ({ name }) => { this.tasks.push({ name }); } } ] }) .present(); } } 

デバイスにアプリケーションを再インストールします。

 cordova run ios

それでおしまい！ それほど難しくはありませんでしたか？ それでは、Framework7でも同じことを試してみましょう。

Framework7

Framework7テンプレートは、すべてのコンポーネント機能を表示するように作成されているため、 src/components/App.jsx App.jsxファイルとsrc/routes.jsファイルにsrc/components/pages/HomePage.jsxページのみを残して、そのコンテンツをクリーンアップする必要があります。余分なコードコメントを削除します。

次に、タスクリストを作成します。 Framework7は、このための<Listsimple <List simple-list>および<ListItem>コンポーネントを提供します。 タスク完了スイッチを配置するには、 <Toggle slot="after"/>コンポーネントを追加します。 これらすべてのコンポーネントをframework7-reactモジュールからインポートすることを忘れないでください。 これで、ページコードは次のようになります。

 import React from 'react'; import { Page, Navbar, NavTitle, List, ListItem, Toggle } from 'framework7-react'; export default () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> </Navbar> <List simple-list> <ListItem title="Hello"> <Toggle slot="after"/> </ListItem> <ListItem title="Toptal"> <Toggle slot="after"/> </ListItem> <ListItem title="Blog"> <Toggle slot="after"/> </ListItem> </List> </Page> );

そして、アプリケーション自体は次のようになります。

かなり良いスタートです。 静的データをHTMLコードからもう一度移動してみましょう。 このために、私たちが持っていたステートレスコンポーネントの代わりにスマートコンポーネントを使用してください。 ReactからComponent抽象クラスをインポートします。

 import React, { Component } from 'react';

そして、タスク配列をstate変数インスタンスに書き込みます。

 export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; /* ... */ }

実際のアプリケーションは、たとえばReduxやMobXなど、より抽象的なデータフローを使用する可能性がありますが、小さな例では、内部コンポーネントの状態を維持します。

これで、JSX構文を使用して、配列内の各タスクのリスト要素を繰り返し作成できます。

 {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))}

あとは、ボタン付きのヘッダーを追加して、新しいタスクを再度作成するだけです。 <Navbar>要素はすでに存在するため、< <Link iconOnly>を<NavRight>要素に追加します。

 <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar>

Reactでは、 onClickプロパティを使用し、それにコールバックポインターを設定することで、タップハンドラーを追加します。 タスク名ダイアログを表示するハンドラーを実装します。

Framework7の各要素は、 this.$f7プロパティを介してアプリケーションインスタンスにアクセスできます。 この方法でdialog.prompt()メソッドを使用できます。 ダイアログを閉じる前に、ReactコンポーネントのsetState()メソッドを呼び出し、新しい要素を含む前の配列のコピーを渡します。 これにより、リストが事後的に更新されます。

 addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); };

完全なコンポーネントコードは次のとおりです。

 import React, { Component } from 'react'; import { Page, Navbar, NavTitle, NavRight, Link, List, ListItem, Toggle } from 'framework7-react'; export default class HomePage extends Component { state = { tasks: [{ name: 'Hello' }, { name: 'Toptal' }, { name: 'Blog' }] }; addTask = () => { this.$f7.dialog.prompt('Task Name:', 'Add Task', (name) => { this.setState({ tasks: [ ...this.state.tasks, { name } ] }); }); }; render = () => ( <Page> <Navbar> <NavTitle>To Do List</NavTitle> <NavRight> <Link iconOnly iconF7="add_round_fill" onClick={this.addTask}/> </NavRight> </Navbar> <List simple-list> {this.state.tasks.map((task, i) => ( <ListItem title={task.name} key={i}> <Toggle slot="after"/> </ListItem> ))} </List> </Page> ); }

結果を確認します。

残っているのは、デバイスを再構築してデプロイすることだけです。

 npm run build rm -rf cordova/www/* cp -r build/* cordova/www/ cd cordova/ cordova run ios

終わり！

これら両方のプロジェクトの最終的なコードは、GitHubで入手できます。

• ionic-todo-app
• framework7-react-todo-app

結果

これで、各Cordovaフレームワークの完全なチュートリアルを見てきました。 Framework7はIonicに対してどのようにスタックしますか？

初期設定

IonicはCLIのおかげでインストールがはるかに簡単ですが、F7はテンプレートの選択とセットアップ、またはゼロからの段階的なインストールに多くの時間を必要とします。

コンポーネントの多様性

どちらのフレームワークにも、iOSとマテリアルデザインの2つのテーマで見事に作成された標準コンポーネントのフルセットがあります。 Ionicはさらに、これらのコンポーネントをWindowsテーマと巨大なユーザーテーママーケットプレイスで提供します。

ネイティブのデザインとアニメーションを完全に模倣することに加えて、パフォーマンスの最適化に多くの注意が払われ、素晴らしい結果が得られます。多くの場合、どちらのフレームワークのアプリケーションもネイティブのアプリケーションと区別することはほとんど不可能です。

Framework7は、 Smart Select 、オートコンプリート、カレンダー、連絡先リスト、ログイン画面、メッセージ、フォトブラウザなどのより複雑で便利なコンポーネントの追加リストを提供します。 一方、Ionicは、ユーザーが作成したコンポーネントの膨大な選択肢を提供します。

生態系とコミュニティ

Ionicは、その長寿命、強力な財政的支援、および活発なコミュニティのおかげで、明らかにこれらのパラメータで勝ちます。 Ionicインフラストラクチャは常に進化しています。サポートサービスとクラウドソリューションは新しいものに取って代わられ、プラグインの数は増え続けています。

Framework7はこれまで以上に優れていますが、コミュニティのサポートが非常に不足しています。

サードパーティの依存関係

Framework7は、サードパーティのソリューションに関してより柔軟性があります。 その最大の強みは、おそらくプロジェクトでVueとReactのどちらを使用するか、そしてWebpackとBrowserifyのどちらを使用するかを選択できることです。 IonicはAngularに基づいており、その知識が必要です（したがって、TypeScriptも必要です）。

ただし、最近、Ionic開発者は新しいIonic 4ベータ版を発表し、完全にUIフレームワークに依存しないと主張しました。必要がなければ、Angularの依存関係はなくなりました。

Cordovaフレームワーク：クロスプラットフォームモバイルアプリを開発するための強力な方法

Cordovaを使用するかどうかは、特定のプロジェクトによって異なります。 実際、ハイブリッドモバイルアプリ開発のスピードと複数のプラットフォームのサポートが主な利点です。 ただし、これは常にトレードオフであり、ネイティブのアプローチでは存在しないいくつかの欠陥に直面する場合があります。 これらの素晴らしいフレームワークとそのコミュニティは、これらの欠陥を減らし、私たちの生活を楽にするために素晴らしい仕事をしています。 だから、彼らに試してみませんか？