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

モバイル

Avatar for Cybozu Cybozu
July 06, 2025
15

 モバイル

Avatar for Cybozu

Cybozu

July 06, 2025
Tweet

Transcript

  1. 6 ネイティブアプリとWebアプリ (4/5) ▌ネイティブアプリはOSの上 → 直接OSのAPIを呼び出す ▌WebアプリはWebブラウザの上 → ブラウザのAPIを介してOSのAPIを呼び出す ⚫→

    Webブラウザは直接OSのAPIを呼び出す OS Webブラウザ ネイティブアプリ Webアプリ 直接OSのAPIを呼ぶ ブラウザが提供する APIを呼ぶ ブラウザが OSのAPIを呼ぶ
  2. 7 ネイティブアプリとWebアプリ (5/5) ▌ネイティブアプリはOSの上 → 直接OSのAPIを呼び出す ▌WebアプリはWebブラウザの上 → ブラウザのAPIを介してOSのAPIを呼び出す ⚫→

    Webブラウザは直接OSのAPIを呼び出す → Webブラウザはネイティブアプリ OS Webブラウザ ネイティブアプリ Webアプリ Webブラウザはネイティブアプリ
  3. 13 アプリストアの存在 ▌モバイルアプリはアプリの配布に Google Play Store / AppStore を使用 アプリ開発

    ストアの審査 公開 アプリ開発 公開 アプリ開発者 ストア管理者 Webアプリ モバイルアプリ
  4. 23 MPAとSPA ▌MPA (Multi Page Application) ⚫サーバーはリソースごとに異なるHTMLを返す ⚫複数のHTML (ページ) から構成

    ▌SPA (Single Page Application) ⚫HTMLをJSなどで動的に書き換える ⚫単一のHTML (ページ) から構成 サーバー サーバー ブラウザ x JS ブラウザ x JS /usersをくれ <html> </html> /v1/usersをくれ { "users": [] } 返ってきたデータを元に 再描画
  5. 24 SPAとモバイル (1/2) サーバー ブラウザ x JS /v1/usersをくれ { "users":

    [] } サーバーとはHTTP APIを介してデータを送受信 サーバー /v1/usersをくれ { "users": [] } モバイルOS アプリ コンポーネントで構成 Users Articles News /users /articles /news https://spa.example.com Users Articles News UsersView ArticlesView NewsView Example App
  6. 25 SPAとモバイル (2/2) サーバー ブラウザ x JS /v1/usersをくれ { "users":

    [] } サーバーとはHTTP APIを介してデータを送受信 サーバー /v1/usersをくれ { "users": [] } モバイルOS アプリ コンポーネントで構成 Users Articles News /users /articles /news https://spa.example.com Users Articles News UsersView ArticlesView NewsView Example App モバイルアプリはWebのSPAに相当
  7. 26 モバイルとWebの違いのまとめ Webアプリ モバイルアプリ • ファイルをサーバーからダウンロード • ファイルはキャッシュされる • デプロイしたら公開

    • 同じアプリを複数のブラウザで実行 • アプリストアからインストール • 明示的に削除しなければ消えない • アプリストアの審査が行われる • OSごとにアプリを開発 • OSごとに設計思想や世界観がある • コンポーネントの集まりで構成 • HTTP APIを呼び出す場合が多い SPA
  8. 28 デザインガイドラインとデザインシステム iOS: Human Interface Guidelines Android: Material Design Apple

    Inc. "Human Interface Guidelines - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/ (参照: 2023/04/27) Google LLC "Material Design". https://m3.material.io/ (参照: 2023/04/27)
  9. 29 iOS: Human Interface Guidelines ▌アプリケーションインターフェースをより直感的で、学習しやすく一貫性のあるものにすることで ユーザーの体験を向上させる ▌iOS SDKに含まれるUIフレームワークを利用することで、デザインガイドラインに準拠したイン ターフェースを簡便に作れる

    Apple Inc. "Buttons - Menus and actions - Components - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/components/menus-and-actions/buttons (参照: 2023/04/27) Apple Inc. "Action sheets - Presentation - Components - Human Interface Guidelines - Design - Apple Developer". https://developer.apple.com/design/human-interface-guidelines/components/presentation/action-sheets (参照: 2023/04/27)
  10. 30 Android: Material Design ▌現実世界に基づいたマテリアル (物質) というメタファーを用いて直感的な操作性と一貫性 を持たせたデザインを提供して、ユーザーの操作を補助 ▌Material ComponentsやJetpack

    ComposeなどのUIフレームワークを利用することで、 デザインシステムに準拠したインターフェースを簡便に作れる Google LLC "Common buttons – Material Design 3". https://m3.material.io/components/buttons/overview (参照: 2023/04/27) Google LLC "Elevation – Material Design 3". https://m3.material.io/styles/elevation/overview (参照: 2023/04/27)
  11. 31 デザインガイドライン / デザインシステム Apple Inc. SF Symbols. version 4.0

    (参照: 2023/04/27) Google LLC "Material Symbols and Icons - Google Fonts" https://fonts.google.com/icons (参照: 2023/04/27) iOS: SF Symbols Android: Material Symbols
  12. 32 アクセシビリティ ▌iOSとAndroidはWebと同様に読み上げ機能を提供可能 <!-- HTML --> <button type="submit"> <img src="..."

    alt="送信"> </button> // Android (Jetpack Compose) Button(onClick = {}) { Icon( painter = ..., contentDescription = "送信" ) } // iOS (SwiftUI) Button(action: {}) { Image( "...", label: Text("送信") ) }
  13. 33 サイボウズのアプリリリースまでの流れ (1/2) 開発 Dev ビルド CI 自動テスト CI アーカイブ

    CI 社内配信 CD 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者
  14. 34 サイボウズのアプリリリースまでの流れ (2/2) 主導権はCybozu (開発側) 主導権はプラットフォーマー (Apple / Google) 開発

    Dev ビルド CI 自動テスト CI アーカイブ CI 社内配信 CD 審査 PF 機能試験 QA リリース PF/Dev フェーズ 担当者 審査には ガイドラインやポリシーが存在
  15. 35 ストアレビューのガイドライン / ポリシー Apple Inc. "App Store Reviewガイドライン -

    Apple Developer" https://developer.apple.com/jp/app-store/review/guidelines/ (参照: 2023/04/28) Google LLC "デベロッパー ポリシー センター" https://play.google.com/intl/ja/about/developer-content-policy/ (参照: 2023/04/28) iOS: App Store Reviewガイドライン Android: Google Play Policies
  16. 36 iOS: App Store Reviewガイドライン 4.2 最低限の機能 Appを作成する際は、Webサイトを単に再パッケージしたよ うなものではなく、優れた機能、コンテンツ、UIを作成するよう にしてください。特に便利でも、ユニークでも、「Appらしく」も

    ない場合、そのAppをApp Storeで提供することはできませ ん。Appが継続的に楽しめる何らかの価値、または十分な 有用性を備えていない場合は、承認されない可能性があり ます。Appが単に曲または映画の場合は、iTunes Storeに 提出してください。Appが単に書籍またはゲームの攻略本の 場合は、Apple Books Storeに提出してください。 Apple Inc. "App Store Reviewガイドライン - Apple Developer" https://developer.apple.com/jp/app-store/review/guidelines/#minimum-functionality (参照: 2023/04/28) • App Storeで提供できないもの • Webサイトを単に再パッケージしただけのもの • 便利でもユニークでもないもの • Appらしくないもの • 必要なもの • 優れた機能やコンテンツ、UI • 継続的に楽しめる何らかの価値 • 十分な有用性
  17. 37 Android: Google Play Policies 最低限の機能 ユーザーの興味を引き、操作に反応し、安定して動作するアプリにし てください。 違反の例 •

    何もしない、または何の機能も提供しないアプリ 不完全な機能 クラッシュ、強制終了、フリーズ、その他正常でない動作をするアプリ は認められません。 違反の例 • インストールできないアプリ • インストールできるが読み込まれないアプリ • 読み込まれるが応答しないアプリ Google LLC "最低限の機能 - Play Console ヘルプ" https://support.google.com/googleplay/android-developer/answer/9898783 (参照: 2023/04/28) • Google Play Storeで提供できないもの • 何もしないアプリ • 何の機能も提供しないアプリ • 正常でない動作をするアプリ • 必要なもの • ユーザーの興味を引く • 操作に反応をする • 安定した動作
  18. 40 iOSとAndroidの違いと共通点のまとめ ▌デザインや操作性についての規定がある ⚫iOS: Human Interface Guidelines ⚫Android: Material Design

    ▌ガイドラインやポリシーに従いストアの審査が行われる ⚫iOS: App Store Reviewガイドライン ⚫Android: Google Play Policies ▌審査にかかる時間は予想できない ⚫審査自体、リジェクト、再提出などはかかる時間が予想できない ⚫リジェクトされ公開できない場合もある
  19. 43 マルチプラットフォームアプリの構成 (1/3) iOS Android Web 共通 コード Web専用 コード

    Android 専用 コード iOS専用 コード iOS用の アプリ Android用の アプリ Web用の アプリ
  20. 44 マルチプラットフォームアプリの構成 (2/3) iOS Android Web 共通 コード Web専用 コード

    Android 専用 コード iOS専用 コード iOS用の アプリ Android用の アプリ Web用の アプリ プラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独立の部分 • ビジネスロジック • UI etc...
  21. 45 マルチプラットフォームアプリの構成 (3/3) iOS Android Web 共通 コード Web専用 コード

    Android 専用 コード iOS専用 コード iOS用の アプリ Android用の アプリ Web用の アプリ プラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独立の部分 • ビジネスロジック • UI etc... ビジネスロジックなどアプリの機能を 複数のプラットフォームで共通して提供可能 OSのAPIを直接呼ぶのが苦手 UIに違和感が残る可能性がある