Ionic コアコンセプト

Ionicアプリ開発を初めて行う人にとっては、プロジェクトの背後にある中核となる哲学、概念、およびツールについて高度な理解を得ることが役立ちます。複雑なトピックに飛び込む前に、Ionic Frameworkの基本とその仕組みについて説明します。

UIコンポーネント

Ionic FrameworkはUIコンポーネントのライブラリです。UIコンポーネントは、アプリケーションの構成要素として機能する再利用可能な要素です。イオンコンポーネントはウェブ標準HTML、CSS、およびJavaScriptを使用します。コンポーネントはあらかじめ構築されていますが、高度にカスタマイズできるようにゼロから設計されているため、アプリは各コンポーネントを独自に作成でき、各アプリに独自のルックアンドフィールを持たせることができます。具体的には、Ionicコンポーネントを簡単にテーマ化して、アプリ全体の外観をグローバルに変更できます。外観のカスタマイズの詳細については、テーマ

プラットフォームの継続性

Platform ContinuityはIonic Frameworkの組み込み機能であり、アプリ開発者は複数のプラットフォームで同じコードベースを使用できます。すべてのIonicコンポーネントは、アプリが実行されているプラ​​ットフォームに外観を適合させます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自のiOSデザイン言語を使用します。同様に、AndroidデバイスはMaterial Designと呼ばれるGoogleのデザイン言語を使用します。

プラットフォーム間で微妙な設計変更を行うことにより、ユーザーは使い慣れたアプリエクスペリエンスを提供されます。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを取得し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからプログレッシブWebアプリ(PWA)として表示されるアプリの場合、Ionicはデフォルトでマテリアルデザインテーマを使用します。さらに、特定のシナリオで使用するプラットフォームの決定は完全に構成可能です。プラットフォームの継続性に関する詳細は、テーマ

従来のWebアプリは線形の履歴を使用します。つまり、ユーザーはページに進み、戻るボタンを押して戻ることができます。この例としては、ユーザーがブラウザーの線形履歴スタックを前後に移動するウィキペディア周辺をクリックすることがあります。

対照的に、モバイルアプリは多くの場合、並列の「非線形」ナビゲーションを利用します。たとえば、タブ付きインターフェイスには、タブごとに個別のナビゲーションスタックを設定できます。これにより、ユーザーがタブ間を移動したり切り替えたりするときに場所を失うことがなくなります。

Ionicアプリはこのモバイルナビゲーションアプローチを採用しており、Web開発者が使い慣れたブラウザースタイルのナビゲーション概念を維持しながら、ネスト可能な並列ナビゲーション履歴をサポートしています。

Angularおよび@ionic/angularで構築されたアプリの場合、新しいIonic 4 Angularアプリごとにすぐに使用できるAngular Routerを使用することをお勧めします。Ionicの以前のバージョンには独自のカスタムルーターが付属していましたが、最高のツールと開発者のエクスペリエンスを提供するために、フレームワークの推奨ルーターの使用に移行しました。

ネイティブアクセス

Webテクノロジーで構築されたアプリ(Ionicアプリなど)のすばらしい機能は、デスクトップコンピューター、電話、タブレット、車、冷蔵庫など、ほぼすべてのプラットフォームで実行できることです!Ionicアプリの同じコードベースは、これらのプラットフォーム間で共有されるWeb標準と共通APIに基づいているため、多くのプラットフォームで動作します。

Ionicの最も一般的な使用例の1つは、App StorePlay Storeの両方からダウンロードできるアプリを構築することです。iOSとAndroidの両方のソフトウェア開発キット(SDK)は、「WebビューネイティブSDK に完全にアクセスしながら、Ionicアプリをレンダリングします。

CapacitorCordovaなどのプロジェクトは、IonicアプリがネイティブSDKにアクセスできるようにするためによく使用されます。つまり、開発者は一般的なWeb開発ツールを使用してアプリをすばやく構築でき、デバイスの加速度計、カメラ、GPSなどのネイティブ機能に引き続きアクセスできます。

テーマ

コアでは、Ionic FrameworkはCSSを使用して構築されているため、CSSプロパティ(変数)が提供する柔軟性を活用できます。これにより、Web標準に準拠しながら見栄えの良いアプリを非常に簡単に設計できます。開発者がデフォルトを使用できるように色のセットを提供しますが、それらをオーバーライドして、ブランド、会社、または希望のカラーパレットに一致するデザインを作成することをお勧めします。アプリケーションの背景色からテキストの色まで、すべてが完全にカスタマイズ可能です。アプリのテーマの詳細については、テーマ

Ionic Frameworkとは何ですか?

Ionic Frameworkは、Webテクノロジー(HTML、CSS、およびJavaScript)を使用して、高性能で高品質のモバイルおよびデスクトップアプリを構築するためのオープンソースUIツールキットです。

Ionic Frameworkは、フロントエンドのユーザーエクスペリエンス、またはアプリのUIの操作(コントロール、操作、ジェスチャー、アニメーション)に重点を置いています。学習は簡単で、Angularなどの他のライブラリやフレームワークとうまく統合できます。または、単純なスクリプトインクルードを使用して、フロントエンドフレームワークなしでスタンドアロンで使用できます。

現在、Ionic FrameworkはAngularおよびReactと 公式に統合されて おり、Vueのサポート は開発中です。飛び込む前にIonic Frameworkについて詳しく知りたい場合は、基本を説明するビデオを 作成しました。

目標

クロスプラットフォーム

ネイティブiOS、Android、デスクトップ、プログレッシブWebアプリとしてのWebなど、複数のプラットフォームで動作するアプリをビルドしてデプロイします-すべて1つのコードベースで。一度書くだけで、どこでも実行できます。

Web標準ベース

