かんたん構築！Capacitor x Ionicで作るクロスプラットフォームWebアプリ

Capacitorとは

CapacitorはWebアプリをクロスプラットフォーム向けにブリッジするためのフレームワークです。

ネイティブアプリのようなUIが表現できるIonicフレームワークをベースとしたWebアプリをiOSアプリやAndroidアプリとしても利用できるようにするためにフレームワークです ^*1。Webアプリからネイティブの機能（API）を利用する（ブリッジさせる）ことができるため、Webアプリ、iOSアプリ、Androidアプリをワンソースにまとめることができます。

• クロスプラットフォーム : iOS, Android, Electron, PWAといったプラットフォームで動くWebアプリを構築できます。
• ネイティブアクセス : SDKを利用し、ネイティブのAPIにアクセスできます。
• Ionicの利用 : Ionic Framework向けに最適化されたネイティブらしい機能を提供します。
• Webネイティブ : 標準化されたWeb技術を利用して、App StoreユーザーやモバイルWebのユーザーにリーチできます。
• 拡張性 : 既存のプラグインやカスタムプラグインを使って、簡単に拡張できます。
• オープンソース : IonicおよびIonicコミュニティによってメンテナンスされた完全なオープンソース（MITライセンス）

本記事では、Ionic Frameworkを使って作成したWebアプリをCapacitorでクロスプラットフォーム化する手順を解説します。

Ionic Frameworkの最新バージョンであるIonic 5に対応しています！

Developers.IO CAFEで採用しています

Ionic FrameworkおよびCapacitorは、クラスメソッド社が運営するカフェ「Developers.IO CAFE」の専用アプリで採用しています。

Developers.IO CAFEで特徴的な点が、ユーザーそれぞれにフィットした体験を提供するため、多くのプラットフォーム向けに提供しているところです。Webアプリ、iOSアプリ、PWA (TWA)、LIFF、LINEミニアプリ向けに提供しています。これらのプラットフォームにワンソースで対応すべく、IonicとCapacitorの組み合わせを採用しています。

それぞれのプラットフォーム向けに、ほぼ同じUIで提供することができました。

開発の経緯など、詳しくは以下のブログもご参照ください！

Capacitorを導入する

Capacitorは「Webアプリに対して拡張する」形で導入します。したがって元となるWebアプリが必要になります。

CapacitorおよびIonicでは Webアプリも一緒に作る または 既存のWebアプリに追加する のいずれかの方法で導入可能です。

いずれの場合もIonic CLIが必要になるので、インストールしておきましょう。

# yarnの場合
$ yarn global add ionic

# npmの場合
$ npm install ionic

Webアプリも一緒に作る場合

ionic の start コマンドに --capacitor オプションを付けることで、Capacitorの拡張付きでIonicプロジェクトを新規作成できます。

$ ionic start myApp tabs --capacitor
? Framework: Angular
? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. Yes

IonicはAngular, React, Vueをサポートしていますが、本記事ではAngularで作成しています。

既存のWebアプリに追加する場合

既存のIonicプロジェクトに新しくCapacitorの拡張を追加する場合は ionic integrations コマンドを使います。

$ ionic integrations enable capacitor

いずれかの方法でIonicプロジェクトが作成できたら、まずは試しにローカルデバッグをしてみましょう。

$ ionic serve
> ng run app:serve --host=localhost --port=8100

デフォルト設定の場合は http://localhost:8100 で起動します。

アプリ情報の設定

次に、アプリの設定を行います。ネイティブアプリにはアプリ名が必要ですのでまずはアプリ名を決めたり、iOSアプリにはアプリ名やBundle Identifier、AndroidアプリにはPackage Nameなどを決めてあげる必要があります。

次のコマンドでアプリ情報を設定します。

$ npx cap init [アプリ名] [アプリID]
? Which npm client would you like to use? yarn

ここでの「アプリID」が、iOSアプリの場合はBundle Identifier、Androidアプリの場合はPackage Nameとして利用されます。

iOSアプリの実行

次にアプリをビルドし、iOSアプリとして実行してみましょう。

まずは次のコマンドでIonicプロジェクトをビルドします。

$ ionic build

続けてプラットフォームを追加します。ここではiOSを追加します。ちなみにAndroidの場合は npx cap add android になります。

$ npx cap add ios
✔ Installing iOS dependencies in 60.62s
✔ Adding native xcode project in: ./myApp/ios in 22.47ms
✔ add in 60.65s
✔ Copying web assets from www to ios/App/public in 381.18ms
✔ Copying native bridge in 2.33ms
✔ Copying capacitor.config.json in 1.76ms
✔ copy in 404.06ms
✔ Updating iOS plugins in 6.23ms
  Found 0 Capacitor plugins for ios:
✔ Updating iOS native dependencies with "pod install" (may take several minutes) in 12.61s
✔ update ios in 12.62s

Now you can run npx cap open ios to launch Xcode

コンソールログを読むと、何を実行してくれているのかわかります。Xcodeプロジェクトの作成、ビルド済みのWebアプリをアセットとして追加、依存ライブラリのインストール（CocoaPods経由）などをまとめて実行してくれます。

次のコマンドでXcodeを開きましょう。

$ npx cap open ios

Xcodeが起動し、Xcodeプロジェクトを開くことができました。

実行すると（Command⌘ + R）、シミュレータで先ほどブラウザで開いたWebアプリと同様のiOSアプリを起動することができます。

先ほど開いたWebアプリの画面のベース色がシミュレータと異なっているのは、Dark Modeにも対応しているためです。MacをDark Modeに設定している場合は反映されます。iOSシミュレータの設定をDark Modeに変更することで、Dark Mode用のUIに切り替わります。

Ionic製のWebアプリを、より多くのユーザーにリーチさせよう

Ionic Frameworkは実に綺麗なUIコンポーネントを提供しており、ネイティブアプリのUIに引けを取りません。Capacitorを使うことでネイティブアプリとして実行することができるとともに、ネイティブアプリならではの機能を使うこともできます。これらが全てワンソースで構築できるため、それぞれのプラットフォーム向けの開発作業を減らすことができます ^*2。

また、Developers.IO CAFEで採用したCapacitorの活用方法（TIPS）がいくつかありますので、こちらも別な記事でご紹介できればと思います。

本記事が、これからモバイル向けのアプリを開発しようとするかたの参考になれば幸いです。

脚注