画像認識プログラムを作ってみよう - 第四章「Webアプリをモバイルアプリにするには」 - Monaca IDEの使い方と開発の進め方

本項では、前項で作成したプロジェクトを用いて、既存のWebアプリケーションをモバイルアプリケーションにするやり方を見てみましょう。ホームページやブログさえもモバイルアプリケーションにすることができます。

　前項では、「最小限のテンプレート」を用いて、新たなMonacaプロジェクトを作成しました。本項では、このプロジェクトを用いて、既存のWebアプリケーションをモバイルアプリケーションにしてみます。

作成したプロジェクトを開くには、このダッシュボードページにて、該当するプロジェクトの名称をクリックします。
すると、プロジェクトの開発スタイルを選択できるようになります。

Monacaプロジェクトの開発スタイルは、次の3つです。

・クラウド開発
コーディング、デバッグ、ビルドがすべてブラウザ上で行うことができます。そのため、開発するプラットフォームを選びません。パソコンだけでなく、スマートフォンやタブレットでもモバイルアプリケーションの開発が可能です。
どこでも手軽に開発を行いたい方向けです。

・コマンドツールを使う（ローカル開発）
HTMLやCSS、JavaScriptでの開発は任意のテキストエディタや開発環境で行い、Monacaとの連携をMonaca CLIで行います。Monaca CLIおよびNode.jsのインストールが別途必要となります。
開発スタイルにこだわりのある、上級者向けです。

・デスクトップアプリを使う（ローカル開発）
Monaca開発を専用で行うためのツールを使います。ツールの名前は、「Monaca Localkit」（ローカルキット）です。別途、ツールのインストールが必要となります。
ブラウザによる開発に不満がある方にお勧めです。

　本書では、どこでも開発可能な「クラウド開発」を選択します。
「クラウド開発」を行うには、「クラウドIDEで開く」をクリックします。ボタン右端の下向きの三角をクリックすると、次のような選択メニューが表示されます。

＜セーフモードで開く＞
MonacaクラウドIDEのプレビュー画面が利用できなくなります。

＜ライトモードで開く＞
MonacaクラウドIDEのターミナル機能が利用できなくなります。

プレビュー画面は、解釈したHTMLを表示する機能です。IDEの右側に表示されます。ターミナル機能は、Linuxコマンドの入力機能です。有料プランのみが利用可能です。
モバイル端末やタブレット端末で画面が小さく、開発がしづらい場合などに、これらにチェックを入れておくと良いでしょう。
　「クラウドIDEを開く」をクリックすると、次のようなページが表示されます。

最初からHTMLが少し記入されており、<p>タグ内に「This is a template for Monaca app.」とあります。
この出力結果のイメージは、ページ右側に表示されているのを確認できます。これが、プレビュー画面です。
また、左側のツリービューには、このプロジェクトのフォルダ構成が表示されています。
　では、第四章で作成した「AI年齢診断」を、モバイルアプリ化してみましょう。
すでに完成しているWebアプリをモバイルアプリにするのは、とても簡単です。「AI年齢診断」のPHPスクリプトの内容をすべてコピーし、このHTMLに貼り付けてください。
貼り付けたら、PHPのソースコードに関する部分をすべて削除し、HTMLとJavaScriptのみを残します。完了したら、保存します。保存は、Ctrl + Sか、もしくはメニューの「ファイル」-「保存」をクリックします。
保存すると、ページ右側に表示されているHTMLのデザインが、「AI年齢診断」のものに変わります。

今度は、HTML内で「index.php」の記載があるものに対し、パスが相対パスとして「index.php」とありますが、絶対パスに変えてください。
例えば、

https://www.example.co.jp/index.php

のように

（このWebアプリのURL）/index.php

と書き換えます。
　これで、準備は完了です。
ページ右側に表示されているHTMLにて、そのまま検証が可能です。「ファイルを選択」から画像を指定し、「認識開始」で実行結果が表示されるところまで確認してみてください。あとは、これをモバイルアプリにするだけです。
Androidアプリにするには次節を、iPhoneアプリにするには次々節をご覧ください。

・本項では、第四章で紹介した「AI年齢判断」をモバイルアプリにする
・Monacaを使えば、既存のWebアプリだけでなく、ホームページやブログさえもモバイルアプリにすることができる
・編集中のHTMLは、保存することで、その内容をプレビュー画面に反映することができる