MC Open Lab. #2 アプリ最前線 ビアバッシュLT会 2018/07/24(火) 19:30 〜 21:30 HTML5でハイブリットなアプリ開発をアレしてみた件 https://memberscareer.connpass.com/event/91687/

1. 1

2. 2
HTML5で
ハイブリットな
アプリ開発を
アレしてみた件

3. 3
ハイブリットなアプリ

4. 4
そもそも
アプリ作ったことない！

5. 5
ちょっと調べてみた！

6. 6
ネイティブアプリ

7. 7
iOSアプリ Androidアプリ .
開発言語 objective-C、Swift Java、C++、Kotlin
開発ツール XCode Eclipse、Android Studio
開発費用 iOS $100/年（毎年） Google Play 登録料 $25
審査 なんかうるさい 自動化、かんたん
テスト TestFlight を利用（Max 25） 提供元不明でも、apk直可
開発画面
iOS と Android
こっち
かな

8. 8
もっと楽に開発できないか

9. 9
Unity Cordova
開発言語 C# HTML5、JS、CSS
開発ツール Unity monaca
開発費用 ライセンス無料～ ライセンス無料～
特徴 GUIで開発するゲーム開発エンジン WebViewベースでアプリ開発
対象OS iOS / Android 他いろいろ iOS / Android / Windows
開発画面
開発は他にも！
これだ！
これで！

10. 10
Cordova とは
コ ル ド バ
Cordova（コルドバ）は、オープンソースの
モバイルアプリケーション開発フレームワーク。
ニトビ・ソフトウエア社によってPhonegap（フォンギャップ）として開発が始
められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによ
りPhoneGapはAdobeのプロダクトとなったが、そのソースコードがApache
CordovaとしてApacheソフトウェア財団に寄贈され、コミュニティによってメ
ンテナンスされている。
（引用 ウィキペディア）
Cordovaを利用しているサービスではアドビシステムズ社が提供している
PhoneGap／PhoneGap Buildやアシアル社が提供しているMonacaが有名。

11. 11
Cordova とは
コ ル ド バ
WebView上にHTMLをロードしてUIを作成するので、Web開 発と同じ方法でモバイルアプリ開発が可能
Web標準技術でアプリ開発！
HTML5 CSS3 Javascript

12. 12
Cordova の構造
コ ル ド バ
HTML5、JS、CSS
WebView
ネイティブ（C言語)
各種OS（Android、iOS、Windows）
基本SDKライブラリ
Apache Cordova

13. 13
Cordova層
Cordova の仕組み
コ ル ド バ
HTML5層
WebView
OS
アプリ本体はHTML5で実装
CordovaがOSに合わせた
ネイティブコードを提供
１．JavascriptでAPIを実行
2. Cordova がネイティブ機能を実行

14. 14
Monacaを使ってみた！
引用：https://ja.monaca.io

15. 15
まずは
引用：https://ja.monaca.io

16. 16
食ってみた！
引用：https://ja.monaca.io

17. 17
まずは
引用：https://ja.monaca.io
モナカ 入ってなかった！

18. 18
Monacaを使ってみた！
https://ja.monaca.io/
引用：https://ja.monaca.io

19. 19
HTML5でiOS & Android
向けのアプリを同時開発
HTML、JavaScriptなどのWeb標準言語でモバイルアプ
リ開発を行うことで、開発コスト高騰や技術者不足な
どアプリ開発に関わる課題が解決できます。
引用：https://ja.monaca.io
Monacaな理由その１

20. 20
Web標準技術でモバイル
アプリ開発
MonacaではHTML5、JavaScriptといったWeb標準技術
を用いてiOS、Android向けのモバイルアプリを行うこ
とができます。
引用：https://ja.monaca.io
Monacaな理由その２

21. 21
iOS & Androidアプリを
同時開発
HTML5でアプリを開発するとiOSとAndroidのアプリを一
つのソースコードで開発することができます。
引用：https://ja.monaca.io
Monacaな理由その３
同じアプリをOS毎に2つ開発する必要がなくなるため、
ネイティブ開発に比較して開発工数も開発期間も大幅
に短縮できます。

22. 22
ネイティブ開発に引けを
取らないUI表現
Monacaには世界的に利用されているUIライブラリ
Onsen UI が標準搭載されています。
引用：https://ja.monaca.io
Monacaな理由その４
Onsen UI を使えばiOSとAndroidのUIコンポーネントや
画面遷移をHTML5で簡単に表現できます。HTML5モバ
イルアプリでもネイティブ開発に引けをとらない高品
質なUI表現を行うことができます。

23. 23
使わない手はない！
引用：https://ja.monaca.io

24. 24
そこで・・・
引用：https://ja.monaca.io

25. 25
お題！
引用：https://ja.monaca.io

26. 26
使わない手はない！
引用：https://ja.monaca.io
Google Play に登録した件
アレ
HTML5でハイブリットなアプリ開発を

27. 27
まずなにしたかって？
引用：https://ja.monaca.io

28. 28
Google Play Console
に登録する！
1.Google Play デベロッパー アカウントを作成します
2.デベロッパー販売 / 配布契約に同意します
3.登録料を支払います
⇒1 回限りの登録料（$25 USD）が必要になります。

29. 29
25ドル支払った！

30. 30
これでほぼ完了です！？

31. 31
＼Google Play キタコレ／

32. 32
＼Firebase も ツイデニ／

33. 33
ここから

34. 34
無料のアカウント登録して

35. 35
https://monaca.mobi/ja/login
引用：monaca
ログインしたら・・・

36. 36
引用：monaca

37. 37
引用：monaca

38. 38
引用：monaca
＼開発画面到達／

39. 39
なんやかんや

40. 40
ビルドしてみた！

41. 41
引用：monaca

42. 42
引用：monaca
ビルドは1日3回まで！

43. 43
デモ

44. 44
引用：monaca
Project v1.0.0 ビルド完了！

45. 45
引用：monaca
公開！

46. 46
引用：monaca
Google Playにも
出た！

47. 47
アプリ爆誕！

48. 48
まとめ
1. Web屋ならアプリは Monaca イイ！
2. Monaca ならWeb用でも動く！
3. Google Play 掲載も、$25で！
4. ただ作るだけではクソアプリ!!

49. 49
ご静聴ありがとうございました

50. 50