KIMUSON BLOG

きむそんの雑記ブログ

HTML5で簡単にアプリ開発ができるサービス「Monaca」を使ってみた!

この記事をシェアする

f:id:samuraikid520:20180118232921p:plain

趣味でスマートフォンアプリを勉強してた時期があったんですが、最近クラウドソーシングの案件内容とか見ていると必要スキルに「Monaca」の利用経験が条件になっていたのを見かけたりします。

Monacaって聞いたことあるけどそもそも何なのかとっても気になったので調べてみました。

Monaca」とは?

Monacaは、クラウドベースの開発プラットフォームです。 HTML5JavaScriptを用いることで、iOSAndroidの両OSに対応したクロスプラットフォームアプリ開発を実現しました。 また、MonacaではWebブラウザを通じて全サービスが提供されます。
参考:アプリ開発プラットフォーム : Monaca | アシアル株式会社

つまり今までiOSアプリを作成するならSwift,Androidアプリを作るならJavaかKotlinと言う別々のプログラミング言語を理解する必要がありました。

自分は両方ともかじった程度ですが、フレームワークの仕様とか完全に別物なので結構勉強するのが辛かったです。。。

それが、HTML5JavaScriptで作成できてしまうらしい!

どちらの言語もWEB開発でも使うし、ここで勉強しちゃえば一石二鳥!

Monaca」の魅力

では具体的にMonacaで何ができるのか見てみます。

全てクラウド上で開発が可能!

もう煩わしい開発環境の構築は必要ありません。
ブラウザに繋げばいつでも開発ができます。

デバックも超簡単!

オンライン上でリアルタイムにソースを取得し、実機で挙動を確認することが可能です。
また、USBにつないで確認することもできるようです。

Monaca」で作られたアプリ

ja.monaca.io

中には以下のような大手企業も「Monaca」を使っているようです。

実際にMonacaを使ってみた。

①早速、githubアカウントでログイン!するとダッシュボードが開かれる。
「Create Project」を押下して新しいProjectを作成する。
f:id:samuraikid520:20180118230646p:plain

② 「Sample Applications」タブを選択
[f:idamuraikid520:20180118231246p:plain]

③「Hello World」の「Create New」を押下
f:id:samuraikid520:20180118231454p:plain

④ 「Project Name」に「初めてのMonaca」と入力して、「Make Project」を押下
f:id:samuraikid520:20180118231614p:plain

⑤ Projectができました!
f:id:samuraikid520:20180118232124p:plain

⑥projectを開いてみます。
f:id:samuraikid520:20180118232207p:plain

⑦開きました。いきなりHTMLが出てきた!これってもしかして。。。
f:id:samuraikid520:20180118232225p:plain

⑧「index.html」を選択。これがスマホの画面になります。
f:id:samuraikid520:20180118232307p:plain

⑨「Hello World」を「初めてのMonaca」に変更して「Save」を押下
f:id:samuraikid520:20180118232400p:plain

⑩変わった!!
f:id:samuraikid520:20180118232624p:plain

まとめ

簡単ですが、今日はMonacaの簡単な概要とチュートリアルを紹介しました。

本当に手軽にアプリ開発ができるので、フロントエンドでアプリ開発を始めたい人にはとてもオススメです!

僕もなんか作ってみよっと。