Capacitor を知ってほしい

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

知ってほしい技術 Advent Calendar 2022 の2日目より。

3行まとめ

  • Capacitor はそれ単体で使える Web コンテンツをラッピングしてネイティブアプリにする技術・仕組み
  • Ionic という UI フレームワークのチームが提供しているが UI 関係なく使える、フレームワーク関係なく使える
  • みんなもっと気軽に Web でネイティブアプリ作っていけばいいのに

というお話です。

Capacitor を始めとした用語整理

正確じゃないざっくり用語整理なので、明らかにおかしなものは適宜ご指摘ください。

  • Cordova (PhoneGap)
    • WebView に Web コンテンツを表示したものをネイティブアプリとして見せる仕組み
    • だいぶ昔からある
  • Capacitor
    • Cordova の後継 を目指して Ionic という UI フレームワークを作ってるチームが開発したもの
    • たぶん Cordova 使うのが嫌になったんだと思う、知らんけど
  • Ionic
    • この UI フレームワークを使うと手間をかけずにネイティブっぽく表示できる
    • WebView で表示する仕組みと組み合わせて使うことを想定してる
    • Angular という JavaScript フレームワークをベースに開発が始まったけど、今は Angular との依存は切れてるっぽい（React でも Vue でも）
    • 今日は関係ない

Cordova

WebView でラッピングするやつです。

実は以前お仕事で少し使ったことありまして、複数アプリを同時に作る必要が出てきて、 Web とネイティブの技術者を別々に集めるのが大変だったことから（また機能的にネイティブで求められる要件がそう多くなかったことから）、 ビルドした Web コンテンツを Cordova 使ってラッピングしてネイティブアプリとして使えるようにしたらいいよね、というところで Cordova を使いました。

その時の個人的な所感なのですが・・・

  • ソースコードがだいぶ古い
    • iOS は Objective-C 、 Android は Java が大部分
    • 一応プラグイン作れるっぽいけどやりたくない
  • リンクやリソースなどのパスを適切に設定してあげる必要がある
    • たぶん内部で file:/// みたいなパスになってるっぽい？
    • 記憶曖昧だけど相対パスで記述してあげる必要があったような・・・？
  • レールから少しでもはみ出ると列車から放り出される感が強い
    • アプリに変換してる最中に警告が出まくるけど、どのレイヤーの警告なのかわからない

なんか後継を目指したくなる気持ち分かる。

Capacitor

位置付けとしては Cordova と同じですが、 CLI などのインターフェースが Web 開発にすごく寄ってきてくれています。

  • 必要なコマンドが精査されていて分かりやすい、使いやすい
  • (iOS) 標準の WebView エンジンが UIWebView から WKWebView の新しい方になってる
  • パスの問題も特になく、内部にローカルサーバを立ち上げているためか普通に表示が可能
    • 詳しく見てないけど、内部は capacitor:// のプロトコルでやりとりしてる？
  • 責務が明確で、 Web コンテンツ側でやるべきことと Xcode 側 (iOS) で設定すべきことがちゃんと綺麗に分かれている
    • iOS の権限設定は、ネイティブアプリと同様に info.plist ファイルを編集することになる
    • なんでもかんでも全部 CLI でやろうとしてない

WebView でラッピングする良さ

ちなみに Cordova も Capacitor も共通で言えることですが、 Web コンテンツとしてスタティックなファイルでありさえすれば、基本的には 何のフレームワークやライブラリを使っても表示できます。

僕は Next.js で build & export して使ってますし、以前は Vue.js でビルドしたものを配置してたりしてましたし、ベタ書きの HTML をそのまま配置することだってやろうと思えばできますね。

また、 Web の範囲でレスポンシブ対応を普通にやっておけば、自然とユニバーサルアプリになっちゃう のも良いところです。 せっかく HTML/CSS の知識があるのに、改めて iOS の AutoLayout 周りの知識を学ぶのも（学び自体には意味はありますが）もったいない感ありますし、それならもっと作った後の申請や配布周りのところを学んだ方が良さそうです。

プラグインでネイティブが必要な部分だけカバーできる良さ

プラグインがけっこう充実しています。

https://capacitorjs.com/docs/plugins

