新しいプロジェクトを作成する

新しいプロジェクトを作成する

最後に、HelloWorldアプリを一から作ってみましょう。PCに戻り、ダッシュボードを開いてください。

ダッシュボードではプロジェクトという単位で、ソースコードを管理します。新しいアプリケーションを開発する場合は、「新しいプロジェクト」を選択します。

次にプロジェクトのスケルトンを選択します。今回は「最小限のプロジェクト」を選択しました。スクリーンショットの通り、Monacaではさまざまなアプリのひな形が、スケルトンという形で提供されています。

Monaca IDEの起動

プロジェクトを編集するために「Monaca IDE」を起動します。Monaca IDEはブラウザ上で動作するIDEで、Monacaの機能はこのIDEを通じて利用します。

ここでは簡単にIDEの各機能を解説します（クリックで拡大）。

• ツールバー
  エディタの機能やIDEの機能を実行します。Androidアプリの生成やiOSアプリの生成も、ツールバーから簡単に行うことができます。
• ファイル一覧
  現在のプロジェクトが保有するフォルダとファイルの一覧が表示されます。 左クリックでファイルを選択し、コードエディタで編集します。 右クリックでコンテキストメニューを開き、新規作成・名前変更・削除・コピー・アップロードなどができます。
• コードエディター
  ファイル一覧で選択したファイルを表示・編集します。また、環境設定等の各種設定もここで表示・編集します。一度開いたファイルはタブから選択することもできます。JavaScript/HTML5/CSS3のシンタックスハイライトに対応しています。
• デバッグログ
  端末でMonacaデバッガーが開かれている場合この部分にデバッグ情報を表示します。
• インスペクター
  端末でMonacaデバッガーが開かれている場合この部分に表示されているページのDOM（Document Object Model）情報を表示します。
• ライブプレビュー
  プロジェクトのプレビューを表示します。ファイル一覧からhtmlファイルを選択することで、端末上での画面表示を確認できます。
• WebDAVアクセスURL
  現在表示しているプロジェクトのファイルにWebDAV経由でアクセスするためのURLを表示します。

また、エディタでは保存ややり直し、コメントアウトといった操作をショートカットキーで行えます。詳しくは下記のマニュアルを参照してください。

http://docs.monaca.mobi/manual/monaca_ide/#id6

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

ではindex.htmlファイルを編集してHelloWorldを表示させましょう。起動の段階でエディターが立ち上がっていますので、「Your code here」の部分を編集します。

編集が終わったら保存ボタンを押してください。右側のライブプレビュー画面にHelloWorldと表示されれば成功です。

ハイブリッドアプリでは、CSSやJavaScriptも利用できます。試しに下記の通りスタイルを記述してHelloWorldの表示を装飾してみましょう。

一から見た目に優れたアプリを作るのは大変ですので、最近ではモバイルアプリらしいUIを実現するためのJavaScriptライブラリが多数登場しています。それらを活用することで、ネイティブのような外見を整えることができます。詳しくは次回以降に説明していきます。

ビルドについて

最後に、このHelloWorldアプリを実際にアプリとしてビルドしてみましょう。MonacaではAndroid、iOS、Windows 8に対応していますが、今回はAndroid端末向けのビルドを紹介します。

ビルドはツールバーにある、各OSアイコンをクリックして実行します。ビルド方法では「デバッグビルド」を選択してください。デバッグビルドで作成したアプリにはダミーの証明書が使われるため、Android Marketには登録できませんが、端末にインストールすることは可能です（クリックで拡大）。

次へを選択すると、サーバ上でビルド処理が行われ、アプリが作成されます。完成したアプリは実際に端末へインストールして動かすことができます。

ハイブリッドアプリのメリット・デメリット

最近ではWeb上から文章や画像を差し換えるだけでアプリを作れるサービスも登場していますが、その範囲を超えたカスタマイズを行うことはできません。そのため、自分の作りたいアプリケーションを自由に開発するためには、プログラミング作業は必須となります。HTMLやJavaScriptといったなじみ深い技術でアプリ開発が可能となるハイブリッドアプリとMonacaの組み合わせは、非常に自由度の高いアプリ開発環境と言えるでしょう。

一方、AndroidやiOS向けのネイティブな開発環境と比べた際には、HTML5の仕組みで作れないアプリの開発は困難です。例えば、「時計」を表示するだけのアプリは作れますが、「目覚まし時計」（一定の時間になると自動的に起動するアプリ）は作れないといった制約があります。とはいえ、ハイブリッドアプリではネイティブ部分の拡張も可能なので、今後徐々に解決されていくと考えられます。

ハイブリッドアプリはネイティブアプリの開発スタイルを完全に置き換えられるものではありません。しかし、機能が限定されている分、既にWeb上で実現されているようなアプリであれば、効率的に開発することが可能です。

HTML5やJavaScriptといったWeb制作のノウハウが生かせるハイブリッドアプリは、特にWeb系の開発会社の方々には魅力的なツールとして検討できるレベルだと考えられます。本連載では、Monacaを用いたPhoneGapアプリ開発について、具体的なコードサンプルと共にお伝えしていきたいと思います。