夢のクロスプラットフォーム開発 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を使って、アプリ用のオンボーディングページを表示 

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