BLOGスタッフブログ

インソースマーケティングデザイン

2014.07.07 システム

誰でも今日からアプリ開発できる「Monaca」って?(実践編1)

こんにちは。エンジニアの高田です。 前回「誰でも今日からアプリ開発できる「Monaca」って?(導入編)」 HTML5/CSS3/JavaScriptの知識があれば誰でもスマートフォンアプリケーションを開発することができるという「Monaca」を紹介しました。 今回は実践編1ということで、実際に「Monaca」にてどのように開発の行うのかというところを紹介いたします。

1.アカウント作成

Monaca」サイトにて「今すぐ試す(無料)」あるいは「サインアップ」からアカウントを作成します。本登録まで行います。 image001

2.プロジェクトの作成

本登録が完了すると、自動的にMonacaの「ダッシュボード」ページが開きます。 既にサンプルとして、「Hello Worldアプリ」が自動で作られています。 image002 それでは実際にプロジェクトを作ってみます。 「プロジェクトの作成」ボタンをクリックすると、プロジェクトのテンプレートの一覧が表示されるので、今回は「メモ帳アプリ」を選択してみます。 image003 プロジェクト名はそのまま「メモ帳アプリ」にします。 プロジェクト名を入力して「プロジェクトを作成する」ボタンをクリックします。 image004 ダッシュボードに「メモ帳アプリ」が追加されました。 メモ帳アプリの右にある「開く」ボタンをクリックすると、「Monaca IDE」が起動します。 MonacaアプリはこのMonaca IDE上で開発を行います。 image005 自動生成されたindex.htmlファイルが開かれています。 Monacaではアプリケーションが起動する際、最初に表示されるページはindex.htmlという決まりになっています。 何やら色々コードが自動生成されていますが、それぞれのコード、ファイルがどのような意味をなしているのかは、サンプルアプリのドキュメントを参照してください。 Monacaはドキュメントも充実していて親切です。 <参考:メモ帳アプリhttp://docs.monaca.mobi/1.0/ja/sampleapp/samples/memo_application/

3.Monacaデバッガーで実行

では作成した「メモ帳アプリ」をiPhone上で実行してみます。 そのためは「Monacaデバッガー」というアプリを使用します。 AppStoreから「Monacaデバッガー」をiPhoneにインストールします。 download Monacaデバッガーを起動し、アカウント作成時のメールアドレスとパスワードでログインします。 image007 プロジェクトの一覧が表示されるので、先ほど作成した「メモ帳アプリ」をクリックして実行します。 image008 実際にアプリを動かしてみます。新しいメモが追加できますね。 image009 今のところ何ひとつコードを書いていないのに、メモ帳アプリができちゃいました。 では次回は、今回作成したアプリをMonacaでビルドしてストアへ提出するところを紹介します。 <参考:初心者のためのクイックチュートリアルhttp://docs.monaca.mobi/ja/learning/quick_start/tutorial/

インソースマーケティングデザインが書いた他の記事

見積もり・ご依頼など、
お気軽にご相談ください

本サイトはユーザーエクスペリエンスの向上などを目的に、Cookieを使用しています。
右記のバナーで「同意する」をクリックする、または本サイトを利用することにより、
お客様は弊社のCookieポリシーに同意したことになります。

同意します