• Home
• コーポレートブログ
• 「Monaca」でスマホアプリの開発に挑戦してみた

今回のブログ担当は杠です。

一度はスマホアプリを作ってみたいなと思ったことはないでしょうか？ しかし、いざやってみようとなると開発環境の構築や、JavaやSwiftなどの言語習得が必要です。

そこでもっと手軽にアプリ開発に挑戦できそうな方法がないか検索して見つけたのが「Monaca」というWebサービスです。 Monacaは Apache Cordovaというオープンソースのモバイルアプリ開発フレームワークがベースとなっていてHTML5、JavaScript、CSSのWeb技術でiOS/Androidのアプリが開発できます。

MonacaでTODOアプリの作成に挑戦してみる

Monacaではクラウドに開発環境が用意されているので、ブラウザからクラウド環境にアクセスするだけでアプリの開発を始められるのが特徴です。早速Monacaのアカウントを作成し、利用してみました。

ログイン後、Monaca Dashboard画面の「新しいプロジェクトを作る」からプロジェクトを作成します。

まずはテンプレートの種類を選びます。「フレームワーク　テンプレート」を選択するとフレームワークが入っている状態でプロジェクトが作成されるのでおすすめです。

今回は「フレームワーク　テンプレート」を選択しました。

次にフレームワークとテンプレートを選択し、プロジェクトの名称などの情報を入力してプロジェクトを作成します（最初に選択した「テンプレートの種類」やフレームワークの種類によって選択できるテンプレートの内容が異なります）。

プロジェクト作成後は、クラウド環境またはローカル環境で開発できます。今回はクラウドの開発環境「Monaca クラウド IDE 」を利用しました。Monaca Dashboard画面でプロジェクトを選択し、「クラウドIDEで開く」をクリックするとMonaca クラウド IDEが開きます。

Monaca クラウド IDEには、エディター・プレビュー・ターミナル機能があり全てブラウザ上で操作できます。プレビューで表示を確認できるので、形になっていく過程を楽しみながら進められました。

実機での検証は「Monaca デバッガー」のアプリを、手持ちのスマホにダウンロードして行いました。Monaca デバッガーでは、アプリのログを見ることができます。

思い通りの動作をさせるためにどのようにJavaScriptのコードを書けばいいか悩んだり、ログに何度も「is not a function」エラーが表示され思った以上に苦戦しましたが、TODOの追加・削除機能を実装できました。

使ってみた感想

ドキュメントなどの情報が充実

「Monaca Docs」でMonacaの利用方法からアプリのビルド・配布方法まで解説されています。解説が詳しく書かれているのでMonacaの操作方法で迷うことがありませんでした。

HTML、JavaScriptについては、インターネットから情報が得られるので困った時は検索に頼って開発を進めました。

デバッグ用のアプリが便利

「Monaca デバッガー」で、スマホ端末でアプリの動作を検証できます。 Monaca クラウド IDEと連携するとコードの変更がリアルタイムで反映されます。Monaca デバッガー上では、アプリのログを確認したり、スクリーンショットを撮れる機能があります。 Monaca クラウド IDE のプレビューでは検証が難しいスワップ操作を試すのに便利でした。

OnsenUIで簡単にスマホ向けのデザインを適用できる

Monacaには、モバイルアプリ向けのUIフレームワーク「Onsen UI」が標準で搭載されています。Onsen UI独自のタグを記述するだけで、iOS/Androidに対応したUIをデザインを簡単に適用できました。

最後に

今回作成したアプリは最低限の機能だけであまり凝ったものではなかったのですが、自分でアプリを開発するという経験ができて良かったです。

HTMLやJavaScriptの知識が全くない方でも、MonacaのWebサイトにコードや解説が公開されているサンプルアプリを少し変更するなどしてカスタマイズしてみるのも面白いと思います。