つかさラボのBlog@hatena

技術系ブログのはず

HTML5モバイルアプリ開発講座(Monaca入門編)の感想

Monacaとは

f:id:tsukasa-labz:20180211201747j:plain

Monacaは、クラウドベースの開発プラットフォームです。
HTML5とJavaScriptを用いることで、iOSとAndroidの両OSに対応したクロスプラットフォームなアプリ開発を実現しました。
また、MonacaではWebブラウザを通じて全サービスが提供されます。
そのため、クライアントソフトのインストールなく、誰でも簡単にアプリ開発が行えます。

公式サイトより引用

講座概要

18万ユーザーを突破したクラウド型アプリ開発ツール『Monaca』を利用してアプリ開発実習を行う講座です。
MonacaはWeb技術を利用してiOS/Androidの両方に対応したアプリを開発することができるツールです。
開発効率を求めるプロから教育機関まで、幅広く利用されています。

イベントサイトより引用

受講した感想

内容自体は「クラウドでできるHTML5ハイブリッドアプリ開発」の簡易版であると思われます。
f:id:tsukasa-labz:20180211203848j:plain:w200

2時間という短い時間でのセミナーだったので、用意されているテンプレートにテキストを書き写す形で進行して行きました。
作成したのはカメラを起動し、撮影した写真をアプリ内に表示するというものになります。

APIの呼び出し方はほとんど同じ形式になっているそうで↓が基本形。

navigator.camera.getPicture(成功時処理, 失敗時処理, オプション);


↓は実際に作成したアプリのソースコード(JavaScript部分のみ)になります。

var option = {
    saveToPhotoAlbum: true // 撮影後端末に保存
};

// カメラを起動
navigator.camera.getPicture(onSuccess, onError, option);

// 成功時に呼び出しされるコールバック関数
function onSuccess(imageURI){
    document.querySelector("#photo").src = imageURI;
}

// 失敗時に呼び出されるコールバック関数
function onError(message){
    alert("Error:" + message);
}

以前からMonacaに興味があったものの、なかなか行動に移せなかったためいいきっかけになったと思います。
これを機にスマホアプリ開発をやっていければと思います。

タイムテーブル

  • ハイブリッドアプリとは
  • Monacaの紹介
  • 開発環境のセットアップ
  • ネイティブ機能の利用(Cordova)
  • 実習
  • アプリのビルド
  • Monaca提供Enterpriseプラグインの紹介
  • サービス連携

講座情報

  • 場所:半蔵門
  • 時間:2時間(10:30 - 12:30)
  • 費用:5,400円(税込み)

持ち物

  • ノートPC(Google Chromeを事前インストール)
  • モバイル端末(iOS 9 以上、Android 5 以上)