モバイル【サイボウズ新人研修2025】

モバイル開運研修

2 この講義について ▌想定受講者 ⚫Webアプリ開発の基礎知識がある方 ⚫モバイルアプリの開発経験のない方 ▌学ぶこと ⚫Webアプリ開発から見たモバイルアプリ開発 ⚫モバイルアプリ開発の特徴

3 ネイティブアプリとWebアプリ (1/5) ▌ネイティブアプリはOSの上 OS (Operating System) ネイティブアプリ

4 ネイティブアプリとWebアプリ (2/5) ▌ネイティブアプリはOSの上 ▌WebアプリはWebブラウザの上 Webアプリ Webブラウザ OS ネイティブアプリ

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

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

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

8 ネイティブアプリとモバイルアプリ ▌モバイルアプリ → モバイルOS向けのネイティブアプリモバイル向けOS (iOS, Androidなど) Webブラウザモバイルアプリ
Webアプリ

9 ここまでのまとめ ▌ネイティブアプリはOSの上で動作 → OSのAPIを呼び出す ▌WebアプリはWebブラウザの上で動作 → ブラウザのAPIを呼び出す ▌Webブラウザはネイティブアプリ ▌モバイルアプリはモバイル向けOS用のネイティブアプリ

10 モバイルアプリとWebアプリの違い

11 Webアプリの利用 ▌WebアプリはサーバーからHTMLやJSなどのファイルをロード ▌プログラムもリソースもブラウザが一時的に保持サーバー HTML CSS JS PNG サーバーからロード
端末ブラウザ x JS ダウンロードされたファイル群はキャッシュされる

12 モバイルアプリの利用 ▌アプリストアからアプリをインストール ▌アプリのプログラムやリソースは本体の永続記憶領域に保存モバイルアプリアプリストアからインストール端末アプリアプリストア
アプリパッケージアンインストールしない限り消えない

13 アプリストアの存在 ▌モバイルアプリはアプリの配布に Google Play Store / AppStore を使用アプリ開発
ストアの審査公開アプリ開発公開アプリ開発者ストア管理者 Webアプリモバイルアプリ

21 動作環境 - Webアプリの開発 ▌複数のブラウザで利用可能 ⚫ブラウザの仕様の違いを考慮して開発 Firefox Chrome Safari x
JS x JS x JS x JS 同じアプリを複数ブラウザで動かす

22 動作環境 - モバイルアプリの開発 ▌OSごとにアプリを作成 ⚫世界観やデザイン、設計思想がOSによって異なる ⚫OSごとに開発用SDKが提供 ▌ライフサイクルやスレッド、OS独自の機能への対応 iOS Android
iOS アプリ Android アプリ OS専用のアプリ

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": [] } 返ってきたデータを元に再描画

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

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に相当

26 モバイルとWebの違いのまとめ Webアプリモバイルアプリ • ファイルをサーバーからダウンロード • ファイルはキャッシュされる • デプロイしたら公開
• 同じアプリを複数のブラウザで実行 • アプリストアからインストール • 明示的に削除しなければ消えない • アプリストアの審査が行われる • OSごとにアプリを開発 • OSごとに設計思想や世界観がある • コンポーネントの集まりで構成 • HTTP APIを呼び出す場合が多い SPA

iOSとAndroidの違いと共通点 27

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)

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)

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)

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

32 アクセシビリティ ▌iOSとAndroidはWebと同様に読み上げ機能を提供可能  <button type="submit"> <img src="..."
alt="送信"> </button> // Android (Jetpack Compose) Button(onClick = {}) { Icon( painter = ..., contentDescription = "送信" ) } // iOS (SwiftUI) Button(action: {}) { Image( "...", label: Text("送信") ) }

33 サイボウズのアプリリリースまでの流れ (1/2) 開発 Dev ビルド CI 自動テスト CI アーカイブ
CI 社内配信 CD 審査 PF 機能試験 QA リリース PF/Dev フェーズ担当者

34 サイボウズのアプリリリースまでの流れ (2/2) 主導権はCybozu (開発側) 主導権はプラットフォーマー (Apple / Google) 開発
Dev ビルド CI 自動テスト CI アーカイブ CI 社内配信 CD 審査 PF 機能試験 QA リリース PF/Dev フェーズ担当者審査にはガイドラインやポリシーが存在

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

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 • 継続的に楽しめる何らかの価値 • 十分な有用性

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

38 リリースタイミングの調整 ▌審査が終わるまでの時間は不確定 ⚫通常は半日から3日ほどで完了 ▌審査で問題が起きた場合 → 追加対応と再審査が必要 ▌任意のリリース日を指定するにはテクニックが必要 ⚫リリース予定日の十分前に審査を通す ⚫審査が通ったバージョンを手動リリースまたは公開日時指定を行いリリース

39 リジェクトされることがある ▌審査に通るためにはプラットフォーマーの要件を満たす必要がある ⚫ストア審査のガイドラインやポリシーへの準拠 ⚫デザインガイドラインへの準拠 ⚫プライバシーポリシーの提供 ⚫データポリシーの提供 ▌リジェクトされた場合 ⚫要件を満たして審査に再提出 ⚫審査員に事情を説明して交渉
⚫場合によっては手詰まりでストアでの公開ができないことも

40 iOSとAndroidの違いと共通点のまとめ ▌デザインや操作性についての規定がある ⚫iOS: Human Interface Guidelines ⚫Android: Material Design
▌ガイドラインやポリシーに従いストアの審査が行われる ⚫iOS: App Store Reviewガイドライン ⚫Android: Google Play Policies ▌審査にかかる時間は予想できない ⚫審査自体、リジェクト、再提出などはかかる時間が予想できない ⚫リジェクトされ公開できない場合もある

