「Monaca」でスマホアプリの開発に挑戦してみた


My Redmine

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

一度はスマホアプリを作ってみたいなと思ったことはないでしょうか? しかし、いざやってみようとなると開発環境の構築や、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サイトにコードや解説が公開されているサンプルアプリを少し変更するなどしてカスタマイズしてみるのも面白いと思います。

こちらの記事もオススメです!
Dockerを使ってRedmineのテーマ作成に挑戦中です
Redmineのテーマ作成に挑戦しています。
スニペットツールで定型文を素早くペースト!私がよく使う定型文(スニペット)を紹介
何度も検索してコピペするような文章は定型文として登録しておくのがおすすめです。
ミーティングのやり方を変えてサポート対応改善
お客様へ訂正や補足の案内が早くできるようになりました。
「災害時のリスク管理と事業継続計画」を受講して
「同業他社との助け合い」「社員一人一人の自主性」に注目です。
AWS Lambda Ruby 2.7 でPostgreSQLのコマンドを実行する方法
Lambda ruby 2.7を利用してRDS(postgresql)と通信をできるようにする方法の紹介。
ファーエンドテクノロジーからのお知らせ(2024/03/27更新)
2024年4月14日 オライリー本の全冊公開日のお知らせ(もくもく勉強会も同時開催)
ファーエンドテクノロジーが所蔵するオライリー本(全冊)公開日のご案内です。公開日には「もくもく勉強会」も同時開催します。
My Redmine スタンダードプランおよびAdminサポートデスクプランの料金改定のお知らせ【2024年4月ご利用分より】
2024年4月ご利用分より、My Redmine スタンダードプラン(民間企業・個人向け及び官公庁向け)とAdminサポートデスクプランの料金を改定いたします。
My Subversion 一部のプラン・料金改定のお知らせ【2024年4月ご利用分より】
2024年4月ご利用分より、My Redmine スタンダードプラン(民間企業・個人向け及び官公庁向け)とAdminサポートデスクプランの料金を改定いたします。
My Subversion ストレージ容量増量のお知らせ(一部プランを除く)
My Subversionではミディアムプラン以上の各プランのストレージ容量を増量します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け