facebook twitter hatena line email

Monaca/Helloworld

提供: 初心者エンジニアの簡易メモ
2020年5月22日 (金) 11:12時点におけるAdmin (トーク | 投稿記録)による版

(差分) ←前の版 | 最新版 (差分) | 次の版→ (差分)
移動: 案内検索

初回ログインすると既に以下のようなHelloworldが設置してある。

なければこちらから。 https://docs.monaca.io/ja/sampleapp/samples/hello_world/


プロジェクトを選択し"クラウド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>