DocsPluginsCLI
Blog
Announcing Portals for Capacitor ->
Portals for Capacitor ->

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

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

Cordovaからの移行 ->apple, android and pwa icons
layered stack of phone app showing capacitor in the middle

はじめるのは簡単です。

01

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

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

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

apple iconandroid icon
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android
03

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

import { LocalNotifications } from '@capacitor/local-notifications';

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
    }
  ]
});
import { Geolocation } from '@capacitor/geolocation';

// get the users current position
const position = await Geolocation.getCurrentPosition();

// grab latitude & longitude
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
import { Camera, CameraResultType } from '@capacitor/camera';

// Take a picture or video, or load from the library
const picture = await Camera.getPicture({
  resultType: CameraResultType.Uri
});
import Foundation
import Capacitor

// Custom platform code, easily exposed to your web app
// through Capacitor plugin APIs. Build APIs that work
// across iOS, Android, and the web!
@objc(MyAwesomePlugin)
public class MyAwesomePlugin: CAPPlugin {

  @objc public func doNative(_ call: CAPPluginCall) {
  let alert = UIAlertController(title: "Title", message: "Please Select an Option", preferredStyle: .actionSheet)

  // ....
  }
}
see through tiles
book cover with title reading "Building Cross-platform Apps with Capacitor"

Ship cross-platform mobile apps 10X faster. We wrote a free guide on when and why to use Capacitor to build cross-platform apps.

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

triple phone icon

ユニバーサルアプリ

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

Cube with sphere inside icon

ネイティブアクセス

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

Tripe phone stack layered icon

ネイティブPWA

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

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

Explore APIs->
camera icon

カメラ

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

file system icon

ファイルシステム

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

antenna icon

ジオロケーション

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

spherical rings icon

加速度計

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

bell icon

通知

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

person with circle around icon

ネットワーク

ネットワーク接続と機能の変更を監視して、復元できるオフラインアプリを構築します。

three encompassing circles icon

Haptics

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

slider adjustment icon

あなた自身のPlugin

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

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

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

react logo tile
angular logo tile
svelte logo tile
vue logo tile
stencil logo tile
jquery logo tile
bootstrap logo tile
ionic logo tile
material UI logo tile
tailwind logo tile
framework 7 logo  tile
quasar logo tile

What people are saying about Capacitor.

Austin Howard Twitter profile picture

Austin Howard

@a_howard8

I’m reallllyyyy digging capacitor 👀

Angular Twitter profile picture

Angular

@angular

Did you know @capacitorjs shows how to give your #Angular app access to mobile APIs and a presence in app stores?

Scriptkitty Twitter profile image

scriptkitty

@thr0wsException

I'm pretty hyped to be honest, from what I've seen so far this will be another major step for establishing web technology as the go-to method for developing cross platform apps ♥

Adeniyi Tolulope Twitter profile image

Adeniyi Tolulope

@tolutronics

@capacitorjs has been a great companion this year... with realtime updates.

Carlos Martinez twitter profile image

Carlos Martinez

@cmartineztech

Yes, It works 😱 deep linking and google native authentication in iOS @capacitorjs

Greg Marine twitter profile image

Greg Marine

@gregmarine

One of the nice things about Capacitor is that you don’t have to use Ionic. I personally love Ionic and use it for UI components. But it isn’t required for Capacitor 😊

Jacob Clark twitter profile image

Jacob Clark

@imjacobclark

We blogged about how we use Capacitor to build our 4 Children’s apps at the @BBC

Leo twitter profile image

Leo

@creativiii

I've tried React Native but coming from web dev the DX is such a step down. Give @capacitorjs a go if you're building apps 👀

Tim S Twitter profile picture

Tim S

@tdawgpharaoh

I am asking myself, how did I not hear about @capacitorjs until recently. Very nice.

Daniel Rodrigues Twitter profile image

Daniel Rodrigues

@inspire_rd

Tried out @capacitorjs soon after it went stable - amazing! Simple & straight forward.

👋

The Capacitor Community is growing. Connect with us and say Hello.

Supercharge your app with enterprise-grade solutions.

Raised platforms with app icons

Ready for enterprise. With an Ionic platform subscription, access powerful security, authentication, deployment, and CI/CD features focused on teams building critical apps.

Nationwide LogoTarget LogoBurger King LogoHome Depot Logo
NBC LogoMicrosoft LogoAmtrak LogoGE Logo

Ready to start building?

Dive in and create your first Capacitor project today