他のモバイルアプリの形態 41

42 マルチプラットフォーム ▌複数の異なるOSや環境で動かすことができること ⚫同じコードでAndroid用、iOS用アプリが作れるという感じ ⚫クロスプラットフォームとも ▌モバイル向けの代表的なマルチプラットフォームフレームワーク React Native Kotlin Multiplatform
Flutter

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

Android 専用コード iOS専用コード iOS用のアプリ Android用のアプリ Web用のアプリプラットフォーム固有の部分 • 位置情報の取得 • ネットワーク状態の取得 etc... プラットフォーム独立の部分 • ビジネスロジック • UI etc...

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

46 PWA (Progressive Web Apps) ▌新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用して、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。[1] ▌PWAはネイティブアプリのように
⚫ホーム画面に追加可能 ⚫オフラインでも使える ⚫通知を受け取れる [1] "プログレッシブウェブアプリ (PWA) | MDN" https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

47 まとめ ▌モバイルアプリはネイティブアプリの一種 ▌モバイルアプリとWebアプリは使用する環境が異なるため使用する技術も関心事も異なる ▌プラットフォームごとに世界観が存在 ⚫デザインガイドライン / デザインシステムが存在 ⚫リリース前に審査が行われガイドラインやポリシーなどのチェックが行われる
⚫要件を満たさない場合はリジェクトされることもある ▌モバイルアプリの形態は複数存在 ⚫ネイティブSDKやマルチプラットフォームフレームワーク、PWA

モバイル【サイボウズ新人研修2025】

モバイル【サイボウズ新人研修2025】

Cybozu PRO

More Decks by Cybozu

Featured

Transcript

モバイル開運研修

2 この講義について ▌想定受講者 ⚫Webアプリ開発の基礎知識がある方 ⚫モバイルアプリの開発経験のない方 ▌学ぶこと ⚫Webアプリ開発から見たモバイルアプリ開発 ⚫モバイルアプリ開発の特徴

3 ネイティブアプリとWebアプリ (1/5) ▌ネイティブアプリはOSの上 OS (Operating System) ネイティブアプリ

4 ネイティブアプリとWebアプリ (2/5) ▌ネイティブアプリはOSの上 ▌WebアプリはWebブラウザの上 Webアプリ Webブラウザ OS ネイティブアプリ

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

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

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

8 ネイティブアプリとモバイルアプリ ▌モバイルアプリ → モバイルOS向けのネイティブアプリモバイル向けOS (iOS, Androidなど) Webブラウザモバイルアプリ

10 モバイルアプリとWebアプリの違い

11 Webアプリの利用 ▌WebアプリはサーバーからHTMLやJSなどのファイルをロード ▌プログラムもリソースもブラウザが一時的に保持サーバー HTML CSS JS PNG サーバーからロード

12 モバイルアプリの利用 ▌アプリストアからアプリをインストール ▌アプリのプログラムやリソースは本体の永続記憶領域に保存モバイルアプリアプリストアからインストール端末アプリアプリストア

13 アプリストアの存在 ▌モバイルアプリはアプリの配布に Google Play Store / AppStore を使用アプリ開発

21 動作環境 - Webアプリの開発 ▌複数のブラウザで利用可能 ⚫ブラウザの仕様の違いを考慮して開発 Firefox Chrome Safari x

22 動作環境 - モバイルアプリの開発 ▌OSごとにアプリを作成 ⚫世界観やデザイン、設計思想がOSによって異なる ⚫OSごとに開発用SDKが提供 ▌ライフサイクルやスレッド、OS独自の機能への対応 iOS Android

23 MPAとSPA ▌MPA (Multi Page Application) ⚫サーバーはリソースごとに異なるHTMLを返す ⚫複数のHTML (ページ) から構成

24 SPAとモバイル (1/2) サーバーブラウザ x JS /v1/usersをくれ { "users":

25 SPAとモバイル (2/2) サーバーブラウザ x JS /v1/usersをくれ { "users":

26 モバイルとWebの違いのまとめ Webアプリモバイルアプリ • ファイルをサーバーからダウンロード • ファイルはキャッシュされる • デプロイしたら公開

iOSとAndroidの違いと共通点 27

28 デザインガイドラインとデザインシステム iOS: Human Interface Guidelines Android: Material Design Apple

30 Android: Material Design ▌現実世界に基づいたマテリアル (物質) というメタファーを用いて直感的な操作性と一貫性を持たせたデザインを提供して、ユーザーの操作を補助 ▌Material ComponentsやJetpack

31 デザインガイドライン / デザインシステム Apple Inc. SF Symbols. version 4.0

32 アクセシビリティ ▌iOSとAndroidはWebと同様に読み上げ機能を提供可能  <button type="submit"> <img src="..."

33 サイボウズのアプリリリースまでの流れ (1/2) 開発 Dev ビルド CI 自動テスト CI アーカイブ

34 サイボウズのアプリリリースまでの流れ (2/2) 主導権はCybozu (開発側) 主導権はプラットフォーマー (Apple / Google) 開発

35 ストアレビューのガイドライン / ポリシー Apple Inc. "App Store Reviewガイドライン -

37 Android: Google Play Policies 最低限の機能ユーザーの興味を引き、操作に反応し、安定して動作するアプリにしてください。違反の例 •

40 iOSとAndroidの違いと共通点のまとめ ▌デザインや操作性についての規定がある ⚫iOS: Human Interface Guidelines ⚫Android: Material Design

他のモバイルアプリの形態 41

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

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

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