monaca使って5分でスマホアプリを作ってみる(´・ω・`)!

こんにちは(´・ω・`)?今日はスマートフォンアプリを5分で作ってみたいと思います。

まずは、AndroidSDKいれて開発環境を整えて……とかやっていると日が暮れてしまうので今回はmonacaクラウドの統合環境を利用することにします。

monacaの紹介はいたる所でされていますが、HTMLとJavaScriptの知識さえあれば、AndroidやiPhone問わず「同一コード」でそれぞれのスマートフォンで動くアプリを作ってくれます。開発環境についてもMonacaクラウドとして提供されているのでブラウザがあれば誰でもスマホアプリを作れるとってもクールな統合環境です。

monaca公式サイト:https://ja.monaca.io/

さて、今回はアカウント登録から始めたいと思います。

[adsense]

まず公式ページの右上のサインアップを選択します。

monaca1

次にメールアドレスとパスワードをいれて利用規約を確認してから登録ボタンをおします。

monaca2

そうすると記入したメールアドレス宛にmonacaからメールが届きますのでメールの指示にしたがってURLをクリック。これだけで登録完了です。

 

自動的にmonaca統合環境へリダイレクトされるので統合環境のダッシュボードにうつったらブラウザのブックマークに登録しておきましょう~

なお、蛇足ですが統合環境へはchromeでアクセスすることをお勧めします。

はい、ここまでで3分ぐらいでしょうか?さて、後2分でアプリをつくりますよー

え!?ムリ??無理じゃないです。

試しに目の前にある「Hello Worldアプリ」の「開く」ボタンを押してください。

monaca3

するとindex.htmlが開いてる画面になるので<h1>タグの下にでも好きなメッセージを書いてみましょう~

monaca4

書きましたね?そしたら保存しましょう!

これでアプリはできました!

……はい。動いてねーだろって?ごもっともです。

貴重な時間が残り1分30秒ぐらいになったので実機で動かすとこまでやっておきます。

まず画面上の「ビルド」ボタンをおしてください。メニューが開くので今回はAndroidアプリのビルドを選びます。

monaca5

表示された画面から「デバッグビルド」を選択、「次へ」を押します。すると勝手にビルドが始まり終わるとバーコードが表示されます。これをAndroid端末で読み取ってダウンロードします。

[adsense]

monaca6monaca7

ダウンロードできました(´・ω・`)?ではインストールしてみましょう~

すると、、、

Screenshot_2016-01-08-18-45-22

はい。そのままではダメですね。何もしていないと提供元不明のアプリとしてインストールをブロックしてしまいます。設定ボタンをおして「身元不明のアプリ」をインストール出来るようチェックを入れておきましょう。

Screenshot_2016-01-08-18-47-20

気を取り直してインストールを再開します。

Screenshot_2016-01-08-18-48-25

インストールが終わり、アプリケーションを開くと!?

Screenshot_2016-01-08-18-45-22

じゃじゃん!さっき書いた文章がスマホに表示されました!!!

はい!そこ!デモアプリ動かしただけじゃねーか!とか言わないように。

その通りです。とりあえず開発環境は整ったので次回はまっさらなアプリを作ることにします。

次回があればね!(´・ω・`)?

※2016/01/09現在の内容です。monaca提供元からキャプチャ等の掲載にクレームがありましたら記事を削除いたします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次