facebook twitter hatena line email

「Monaca/Helloworld」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「初回ログインすると既に以下のようなHelloworldが設置してある。 プロジェクトを選択し"クラウドIDE"で開くボタンを選択 ==サ...」)
 
 
(同じ利用者による、間の1版が非表示)
行1: 行1:
 
初回ログインすると既に以下のようなHelloworldが設置してある。
 
初回ログインすると既に以下のようなHelloworldが設置してある。
 +
 +
なければこちらから。
 +
https://docs.monaca.io/ja/sampleapp/samples/hello_world/
 +
  
 
プロジェクトを選択し"クラウドIDE"で開くボタンを選択
 
プロジェクトを選択し"クラウドIDE"で開くボタンを選択
行27: 行31:
 
     <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"> &nbsp;</span>,  Version: <span id="version">&nbsp;</span></h4>
 +
        <h4>UUID: <span id="uuid"> &nbsp;</span>,  Name: <span id="name">&nbsp;</span></h4>
 +
        <h4>Width: <span id="width"> &nbsp;</span>,  Height: <span id="height">&nbsp;
 +
                  </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月22日 (金) 11:12時点における最新版

初回ログインすると既に以下のような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>