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

20180724 MC Open Lab.#2アプリ最前線

ハイブリットなアプリ

そもそもネイティブアプリ作ったことない！ので

ちょっと、作る前に調べてみた

ネイティブアプリには

iOSとAndroidアプリがあるが

なんか、Androidのほうがハードル低そうだ
特に金銭的に・・・（ほかにもあるっちゃあるが割愛）

開発面では、もっと楽に開発できないか

開発はほかにも、UnityやCordova もあるが、ちょっと待てよ

Cordova とは

Cordova（コルドバ）は、オープンソースの
モバイルアプリケーション開発フレームワーク。

ニトビ・ソフトウエア社によってPhonegap（フォンギャップ）として開発が始められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによりPhoneGapはAdobeのプロダクトとなったが、そのソースコードがApache CordovaとしてApacheソフトウェア財団に寄贈され、コミュニティによってメンテナンスされている。（引用 ウィキペディア）

なんか素敵な予感の、Cordovaさん

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

構造は難しいので割愛はするが…

仕組み的には簡単で、HTML5をなんやかんやで簡単そう

Monacaをつくってみた

まずは…

Monacaを食ってみた！

でも、モナカ入ってなかった
https://press.monaca.io/kanako/1650 

Monacaを使ってみた！

あらゆるニーズに応える
NO.1アプリ開発クラウド！

HTML5でiOS & Android 向けのアプリを同時開発

HTML、JavaScriptなどのWeb標準言語でモバイルアプリ開発を行うことで、開発コスト高騰や技術者不足などアプリ開発に関わる課題が解決できます。

Web標準技術でモバイル アプリ開発

MonacaではHTML5、JavaScriptといったWeb標準技術を用いてiOS、Android向けのモバイルアプリを行うことができます。

iOS & Androidアプリを 同時開発

HTML5でアプリを開発するとiOSとAndroidのアプリを一つのソースコードで開発することができます。
同じアプリをOS毎に2つ開発する必要がなくなるため、ネイティブ開発に比較して開発工数も開発期間も大幅に短縮できます。

ネイティブ開発に引けを取らないUI表現

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

使わない手はないよね

そこで…

今回のテーマ

HTML5でハイブリットなアレの「アレ」とは

Google Play 登録アプリを作ってみる

まず何をしたかって言うと…

Google Play Console に登録する！

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

25ドル支払いました。2千円ちょっと・・・

これでほぼ完了です！？

＼Google Play キタコレ／

＼Firebase も ツイデニ／
今回使わないけど…

ここからがMonacaの出番です

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

Monaca - すべての人にアプリ開発を

ログインしたら

プロジェクトをさっそく作ってみよう
無料アカウントの場合は3プロジェクト作れます

プロジェクトXとして今回やってみましょう
クラウドIDEで開くを押す

そしたら開発画面到達！です

・・・デモ・・・

なんやかんややりました

データが格納終わったらビルドしてみよう！

なんやかんややるとあるとき突然こんなメッセージが

一日のビルド上限数に達しました。

無料プランはなんと、ビルドは一日3回までなので注意！

ビルドは1日3回まで！

・・・デモ・・・

ビルドのデモしていよいよVersion1.0の完了！

そしてなんやかんやリリースに必要な素材（アイコンとか）を掲載すると公開ができました！

Google Play にも掲載されました！！わーい！！

アプリ爆誕！！

まとめ

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

今回作ったアプリはただの4択ゲーム
ただのクソアプリです、アプリを作るには内容が大事、計画的に作りましょう！（作ることが目的にしちゃだめよ）

スライドにしたものは下記参照ください。

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