今のところ公式の Camera, Geolocation, Preference, Splash Screen あたりを使いましたが、躓きはほぼなく、普通に使えています。 （躓いたとしても、 Cordova に比べたらだいぶソースコードが把握しやすいものになっているので、レールの上に乗ってる安心感はあります）

Web で作っているのに、 import してネイティブの機能が使えちゃうのは拡張してる感があって素敵ですね。

アプリの申請や配布に関する知識はいずれにしても必要

ここが勘違いしやすいポイントなんですが、 Capacitor を使うと簡単にネイティブアプリがリリースできちゃうんです、みたいなのは結構な落とし穴 だと思っていて、簡単にできるのは 実機で動かすところまで なんですよね。

そこから先は普通のネイティブアプリであれ、 Web コンテンツをラッピングしたネイティブアプリであれ、アプリの申請や配布のフローを同様に踏む必要があります。

  • 実機でアプリとして表示できるコンテンツを作る <- ここが省略
  • アプリの申請や配布をする

ネイティブアプリをリリースしたことない人から見て、大きなハードルが2つあるよりは、1つ目のハードルを飛ばなくていいようになっている方がかなり敷居は低いです。

後から Swift や Kotlin 使ってネイティブアプリの開発をしたい場合でも、先に2つ目のハードルを経験しておけば、今度はネイティブアプリを作る方（1つ目のハードル）に注力できますね。

Q. なぜ Capacitor の話がこんなにも少ないの？

ここがある意味本題なのですが、僕の独断と偏見にまみれた仮説です。

  • Capacitor を単体で使えることをそもそも知らない
  • Angular の延長上の話と勘違いされる
  • 困りポイントが少なすぎて、ブログに書きづらい

Capacitor を単体で使えることをそもそも知らない

Ionic という UI フレームワークの文脈で語られる ことが多く、 単体で使えることを知らない人が多いのでは？と思っています。

Ionic は一旦置いておいてどんどん Capacitor だけ使っていきましょう！ （ UI フレームワークが必要になったら Ionic 調べてみる、くらいでいいんじゃなかろうかと）

Angular の延長上の話と勘違いされる

Ionic 自体も Angular の文脈で語られることが多い （偏見）ため、 Angular の延長上の話と勘違いされることが多いのでは？と思っています。

これもしょうがない・・・？のかな・・・？

Angular は一旦置いておいてどんどん Capacitor だけ使っていきましょう！ （ただのペライチ HTML でも問題ないので、 Web 界隈関わってる人全員使えるんじゃなかろうかと）

困りポイントが少なすぎて、ブログに書きづらい

使ってる人がどれだけいるのか知らんけど、これは微妙にありそう・・・？

ぶっちゃけ困りポイントほとんどないので、僕も今まで書いてなかったです。

以下 iOS の場合。

yarn add @capacitor/core #1
yarn add --dev @capacitor/cli #1 cap コマンド使える

npx cap init #2

yarn add @capacitor/ios #3
npx cap add ios #3

#4 なんらかビルド処理

npx cap sync ios #5
npx cap open ios #5 Xcode が立ち上がる
  1. 既存プロジェクトに Capacitor を入れる
  2. Capacitor に対応させる
  3. iOS (Android) 環境を追加する
  4. 手元の Web コンテンツをビルドする
    • capacitor.config.js 内の webDir のディレクトリ名が一致してるか見ておく
    • Next.js なら out ディレクトリとか、手元の出力ディレクトリに合わせる
  5. Capacitor 向けにファイル転送して Xcode を開く
    • このタイミングでプラグインのインストールも行われる
  6. あとは通常のネイティブアプリと同じく端末選んで実機でビルド！

・・・とまあ、見出し1つ分に収まってしまうくらい、簡単に使えますね。

みんなもっと気軽に Web でネイティブアプリ作っていけばいいのに。

まとめ

Capacitor は単体で使える Web コンテンツをラッピングしてネイティブアプリにする技術・仕組みなんですよ、というお話でした。

ちなみに上の使い方は全部 https://capacitorjs.com/docs/getting-started に書いてあることなので、こっち読んでもらった方が良いです。

ドキュメントを読もう。

参考 URL

この記事は書かれてから1年以上が経過しており、最新の情報とは異なる可能性があります

もし記事内に誤りなどございましたら、 @girigiribauer @girigiribauer.com までご一報いただけると助かります。

Related articles