advertisement

PhoneGap Introduction

100 %
0 %
advertisement
Information about PhoneGap Introduction
Technology

Published on February 21, 2014

Author: keisuke322

Source: slideshare.net

Description

PhoneGapの超概要とPhoneGap 3からサポートされた便利な開発ツールであるCLI(Command-Line Interface)の簡単な説明を紹介しています。
advertisement

Adobe PhoneGap Introduction ! ! Adobe Systems

概要編

PhoneGapとは - HTML / CSS / JavaScript をラッピング Native Shell WebView

ネイティブ機能の呼び出し - OS固有の機能を共有API(JavaScript)でブリッジ - JavaScriptの知識でネイティブ機能の利用が可能 JavaScript OS

カメラ機能の呼び出し camera.getPicture navigator.camera.getPicture( onSuccess, // 第1引数:成功時のコールバック関数名 // 第2引数:失敗 or キャンセル時 onFail, [ cameraOptions ] // 第3引数:カメラオプション );

サンプルコード HTML <button onclick=”capturePhoto()”>撮影</button> <img id=”myImage” src=”” /> JavaScript function capturePhoto() { navigator.camera.getPicture(onSuccess, onFail,   { quality: 50,   destinationType: Camera.DestinationType.DATA_URL }); } function onSuccess(imageData) {     var image = document.getElementById('myImage');     image.src = "data:image/jpeg;base64," + imageData; }

PhoneGap 標準プラグイン - Android / iOS はフルサポート 加速度センサー GPS カメラ オーディオ コンパス ネットワーク 連絡帳 アラート通知 ファイルアクセス サウンド通知

サードパーティプラグイン - 強力なコミュニティによるプラグインが存在 § バーコードリーダー § アプリ内課金 § アプリ内ブラウザ表示 § デバイスからの通知 § iAd § プッシュ通知 § アプリケーション設定 § カレンダー § スクーンショット § … § 外部スクリーン https://github.com/phonegap/phonegap-plugins

PhoneGap API Explorer PhoneGap標準プラグインを試せるPhoneGapアプリ

My Heart Camera - PhoneGapで作られた写真加工アプリ - Adobe AppBox Awards 2013 ユーティリティ賞

1. ローカルに全て準備 PhoneGap SDK ipa apk OTA xap wgz ipk

2. アドビのクラウドを利用 PhoneGap SDK PhoneGap Build ipa apk OTA xap wgz ipk

開発編

CLIで簡単に開発 CLI Command Line Interface コマンドラインだけど難しくないよ!

PhoneGapのインストール ※事前にNodeJSをインストール $ sudo npm install -g phonegap ※参考> http://phonegap.com/install/ これでCLIを使う準備は基本的にOK! ※全てローカル環境で開発する場合はスマホOS毎のSDKが別途必要 ※スマホOS毎のSDKを準備せずにお手軽開発したい場合は後述の
 「CLI + PhoneGap Buildでお手軽開発」を参照

新規プロジェクト作成 CLIを使って新規プロジェクトを作成 $ phonegap create hello ※「hello」は、プロジェクトディレクトリ パッケージ名とアプリ名を指定して新規プロジェクトを
 作成する場合はコチラ↓ $ phonegap hello com.example.hello HelloWorld

新規プロジェクト作成 作成された
 「hello」プロジェクト ※サンプルコードを自動生成してくれる ので、このまま次のステップのビルド& インストールをすればサンプルアプリを 作れます

ビルド&インストール CLIを使ってビルドとインストールを一括で実行 ※ MacにiOSデバイスを繋いでから実行 $ phonegap run ios ※MacがiOSデバイスを認識していない場合は、
 iOSシミュレーターに自動フォールバックする Androidの場合はこちらを参考> http://www.slideshare.net/fenomas1/phone-gap-quickstart

※runオプションのエラー MacがiOSデバイスを認識しておらず、かつPhoneGap
 コマンドがiOSシミュレーターを見つけられない時に発生 以下の方法でiOSシミュレーターをインストール $ sudo npm install ios-sim -g ※参考> https://github.com/phonegap/ios-sim

CLI + PhoneGap Buildでお手軽開発 ローカルにOS毎のSDKを準備する必要がない! $ phonegap remote build ios ※事前に http://build.phonegap.com にアカウントを作成
 (Adobe ID or GitHubアカウントでもOK) ※事前に http://build.phonegap.com にiOS証明書を登録 参考> 「PhoneGap Buildの使い方」- Adobe Developer Connection http://www.adobe.com/jp/devnet/phonegap/articles/phonegap_build_instructions.html

CLIのオプション - create <path> create a phonegap project - build <platform> build a specific platform - install <platform> install a specific platform - run <platform> build and install a specific platform - local [command] - remote [command] phonegap/build - help [command] - version development on local system development in cloud with output usage information output version number

参照編

PhoneGapクイックスタート - http://www.slideshare.net/fenomas1/phone-gap-quickstart

PhoneGapのインストール - http://phonegap.com/install/

PhoneGap API リファレンス - http://docs.phonegap.com/

PhoneGap Build - https://build.phonegap.com/?locale=ja_JP

「PhoneGap Buildの使い方」 - http://adobe.ly/1hDlQoI

Adobe AppBox - https://appbox.adobe-web.jp/

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

PhoneGap From Scratch: Introduction - code.tutsplus.com

Want to learn how to use PhoneGap, but don't know where to get started? Join us as we put together "Sculder", not only a tribute to an excellent science ...
Read more

Introduction to PhoneGap | Pluralsight

Introduction to PhoneGap. By John Sonmez. An Introduction to the PhoneGap mobile platform. More. Start free trial now. By John Sonmez.
Read more

PhoneGap Build | PhoneGap Docs

PhoneGap Build. PhoneGap Build is a cloud service for compiling PhoneGap applications. These docs will get you started, but if your question isn't answered ...
Read more

Introduction To PhoneGap | FormGet

PhoneGap formerly known as Cordova. It provides a free and open cross-platform for developing the mobile applications using html5, css3, and javascript ...
Read more

Introduction to PhoneGap - An Open Source Framework - YouTube

Get an intro to PhoneGap and PhoneGap Build. Learn how to easily create apps with the only open source framework that supports 7 platforms. http ...
Read more

An Introduction to PhoneGap | PACKT Books

An Introduction to PhoneGap written by Robi Sen: one of the many blog articles from Packt Publishing
Read more

Introduction to PhoneGap Development - code.tutsplus.com

PhoneGap is an open source framework for building cross-platform mobile applications with HTML, CSS, and JavaScript. This is an ideal solution for web ...
Read more

About - PhoneGap

PhoneGap solves this by using standards-based web technologies to bridge web applications and mobile devices. Since PhoneGap apps are standards compliant, ...
Read more

Introduction to PhoneGap | Online Learning with Lecturio

Watch the video lecture "Introduction to PhoneGap" by Eduonix Learning Solutions and boost your medical knowledge!
Read more

PhoneGap - YouTube

PhoneGap is an open source solution for building cross-platform mobile apps with modern, standards-based Web technologies. Based on HTML5, PhoneGap ...
Read more