中年システムエンジニアのオモチャ箱

中年システムエンジニアが初体験のブログ活動。技術情報の備忘録以外も、色々と載せていければと思います。


Monaca スマホアプリのハイブリッド開発


【スポンサーリンク】


スマホアプリのハイブリッド開発

スマホで動作するアプリケーションには大きく分けると iPhoneAndroid が存在します。
そして、各スマホで使用するアプリケーションも、iPhone 用、及び、 Android 用として準備されています。
ではアプリケーション開発者は、どのようにして開発しているのでしょうか?

 

開発方法は様々ですが、おおよそ下記の形となります。

  1. iPhone 用と Android 用のアプリケーションを別々に開発
    それぞれの開発環境(主に MacWindows の 2 台)が必要となり、開発プログラムも別々となります。
  2. ハイブリッド開発
    ひとつのアプリケーションを開発することにより、iPhoneAndroid の両方で動作するものが作れます。

今回の記事では、この「スマホアプリのハイブリッド開発」について進めていきます。

開発ツール Monaca

今回の記事で紹介する方法は、Monaca というツールを使用します。
この Monaca は、スマホアプリのハイブリッド開発だけではなく、クラウドで開発することもできるし、ローカルPCで開発することも可能です!
しかも Monaca のアカウントを取得し、Free プランを利用することにより、お手軽に勉強することが可能なのです!!

 

また通常、iPhoneスマホアプリを開発し、App Store に公開するには、Mac のパソコンを使用してビルドという作業が必要となります。
しかし Monaca には、このビルドという作業もクラウド上で実行できるので、Windows のパソコンしか持っていなくても、iPhone のアプリが開発できるという強みがあります。

 

プランについてですが、有料プランも存在しますが、Free プランでは利用料金はかかりません。
ただし、利用条件に制限があります。(クラウド上で使用できるディスクスペース等)

 

詳細は Monaca のホームページをご覧ください。

ja.monaca.io

 

Monaca 開発環境の構築

Monacaクラウド環境での、開発環境を構築していきましょう!
開発環境の構築といっても、Monaca のアカウントを取得するだけなので複雑な事は一切ありません。
準備するものは登録用のメールアドレスのみです。
ただし、クラウド環境での開発はブラウザを使用するのですが、Chrome または Safari である必要があります。

 

では、早速、下記手順にそって、開発環境の構築(アカウントの取得)をしてみましょう!

 

  1. 無料トライアルボタンをクリックします。

    f:id:middle-aged-se:20190519142724j:plain

  2. [1]メールアドレス、[2]パスワードを入力後、[3]アカウント新規作成ボタンをクリックします。

    f:id:middle-aged-se:20190519142722j:plain

  3. 下記画面の表示後、登録したメールアドレスに件名「Monacaへようこそ!アドレスを確認してください」メールが届いているので開いてください。

    f:id:middle-aged-se:20190519142719j:plain

  4. 下記は届いたメールです。
    本登録はこちらボタンをクリックします。

    f:id:middle-aged-se:20190519142717j:plain

  5. 下記画面に遷移します。
    [1]で使用するプランを選択します。
    2019/05/19 現在、プランは 4 種類存在します。
    Free プランの場合、[2]お名前を入力後、[3]無料トライアル開始ボタンをクリックします。

    f:id:middle-aged-se:20190519142714j:plain

  6. 使用上の制約が表示されるので確認後、OK ボタンをクリックします。

    f:id:middle-aged-se:20190519142900j:plain

  7. 下記画面が表示され、無事、アカウントの登録が完了しました。
    続いて、ダッシュボードに進むボタンをクリックしましょう!

    f:id:middle-aged-se:20190519142858j:plain

  8. 下記のようにダッシュボード画面が表示されましたか?
    これで、開発環境の作成は終了です!
    お疲れさまでした!!
    開発環境の作成といってもアカウントの作成だけでしたが、これでスマホアプリのハイブリッド開発ができてしまうのです!!

    f:id:middle-aged-se:20190519142856j:plain

  9. 終了する際は、[1]ログインアイコンをクリックし、[2]ログアウトリンクをクリックします。

    f:id:middle-aged-se:20190519142854j:plain

 

 
アプリケーションを動かしてみよう

ダッシュボード画面には、既に「はじめての Monaca アプリ」というサンプルアプリケーションが準備されています。
このサンプルを使用して、実際にクラウド上で動かしてみましょう!

 

  1. 「はじめての Monaca アプリ」の辺りをクリックします。

    f:id:middle-aged-se:20190519142852j:plain

  2. [1]のようなパネルが表示されるので、[2]クラウド IDE で開くボタンをクリックします。

    f:id:middle-aged-se:20190519142941j:plain

  3. 下記画面のように、ソースコードが表示されましたか?
    実行結果は簡易的ですが、[1]のプレビュー画面に表示されます。

    f:id:middle-aged-se:20190519142939j:plain

  4. では、実際に表示されている文字列を変更してみましょう!
    [1]index.html タブが表示されていることを確認して、テキストエディタを下の方にスクロールしていきます。
    [2]20 行目、21 行目を下記の通り変更します。

     

    変更前ソースコード

    <h1>HelloWorld!</h1>
    <a class="button--large" href="phonegap-demo.html">Start Demo</a>

     

    変更後ソースコード

    <h1>はじめてのハイブリッド開発</h1>
    <a class="button--large" href="phonegap-demo.html">デモ開始</a>

    f:id:middle-aged-se:20190519142937j:plain

  5. ソースコードを変更すると、ファイル名が表示されているタブに「*」が表示されます。
    実際には、「index.html *」と表示されているはずです。
    「*」が表示されている時は、何かしらソースコードが変更されたことを示唆しますので、変更に覚えがない場合は保存しない方が良いかもしれませんね。

    f:id:middle-aged-se:20190519142935j:plain

  6. 修正したソースコードを保存するには、キーボードから〔ctrl〕+〔S〕を押下するか、IDE メニューのファイルを選択後、保存を選択してください。

    f:id:middle-aged-se:20190519142933j:plain

  7. ファイルの保存が終了すると、[1]プレビュー画面にも反映されたと思います。
    反映されていない場合は、[2]Reload ボタンをクリックしてくださいね。

    f:id:middle-aged-se:20190519143004j:plain

 

如何だったでしょうか。
このように、スマホアプリのハイブリッド開発を行うことができます。
ただし、クラウド IDE に表示されるプレビュー画面では、実機と全く同じように動作しません。
ですので、正確にデバッグする際は、スマホMonaca デバッガーというツールをインストールする必要があります。

 

次回は、Monaca デバッガーの使い方を記載したいと思います。

Monacaで学ぶはじめてのプログラミング ~モバイルアプリ入門編~ [ アシアル株式会社 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(0件)

クラウドでできるHTML5ハイブリッドアプリ開発 Monaca公式ガイドブック Cordova/Onsen UIで作るiOS/Android両対応アプリ Cordova/Onsen UIで作るiOS/An [ 永井勝則 ]

価格:3,240円
(2019/5/19 15:34時点)
感想(2件)