ゆう’s blog

のんびり色々、アプリ、Web開発やら日常やら。

Monaca ではじめるAndroidアプリ開発

ここ近年あまりにも開発から離れすぎていたので、

初心に帰りAndroidアプリの開発をしようと思い立ちました。

まずは、開発環境の準備をと思ったのですが、

なんだか便利なものを発見。

そう、クラウド上でアプリ開発がおこなえるサービス、Monacaです。

無料でクラウド上にAndroidの開発環境が持てるそうです。

便利ですね。

以下、アカウント登録から作成までをメモしたいと思います。

なお、詳細は公式のチュートリアルが分かりやすくておすすめです。

 

ja.monaca.io

 

 

 

アカウント登録

 まず、Monacaのトップページを開き、

「無料プランで始める」をクリックします。

f:id:Hatter-Zuzu:20170910105207p:plain

 

「Sign Up With GitHub」をクリックするか、

メールアドレス、パスワードを入力し、

「いますぐ登録(無料)」をクリックします。

私はGitHubではなく、メールアドレスを登録しました。

f:id:Hatter-Zuzu:20170910105353p:plain

 

確認メールが送信されるので、

確認メール内に記載されたURLにアクセスすると、ダッシュボードが表示されます。

アカウント登録は以上で完了です。

f:id:Hatter-Zuzu:20170910110033p:plain

 

新規プロジェクトを作成

 「新規プロジェクトを作成」をクリックします。

f:id:Hatter-Zuzu:20170910110515p:plain

 

テンプレートの一覧が表示されるので、

今回は「Onsen UI V2 JS Tabbar」の「作成」をクリックします。

f:id:Hatter-Zuzu:20170910111357p:plain

 

次に表示される画面に、

プロジェクト名とプロジェクトの説明を入力し、

「プロジェクトを作成する」をクリックします。

f:id:Hatter-Zuzu:20170910111552p:plain

 

以上で、プロジェクトの作成は完了です。

ダッシュボードの オンライン タブ上に、新規作成したプロジェクトが表示されます。

f:id:Hatter-Zuzu:20170910111823p:plain

 

プロジェクトファイルの編集

ダッシュボードの新規作成したプロジェクトの「開く」をクリックします。

f:id:Hatter-Zuzu:20170910112204p:plain

 

左側のプロジェクトツリー画面から、編集対象のファイル「index.html 」を選択します。

コードエディター ( 画面中央)を使用して index.html ファイルの内容を変更します今回は、「This is the first page.」の記載に続き「Hello world」を追記します。

f:id:Hatter-Zuzu:20170910114525p:plain

 

 

上部の「保存」をクリックすると結果がプレビュー画面に反映されます。

f:id:Hatter-Zuzu:20170910114418p:plain

 

以上で完了です。

あとは気合でアプリを構築するだけですね。