メインコンテンツにジャンプ
ガイド

Capacitor: 一括ガイド

CapacitorJSは、標準的なWebコードベースで、iOS、Android、デスクトップ、Progressive Web Appsを構築できる強力なツールです。Capacitorについてすべてを学びましょう。この一括ガイドで。

記事のクレジット

マーティン・ドナディュー

ライター

ヴァレリア

レビュアー

ジョーダン

エディター

Capacitor: 一括ガイド

Capacitor Capacitorは、iOS、Android、デスクトップ、Progressive Web Appsを含む、単一の標準WebコードベースでNativeアプリを作成できる汎用ツールです。Ionicチームによって開発されたCapacitorは、最近ではWeb技術の潜在性を認識する開発者によって注目を集めています。モバイルプラットフォーム上のWeb技術の可能性を認識する開発者によって注目を集めています。この一括ガイドでは、Capacitorについて最も一般的な質問に答え、機能、用途、利点を探求します。

何がCapacitor?

Capacitorは、MITライセンスの下で提供される無料、オープンソースのプラットフォームです。標準Web技術を使用してクロスプラットフォームアプリを構築し、現代ブラウザで実行することができます。Capacitorは、iOSとAndroidのネイティブプラットフォームのSDK、コマンドラインツール、プラグインAPI、プリメイドプラグインで構成されています。Capacitorは、各プラットフォームでネイティブアプリとして実行する既存のWebアプリケーションにアクセスを提供し、JavaScriptを使用してネイティブプラットフォームにアクセスするためのハックを提供します。これらのハックは、アプリケーションに直接組み込むか、再利用および配布するためのスタンドアロンプラグインとして構築できます。

何がCapacitorで作成できますか?

Capacitorを使用すると、ネイティブまたは他のクロスプラットフォームツールキットで作成できるように、ほぼ何でも作成できます。Capacitorアプリはネイティブプラットフォームにフルアクセスできるため、ほとんどのネイティブ機能を実装できます。ただし、Webアプリケーションビュー階層にネイティブUIコントロールを直接埋め込むことは、まだ実現できていない抽象化されたテクニックです。

Who is Capacitor for?

Capacitorは、HTML、CSS、JavaScriptのバックグラウンドを持つウェブ開発者を対象としています。ウェブアプリやデスクトップアプリ(Electronや類似のツールを使用)を構築する場合、Capacitorは、モバイルに焦点を当てたクロスプラットフォームアプリを作成するための解決策です。

When should a team choose Capacitor?

チームは、Web開発スキルと既存のWeb投資を活用してネイティブプラットフォームアプリを展開したい場合に、Capacitorを考慮するべきです。 Capacitorは、データ駆動型アプリ、消費者向けアプリ、B2B/Eアプリ、企業向けアプリに適しています。特に企業向けアプリでは、Ionicという会社はCapacitorのために企業向けサポートと機能を提供しています。

Capacitorの既存のウェブcodeを再利用し、ウェブアプリに新しいcodeを共有できますか。

はい!Capacitorは標準的なウェブアプリケーションをネイティブに実行することができ、ウェブとモバイルの両方で単一のコードベースを使用したり、ウェブアプリケーションの特定の部分を再利用したりすることができるため、チームはコンポーネント、ロジック、または特定のエクスペリエンスを共有できる。

What is Capacitor good at? What are its limitations?

Capacitor excels at running standard web apps as native mobile apps and extending web apps with native functionality. It’s ideal for teams proficient in web development or with significant web investments. Capacitor may not be the best choice for 3D/2D or graphically-intensive apps, although it does support WebGL. Apps that require extensive communication between the web app and the native layer may find the Capacitor communication bridge adds overhead due to serialization. However, Capacitor apps can always run custom native code when needed.

CapacitorのネイティブUIコントロールと組み合わせることはできますか?

はい、CapacitorのWebビュー外でネイティブUIコントロールを表示できます。例えばモーダルや親レベルのナビゲーションコンテナです。ネイティブコントロールをWebビューの体験に埋め込むことは可能ですが、他のユーザーが使用できるテクニックではまだ実装されていません。

CapacitorとElectronはどう違いますか?

Capacitorは「Electron for mobile」と表現されることがあります。Electronのモバイル向け対称体です。ただし、CapacitorはElectronを展開プラットフォームとしてターゲットにすることができます。Electronはデスクトッププラットフォームのみをターゲットにする必要がある場合、Electronは十分です。ただし、モバイル、Web、デスクトップのクロスプラットフォームアプリケーションを構築したい場合は、CapacitorはElectronと他のプラットフォームをサポートしています。

CapacitorとIonicはどう違いますか?

Ionic is the company that creates Capacitor, Ionic Framework, Stencil, Appflow, and other app development-focused products. Capacitor is the toolkit that handles the native side of the app and communication between the native app and the Web View. It is agnostic of the frameworks and technologies used in the Web View app, including Ionic Framework. Ionic Framework is a mobile UI toolkit that provides powerful UI components for web apps to look and feel native.

Do I need to use Ionic Framework with Capacitor?

No, you can use Capacitor with other UI and CSS frameworks like Tailwind, Material UI, Chakra, Quasar, Framework7, or your own custom components. However, Ionic Framework is still an excellent option for creating native-like experiences with your web app.

Capacitorは、Ionic Frameworkと一緒に使用する必要がありますか?

