「Monaca/Helloworld」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「初回ログインすると既に以下のようなHelloworldが設置してある。 プロジェクトを選択し"クラウドIDE"で開くボタンを選択 ==サ...」) |
(→サンプル) |
||
| 行27: | 行27: | ||
<a class="button--large" href="phonegap-demo.html">Start Demo</a> | <a class="button--large" href="phonegap-demo.html">Start Demo</a> | ||
</body> | </body> | ||
| + | </html> | ||
| + | </pre> | ||
| + | |||
| + | phonegap-demo.html | ||
| + | <pre> | ||
| + | <!DOCTYPE HTML> | ||
| + | <html> | ||
| + | <head> | ||
| + | <title>PhoneGap</title> | ||
| + | <meta name="viewport" content="width=device-width, user-scalable=no"> | ||
| + | <meta http-equiv="Content-type" content="text/html; charset=utf-8"> | ||
| + | <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> | ||
| + | <script type="text/javascript" src="components/loader.js"></script> | ||
| + | <link rel="stylesheet" type="text/css" href="components/loader.css"> | ||
| + | <script type="text/javascript"> | ||
| + | document.addEventListener("deviceready", onDeviceReady, false); | ||
| + | function onDeviceReady(){ | ||
| + | console.log("PhoneGap is ready."); | ||
| + | } | ||
| + | </script> | ||
| + | <link rel="stylesheet" href="phonegap-demo/master.css" type="text/css" media="screen" title="no title"> | ||
| + | <script type="text/javascript" charset="utf-8" src="phonegap-demo/main.js"></script> | ||
| + | </head> | ||
| + | <body onload="init();" id="stage" class="theme"> | ||
| + | |||
| + | <h1>Welcome to Cordova!</h1> | ||
| + | <h2>this file is located at phonegap-demo.html</h2> | ||
| + | <div id="info"> | ||
| + | <h4>Platform: <span id="platform"> </span>, Version: <span id="version"> </span></h4> | ||
| + | <h4>UUID: <span id="uuid"> </span>, Name: <span id="name"> </span></h4> | ||
| + | <h4>Width: <span id="width"> </span>, Height: <span id="height"> | ||
| + | </span>, Color Depth: <span id="colorDepth"></span></h4> | ||
| + | </div> | ||
| + | <a href="#" class="btn large" onclick="getLocation();">Get Location</a> | ||
| + | <a href="tel:411" class="btn large">Call 411</a> | ||
| + | <a href="#" class="btn large" onclick="vibrate();">Vibrate</a> | ||
| + | <a href="#" class="btn large" onclick="show_pic();">Get a Picture</a> | ||
| + | <a href="#" class="btn large" onclick="check_network();return false;">Check Network</a> | ||
| + | <div id="viewport" class="viewport" style="display: none;"> | ||
| + | <img style="width:60px;height:60px" id="test_img" src="" /> | ||
| + | </div> | ||
| + | </body> | ||
</html> | </html> | ||
</pre> | </pre> | ||
2020年5月18日 (月) 16:18時点における版
初回ログインすると既に以下のようなHelloworldが設置してある。
プロジェクトを選択し"クラウドIDE"で開くボタンを選択
サンプル
www/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
</head>
<body>
<h1>HelloWorld!</h1>
<a class="button--large" href="phonegap-demo.html">Start Demo</a>
</body>
</html>
phonegap-demo.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script type="text/javascript" src="components/loader.js"></script>
<link rel="stylesheet" type="text/css" href="components/loader.css">
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
console.log("PhoneGap is ready.");
}
</script>
<link rel="stylesheet" href="phonegap-demo/master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="phonegap-demo/main.js"></script>
</head>
<body onload="init();" id="stage" class="theme">
<h1>Welcome to Cordova!</h1>
<h2>this file is located at phonegap-demo.html</h2>
<div id="info">
<h4>Platform: <span id="platform"> </span>, Version: <span id="version"> </span></h4>
<h4>UUID: <span id="uuid"> </span>, Name: <span id="name"> </span></h4>
<h4>Width: <span id="width"> </span>, Height: <span id="height">
</span>, Color Depth: <span id="colorDepth"></span></h4>
</div>
<a href="#" class="btn large" onclick="getLocation();">Get Location</a>
<a href="tel:411" class="btn large">Call 411</a>
<a href="#" class="btn large" onclick="vibrate();">Vibrate</a>
<a href="#" class="btn large" onclick="show_pic();">Get a Picture</a>
<a href="#" class="btn large" onclick="check_network();return false;">Check Network</a>
<div id="viewport" class="viewport" style="display: none;">
<img style="width:60px;height:60px" id="test_img" src="" />
</div>
</body>
</html>
