Web向けのモバイルSDK。

単一のコードベースから、モダンで高品質なクロスプラットフォームモバイルアプリを構築するためのオープンソースのモバイルUIツールキットです。 React。Vue。Angular。

開始する →

高性能
ハードウェアアクセラレーションによるトランジションとタッチ最適化されたジェスチャーにより、デフォルトで高速に動作するように構築されています。
クロスプラットフォーム
単一の共有コードベースから、すべての主要なアプリプラットフォーム向けに、魅力的で柔軟性の高いUIを作成できます。
React、Angular、またはVue
JavaScriptフレームワークの組み込みサポート、またはフレームワークなしでの使用も可能です。
ライト＆ダークモード
ユーザーはライトテーマとダークテーマを選択できるので、目に優しい方を選べます。

世界最高の企業で素晴らしいアプリ体験を実現

ハイブリッドアプリとネイティブアプリの違いを学ぶ。 すべての神話と誤解を解き明かします。

無料eBookを読む →

クロスプラットフォームモバイルUI

Webブラウザで直接ビルドとプレビューを行います。

すべてを見る →

// action-sheet-example.component.ts

import { Component } from '@angular/core';
import { ActionSheetController } from '@ionic/angular';

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.component.html',
  styleUrls: ['./action-sheet-example.component.css'],
})
export class ActionSheetExample {

  constructor(private actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        id: 'delete-button',
        data: {
          type: 'delete'
        },
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        data: 10,
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'caret-forward-circle',
        data: 'Data value',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();

    const { role, data } = await actionSheet.onDidDismiss();
    console.log('onDidDismiss resolved with role and data', role, data);
  }
}

<!-- action-sheet-example.component.html -->

<ion-button (click)="presentActionSheet()">Show Action Sheet</ion-button>

強力なCLI
アプリの作成、ビルド、テスト、デプロイには Ionic CLIを使用します。お気に入りのJSフレームワークのCLIを使用することもできます。
強化されたエディターツール
Ionic VS Code拡張機能は、ベストプラクティスに従い、エディター内から一般的なタスクを実行するのに役立ちます
デバイス上のホットリフレッシュ
デバイス上で直接開発し、ホットリフレッシュを使用して変更を即座に適用することで、プロセスを高速化します。

JSアグノスティック

好みのJavaScriptテクノロジーを使用します。

使用したいJSフレームワークについて想定していません。そのため、IonicはAngular、React、Vue、またはフレームワークなしでも、すべての最良のフロントエンドフレームワークとシームレスに統合されるように設計されています。

開始する

パフォーマンス重視

デフォルトで高速なアプリを構築します。

Ionicは、最新のモバイルデバイスですべて高速に動作するように構築されています。ハードウェアアクセラレーションによるトランジション、タッチ最適化されたジェスチャー、事前レンダリングなど、フットプリントが小さく、ベストプラクティスが組み込まれたアプリを構築します。

構築を開始 →

シームレスなネイティブ統合

必要な時にネイティブに接続します。

JavaScriptで完全なネイティブデバイス機能にアクセスできます。カメラ、マップ、ジオロケーション、Bluetoothなど、ネイティブデバイスプラグインのライブラリから選択できます。いつでも完全なネイティブSDKにアクセスできます—制限はありません。

一度記述すれば、どこでも実行できます。
Ionicアプリを Capacitor ブリッジとクロスプラットフォームプラグインAPIを使用して、iOSおよびAndroidアプリストアに直接デプロイします。
カスタムプラグイン開発
シンプルなプラグインAPI を使用して、iOSのSwift、AndroidのJava、WebのJavaScriptでカスタムネイティブエクスペリエンスを簡単に作成できます。
クラウドでのビルドとデプロイ
ネイティブビルドの生成、ライブアプリのアップデートのプッシュ、アプリストアへの公開、 Ionic Appflow.

を使用したプロセスの自動化

無限にカスタマイズ可能

デプロイされた場所でも違和感のないUI。

愛を感じてください

成長しているグローバルなコントリビューターコミュニティによって支えられています。

