Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

8673a339e4002704b42bc66c43c65445?s=47 scrpgil
May 09, 2021
96

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

8673a339e4002704b42bc66c43c65445?s=128

scrpgil

May 09, 2021
Tweet

Transcript

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

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

  3. <目的> この記事に夢を感じたので 実際になにか作って発表しよう!

  4. <目的> この記事に夢を感じたので 実際になにか作って発表しよう! 途中まで作りました

  5. 自己紹介 • 名前:榊原宏祐 • ID:scrpgil • 株式会社キネカ • マッチングアプリ開発 •

    Web AAビューワー開発 • Ionicヘビーユーザー(仕事 & 趣味) • 最近、ASCII.artドメイン取得
  6. 目次 • クロスプラットフォームとは? • 夢のクロスプラットフォーム • 実践編

  7. 第1部 クロスプラットフォームとは?

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

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

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

  11. アプリとWebの違い モバイルアプリ Web • 高品質な体験を学習させやすい • リテンションさせやすい • シェア、拡散させやすい •

    Google検索から流入できる • インストール不要ですぐに使える アプリとWebは競合せず、どちらも良いところがある 両方のプラットフォームでサービスを提供できれば理想である。
  12. Webへの対応 主要なクロスプラットフォームFWはWebにも対応。 ただ、Webを深堀りすると対応はもう少し話は複雑である。 プログラマー FW プラットフォーム

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

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

  15. • 画像の最適化 • ファイルシステムルーティング • サーバーサイドレンダリング(SSR) • 静的ファイル生成(SSG) • APIルート

    最近のWebアプリケーションFWがもってる機能 アプリには不要だが、Webでは欲しい機能も多くある。 Webで展開する時、できればこれらの機能を使いたい。
  16. 第2部 夢のクロスプラットフォーム

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

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

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

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

  21. 構成図 Web API HTML、JS、CSS HTML、JS、CSS AppStore API クライアント クライアント アプリ

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

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

  24. 注意点 このプロジェクトの1つの注意点: アプリとして動かすためには、クライアント側で実行できるように、 Next.jsのExportコマンドを使用する必要が あります。つまり、その時は SSRが行われません。 SSRと完全に静的なNext.jsアプリを連携させる方法は公式にはなく、無理にやる場合は、複雑な構成を必要 とする。 また、Next.jsルーティングとIonic Reactのルーティングが競合するため、使い分けが必要になります。

    ※Next.jsルーティングは、Ionicが持つ非線形ナビゲーションと画面遷移の状態管理を持っていないため。 実践運用する場合は、事前に検証してから使いましょう https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
  25. 第3部 実践編

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

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

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