先日、Monaca公式ガイドブックとしてクラウドでできるHTML5ハイブリッドアプリ開発が出版されました。本書では多くのサンプルプロジェクトを通してMonacaの利用法を紹介しています。
サンプルプロジェクトはMonaca - Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」のページにてダウンロードができますが、今回はそのプロジェクトを使う方法を紹介します。
必要なもの
- Monacaのアカウント(無料)
サンプルプロジェクトの選択
サンプルプロジェクトはMonaca - Monaca公式ガイドブック「クラウドでできるHTML5ハイブリッドアプリ開発」にてご覧いただけます。全32種類のプロジェクトが登録されています。今回はMonacaカウンターを使ってみます。
まずプロジェクト名の下にあるダウンロードを右クリックしてURLをコピーします。ダウンロードする必要はありません。
Monacaにて新しいプロジェクトの作成
Monacaにログインして、プロジェクトの作成をクリックします。
プロジェクトテンプレートが並んでいるのが確認できると思います。そして右上にあるImport Projectをクリックします。
モーダルウィンドウが表示されます。その中のインポート方法で、URLを指定してインポートを選択し、先ほどコピーしたURLを貼り付けます。プロジェクト名は適当に決めてください。
後はインポートボタンを押せば完了です。
インポートが無事終わると、左側のプロジェクト一覧に新規作成したプロジェクトが登録されているのが確認できるかと思います。これでデスクトップ側の作業は終わりです。
Monacaシミュレータを起動
続いてiOSまたはAndroid側で実行してみましょう。使うのはMonaca デバッガーです。iOSはApp Store、AndroidはGoogle Play(通常版、ハイパフォーマンス版)をそれぞれダウンロードできますのでインストールしてください。Monaca デバッガーを起動すると、最初にログイン画面が表示されます。MonacaのIDとパスワードでログインしてください。
ログインすると先ほど登録したプロジェクトが表示されているかと思います。タップするとコードをMonacaクラウドからダウンロードし、実行します。
このようにしてソースコードに一切触れることなくプロジェクトが試せるようになっています。
もちろんプロジェクトはサンプルなので、Monaca IDEを使ってソースコードを見たり、カスタマイズができます。クラウドでできるHTML5ハイブリッドアプリ開発と一緒にご利用ください。