Sean Bannigan
@seanbannigan
IonicとCapacitorを使ってアプリを構築するのが大好きです。Webテクノロジーと少しのプラグインマジックで、驚くほど素晴らしいUIを構築できます。ユーザーは、これが「ネイティブ」アプリではないとは決して知りません。
Nicole Sullivan
@stubbornella
細部への配慮が @Ionicframework のコンポーネントに表れています。そして、フレームワークとの相互運用性へのコミットメントは💯です。
Abimael Barea
@abimaelbarea
クロスプラットフォームアプリを構築するための多くのオプションがあります。それでも、 @Ionicframework Webコンポーネント、CSS変数、マルチフレームワークサポート、そしてPortalを使用したネイティブコードとの簡単な統合というアプローチは、非常に印象的です。
Einfach Hans
@einfach_hans_
23歳ですが、すでに言えます。@Ionicframeworkは私の人生を変えました。若い年齢でIonicのエキスパート/シニアと自称できることを誇りに思います👍🏻
Marius Bolik
@MariusBolik
1ヶ月以内に暗号通貨アプリをリファクタリングしました。 @Ionicframework & @capacitorjs.
Pato
@devpato
今日から再び @Ionicframework を使い始めました。すごい！過去4年間でIonicは大きく変わりました。この素晴らしいツールについてもっと学びたいと思っています！
Angular
@angular
Angular + Ionicは、App StoreとGoogle Playのダウンロードの大きな割合を占めています
Danny Redfern
@redders166c
なぜもっと早く @Ionicframework そして @capacitorjs に飛び込まなかったのでしょうか？！ネイティブプラグインの使用の容易さは異常です。
FK - クラウドアーキテクト
@coderonfleek
ドキュメント全体を読まなければ、 @Ionicframework チームが行った作業を完全に理解することはできません。彼らが構築した驚くべきツールです
Maximilian
@maxedapps
Ionicは素晴らしいです！クロスプラットフォームアプリの構築は、常にIonic（とCapacitor）で素晴らしいものでしたが、VueはVueなので、もちろん非常にスムーズで簡単です。
Steve Sanders
@StevenDSanders
私のチームの開発者の1人が、新しい @Ionicframework アプリに1日もかからずに素晴らしいダークモードを追加しました。Ionicではどれほど生産性が高いかは信じられないほどです！ネイティブのiOSアプリにダークモードを追加するのに1日以上かかったことを付け加えておきます。
Glenn Nickens
@GlennNickens
大好きです @Ionicframework!
Alex Dobsom
@alexdobsom
@Ionicframeworkが、単一のコードソースからWeb、Android、iOSを @reactjsで構築するのにどれほど役立つのかを理解するのに50分かかりました（React NativeやReact for Webよりも簡単です）。このポッドキャストを聞いていただけです。ただWOW 😍

Veni Kunche
@venikunche
Ionicが大好きです！Diversify Techのアイデアを思いつく前は、Ionicを使ってアプリテンプレートを作っていました。
Simon Grimm
@schlimmson
試してみました @useappflow アプリ向けに、 @Ionicframework そしてこの素晴らしさを認めざるを得ません🔥クラウドビルド、自動化、App StoreとGoogle Playへの直接デプロイ—すべて基本的に午前中に設定できました😱
Ire Aderinokun
@ireaderinokun
皆さん、 @Ionicframework 信じられないくらいです。私は今、モバイル開発者になりました💅🏾
Adam Wathan
@adamwathan
今日の午後は、さまざまな @Ionicframework ウェブサイトをじっくり見ていました。デザインが本当に美しいからです😍
Sarah Drasner
@sarah_edo
ついにIonicを使ってアプリを構築しましたが、わあ—これはとても楽しいです。Vue（ReactとAngularも対応）で構築し、Web、iOS、Androidにデプロイできますか？アプリの壮大さに妄想を抱いています。
Parham
@_pazel
モバイルアプリが成功すると、クライアントはアクセスしやすくするためにWebバージョンを構築するよう依頼することがよくあります。 @Ionicframework そして @capacitorjs を使用することで、最小限の労力でWebアプリに変換できるため、クライアントと私たちの両方の時間と費用を節約できました。
vjeux
@Vjeux
Ionic Reactがすごく楽しみです！常にReact向けの「Ruby on Rails」のような環境を夢見ていました。すぐに生産性を高められるよう、すべての環境がセットアップされているようなものを。
Realm
@realm
@Ionicframework Reactウェブアプリケーションから始めて、#iOSと#Androidで実行しましょう。📲
#Ionicと@capacitorjsを使えば、Realm対応のIonicアプリをどこでも簡単に実行できます！🌏
Ben
@derbenoo
たった4日間で、2人の開発者（@mitschmidtにも感謝！）だけで、AndroidとiOSの両方で完全に機能するチャットアプリをどのように構築するのでしょうか？😱
そうです、あなたは推測しました @capacitorjs + @angular + @Ionicframework + @storybookjs
Matt Starr
@mb_starr
感謝を込めて @Ionicframework 99.9%の人々にとって健全な解決策の一部であることに感謝します。ありがとうございます！
Joeycrack.Net
@Joeycrack_Net
Ionic @Ionicframework そして @angular このフレームワークは、ウェブ/モバイル開発に最適です。AndroidとiOS向けに開発していたところ、突然PWAも作りたくなり、同じコードベースで5分もかからず作成できました。誰がそんなことをするでしょう？😂🤣😂🤣😂 このスタックは最高です！
Travis Ryan
@darkunderlord
Appflowの素晴らしさに本当に驚きました。 @Ionicframework 開発者として、これは画期的なものです。
Brandon Roberts 🥑
@brandontroberts
Ionic、Phaser、Capacitor、そしてNgRxを使ってゲームを開発？！🔥🔥🔥