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

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

MC Open Lab. #2 アプリ最前線 ビアバッシュLT会
2018/07/24(火) 発表資料
https://memberscareer.connpass.com/event/91687/

Cordova とは
Web標準技術でアプリ開発！
Monacaを使ってみた！
Monacaを食ってみた！
モナカ 入ってなかった！
Monacaな理由その１
Monacaな理由その２
Monacaな理由その３
Monacaな理由その４
使わない手はない！
Google Play に登録した件
Google Play Console に登録する！
25ドル支払った！
これでほぼ完了です！？
＼Google Play キタコレ／
＼Firebase も ツイデニ／
無料のアカウント登録して
＼開発画面到達／
なんやかんや
ビルドしてみた！
ビルドは1日3回まで！
デモ
Project v1.0.0 ビルド完了！
アプリ爆誕！

まとめ
１．Web屋ならアプリは Monaca イイ！
２．Monaca ならWeb用でも動く！
３．Google Play 掲載も、$25で！
４．ただ作るだけではクソアプリ!!

Transcript

1. 1 HTML5 で ハイブリットな アプリ開発 を アレしてみた件 20180724 MC Open Lab.#2アプリ メンバーズキャリア Kurita T ※配布用（イベント時の編集版です）
2. 2 ハイブリットなアプリ
3. 3 そもそも アプリ作ったことない！
4. 4 ちょっと調べてみた！
5. 5 ネイティブアプリ
6. 6 iOSアプリ Androidアプリ . 開発言語 objective-C、Swift Java、C++、Kotlin 開発ツール XCode Eclipse、Android Studio 開発費用 iOS $100/年（毎年） Google Play 登録料 $25 審査 なんかうるさい 自動化、かんたん テスト TestFlight を利用（Max 25） 提供元不明でも、apk直可 開発画面 iOS と Android こっち かな
7. 7 もっと楽に開発できないか
8. 8 Unity Cordova 開発言語 C# HTML5、JS、CSS 開発ツール Unity monaca 開発費用 ライセンス無料～ ライセンス無料～ 特徴 GUIで開発するゲーム開発エンジン WebViewベースでアプリ開発 対象OS iOS / Android 他いろいろ iOS / Android / Windows 開発画面 開発は他にも！ これだ！ これで！
9. 9 Cordova とは コ ル ド バ Cordova（コルドバ）は、オープンソースの モバイルアプリケーション開発フレームワーク。 ニトビ・ソフトウエア社によってPhonegap（フォンギャップ）として開発が始 められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによ りPhoneGapはAdobeのプロダクトとなったが、そのソースコードがApache CordovaとしてApacheソフトウェア財団に寄贈され、コミュニティによってメ ンテナンスされている。 （引用 ウィキペディア） Cordovaを利用しているサービスではアドビシステムズ社が提供している PhoneGap／PhoneGap Buildやアシアル社が提供しているMonacaが有名。
10. 10 Cordova とは コ ル ド バ WebView上にHTMLをロードしてUIを作成するので、Web開 発と同じ方法でモバイルアプリ開発が可能 Web標準技術でアプリ開発！ HTML5 CSS3 Javascript
11. 11 Cordova の構造 コ ル ド バ HTML5、JS、CSS WebView ネイティブ（C言語) 各種OS（Android、iOS、Windows） 基本SDKライブラリ Apache Cordova
12. 12 Cordova層 Cordova の仕組み コ ル ド バ HTML5層 WebView OS アプリ本体はHTML5で実装 CordovaがOSに合わせた ネイティブコードを提供 １．JavascriptでAPIを実行 2. Cordova がネイティブ機能を実行
13. 13 Monacaを使ってみた！ 引用：https://ja.monaca.io
14. 14 まずは 引用：https://ja.monaca.io
15. 15 食ってみた！ 引用：https://ja.monaca.io
16. 16 まずは 引用：https://ja.monaca.io モナカ 入ってなかった！
17. 17 Monacaを使ってみた！ https://ja.monaca.io/ 引用：https://ja.monaca.io
18. 18 HTML5でiOS & Android 向けのアプリを同時開発 HTML、JavaScriptなどのWeb標準言語でモバイルアプ リ開発を行うことで、開発コスト高騰や技術者不足な どアプリ開発に関わる課題が解決できます。 引用：https://ja.monaca.io Monacaな理由その１
19. 19 Web標準技術でモバイル アプリ開発 MonacaではHTML5、JavaScriptといったWeb標準技術 を用いてiOS、Android向けのモバイルアプリを行うこ とができます。 引用：https://ja.monaca.io Monacaな理由その２
20. 20 iOS & Androidアプリを 同時開発 HTML5でアプリを開発するとiOSとAndroidのアプリを一 つのソースコードで開発することができます。 引用：https://ja.monaca.io Monacaな理由その３ 同じアプリをOS毎に2つ開発する必要がなくなるため、 ネイティブ開発に比較して開発工数も開発期間も大幅 に短縮できます。
21. 21 ネイティブ開発に引けを 取らないUI表現 Monacaには世界的に利用されているUIライブラリ Onsen UI が標準搭載されています。 引用：https://ja.monaca.io Monacaな理由その４ Onsen UI を使えばiOSとAndroidのUIコンポーネントや 画面遷移をHTML5で簡単に表現できます。HTML5モバ イルアプリでもネイティブ開発に引けをとらない高品 質なUI表現を行うことができます。
22. 22 使わない手はない！ 引用：https://ja.monaca.io
23. 23 そこで・・・ 引用：https://ja.monaca.io
24. 24 お題！ 引用：https://ja.monaca.io
25. 25 使わない手はない！ 引用：https://ja.monaca.io Google Play に登録した件 アレ HTML5でハイブリットなアプリ開発を
26. 26 まずなにしたかって？ 引用：https://ja.monaca.io
27. 27 Google Play Console に登録する！ 1.Google Play デベロッパー アカウントを作成します 2.デベロッパー販売 / 配布契約に同意します 3.登録料を支払います ⇒1 回限りの登録料（$25 USD）が必要になります。
28. 28 25ドル支払った！
29. 29 これでほぼ完了です！？
30. 30 ＼Google Play キタコレ／
31. 31 ＼Firebase も ツイデニ／
32. 32 ここから
33. 33 無料のアカウント登録して
34. 34 https://monaca.mobi/ja/login 引用：monaca ログインしたら・・・
35. 35 引用：monaca
36. 36 引用：monaca
37. 37 引用：monaca ＼開発画面到達／
38. 38 なんやかんや
39. 39 ビルドしてみた！
40. 40 引用：monaca
41. 41 引用：monaca ビルドは1日 3回まで！
42. 42 デモ
43. 43 引用：monaca Project v1.0.0 ビルド完了！
44. 44 引用：monaca 公開！
45. 45 引用：monaca Google Playにも 出た！
46. 46 アプリ爆誕！
47. 47 まとめ 1. Web屋ならアプリは Monaca イイ！ 2. Monaca ならWeb用でも動く！ 3. Google Play 掲載も、$25で！ 4. ただ作るだけではクソアプリ!!
48. 48 ご静聴ありがとうございました