夢のクロスプラットフォーム開発

夢のクロスプラットフォーム開発 Ionic Meetup #17

https://capacitorjs.com/blog/mobile-apps-with-tailwind-css-nextjs-ionic-and-capacitor この記事読んだことある人はいますか？

＜目的＞この記事に夢を感じたので実際になにか作って発表しよう！

＜目的＞この記事に夢を感じたので実際になにか作って発表しよう！途中まで作りました

自己紹介 • 名前：榊原宏祐 • ID：scrpgil • 株式会社キネカ • マッチングアプリ開発 •
Web AAビューワー開発 • Ionicヘビーユーザー（仕事 & 趣味） • 最近、ASCII.artドメイン取得

目次 • クロスプラットフォームとは？ • 夢のクロスプラットフォーム • 実践編

第１部クロスプラットフォームとは？

一般的なモバイルアプリ開発複数のプラットフォームに対して、別々に実装が必要。当然、プログラマー、デザイナーの工数も2倍。プログラマー言語・FW プラットフォーム

クロスプラットフォーム開発一つのFWから、複数のプラットフォームへ展開可能。プログラマーも、デザイナーも１人で済む（ことが多い）プログラマー FW プラットフォーム

フレームワークの恩恵フレームワークが各プラットフォームのUIの差分を吸収してくれる。デザイナーはどちらか片方のデザインに集中できる。

アプリとWebの違いモバイルアプリ Web • 高品質な体験を学習させやすい • リテンションさせやすい • シェア、拡散させやすい •
Google検索から流入できる • インストール不要ですぐに使えるアプリとWebは競合せず、どちらも良いところがある両方のプラットフォームでサービスを提供できれば理想である。

Webへの対応主要なクロスプラットフォームFWはWebにも対応。ただ、Webを深堀りすると対応はもう少し話は複雑である。プログラマー FW プラットフォーム

Web開発で考えること HTML~CSSなどのコンテンツをサーバーから配信する必要がある。 SNSでのシェアや検索への登録のために、動的に書き換えることも必要。また、表示速度も重要。 HTML、JS、CSS、画像 etc... Webサーバ Webブラウザ

Web開発で考えること Webアプリケーションフレームワーク(WAF)を利用することが多い。 WAFが各コンテンツ(HTML、JS、CSS)を動的に書き換える。 HTML、JS、CSS、画像 etc... Webサーバ Webブラウザ

• 画像の最適化 • ファイルシステムルーティング • サーバーサイドレンダリング(SSR) • 静的ファイル生成(SSG) • APIルート
最近のWebアプリケーションFWがもってる機能アプリには不要だが、Webでは欲しい機能も多くある。 Webで展開する時、できればこれらの機能を使いたい。

第２部夢のクロスプラットフォーム

クロスプラットフォーム(Capacitor)を使いながら、Webも最新のトレンドを使って開発したい

最近、流行ってるフレームワーク • Next.js: Webフレームワーク • Tailwind: CSSフレームワークここにクロスプラットフォームを統合させる。 • Ionic：クロスプラットフォーム向けUIフレームワーク
• Capacitor: クロスプラットフォーム

https://capacitorjs.com/blog/mobile-apps-with-tailwind-css-nextjs-ionic-and-capacitor Capacitorブログの記事 • Ionic作者Max Lynchが書いたブログ記事。全て取り入れた構成を実践している。

各スタックの紹介 Capacitor：アプリ全体とネイティブレイヤー Next.js：Web/Reactアプリ Ionic：ツールバー、ナビゲーションなどのプラットフォームUI Tailwind：コンテンツのスタイル

構成図 Web API HTML、JS、CSS HTML、JS、CSS AppStore API クライアントクライアントアプリ
サーバーバイナリ

IonicとTailwindの使い分けサービスのメインとなるページは、カスタムされた UIになることが多い。 IonicではなくTailwindが活躍する機会が多くなる

IonicとTailwindの使い分け単純なリストページでは、 Tailwindを使用しない。 IonicのUIコンポーネントをそのまま使う。いつIonicを使うか、いつTailwindを使うかは、サービスの仕様により使い分ける。

注意点このプロジェクトの1つの注意点: アプリとして動かすためには、クライアント側で実行できるように、 Next.jsのExportコマンドを使用する必要があります。つまり、その時は SSRが行われません。 SSRと完全に静的なNext.jsアプリを連携させる方法は公式にはなく、無理にやる場合は、複雑な構成を必要とする。また、Next.jsルーティングとIonic Reactのルーティングが競合するため、使い分けが必要になります。
※Next.jsルーティングは、Ionicが持つ非線形ナビゲーションと画面遷移の状態管理を持っていないため。実践運用する場合は、事前に検証してから使いましょう https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter

第３部実践編

Kaozo • テキストを簡単に共有できるサービス ◦ リンク共有するページとしないページを使い分ければ、SSRしながらIonicも利用できる。 • Figma：bit.ly/3vR6Fjf • Demo：kaozo.aahub.org

試したかったこと • Web版、アプリ版でランディング or オンボーディングページの出し分け ◦ Capacitor.isNativeを使って、アプリ用のオンボーディングページを表示

ご清聴ありがとうございました

夢のクロスプラットフォーム開発

夢のクロスプラットフォーム開発

scrpgil

More Decks by scrpgil

Featured

Transcript