Monacaでアプリを作成(備忘録)

Monaca/CordovaでWebアプリを作成できるように勉強中。単なる個人的備忘録なので、詳しくはリンク先を参照ください。

準備

Monacaクラウド環境を整える(無料)

  1. Monaca日本語公式サイトにて、Monacaアカウントを作成。
  2. Monacaデバッガーアプリ(無料)をiPhone/Android端末にインストール。「Monaca」で検索すれば出てくる。
    インストールしたらさっそく立ち上げて、クラウド環境にログインする。
  3. PCブラウザ上で開発開始。リアルタイムでデバッガーでチェックできる。

とりあえずこれだけでも始められるが、ローカル環境で開発する場合は、Monaca Localkit(ダウンロードページ)を準備する。
起動すると、クラウドアカウントへのログイン画面が現れる。これについてはまだ使用感の確認はこれからなので後日に加筆予定。

ここまでのバージョンメモ。古くなったら情報更新予定(予定ね)
PhoneGap Desktop App Version 0.3.3 (未使用だが、あとで役立つ情報かも、なのでとりあえずメモ)
Monaca Localkit Version 1.2.8 / 2015年12月15日

後で役立つかもしれないリンク

ニフティクラウド mobile backend
スマートフォンアプリのバックエンド機能をサポート。
プッシュ通知/会員管理・認証/SNS連携/データストア/ファイルストア/位置情報検索/スクリプト

準備までに参考にしたサイト

かつや先生のPhoneGap初級講座
※読み進めていくうちに、PhoneGapのバージョンアップに追いつかず、情報がかなり古くなっていることに気づいた。ここはあくまで概念的な理解をする場所と割り切ったほうが良い。

Monaca Cordova 3.5 移行ガイド
Monaca Cordovaは現在Version3.5。Cordova 2.9形式でアプリのUI構築の役割を担っていたネイティブコンポーネントに代わり、ONSEN UIを推奨。


Monaca クラウド IDEの基本操作

アイコン、スプラッシュ画面の設定

ダッシュボードからプロジェクトを開く。ヘッダーメニューのやや右側に「設定」ボタンがが見つかる。「Androidアプリ設定」または「iOSアプリ設定」を選択すると、アイコンやスプラッシュ画面のアップロードができる画面に遷移。そこで各種サイズの画像をアップする。


Webサイトをアプリ化する

基本情報

詳しくは下記の記事を参照。

MonacaでWebサイトをアプリ化する事始め
(ポイント)

  1. Monaca クラウド IDE の [ Cordova プラグインの管理 ] 上で、org.apache.cordova.inappbrowser プラグインを有効化
  2. htmlソースにJavaScriptを記述

オマケ情報

ベーシック認証の手入力を回避する方法
Webサイトをそのままアプリ化する技術を検証中なのだが、BASIC認証をかけているテストサイト/隠しサイトに直にアクセスする方法がこちらに。

正式版Monacaの無料プランを使い倒す!インポート・エクスポート機能
無料版クラウドIDEはプロジェクトが3つまでしか作成できない。用済みのチュートリアルはエクスポート機能でローカルに退避しておける。
なお、1カ所誤記あり。

(誤)「IDEでエクスポートしたいプロジェクトを開き、左上の「編集」ボタンから「エクスポート」を選択します。」
(正)「IDEでエクスポートしたいプロジェクトを開き、左上の「ファイル」ボタンから「プロジェクトをエクスポート」を選択します。」

9年前

2 コメント

  1. 「ベーシック認証の手入力を回避する方法」記事のご紹介ありがとうございます。
    アプリ内Webビューで、つかえるかわかりましたらご教示いただけると嬉しいです。

    今後ともよろしくお願いします。

    1. YUKIOさん
      返信遅くなりました。アプリ内でも手法は機能しております。
      Androidならばこれでビルド可能かも。ただ、iOSだといわゆる「アプリらしさ」がないので審査は通らない恐れがあるようですね。端末機能にアクセスするコンテンツとの併せ技を考えなくてはいけませんね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA