Asial Blog

Recruit! Asialで一緒に働きませんか?

「クラウドでできるHTML5ハイブリッドアプリ開発」で紹介されているサンプルプロジェクトの使い方

カテゴリ :
Monaca
タグ :
iOS
Android

先日、Monaca公式ガイドブックとしてクラウドでできるHTML5ハイブリッドアプリ開発が出版されました。本書では多くのサンプルプロジェクトを通してMonacaの利用法を紹介しています。



サンプルプロジェクトはMonaca - Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」のページにてダウンロードができますが、今回はそのプロジェクトを使う方法を紹介します。



必要なもの





サンプルプロジェクトの選択



サンプルプロジェクトはMonaca - Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」にてご覧いただけます。全32種類のプロジェクトが登録されています。今回はMonacaカウンターを使ってみます。




サンプルプロジェクト一覧

サンプルプロジェクト一覧



まずプロジェクト名の下にあるダウンロードを右クリックしてURLをコピーします。ダウンロードする必要はありません。




ダウンロードを右クリックしてURLをコピー

ダウンロードを右クリックしてURLをコピー



Monacaにて新しいプロジェクトの作成



Monacaにログインして、プロジェクトの作成をクリックします。




プロジェクトの作成をクリック

プロジェクトの作成をクリック



プロジェクトテンプレートが並んでいるのが確認できると思います。そして右上にあるImport Projectをクリックします。




Import Projectをクリック

Import Projectをクリック



モーダルウィンドウが表示されます。その中のインポート方法で、URLを指定してインポートを選択し、先ほどコピーしたURLを貼り付けます。プロジェクト名は適当に決めてください。




URLを貼り付け

URLを貼り付け



後はインポートボタンを押せば完了です。




プロジェクト一覧に登録

プロジェクト一覧に登録



インポートが無事終わると、左側のプロジェクト一覧に新規作成したプロジェクトが登録されているのが確認できるかと思います。これでデスクトップ側の作業は終わりです。



Monacaシミュレータを起動



続いてiOSまたはAndroid側で実行してみましょう。使うのはMonaca デバッガーです。iOSはApp Store、AndroidはGoogle Play(通常版ハイパフォーマンス版)をそれぞれダウンロードできますのでインストールしてください。Monaca デバッガーを起動すると、最初にログイン画面が表示されます。MonacaのIDとパスワードでログインしてください。




プロジェクト一覧

プロジェクト一覧



ログインすると先ほど登録したプロジェクトが表示されているかと思います。タップするとコードをMonacaクラウドからダウンロードし、実行します。




ダウンロード中

ダウンロード中




Monacaカウンター実行中

Monacaカウンター実行中



このようにしてソースコードに一切触れることなくプロジェクトが試せるようになっています。






もちろんプロジェクトはサンプルなので、Monaca IDEを使ってソースコードを見たり、カスタマイズができます。クラウドでできるHTML5ハイブリッドアプリ開発と一緒にご利用ください。