Ionic Frameworkは信頼性の高い上に構築されており、 標準化されたWebテクノロジー:HTML、CSS、およびJavaScript。カスタム要素やシャドウDOMなどの最新のWeb APIを使用します。このため、Ionicコンポーネントには安定したAPIがあり、単一のプラットフォームベンダーの気まぐれではありません。

美しいデザイン

クリーンでシンプル、機能的。Ionic Frameworkは、すべてのプラットフォームですぐに動作して表示できるように設計されています。事前に設計されたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、豪華な(まだ拡張可能な)基本テーマから始めます。

シンプルさ

Ionic Frameworkは、シンプルさを念頭に置いて構築されているため、Ionicアプリの作成は楽しく、学びやすく、Web開発スキルのある人なら誰でもアクセスできます。

ライセンス

Ionic Frameworkは無料のオープンソースプロジェクトであり、許可されているMITライセンスの下でリリースされています。これは、個人または商業プロジェクトで無料で使用できることを意味します。MITは、jQueryやRuby on Railsなどの一般的なプロジェクトで使用されているライセンスと同じです。

このドキュメントコンテンツ(ionic-docsリポジトリにあります)は、Apache 2ライセンスの下でライセンスされています。

イオンCLI

公式 イオンCLI、またはコマンドラインインターフェイスは、Ionicアプリの足場をすばやく構築し、Ionic開発者に役立つコマンドを多数提供するツールです。Ionicのインストールと更新に加えて、CLIには組み込みの開発サーバー、ビルドおよびデバッグツールなどが付属しています。あなたがいる場合にはイオン性Appflowのメンバー、CLIを構築し、展開雲を行い、アカウントを管理するために使用することができます。

フレームワークの互換性

Ionicの過去のリリースはAngularと緊密に結合されていましたが、フレームワークのV4は、Angularなどの最新のJavaScriptフレームワークの統合により、スタンドアロンWebコンポーネントライブラリとして機能するように再設計されました。Ionicは、ReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、一部のフレームワークではWebコンポーネントを完全にサポートするためにshimが必要です。

JavaScript

Ionic 4の主な目標の1つは、コンポーネントをホストするための単一のフレームワークに関する厳しい要件を削除することでした。これは、Webページ内のスクリプトタグだけでコアコンポーネントがスタンドアロンで動作できることを意味します。フレームワークでの作業は、大規模なチームや大規模なアプリには適していますが、WordPressのようなコンテキストでも、Ionicを単一ページのスタンドアロンライブラリとして使用できるようになりました。

角度

角度は常にIonicの素晴らしさの中心にあります。コアコンポーネントはスタンドアロンWebコンポーネントライブラリとして機能するように記述されてい@ionic/angularますが、このパッケージにより、Angularエコシステムとの統合が簡単になります。@ionic/angularAngular開発者がIonic 2/3から来ることを期待するすべての機能を含み、AngularルーターなどのコアAngularライブラリと統合します。

反応する

Ionicは現在、人気のあるReactライブラリを公式にサポートしています。Ionic Reactを使用すると、React開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップをターゲットとするアプリを構築できます。では@ionic/react、あなたはすべてのコアイオンのコンポーネントを使用しますが、ネイティブを使用したような感じがコンポーネントに反応する方法ですることができます。

今後のサポート

他のフレームワークのサポートは、将来のリリースで予定されています。現在、Vueの公式バインディングが開発されていますが、これらのフレームワークでは一部のコンポーネントがそのまま使用できます。

Ionic Framework V4 +

Ionic Framework V4は、パフォーマンス、互換性、および全体的な拡張性に重点を置いた、プロジェクトの基盤となるテクノロジと機能の大きな進歩です。V4は@ionic/angularパッケージを通じてAngularと密接に統合されていますが、フレームワークに依存しないため、他のJavaScriptフレームワーク(Vue、React、Preactなど)で動作するか、フレームワークをまったく使用しません。

V4では、Web標準に移行することで、Ionicのコアが、フレームワーク固有のモデルではなく、最新のブラウザーでサポートされている標準コンポーネントモデルに依存できるようになりました。これにより、ロード時間が短縮され、パフォーマンスが向上し、全体的なコードが少なくなります。

イオンAppflow

ライフサイクル全体でIonicアプリを管理できるように、オープンソースフレームワークとは別のIonic Appflowと呼ばれる本番アプリ用の商用アプリプラットフォームも提供しています

Ionic Appflowは、開発者とチームがネイティブアプリビルドをコンパイルし、集中型ダッシュボードからIonicアプリにライブコード更新を展開するのに役立ちます。オプションの有料アップグレードは、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスおよび統合へのアクセスなどのより高度な機能に利用できます。

AppflowにはIonicアカウントが必要で、その機能のいくつかを試してみたい人には無料の「スターター」プランが付属しています。

生態系

Ionic Frameworkは、コアチームによってフルタイムで積極的に開発および維持され、そのエコシステムは、その成長と採用を促進する開発者と貢献者の国際コミュニティによって導かれます。小規模および大規模の開発者および企業は、Ionicを使用して、あらゆる場所で実行される驚くべきアプリを構築および出荷しています。

コミュニティに参加する

世界中の200か国以上に数百万人のIonic開発者がいます。参加する方法は次のとおりです。

  • フォーラム:質問をしたり、アイデアを共有したりするのに最適な場所です。
  • Slack:開発者がリアルタイムで会ってチャットできる活気のある場所。
  • Twitter:更新を投稿し、Ionicコミュニティからのコンテンツを共有します。
  • GitHub:バグの報告や新機能のリクエストについては、ここで問題を作成してください。PRを歓迎します!
  • コンテンツのオーサリング:技術的なブログを作成するか、ストーリーをIonicコミュニティと共有します。