Ionic aims to drive Capacitor adoption, as it leads to increased use of Appflow (their mobile CI/CD service), Ionic Framework, and their enterprise solutions. Capacitor’s growth is by design, as it was created to offer a more frontend-agnostic stack for web developers to build mobile apps.

Capacitorは、Webアプリにネイティブの体験を作成する際に優れたオプションです。

Yes, Capacitor works well with React, Next.js, and Remix. It keeps developers closer to standard React web development than React Native, as most React libraries and add-ons work seamlessly with Capacitor.

Capacitorの採用を推進し、Appflow (モバイルCI/CDサービス)、Ionic Framework、企業向けソリューションを使用することにつながります。__CAPGO_KEEP_1__の成長は設計上のものであり、Web開発者がモバイルアプリを構築するためのよりフロントエンド無関係なスタックを提供するように作成されました。

CapacitorとReact Nativeは、クロスプラットフォーム開発用のツールとプラグインインフラを提供する点で類似しています。ただし、React NativeはJSとReactを使用してウェブのようなシステムを提供し、プラットフォームネイティブUIコントロールを抽象化する一方で、Capacitorは標準ウェブアプリ用のWeb Viewを提供します。CapacitorはReact Nativeよりも複雑ではないため、ネイティブUIコントロールの管理とJS層と同期が必要ありません。

CapacitorはReact Nativeよりも速いですか?

Capacitorの実行速度はReact Nativeよりも速い可能性があります。iOSとAndroidでJITエンジンにアクセスできるためです。しかし、React NativeはネイティブUIコントロールを使用するため、UIレンダリングでは「速い」または「パフォーマンスが高い」と見なされる可能性があります。Capacitorアプリは主にWeb Viewで実行されます。

CapacitorとFlutterはどのように異なりますか?

CapacitorとFlutterは両方ともクロスプラットフォーム開発用のツールとプラグインインフラを提供します。ただし、CapacitorはJavaScriptと標準ウェブ技術を使用し、FlutterはDartとカスタムUIとAPI環境を使用します。UI側では、CapacitorとFlutterは両方ともカスタムレンダリングエンジンを使用し、Flutterはコンポーネントを描画し、CapacitorはWeb ViewでほとんどのUIをレンダリングします。

CapacitorをReact Nativeまたは伝統的なネイティブアプリに埋め込むことはできますか?

はい、Ionic Portalsを使用して__CAPGO_KEEP_0__をReact NativeまたはSwift/Kotlinで構築された伝統的なネイティブアプリに埋め込むことができます。 __CAPGO_KEEP_3__ to embed Capacitor into React Native or traditional native apps built with Swift/Kotlin for a mobile micro frontend approach.

What are my options for high-performance animations in Capacitor?

Ionic Framework、Quasar、Framework7、またはKonsta UIからプリバケッドで最適化されたコンポーネントを使用するか、Framer Motion、Lottie、またはCSSアニメーションを使用してカスタムアニメーションを作成できます。ただし、CSSアニメーションを使用する場合、パフォーマンスのベストプラクティスを遵守する必要があります。

Capacitorのプラグインの数は何ですか?

Capacitorには26のコアプラグインと多数のコミュニティが作成したプラグインがあります。コミュニティプラグインのリソースについては awesome-capacitor, capacitorコミュニティ , Capgoプラグインディレクトリ をご覧ください。

Capacitor用のVSCode拡張機能はありますか?

はい、 Ionic VS Code 拡張機能 また、Capacitor 拡張機能としても機能し、埋め込まれたプレビュー、デバイス実行、外部デバッグ、プロジェクト品質のリンティング、セキュリティ分析など、多くの機能を提供します。

企業向けサポートは利用可能ですか?

はい、Capgo は 企業向けサポートと機能 Capacitor に対して、専門的なサポート、ライブアップデートと認証のためのネイティブプラグイン、などを提供しています。

Capacitor を始めるにはどうすればいいですか?

__CAPGO_KEEP_0__ ドキュメントを訪問し、__CAPGO_KEEP_0__ をアプリにインストールするための指示に従ってください。 Ionic Framework と Angular/React/Vue を使用して、意見に基づいた __CAPGO_KEEP_1__ アプリを始める場合は、Ionic Framework サイトの Get Started フローに従ってください。 Capacitor: A Comprehensive Guide and follow the instructions to install Capacitor in your app. If you want to start with an opinionated Capacitor app using Ionic Framework and Angular/React/Vue, follow the Get Started flow on the __CAPGO_KEEP_0__ は Capacitor の拡張機能としても機能し、埋め込まれたプレビュー、デバイス実行、外部デバッグ、プロジェクト品質のリンティング、セキュリティ分析など、多くの機能を提供します。.

Capacitor は Capacitor の拡張機能です。

あなたが使用している Capacitor: すべての機能を網羅したガイド __CAPGO_KEEP_0__ CI/CD Capgo CI/CD Capgo CI/CD Capgo Native Builds Capgo Native Builds Capgo Capgo CI/CD統合 CI/CD統合の実装詳細 GitHub Actions Integration Capacitorの実装詳細についてはGitHub Actions Integration.

Live updates for Capacitor apps

ウェブ層のバグが生じた場合、Capgo を通じて修正を配信し、数日間待つ必要のあるアプリストアの承認を避けることができます。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて進みます。

マーティンによる人間サポート

はじめましょう

最新ニュース

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。