See how Capacitor fits into the entire Ionic Ecosystem ->
Capacitor is part of the Ionic Ecosystem ->
Blog
Build Native React Apps Without React Native ->
Native React Web Apps ->

Webアプリをクロスプラットフォームに展開。

Capacitorはどんなウェブアプリでもネイティブアプリにすることができるので iOS、Android、ウェブを横断して同じコードで一つのアプリを走らせることができます。

Supported platforms
Capacitor Architecture Diagram

はじめるのは簡単です。

01

Capacitorを既存アプリに導入します。

npm install @capacitor/cli @capacitor/core
npx cap init
02

ターゲットにするネイティブプラットフォームをインストールします。

AppleAndroid
npx cap add ios
npx cap add android
03

ネイティブとウェブの両方でAPIにアクセスして、機能を拡張します。

通知
位置情報
カメラ
カスタム
import { Plugins } from '@capacitor/core';
const { LocalNotifications } = Plugins;

LocalNotifications.schedule({
  notifications: [
    {
      title: "On sale",
      body: "Widgets are 10% off. Act fast!",
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 5) },
      sound: null,
      attachments: null,
      actionTypeId: "",
      extra: null
    }
  ]
});
Book Cover: Building cross-platform apps with Capacitor

See when and why to use Capacitor to build cross-platform apps. We wrote a guide to help you get started.

Read our Guide ->

Webアプリを接続する
ネイティブ機能

Universal apps

ユニバーサルアプリ

iOS、Android、およびProgressive Web Appsで同じように動作するWebベースのアプリケーションを構築します。

Native access

ネイティブアクセス

各プラットフォームで完全なネイティブSDKにアクセスし、アプリストア(およびWeb)に簡単にデプロイします。

Native PWAs

ネイティブPWA

簡単に利用できるプラグインAPIでカスタムのネイティブ機能を追加するか、既存のCordovaプラグインを互換性レイヤーで使用します。

クロスプラットフォームのコア
ネイティブ機能

カメラ

カメラ

写真をキャプチャして保存し、フォーカスやホワイトバランスなどのハードウェアパラメータを構成します。

ファイルシステム

ファイルシステム

ネイティブファイルシステムにアクセスすることで、ユーザーが必要とするアセット、ドキュメント、その他のデータを保存して読み込みます。

ジオロケーション

ジオロケーション

現在のデバイスの場所をポーリングしたり、位置情報の更新を監視することで、位置認識アプリを構築します。

加速度計

加速度計

デバイスの加速度センサーにアクセスして、3D空間でのデバイスの動きの変化に対応します。

通知

通知

ローカル通知とサーバープッシュ通知を送信・応答するアプリケーションを構築します

Haptics

Haptics

Hapticsハードウェアを使用して、ユーザーアクションの物理的なフィードバックを提供します

アクセシビリティ

アクセシビリティ

アクセシビリティの状態の変化に対応し、a11y機能でアプリを拡張します

YourのPlugin

YourのPlugin

アプリをカスタムネイティブコードとウェブコードで拡張して、プラットフォーム間で一貫したAPIを提供します。

自分で選んだ
Webフレームワーク

Capacitorを既存のWebアプリプロジェクト、フレームワーク、またはライブラリに導入します。既存のReact、Angular、Svelte、Vue(またはお好みのWebフレームワーク)プロジェクトをネイティブモバイルに変換し、任意のUIライブラリを使うことができます。

React
Angular
Svelte
Vue
Stencil
jQuery
Bootstrap
Ionic
Material UI
Framework7
Quasar
Angular Material