[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介

Transcript

1. アイディアを形に！ 【超入門】スマホアプリ開発〜リリースまでの 【超入門】流れをご紹介 チームラボ株式会社 スマートフォンチーム 最上 優 細谷 博之
2. Today’s Program 01 04 02 05 03 【超入門】スマホのOSとは 06 アプリ開発の基礎知識 マルチプラットフォーム どんなアプリを作るか いざ開発！ アプリの申請とリリースとは 07 アプリ開発の良いところ
3. 【超入門】 スマホのOSとは 01 02 03 04 05 06 07 01
4. 【超入門】スマホのOSとは iPhone？ Android？ スマホのOSとは
5. 【超入門】スマホのOSとは iPhone？ Android？ スマホのOSとは いやいや、 iPhoneじゃなくて iOSだよ
6. 【超入門】スマホのOSとは iPhone？ Android？ スマホのOSとは いやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね
7. 【超入門】スマホのOSとは iPhone？ Android？ スマホのOSとは いやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね HuaweiがHarmony OS を開発したみたい
8. 【超入門】スマホのOSとは iPhone？ Android？ スマホのOSとは いやいや、 iPhoneじゃなくて iOSだよ Windows Phone なんてのもあったよね HuaweiがHarmony OS を開発したみたい 次世代はFuchsiaだ！！
9. iOS スマホのOSとは 【超入門】スマホのOSとは
10. iOS スマホのOSとは 【超入門】スマホのOSとは
11. iOS (iPhone) iPhone = スマホ iOS = Appleが開発したスマホのOS iOSで動作しているスマホはiPhoneのみ iPadには iOSをカスタムした iPadOSが搭載されている 【超入門】スマホのOSとは
12. Android Googleが開発したスマホのOS オープンソースで公開されている OSをカスタムすることができ、様々な メーカーからAndroidを搭載したスマホ が発売されている Pixel (Google) Xperia（Sony） Galaxy（Samsung） AQUOS（Sharp） 【超入門】スマホのOSとは
13. Android Bot Androidのマスコット的キャラクター 日本では「ドロイドくん」と呼ばれて いる 最近3D化され、名称が ”Bugdroid” から変更された 旧 【超入門】スマホのOSとは
14. 両OSの共通点 高いセキュリティ 毎年新しいバージョンが公開されて いる アプリストアから利用したいアプリを インストールする 【超入門】スマホのOSとは
15. アプリストア アプリをダウンロードできるストア 厳正に審査され、審査に合格した アプリが掲載されている iOS, Androidどちらにもアプリを 公開したい場合、両方のストアに 申請する必要がある App Store 【超入門】スマホのOSとは
16. 各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 日本 33.82% 65.87% 【超入門】スマホのOSとは
17. 各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 33.82% 65.87% 日本 グローバル 【超入門】スマホのOSとは 世界全体では？
18. 各OSシェア（2023/2 - 2024/3） https://gs.statcounter.com/os-market-share 33.82% 65.87% 日本 グローバル 71.43% 27.84% 【超入門】スマホのOSとは
19. おさらい ✔ スマホのOSには主にiOSと Androidがある ✔ iOSはiPhoneを動かすためのOS ✔ Androidは様々なスマホを動かすた めのOS ✔ 日本はiOSのシェアが多いが、 世界ではAndroidのシェアが多い 【超入門】スマホのOSとは iOS
20. アプリ開発の基礎知識 02 02 03 04 05 06 07 01
21. 開発における違い アプリ開発の基礎知識 iOS 言語？ デザイン？ 開発環境？
22. Mac 必要なPC Mac, Windows Human Interface Guidelines デザインガイドライン Material Design プログラミング言語 　 　Xcode 開発環境 (IDE) 　　　Android Studio 開発における違い iOS アプリ開発の基礎知識
23. iOSのデザイン Human Interface Guidelines Apple製品を利用するユーザー にとって優れた体験を設計でき るようにするためのガイド アプリ開発の基礎知識
24. Androidのデザイン どのプラットフォームにおいても高品 質なUXを実現するデザインシステム 紙とインク、光の反射や影の落とし方 など、物理世界とそのテクスチャから インスピレーションを得ている Material Design アプリ開発の基礎知識
25. Androidのデザイン Material Design 3 new!! Material Designの最新バージョン 以前のMaterial Designから大きく 変更された アプリ開発の基礎知識
26. 言語 : Swift iOSやMac向けアプリを開発するた め、Appleが開発したオブジェクト指向 プログラミング言語 今話題のVision Pro向けのアプリも 開発できる アプリ開発の基礎知識
27. 開発環境 : Xcode iOSやMac向けアプリを開発するこ とができる開発環境(IDE) macOSで利用できる アプリ開発の基礎知識
28. 開発環境 : Xcode iOSやMac向けアプリを開発するこ とができる開発環境(IDE) macOSで利用できる ＝ Windowsでは利用できない Macが必要 アプリ開発の基礎知識
29. 言語 : Kotlin JetBrains社が開発した、Javaと互換性 を持つオブジェクト指向のプログラミング 言語 Java よりも簡潔に書けることを目指して 開発され、現在ではAndroidアプリ開発 にて広く利用されている Android開発ではJava言語も利用され ている アプリ開発の基礎知識
30. 開発環境 : Android Studio Androidアプリを開発することが できる開発環境(IDE) JetBrains社が開発した IntelliJ IDEAがベースになって いる MacでもWindowsでも利用でき る アプリ開発の基礎知識
31. Mac 必要なPC Mac, Windows Human Interface Guidelines デザインガイドライン Material Design プログラミング言語 　 　Xcode 開発環境 (IDE) 　　　Android Studio 開発における違い（おさらい） iOS アプリ開発の基礎知識
32. クロスプラットフォーム 03 04 05 06 07 01 02 03
33. アプリ開発するならどっち？ iOS アプリ作るんだったら、 どっちのユーザーにも使っ てもらいたい... 学習コストも大変... クロスプラットフォーム
34. アプリ開発するならどっち？ クロスプラットフォーム
35. Flutter Googleが開発したクロスプラット フォームSDK iOS, Androidなど複数のプラットフォー ムで利用できるアプリを同時に作成で きる Flutter開発と比較して、Swift, Kotlinで 開発することを「ネイティブ開発」と呼ぶ クロスプラットフォーム
36. Flutterのメリット・デメリット １ソースコードで両OSのアプリを開発 することができる 各OSの新機能や仕様変更への追従 に時間がかかる 片方のOSにしかない機能を実装する のが大変 😄 😢 クロスプラットフォーム
37. 言語 : Dart Flutter開発で使用する言語 Googleが開発したオブジェクト指 向型のプログラミング言語 動的型付けと静的型付けの使用 が可能 クロスプラットフォーム
38. Flutterの開発環境 お好きな方で👍 Visual Studio Code Android Studio plugin plugin クロスプラットフォーム
39. Visual Studio Code クロスプラットフォーム Microsoft社が提供する無償の コードエディタ 動作が軽く、拡張機能が豊富なの が特徴 “VS Code”と呼ばれることも
40. アプリ開発するならどっちどれ？ iOS クロスプラットフォーム
41. スマホゲームを開発したい！ ゲーム開発にはゲームに特化した 開発環境であるゲームエンジンを 利用しましょう UnityとUnreal Engineが主流 Flutterと同じく、１ソースコードで両 OSのアプリを開発できる クロスプラットフォーム
42. Unity 米国のUnity Technologiesが開 発したゲームエンジン ゲーム開発では世界シェアナン バー１ スマホ向けゲームアプリの開発が 得意 クロスプラットフォーム
43. Unreal Engine 米国のEpic Games社が開発した ゲームエンジン PCゲームやコンシューマーゲーム 開発の方が得意だが、スマホゲー ム開発できる クロスプラットフォーム
44. おさらい ✔ FlutterはDart言語のクロスプラット フォームSDK ✔ FlutterはVisual Studio Codeか Android Studioで開発を行う ✔ ゲームアプリを開発したい場合はUnity やUnreal Engineがおすすめ クロスプラットフォーム
45. どんなアプリを作るか 04 02 03 04 05 06 07 01
46. どんなアプリを作るか • アプリ？ゲーム？ • どんなオリジナル要素を入れ る？ • 何の機能を使う？ ◦ データ保存 ◦ ネットワーク通信 ◦ アラーム機能 etc… どんなアプリを作る？ こんなアプリ あったらいいな.oO
47. どんなアプリを作るか ガイドラインは守りましょう • 年齢制限 • 公序良俗 • 個人情報の取り扱い どんなアプリを作る？
48. どんなアプリを作るか 何から始めたらいいんだろう…？ → とりあえず手を動かしてみましょう • 入門書を購入し、本の通りに 実装してみる • Webの入門ガイドを一通り触る どんなアプリを作る？
49. iOS App Dev Tutorials どんなアプリを作るか
50. Training courses どんなアプリを作るか
51. codelab どんなアプリを作るか
52. iOS 好きな開発環境を １つを選ぶんじゃ どんなアプリを作るか 開発環境を決めよう
53. iOS 日本のユーザーが多い！ 機種依存が少ない（Apple製のスマホ） Macが必要 アプリをストアに公開するために、毎年$99 必要 😄 😢 どんなアプリを作るか 開発環境を決めよう
54. 公式ドキュメントがとても充実している Macが無くても開発できる 海外ユーザーが多い 日本ではユーザーが少ない メーカーや端末固有のバグが発生する 😢 どんなアプリを作るか 開発環境を決めよう 😄
55. iOS, Androidどちらのアプリも開発できる iOSの動作確認や申請をしたい場合はMacが 必要 両OSの知識が必要になる （申請周り, ハードウェア, etc…） 😄 😢 どんなアプリを作るか 開発環境を決めよう
56. どんなアプリを作るか 開発環境を決めよう iOS この選択がきっかけで 人生が決まる人もいるよ
57. 02 03 04 05 06 07 01 Speaker交代します！ 小休止
58. いざ開発！ 05 02 03 04 05 06 07 01
59. 開発に必要なもの • PC • スマホ実機 (optional) ◦ 各開発環境にシミュレーターが同梱され ており、PC上で動作確認が可能 ◦ Bluetoothなどハードウェアの機能を利 用した動作確認では実機が必要 • デベロッパー登録 いざ開発！
60. デベロッパー登録 ✔ アプリを各ストアへの申請する際に必要 • iOS：App Store Connect • Android：Google Play Console ✔ 一部の機能を利用する場合に事前に各ストアでの設定が必要 • プッシュ通知、アプリ内課金、 etc. ✔ 登録費用 • Apple Developer Program：年間 $99 • Google Play Console：初回登録時 $25 いざ開発！
61. 開発 ※開発について語ると１講義では終わらないので、ここでは 　良くあるTipsを紹介します いざ開発！
62. 実装に困った時は • 各OSが提供している機能で迷ったらまず公式、公式が一番正しい • 機能名や表示されたエラーをキーワードにWebで調べるのもあり いざ開発！
63. git・GitHub git：ソースコードのバージョン管理システム Github：gitの機能を提供するオンラインサービス • 改変履歴がわかりやすい • 過去のバージョンに戻せる チーム開発においてはほぼ必須 いざ開発！ MyApp_20240324 MyApp_20240325 MyApp_20240326 MyApp_20240326_2
64. Firebase アプリの構築と拡大を支援するアプリ開発プ ラットフォーム • ユーザー分析 • クラッシュ分析 • プッシュ通知の配信 • 簡易的なサーバー構築 • ユーザー認証機能 • etc. いざ開発！
65. テスト 実機やシミュレーターで実際にアプリを動かして、想定通りに動作するか 確認しましょう • 正常パターンはきちんと動作するか？ • エラーパターンの網羅は？ • 複数のスクリーンサイズでレイアウトは崩れはないか？ • OSバージョンによって挙動が変化しないか？ いざ開発！
66. テスト １画面・１機能・１パーツと細かい単位で日頃から動作確認していくと◎ → 影響・修正範囲が把握しやすくなる いざ開発！
67. アプリの申請とリリースとは 06 02 03 04 05 06 07 01
68. ストアに掲載するためには必ずApple・Googleによる審査を通過する必要がある 申請する → アプリを審査に提出する 審査ではどんなことをチェックされる？ • ガイドライン満たしているか • ストアに掲載する情報は正確か ◦ タイトル・説明・スクリーンショット・価格・年齢制限・配信国・etc. • きちんと動作するか ◦ 画面が遷移できるか・機能が利用できるか・etc. ◦ サーバーに接続できるか・Webページが表示されるか・etc. • etc. アプリの申請とは アプリの申請とリリースとは
69. なぜ審査が必要なのか ユーザーに安全で、品質が高く、使いやすいアプリを提供するため ✔ 品質の確保 インターフェース、パフォーマンスなどが一定の品質基準を満たしているか ✔ セキュリティとプライバシーの保護 マルウェアやスパイウェアなど個人情報を脅かすリスクの低減 ✔ 法律と規制への準拠 知的財産権の侵害、不正行為など法律や規制に準拠しているか ✔ ユーザーエクスペリエンスの一貫性 ガイドラインに準拠することでストア全体で一貫性と利用しやすさの担保 アプリの申請とリリースとは
70. 申請するまでの流れ 初回ではなく、アップデートやストア掲載情報の更新時も申請が必要 アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請！ 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
71. 申請用ファイルの作成 各開発環境で作成する • iOS：Xcode → ipaファイル • Android：Android Studio → aabファイル アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
72. ストアへアップロード iOS → ipaファイルを App Store Connect へアップロード Android： → aabファイルを Play Console へアップロード アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
73. アプリ情報の入力 App Store Connect・Play Console上で入力 • タイトル・説明・検索キーワード • スクリーンショット • 問い合わせ先・サイトURL • 年齢制限・配信国 • 価格・課金アイテム価格・サブスク価格 • 収集するユーザー情報の取り扱い • etc… ✔ 以降は変更がある項目の編集と更新情報のみで OK アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
74. 申請 リリース方法が選択可能 • 審査通過後に自動で公開 • 審査通過後に手動で公開 • 日時指定（iOSのみ） App Store Connect・Play Console上の審査提出ボタン押下で申請！ • 審査期間 ◦ iOS：平均24時間以内 ◦ Android：数時間から最長で 7 日程度 → アプリの内容・規模によって前後するため、余裕をもった申請が必要 アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
75. 通過 or NG… 通過 • おめでとうございます！アプリをリリースする準備が整いました！ • この状態からアプリ情報の更新はほぼ不可 ◦ 変更内容によっては再申請が必要 NG • 各ストア上やメールにてNG理由が案内される ◦ 修正して再度申請 • 審査に落ちることをよく「リジェクトされる」と呼ばれている アプリの申請とリリースとは 　 申請用ファイルの 作成 ストアへ アップロード アプリ情報の 入力 　通過 or NG… 申請
76. NG例 アプリの申請とリリースとは
77. リリース ✔ 🎉🎉🎉 ✔ 公開ボタンを押下するとストアに反映され、アプリが表示されるようになる ✔ 実際に表示されるまで１時間ほどかかる - ストアへのデータ反映まで時間がかかる模様 ✔ 良いアプリだと「おすすめ」や「新着」にとりあげられることも アプリの申請とリリースとは
78. リリース後に起こること ✔ 不具合の修正 • 各ストアのクラッシュログやレビューから確認・分析 • Firebaseなど分析ツールを導入しておくとより 詳細がわかり修正しやすくなる ✔ 毎年公開される新バージョン OSへの対応 • 互換性やOSレベルの仕様変更への対応 • 開発環境も定期的に更新していく必要がある ✔ 新機能の追加 • 自分が持っているアプリのビジョンや ユーザーレビューの反映 → 繰り返し行うことでユーザビリティ・ユーザーエクスペリエンスの向上させていく → 更なるユーザーの獲得・満足度向上による継続利用率の上昇 アプリの申請とリリースとは
79. ここまでの内容を聴いておそらく皆さんが考えている事… やること・考えること、多くない…🤔？？
80. アプリ開発の良いところ 07 02 03 04 05 06 07 01
81. アプリ開発の良いところ ✔ 自分のアイディアや作ったサービスを世界中の人々に手元に届けることができる • 世界のスマートフォン普及率は約70％、55億人 ◦ 日本の普及率は約90% → 多くの人に触ってもらえる可能性がある アプリ開発の良いところ
82. アプリ開発の良いところ ✔ 外部ハードウェア・規格との連携によるアプリの範囲を超えたサービスの提供 • QRやタッチによる決済・スマホが鍵になる・リモートで操作でハードウェアを 操作できる・etc. アプリ開発の良いところ
83. アプリ開発の良いところ ✔ 毎年新しいOSの発表があり、技術革新が進む • スマートウォッチとの連携・ホーム画面のカスタマイズ・etc. アプリ開発の良いところ
84. アプリ開発の良いところ ✔ パソコン１つで始められる アプリ開発の良いところ
85. アプリ開発の良いところ ✔ パソコン１つで始められる あなたもアイディアを形にしてみませんか アプリ開発の良いところ
86. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik ご清聴ありがとうございました 本日はチームラボによるアカデミアにご参加いただき、 誠にありがとうございました！
87. EOF