hAcKTion

日々のアウトプット場所。

ハイブリッドアプリを作ってみる（3）〜Webアプリをネイティブアプリに変換するツール〜

ハイブリッドアプリに関してのメモ第3回。

第2回はIonicというものが、「UI ToolKit」である事がわかったので、

  • ネイティブの機能をどうやって表示しているのか
  • ネイティブアプリの形に変えているのはどうやっているのか

あたりを調べていきます。

Ionicのホームページは結構丁寧に作られています。 日本のコミュニティもあり、翻訳活動も結構積極的に行われているようで、日本語のサイトも結構みやすいです。

ionicframework.com

読み進めていくと、「iOSでの開発」「Androidでの開発」といったネイティブ機能や変換に関する情報が載ってそうな項目があります。

そこをみると、それぞれ冒頭に以下の記述があります。

iOSでの開発

This guide covers how to run and debug Ionic apps on iOS simulators and devices using Capacitor or Cordova. iOS apps can only be developed on macOS with Xcode installed.

Androidでの開発

This guide covers how to run and debug Ionic apps on Android emulators and devices using Capacitor or Cordova. Android apps can be developed on Windows, macOS, and Linux.

どうやら、 Capacitor もしくは Cordova を使う必要があるという事のようです。
そして、これがネイティブ機能や変換を行ってくれるツールということになりそうです。

あと、それぞれ2文目に大事な事が書いているのですが、結局のところiOSアプリを開発・リリースしたい場合はXcodeが必要になるので、ハイブリッドアプリを開発するには、開発にはmacOSが適しているという事になりますね。

では、話を戻して、CordovaやCapacitorはどういったものなのかを少し調べます。
Ionicのサイトはこういった情報にも用語集を用意してくれているので、参照しながらまとめます。

Cordova

用語集＞Cordova ionicframework.com

Apache Cordova は、標準の HTML/CSS/JS を本格的なネイティブアプリケーションに変換する、オープンソースのモバイルアプリケーション開発用フレームワークです。実機のカメラや加速度計などのネイティブの機能にアクセスする JavaScript API を提供します。Cordova は、ウェブアプリケーションを iOS、Android、Windows Phone にパッケージングするために必要なビルドツールを含みます。

ハイブリッドアプリとしてはCordovaは歴史が古いもののようで、PhoneGapという名称で二トビソフトウェアが開発し、その後Adobeに買収され、 Adobe PhoneGap、Adobe PhoneGap Buildという名前になり、ソフトウェアはApacheソフトウェア財団に寄贈がされ、 Apache Cordovaという名前になっているそうです。現在も開発は進んでいます。

Capacitor

用語集＞Capacitor ionicframework.com

Capacitor は、web ベースのアプリケーションをネイティブの iOS、Android、Electron、web上で実行できるようにするオープンソースのクロスプラットフォームアプリランタイムです。「ネイティブのプログレッシブ Web アプリケーション」を示すこれらのアプリはとても参考になり、それらは従来のハイブリッドアプリの考え方を超えた次の進化を表しています。Capacitor は Ionic 社によって作られ、活発に開発/サポートされています。

Capacitorって直訳すると「コンデンサ」という意味らしいです。
それゆえ、「capacitor」で情報検索すると公式サイトがヒットしづらいという難点があります・・・w
CapacitorはIonic社によって作られており、特徴としてCordovaと下位互換性があります。
Capacitorは、Cordovaのコンセプトを受け継いでいるようなのですが、React Nativeなどと同じように、他の最新のウェブアプリをすべての主要なプラットフォームで簡単に実行できるようにすることに完全に焦点を当てています。

どうやら、理念的なものはCordovaもCapacitorも似ているようで、Cordovaが昔から存在していて、Capacitorは最近できたものという理解になりました。
次回は、この2つの違いについて調べて、まとめて行こうと思います。