【初めてのハイブリッドアプリ】Monacaを使ってiOS・Andorid両対応の2015CALENDARアプリを作ってみた[Cordoba(Phonegap)]

ネイティブアプリはiOSとAndroidで作り方も違うし、とても難しいし作るのが大変なので、以前からクロスプラットフォームなiPhone＆Androidハイブリッドアプリ作りたいと思ったいました。
そこでまずはブラウザだけで簡単に作成できるというMonacaを使って練習がてらCALENDARアプリを作ってみました。
感想を言うと、とても便利で簡単！これはとても良いと思います。

はじめに

• 手軽に作成するために2015カレンダーは画像を使います。
  画像は以下からダウンロードできるようにしています。
  ※写真はすでに入っていますが、差し替えれるようにカレンダー部分の透過PNGも入れておきましたのでもし利用する場合はお好きな画像と組み合わせてください。
• Git/ソース一式
  • https://github.com/hironaito/calendar2015
    • https://github.com/hironaito/calendar2015/tree/master/www

ソースは使ってもらうほどのものはありませんが自由に使ってもらってOKです。

Monaca利用準備

• Monacaサイトからユーザー登録し開発環境の準備を行います。
  • https://ja.monaca.io/

作成

• ログイン後、「プロジェクトの作成」ボタンからプロジェクトを作成します。

• 「Onsen UI 最小限のテンプレート」を選択

• プロジェクトができるので「開く」ボタンを押すとIDEが開きます。
• さっそく画像をアップロードしましょう。
• wwwフォルダの場所で右クリックしてimagesフォルダを作る。

• 先ほどダウンロードしたカレンダー画像をアップ。
  • https://github.com/hironaito/calendar2015/tree/master/www/images

カルーセルテンプレート記述

• トップページに表示されているのはindex.htmlではなくpage1.htmlなので、page1.htmlを開きます。
• 次にカレンダーをスライドするためにカルーセルの記述方法をOnsenUIページからコピーします。
  • http://ja.onsen.io/guide/components.html#ons-carousel
• アプリタイトル名の変更と12か月分あるので12個「ons-carousel-item」を作りパラメーターも変更。
  • swipeable overscrollable auto-scroll fullscreen

<ons-page>
    <ons-toolbar>
        <div class="center">2015 CALENDAR</div>
    </ons-toolbar>

    <ons-carousel swipeable overscrollable auto-scroll fullscreen id="calendar">
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
        <ons-carousel-item>
        </ons-carousel-item>
    </ons-carousel>
</ons-page>

• 下部のボタン削除（下記コードを削除）

    <div style="text-align: center">
        <br>
        <ons-button
            onclick="myNavigator.pushPage('page2.html')">
            Push Page 2
        </ons-button>
    </div>

CALENDARの画像を設置

• ons-carousel-itemタグの中に画像を配置しても問題ありませんが、今回はCSSの背景に設定。
  • タイトル文字色を白に
  • 12か月分の画像を背景に設定
• CSS記述
  • css/style.cssに記載

ons-toolbar{
    background-color: black !important;
}
ons-toolbar div{
    color: white !important;
}
#calendar{
    background-color: black;
}
#calendar ons-carousel-item:nth-child(1){
    background: url(../images/01.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(2){
    background: url(../images/02.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(3){
    background: url(../images/03.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(4){
    background: url(../images/04.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(5){
    background: url(../images/05.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(6){
    background: url(../images/06.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(7){
    background: url(../images/07.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(8){
    background: url(../images/08.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(9){
    background: url(../images/09.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(10){
    background: url(../images/10.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(11){
    background: url(../images/11.jpg) no-repeat;
    background-size: 100% auto;
}
#calendar ons-carousel-item:nth-child(12){
    background: url(../images/12.jpg) no-repeat;
    background-size: 100% auto;
}
img{
    max-width: 100%;
}

以上で設定完了

• 保存後プレビューから動作を軽く確認

アイコンの登録

• アプリのアイコンをメニューの設定ボタンから設定します。
• Android用
  • Androidアプリ設定を選択
  • アップロードボタンでアイコンを登録します。
    • launcher_icon.png（アイコンはなんでもOKです）

• iPhone用
  • iPhoneも同様です。

これで準備は完了です。

実機テスト

• 実機テストができる専用の「Monacaデバッガー」アプリがあります。
  • これをスマホにインストールすることで手軽に実機テストが可能。
• 下記からデバッガーアプリをインストール後、自アカウントでログインすると実機で確認できます。
  • GooglePlay
    • https://play.google.com/store/apps/details?id=mobi.monaca.debugger&hl=ja
  • iTunes
    • https://itunes.apple.com/jp/app/monaca/id550941371?mt=8

• デバッガーを起動しログイン後プロジェクトを起動するとアプリが動きます。
  • プロジェクトが更新されない場合などは一度ログオフすると直ることが多いようです。

各OS用にビルド

• デバッガーで問題なさそうであれば実機にインストールしてみましょう。
  • 無料アカウントだとビルドが1日3回までなので注意
• 各OS用にビルド
  • 簡単にインストールできるAndroidで「デバッグビルド」を行います。

• 次へを押してしばらくするとビルドが完了します。
  • 完了すると以下画面が表示されるのでインストール方法を見ながらインストールします。
    • QRコード：実機でQRコードを読み込んでインストール
    • ローカルPCにapkファイルをダウンロードし、その後Androidにインストール
    • 登録したメールアドレスにインストール方法が送られます。

Android端末にインストール

• 上記のどれかで、Androidにインストール
  • ダウンロードにしておくとメールに添付して送ればインストールできるので楽ちんですね。
  • 作ったファイルも添付しておきます。
    • https://github.com/hironaito/calendar2015/blob/master/2015calendar.apk

• やってないですがストア登録もちゃんと作ればいけますね。

終わりに

• 以上で作成完了
  • これだけでiPhoneとAndroidアプリが簡単に作れます。
  • 自分だけが利用するのであればAndroidならデベロッパー登録も行わなくてもインストールできるので非常に楽ちん。
• このまま利用するのはもちろん、ネイティブアプリのモックアップ作成にも活用できそう。
  • 特にネイティブアプリで利用するセンサーなどもCordobaAPIから呼び出しが可能ということでHTMLだけではやれないこともハイブリッドアプリではできるとのことなので期待ですね。

公式ガイドブック

• 公式ガイドブックも2月18日に発売するとか！ちょっと勉強してみようと思います。
  • 「クラウドでできるHTML5ハイブリッドアプリ開発 Monaca公式ガイドブック Cordova/Onsen UIで作るiOS/Android両対応アプリ」
  • http://www.amazon.co.jp/dp/4798140287