< 前へ | 次へ >

演習 2: Cordova のダイアログおよびスプラッシュ画面プラグインの使用

この演習では、Cordova のダイアログおよびスプラッシュ画面プラグインの使用方法と、アプリケーションをデバイス・エミュレーター上で実行する方法を説明します。

始める前に

始める前に、演習 1: Cordova のダイアログおよびスプラッシュ画面プラグインを使用して Cordova プロジェクトを作成するを完了しておく必要があります。

手順

  1. 「www」 > 「css」 > 「index.css」を右クリックし、「アプリケーションから開く」 > 「CSS エディター」を選択します。既存の css コードを、以下に置き換えてください。 
    h1 {
	text-align:center;
    font-size:24px;
    font-weight:normal;
    overflow:visible;
    text-transform:uppercase;
}

/* Portrait layout (default) */
.headers {
	position: absolute;
	width: 60%;
	left: 20%;
	text-align: center;
}

/* Landscape layout */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
	.headers {
		position: absolute;
		left: 20%;
		text-align:center;
	}
}

.textContent {
	position: absolute;
	top: 100px;
	width: 80%;
	left: 10%;
	text-align: left;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:<FFFFFF;
    font-size:12px;
}

.event.listening {
    background-color:<333333;
    display:block;
}

.event.received {
    background-color:<4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}

.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
  2. 「www」 > 「js」 > 「index.js」を右クリックし、「アプリケーションから開く」 > 「JavaScript エディター」を選択します。既存の js コードを、以下に置き換えてください。 
    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() {
		navigator.splashscreen.hide();
		navigator.notification.alert('Application ready to use', function(){}, 'Ready to use');
		var parentElement = document.getElementById('deviceready');
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');
    }
};
  3. 「www」 > 「index.html」を右クリックし、「アプリケーションから開く」 > 「HTML エディター」を選択します。既存の html コードを、以下に置き換えてください。 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>SplashScreen Sample</title>
    </head>
    <body>
    	<div class="headers">
	   		<h1>SplashScreen sample</h1>
	   		<div id="deviceready" class="blink">
	    		<p class="event listening">Connecting to Device</p>
	    		<p class="event received">Device is ready</p>
	    	</div>
    	</div>
    	<div class="textContent">
    		<p>This sample shows how to use SplashScreen and Dialogs plugins in a Cordova project.</p>
		<p>
			Note that the functionality that deals with closing the splashscreen
			and popping up the notification dialog, when the application is ready 
			to use, are provided in this application in <code>js/index.js</code>
		</p>
		<p>
			The entry point to call native functionality (splashscreen and
			dialogs in this sample) is <code>cordova.js</code>, which is added 
			to the project during build time.
		</p>
	</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>
  4. スプラッシュ画面プロジェクトを右クリックし、「Run As」 > 「モバイル・デバイス・エミュレーターで実行」をクリックします。 デバイス・エミュレーターは、「モバイル・デバイス・エミュレーターで実行」オプションを使用する前に起動しておく必要があります。使用しているコンピューターに Android デバイスを接続している場合は、この代わりに「Run As」 > 「モバイル・デバイスで実行」オプションを使用して、アプリケーションが物理デバイス上で動作するのを確認できます。

タスクの結果

スプラッシュ画面アプリケーション:
スプラッシュ画面の出力
< 前へ | 次へ >
フィードバック