スマホアプリを作成する為のMONACAのアカウント登録と試食

今回はスマートフォンアプリを作成する為にMONACAというアプリ開発クラウドを利用した。まずログイン時に以下の図1のようなダッシュボードが表示される。

図1 MONACAダッシュボード画面

また、編集内容が反映されているかどうかを確認するため、スマートフォンアプリの方も導入した。

図2 スマホ版MONACA図1

ログインをすると、図2のような画面が表示された。
次に右下のリングメニューをタップすると、図3のようなメニューが表示される。

図3 リングメニュー一覧

リングメニューとしてはそれぞれ
1,ダッシュボード一覧に戻る
2,リロード
3,スクリーンショットの保存
4,検索？
5,ログの表示
6,リングメニューを閉じる
尚、4に関してはグレーアウトしており、タップすることができなかったのであくまで憶測である。
次にアプリケーションの編集を行うため、WEB版に戻り、はじめてのMONACAアプリ「はじめてのMONACAアプリ」というアイコンをクリックすると右に編集一覧が表示される。今回は図4の様に「クラウドIDEで開く」というアイコンをクリックする。

図4 はじめてのMONACAアプリを開いた状態

クラウドIDEを開くをクリックすると、以下の図5の様な画面が表示された。

図5 クラウドIDEで開いた図

クラウドIDEを開いた後左タブのwww>phongape-demo>index.html画面をクリックする事で、indexの編集を行う事ができる。
今回は試しに、図5の20行目に赤線で示されている「Hello Word!」といった文面を変更する。変更を行った後はメニュータブから保存をクリックする事で、編集を保存することができる。

図6　編集後のindex図

保存を行った後、スマートフォンアプリの方で確認をしたところ、図６の様の変更されていることを確認することができた。
次にボタンを押した際に「終了します」といったポップアップが表示されるようなボタンの追加を行う。

図7 ボタン追加図

再びWEBMONACAの方に戻り、23行目に下記のプログラム行を追加した。
また、一つ目のボタンと間をあけるために22行目に「br」を追加する。

<a class="button--large" href="https://www.blogger.com/null" onclick="alert('終了します')">Stop Demo</a>

図8 Stop Demoをタップした状態

編集を行い、保存をした後またスマートフォンアプリの方で確認をしたところ、Start Demoの下にStop Demoといったボタンが表示され、タップすることで、図8のようなポップアップメニューが表示された。
今回はMONACAの表面上の部分だけを体験する事ができたので、次回はMONACAのチュートリアルを確認しながら、具体的な動作の確認、習得を行いたい。