Ionicの紹介

Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 Angular, React, and Vue といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。

Ionicのインストール や First App Tutorial を参考に、主な概念を学ぶことができます。

Installation Guide

あなたのシステムの設定方法とフレームワークのインストールガイド。

UI Components

Ionic Frameworkの美しくデザインされたUIコンポーネントにダイブしましょう。

Native Functionality

BluetoothやMap、HealthKitのようなNativeデバイスプラグインの統合方法。

Theming

Ionicアプリのビジュアルデザインをブランドに合わせて簡単にカスタマイズおよび変更する方法を学びましょう。

概要

Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 Angular 、 React 、 Vue などのライブラリやフレームワークに統合することが可能です。また、シンプルな script include を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics.

どこでもひとつのコードで

Ionicは、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 Adaptive Styling によって、Ionicアプリはすべてのデバイス上で適切な外観と操作感を提供します。

パフォーマンスにフォーカス

Ionicは、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。

クリーンでシンプル、機能的なデザイン

Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。

ネイティブおよびWebに最適化

IonicはネイティブアプリケーションのUIガイドラインをエミュレートし、ネイティブSDKを使用して、ネイティブアプリのUI標準とデバイス機能を、オープンWebの完全なパワーと柔軟性とともに実現します。IonicはCapacitor(またはCordova)を使ってネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。

ゴール

クロスプラットフォーム

ネイティブのiOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをProgressive Web Appとして、すべて1つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。

Web標準

Ionic Frameworkは、Custom ElementsやShadow DOMなどの最新のWeb APIを使用して、信頼性の高い Web標準テクノロジー : HTML、CSS、およびJavaScriptの上に構築されています。このため、Ionicコンポーネントは安定したAPIを備えており、単一のプラットフォーム・ベンダーの思い付きではありません。

美しいデザイン

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

シンプル

Ionic Frameworkはシンプルさを念頭に置いて構築されているので、Ionicアプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。

Frameworkの互換性

Ionicの過去のリリースはAngularと密結合されていましたが、フレームワークのバージョン4.xからはスタンドアロンのWeb Componentライブラリとして動作するように再設計され、Angularのような最新のJavaScriptフレームワークと併用できるようになりました。IonicはReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、Webコンポーネントを完全にサポートするにはshimが必要なフレームワークもあります。

JavaScript

Ionic Frameworkを Web Components に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、scriptタグだけでWebページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、IonicをWordPressのようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。

Angular

Angularは常にIonicの素晴らしさの中心にありました。コアコンポーネントはスタンドアロンのWeb Componentライブラリとして動作するように書かれていますが、 @ionic/angular パッケージはAngularエコシステムとの統合を簡単にします。 @ionic/angular はIonic 2/3に期待されるすべての機能を含んでおり、AngularルータのようなコアAngularライブラリと統合されています。

React

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

Vue

Ionicは現在、人気のVue3ライブラリを公式にサポートしています。 Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 @ionic/vue を使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用しているように感じられます。

Future Support

他のフレームワークのサポートは、将来のリリースで検討される予定です。

Ionic CLI

公式の Ionic CLI は、Ionicアプリを迅速に構築し、Ionic開発者に多くの役に立つコマンドを提供するツールです。CLIには、Ionicのインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 Appflow のメンバーの場合は、CLIを使用してクラウドの構築と展開を実行し、アカウントを管理できます。

Appflow

Ionicアプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは オープンソースフレームワーク とは分離した Appflow と呼んでいる製品アプリ用の商用サービスを提供しています。

Appflowは、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードからIonicアプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。

Appflowには Ionic Account が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。

エコシステム

Ionic Frameworkはコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業がIonicを使って、どこでも動くすばらしいアプリを作ってリリースしています。

コミュニティに参加する

Ionicの開発者は世界200か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:

• Forum: A great place for asking questions and sharing ideas.
• Twitter: Where we post updates and share content from the Ionic community.
• GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome!
• Content authoring: Write a technical blog or share your story with the Ionic community.

ライセンス

Ionic Frameworkは無料のオープンソースプロジェクトで、 MIT license ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MITライセンスは、jQueryやRuby on Railsなどの人気プロジェクトで使用されているのと同じライセンスです。

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