PhoneGap Buildの使い方

公開日: : 最終更新日:2014/06/27 未分類

iPhoneやAndroidのアプリが簡単に作れるPhoneGap Buildを試してみました。

PhoneGapはiOSやAndroidなど各プラットフォームのSDKを個別に用意したり環境を作るのがけっこう大変そうという印象でしたが、PhoneGap Buildはビルド環境がまるごとクラウド上にあるので、最低限必要なものはビルドするもの(HTML、CSS、JavaScript)だけ。楽すぎてすごい。

下記6つのプラットフォームに対応していて、次期 iOS 7も対応予定らしいです。

  •  iOS
  • Android
  • Windows Phone
  • Blackberry
  • webOS
  • Symbian

 

 

Webサービスを作成

まずはPhoneGapアプリにするためのパスワード自動生成するWebサービスを作成しました。
このWebサービスはHTMLファイルを1つ書いてjQueryTwitter Bootstrapを利用しています。
これらをまるごとZIP圧縮してpassgen.zipを作成しました。

  • passgen
    • css
      • bootstrap-2.3.2.css
      • bootstrap-2.3.2.min.css
      • bootstrap-responsive-2.3.2.css
      • bootstrap-responsive-2.3.2.min.css
    • img
      • glyphicons-halflings.png
      • glyphicons-halflings-white.png
    • js
      • bootstrap-2.3.2.js
      • bootstrap-2.3.2.min.js
      • jquery-2.0.3.js
      • jquery-2.0.3.min.js
    • index.html

 

PhoneGap Buildのサイトへ

http://build.phonegap.com』を開きます。

 

PhoneGap Buildを日本語化

まずはページの最後までスクロールします。

Adobe PhoneGap Build Top

Languageで「日本語」を選択すると日本語表記に切り替わります。

Adobe PhoneGap Build Language

 

PhoneGap Buildへログイン

開始ボタンをクリックします。

Adobe PhoneGap Build Japanese Start

無料ボタンをクリックします。
無料プランではアプリを公開しないプライベートアプリケーションは1つだけしか利用できませんが、このプライベートアプリケーションを使い回すことで非公開のままいくつでもPhoneGapアプリが作成できます。

Adobe PhoneGap Build Plan

Adobe IDかGithubのアカウントでログインできます。
(どちらも無料で作成できます。)
今回はAdobe IDで進めます。

Adobe PhoneGap Build Account

アカウントの情報を入力してSign Inボタンをクリックします。

Adobe PhoneGap Build AdobeID

利用規約を確認してAcceptボタンをクリックしたらログイン完了です。

Adobe PhoneGap Build Accept

 

PhoneGap Buildでビルド

「.zipファイルをアップロード」ボタンをクリックして、ビルドしたいZIPファイル(今回はpassgen.zip)をアップロードします。

Adobe PhoneGap Build Upload

ファイルをアップロード中です。

Adobe PhoneGap Build Progress

アップロードが完了したら、アプリ名を入力して「ビルド準備完了」ボタンをクリックします。
config.xmlでアプリ名を設定していたら入力の必要はなくなるようです。

Adobe PhoneGap Build App Title

 

スマートフォンへインストール

ビルドが完了したらスマフォから2次元バーコード読み取って、PhoneGap Buildのサイトからアプリがダウンロードできます。

Adobe PhoneGap Build Complete

 

証明書

アプリ名をクリックして詳細を開くとiOSとBlackberryが赤くビルドエラーになっていることが分かります。iOSとBlackberryはビルドするだけでも証明書(署名キー)が必要なので、設定がないとエラーになってしまいます。
「キーの選択なし」から情報を追加するとビルドできるようになります。

Adobe PhoneGap Build Error

 

その他の設定

設定タブで「デバッグを有効にする」と「Hydrationを有効にする」を設定できます。

Adobe PhoneGap Build Settings

ad

関連記事

By: Luke Jones

MacPortsのインストール方法

Macにパッケージ管理システムのひとつであるMacPortsをインストールしました。 Xcodeの

記事を読む

vieja explorer

Internet Explorer 10になっても指定したバージョンで動作させる方法

ブラウザのバージョンが上がることで使用してるフレームワークが動作しなくなったりレイアウトが崩れたりす

記事を読む

By: Helen Dearnley

Subversionの.svnフォルダを一括削除するコマンド

最近のSubversionでは.svnフォルダがGitの.gitフォルダと同じように一番上の階層に1

記事を読む

Supermarket Pay ERD

文字参照で “&#” の直後は 10 進表記 でなければなりません。

ER Masterで作成したermファイルをメールで送付すると下記のエラーが出て開けなくなりました。

記事を読む

Becky:  Doubly Coy

Cargo Maven2 Pluginのエラーの対処

今朝 Jenkins での自動デプロイが失敗していたので確認したところ、Cargo Maven2 P

記事を読む

By: Håkan Dahlström

ストアドプロシージャのエラー調査方法(Oracle)

Oracleのストアドプロシージャで例外が発生した時の調査方法の備忘録です。  

記事を読む

By: Dan Monsieurle

システム起動時にIIS7を自動起動しないようにする方法

IISをインストールすると、システム起動時にIISが自動で起動してきてしまい、別のWebサーバーを起

記事を読む

spotlight -> terminal

ターミナルの起動方法

Spotlightから起動する "control"キーを押しながら"space"キーを押しす

記事を読む

fury

Adobe AIRのバージョンを確認する方法

Windows エクスプローラーで下記のディレクトリを開きます。 もしくは [crayon-

記事を読む

ad

Message

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

lombok cant find ide
Spring Tool SuiteへLombokをインストールする方法

下記のURLから"lombok.jar"をダウンロードします。 ht

Spring Tool Suite
Spring Tool Suiteのインストールと日本語化

 Spring Tool Suiteのインストール 下記のURLから

spotlight -> terminal
ターミナルの起動方法

Spotlightから起動する "control"キーを押しな

By: NASA Goddard Space Flight Center
Mavenのインストール方法(Homebrew)

Homebrewでインストール ターミナルを開いて次のコマンドでイン

By: Miran  Rijavec
Homebrewのインストール方法

ターミナルを開いてHomebrewのサイトにあるインストールコマンドを

→もっと見る

PAGE TOP ↑