UIの構築

Capacitorアプリは基本的にウェブアプリです。しかし、優れたネイティブ品質のモバイルアプリを提供するには、単にウェブサイトをラップするだけでは不十分です。

今日、チームにはアプリのUIに関してさまざまなオプションがあります。最も人気のあるオプションのいくつかを見てみましょう。

Ionic Framework

Ionic Frameworkは、Capacitorを使用するウェブ開発者がプラットフォームの規約に従ったネイティブ品質のアプリ体験を得るためのモバイル向けUIキットおよびユーティリティのセットです。Ionic FrameworkはCapacitorを作成した会社によって作成されており、Capacitorを念頭に置いて設計されています。

今日、Ionic FrameworkはCapacitorにとって推奨されるUIフレームワークです。なぜなら、チームが最高品質のネイティブアプリ体験を達成するのに役立つと信じているからです。しかし、それを使用することはCapacitorアプリにおいて必須ではありません。

Ionic Frameworkは、Angular、React、およびVueのためのネイティブ品質のトランジションとルーティングを備えており、各フレームワークで最も人気のあるルーティングソリューションに深く統合されています。さらに、Ionicにはモーダル、メニュー、リストなどの強力なコンポーネントや、スライディングアイテム、フォーム入力、日時ピッカー、カード、タブ、iOSスタイルの凝縮ヘッダーなどの強力なアイテム機能が備わっています。

Ionic FrameworkはAngular、React、またはVueを必要とするため、これらの技術を使用しているチームにのみ適しています。

始めるには、IonicとCapacitorの使用ドキュメントを参照してください。

Tailwind CSS

Tailwind CSSは、多くのCapacitor開発者が優れたアプリ体験を構築するために使用する人気のあるCSSフレームワークで、コンパニオンUIテンプレートライブラリもあります。私たちのお気に入りの例には、ReflectやLogSnagがあります。

また、Konsta UIなどの興味深いTailwind中心のモバイルUIフレームワークもあります。

Tailwindを使用する際には、Tailwindがモバイルスタイルのナビゲーションおよびルーティングのプリミティブを提供しないことを念頭に置くことが重要です。そのため、チームはプラットフォームの規約に合ったUXを構築する必要があります。一つの方法として、TailwindとIonic Frameworkを組み合わせる方法があります。このNext.js + Tailwind + Ionic Framework + Capacitorテンプレートを参照してください。もう一つの方法として、従来の前進/後退ナビゲーションを避け、タブやモーダルを使用するUXを設計することがあります。最後に、必要に応じてカスタムナビゲーションおよびルーティング体験を構築することもできます。

Framework7

Framework7は、強力なモバイルタッチスライダーライブラリであるSwiperの開発者によって作成された人気のあるモバイル向けUIライブラリです。

Quasar

Quasarは、モバイル向けコンポーネントを備えたVue.jsフレームワークで、Capacitorの公式サポートがあります。

Material UI

Material UIは、Material Designガイドラインを実装した人気のあるReact中心のライブラリです。

独自のUIを作成する

既存のUIキットを持っている場合や独自に実装したい場合は、Ionic Frameworkやここで紹介した他のオプションを参考にすることをお勧めします。Capacitorは夢を実現するための白紙の状態を提供しますが、独自のUIを作成する場合、ユーザーが期待する優れた体験を構築する責任があります。これはアプリの構築に加えて挑戦となることがあるため、非常に高度なチームやすでにモバイル最適化されたウェブアプリに対してのみ一般的に推奨されます。