デフォルトのPhoneGapアプリ内容
状態:-
閲覧数:711
投稿日:2018-06-16
更新日:2018-06-22
Cordova Hooks
アプリケーションやプラグインの開発者や独自のビルドシステムによってコードバスコマンドをカスタマイズするために追加できる特別なスクリプトを表しています。詳細については、「フックガイド」を参照してください
パス ／ 構成
パス
▼L:\Android\phoneGapProject\app20180615\www\index.html
ディレクトリ
www
・アプリ開発は基本的にこのディレクトリを利用する
platforms
・ビルド後のアウトプットが出力されるディレクトリ
・ビルド前は空のディレクトリ
・実行時に時々書き換わる
※ビルドがどのタイミングで実行されるか不明。Adobe PhoneGap Desktopアプリ ／「Hello World」では、このディレクトリ内にファイルは存在している
plugins
・アプリならではの挙動にする為のプラグインのプログラムが配置されるディレクトリ
・プラグイン導入前は空のディレクトリ
・実行時に時々書き換わる
※Adobe PhoneGap Desktopアプリ ／「Hello World」では、このディレクトリ内にファイルは存在している
構成
┣platforms/
┃ ┣/browser/
┃ ┃ ┣cordova/
┃ ┃ ┣css/
┃ ┃ ┣img/
┃ ┃ ┣js/
┃ ┃ ┣platform_www/
┃ ┃ ┣res/
┃ ┃ ┣www/
┃ ┃ ┃ ┣/cordova-js-src
┃ ┃ ┃ ┣/css
┃ ┃ ┃ ┣/img
┃ ┃ ┃ ┣/js
┃ ┃ ┃ ┣/plugins
┃ ┃ ┃ ┣/res
┃ ┃ ┃ ┣/spec
┃ ┃ ┃ ┣config.xml
┃ ┃ ┃ ┣confighelper.js
┃ ┃ ┃ ┣cordova.js
┃ ┃ ┃ ┣cordova_plugins.js
┃ ┃ ┃ ┣exec.js
┃ ┃ ┃ ┣index.html
┃ ┃ ┃ ┣platform.js
┃ ┃ ┃ ┗spec.html
┃ ┃ ┃
┃ ┃ ┣browser.json
┃ ┃ ┣config.xml
┃ ┃ ┣index.html
┃ ┃ ┗manifest.webapp
┃ ┃
┃ ┗platforms.json
┃
┣plugins/
┣www/
┃ ┣/css/
┃ ┣/img/
┃ ┣/js/
┃ ┣/res/
┃ ┣/spec/
┃ ┣index.html
┃ ┗spec.html
┃
┣.bithoundrc
┗config.xml
┃ ┣/browser/
┃ ┃ ┣cordova/
┃ ┃ ┣css/
┃ ┃ ┣img/
┃ ┃ ┣js/
┃ ┃ ┣platform_www/
┃ ┃ ┣res/
┃ ┃ ┣www/
┃ ┃ ┃ ┣/cordova-js-src
┃ ┃ ┃ ┣/css
┃ ┃ ┃ ┣/img
┃ ┃ ┃ ┣/js
┃ ┃ ┃ ┣/plugins
┃ ┃ ┃ ┣/res
┃ ┃ ┃ ┣/spec
┃ ┃ ┃ ┣config.xml
┃ ┃ ┃ ┣confighelper.js
┃ ┃ ┃ ┣cordova.js
┃ ┃ ┃ ┣cordova_plugins.js
┃ ┃ ┃ ┣exec.js
┃ ┃ ┃ ┣index.html
┃ ┃ ┃ ┣platform.js
┃ ┃ ┃ ┗spec.html
┃ ┃ ┃
┃ ┃ ┣browser.json
┃ ┃ ┣config.xml
┃ ┃ ┣index.html
┃ ┃ ┗manifest.webapp
┃ ┃
┃ ┗platforms.json
┃
┣plugins/
┣www/
┃ ┣/css/
┃ ┣/img/
┃ ┣/js/
┃ ┣/res/
┃ ┣/spec/
┃ ┣index.html
┃ ┗spec.html
┃
┣.bithoundrc
┗config.xml
・PhoneGapで最速アプリ開発(iOS/Android両対応)
内容
プロジェクトルート直下のindex.html
viewport
・デフォルトアプリでは、設定はコンテンツを100%ロードし（initial-scale=1)、ユーザーによる拡大/縮小を禁止し（user-scalable=no）、デバイスの最大の幅と高さを使用するように設定されている
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
▼www/index.html
<!DOCTYPE html>
<!--
Copyright (c) 2012-2016 Adobe Systems Incorporated. All rights reserved.
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
* Create your own at http://cspisawesome.com
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Hello PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
platforms/browser/www/cordova.js
cordova.js
PhoneGapアプリのJavaScriptからネイティブデバイスハードウェア（カメラ、通信先、GPSなど）に具体的にアクセスするために使用される
・このファイル参照を含めることで、Cordova APIはこれらの機能にアクセスできるようになり、使用可能になる
▼www/index.html
<script type="text/javascript" src="cordova.js"></script>
▼platforms/browser/www/cordova.js
・長過ぎるため未掲載
・57.6 KB
www/js/index.js
このデフォルトアプリ「Hello World」に固有のもの
独自のアプリでは不要
コード
▼www/index.html
<script type="text/javascript" src="js/index.js"></script>
▼www/js/index.js
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
index.js ／ devicereadyイベント
Cordova固有の機能
・このイベントは、CordovaデバイスAPIがロードされ、アクセスできる状態になったことを通知する
・アプリは、HTMLドキュメントのDOMがロードされると、以下のようにdocument.addEventListenerでイベントリスナーに登録される
document.addEventListener('deviceready', this.onDeviceReady, false);
・platforms\browser\js\index.js(29)
document.addEventListener('deviceready', this.onDeviceReady, false);
・platforms\browser\www\js\index.js(29)
document.addEventListener('deviceready', this.onDeviceReady, false);
・www\js\index.js
document.addEventListener('deviceready', this.onDeviceReady, false);
index.js ／ onDeviceReady関数
デバイスが準備できたことを視覚的に表示するreceivedEvent関数を呼び出す
・表示された初期の<p>要素でCSS display属性をnoneに設定する
・代わりに、display属性をblockに設定してindex.htmlのDevice is Ready要素を表示する
▼index.html
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
▼index.js
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}・「Hello World」の説明
・Hello World Explained
・PhoneGapデスクトップアプリの.bithoundrcについて