Pro Yearly is on sale from $80 to $50! »

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

31959fb2d8d72f6cbf96a13e17107ff8?s=47 kurita
July 24, 2018

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

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

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

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

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

31959fb2d8d72f6cbf96a13e17107ff8?s=128

kurita

July 24, 2018
Tweet

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に合わせた ネイティブコードを提供 1.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な理由その1

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

  20. 20 iOS & Androidアプリを 同時開発 HTML5でアプリを開発するとiOSとAndroidのアプリを一 つのソースコードで開発することができます。 引用:https://ja.monaca.io Monacaな理由その3 同じアプリをOS毎に2つ開発する必要がなくなるため、

    ネイティブ開発に比較して開発工数も開発期間も大幅 に短縮できます。
  21. 21 ネイティブ開発に引けを 取らないUI表現 Monacaには世界的に利用されているUIライブラリ Onsen UI が標準搭載されています。 引用:https://ja.monaca.io Monacaな理由その4 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 ご静聴ありがとうございました

  49. 49