「a spiritual successor to Apache Cordova and Adobe PhoneGap」を目指して、Ionic teamがCapacitorをリリースしました。Cordovaの後継としてクロスプラットフォーム開発が大きく変わるので、ぜひご利用ください！（本記事は2018年8月執筆記事ですので、一部情報が古い場合があります。ご了承ください）。

Capacitorとは

HTMP5 APPSを、PWA、iOSアプリ／Androidアプリ（ハイブリッドアプリ）、Electron（デスクトップアプリ）に変換するためのツールです。厳密にいえば、適切にラップや分岐処理をしてるのですが、まぁそこらへんの「どう動いてるか」は各自試してみてください。

https://capacitor.ionicframework.jp

HTML5 APPSのハイブリッドアプリ化の役割は、今まで「Apache Cordova」（PhoneGapと同じものです）が担っていたのですが、その後継プロジェクトに当たります。Cordovaは言ったら老舗プラットフォームなので、有名OSSとして多くのプラグインやノウハウが蓄積・公開されてる反面、当時の設計により「バージョン管理しづらい」「プラグインつくろうと思ったら基本はObjective-CやJava」「Electron非対応」といった限定的な問題を抱えていました。

とはいっても、Ionic teamは「私達はCordovaを放棄したわけではなく、特定のユースケースにおいてHTML5 APPS開発を推進するためのアプローチだ」と明言してるので、Cordovaが時代遅れになるわけではありません。ただ、ユースケースによっての選択肢がひとつ増えた感じですね。

と、余談はいいとしまして、まずCapacitorの特徴を説明します。

PWA、Electronもサポート

Cordova本体はbrowserサポートがありますが、利用が少ないからか多くのプラグインではbrowserはサポートしていないことが多いです。実際、Ionic CLIの`serve` ではCordovaプラグインのbrowserをサポートしていませんでした（ブラウザで表示するのに！）。また、Electronはそもそも非対応ですので、実質はHTML5 APPをiOSアプリ、Androidアプリにするためのプラットフォームでした。

Capacitorは、このすべてをサポート対象にいれることで「Native Progressive Web Apps」を標榜しています。PWAがWebの可能性を前に進めたのと同様に、CapacitorがHTML5 APPの可能性を大きく広げることを目指しています。

実際、HTML5 APPをひとつつくってCapacitorを挟むだけで、PWA、iOSアプリ、Androidアプリ、Electronの4つがリリースできるって夢ありますよね。

Native開発を強力にサポート

HTML5 APPSからNative機能（例えば、iOSのバックライト機能など）へのアクセスは、プラグインを経由して行います。既存にOSSとして公開されているものがあればそれを使えばいいのですが、そうでない場合（最新APIへのアクセスなど）は自作する必要があります。

Capacitorでは、最小の手間でこのプラグインを自作できるようになっています。`npx @capacitor/cli plugin:generate` で、プラグイン作成を本体が支援しており、完全npmパッケージ管理（もうPluginフォルダに入ってるPluginのバージョンがわからなくなることはありません！）、Swift/Javaサポート、TypeScriptインターフェイスの利用をすることができます。

Cordovaプラグインをつくったことがある方は、上記コードに夢を持てると思います。そういう方は、ぜひ一度 https://capacitor.ionicframework.com/docs/plugins/ あたりのドキュメントに目を通してください。

新しいNative UI Shellという考え方

今まで、HTML5 APPは、iOS、Androidアプリとしては「Web Viewで、まるでNativeみたいなUIを描画して表示する」するものでした。ですので、Native言語で書かれたアラートと、HTML5 APPのアラートが「まるで同じようなデザインで同じように挙動」しても、それはそのように描画しているだけで内部処理としては別物でした。

Capacitorでは、「すべてWebViewじゃなくてよくない？」という発想のもと、Native UI ShellとWeb Viewを混ぜて表示することができます。

source : https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content

Capacitorは、元ソースに対して、PWA, iOS, Android, Electronを個別に出力できるので、1ソース書いておけば出力時に「PWAだったらWebでレンダリングしたアラートをだして、iOSだったらNativeのアラートをだして」と自動的に判定してくれるようになります。

コード自体も、Capacitor/coreからインポートして使うだけなので、複雑な分岐処理を開発者サイドで行う必要はありません。

Ionicとの親和性

Ionic teamがつくってるので当たり前といえば当たり前なのですが、Ionicとの親和性はとても高いです。Ionic CLIにCapacitorデフォルト搭載はもちろんのこと、例えばAlertはPWAだと `window.alert()` になるわけですが、これをIonic APIのAlertControllerに差し替えてWebでもデザインされたアラート表示にすることが計画されています。

ライブリロードしながらNativeで開発をすすめることができる（Native Pluginも使える！）Ionic DevAPPというアプリがあり、これはCordovaベースとなっていますが、Capacitorサポートも予定されています。

ですので、CapacitorはすべてのHTML5 APPで使えるといいつつ、Ionicで使うのが一番パフォーマンスは発揮することになると思います。

すべてのCordovaプラグインも使えます

けど、今までのCordovaプラグインの膨大な資産は強いという気持ちはわかります。Capacitorでは、すべてのCordovaプラグインをサポートします。

感想

いろいろご紹介しましたが、完全に目新しいことはあまりないです。例えば、Native UI Shellは、Cordovaでも手間さえかけたら（PWAとNativeの処理を分岐すれば）実現可能でした。処理サイドでいちいち処理の分岐必要でしたが。また、デスクトップアプリをつくりたければElectronを使えばよかったわけで。

ただ、それをひとつにまとめあげているので、開発効率という視点でみると大きく改善されることになると思います。また、Nativeサポートがかなり強力になってるので「HTML5 APP開発経験あるけど、Native機能多いから今回は避けるかな」みたいな場面で大きな力を発揮するのではないでしょうか。

開発中機能

「別名：現状でできないけど、できるようになる予定の機能」。

• Ionic APIへの自動差し替え（現在はIonicを使ってもNative UI Shellではwindow.alert()が表示されます）。`high priority` で実装中
• Core機能にPush通知を持つ。こちら現在ではCordova Pluginが必要なのですが、Coreに搭載予定です。こちらも`high priority`。

他にもいろいろありますが、詳しくは、GitHubのIssuesをご覧ください。

https://github.com/ionic-team/capacitor/issues

ということで、試し方。

まぁ公式ドキュメント読んだらいいのですが、簡単に説明しつつ試し方をQiitaでご紹介します。前提として、Node, Git, Ionic, Xcode, Android Studioなどのインストールは済んでる方を対象にします。Ionicはインストールしてないぜ！って方は、`$npm i ionic -g` だけ先に叩いておいてください。

新しいHTML5 APPプラットフォーム「Capacitor」を試してみたhttps://qiita.com/rdlabo/items/c76e0321096318489513

それでは、また。