Webプログラミング学習8:Apache CordovaによるWebアプリケーションの移動化
前の練習では、簡単だが完全なWebアプリケーションを作り、HTML 5技術を使って実現しました.
今日はもっと面白い練習をして、今からApache Cordovaを通じてiOS上のモバイルアプリケーションにパッケージします.
基本的に変更する必要がなくiOSプラットフォームに移行できることがわかります.
Cordovaは昔のPhoneGapです.
ホームアドレス:https://cordova.apache.org/
1.Cordovaのインストール
ここにインストールされているcordova 3.0.6
2.employeeという名前のApache Cordovaプロジェクトを作成
cordova -d create ~/Documents/CordovaProjects/employee com.sample employee
iOSのサポートを追加:
cordova -d platform add ios
3.sapui 5のパッケージをダウンロードし、解凍してresourceフォルダをemployee/wwwにコピーする
4.indexを修正します.html
5.プロジェクトへのファイルのコピー:
cordova -d prepare ios
6.XCodeでemployeeプロジェクトを開き、iOSシミュレータで実行します.
小結:これがHTML 5を使って開発されたメリットで、Cordovaを通じてWebアプリケーションをさまざまな携帯電話プラットフォームに簡単に移行することができます.
今日はもっと面白い練習をして、今からApache Cordovaを通じてiOS上のモバイルアプリケーションにパッケージします.
基本的に変更する必要がなくiOSプラットフォームに移行できることがわかります.
Cordovaは昔のPhoneGapです.
ホームアドレス:https://cordova.apache.org/
1.Cordovaのインストール
ここにインストールされているcordova 3.0.6
2.employeeという名前のApache Cordovaプロジェクトを作成
cordova -d create ~/Documents/CordovaProjects/employee com.sample employee
iOSのサポートを追加:
cordova -d platform add ios
3.sapui 5のパッケージをダウンロードし、解凍してresourceフォルダをemployee/wwwにコピーする
4.indexを修正します.html
<!DOCTYPE html>
<!--
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" />
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
// create the DataTable control
var oTable = new sap.ui.table.Table({
editable : true
});
// define the Table columns
var oControl = new sap.ui.commons.TextView({
text : "{Id}"
}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "ID"
}),
template : oControl,
sortProperty : "id",
filterProperty : "id",
width : "100px"
}));
// define the Table columns
var oControl = new sap.ui.commons.TextView({
text : "{FirstName}"
}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "First Name"
}),
template : oControl,
sortProperty : "firstName",
filterProperty : "firstName",
width : "100px"
}));
// define the Table columns
var oControl = new sap.ui.commons.TextView({
text : "{LastName}"
}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Last Name"
}),
template : oControl,
sortProperty : "lastName",
filterProperty : "lastName",
width : "100px"
}));
var oModel = new sap.ui.model.odata.ODataModel(
"http://localhost:8080/jpa2/Employee.svc/");
//var oModel = new sap.ui.model.odata.ODataModel(serviceUrl);
oTable.setModel(oModel);
oTable.bindRows("/Employees");
// finally place the Table into the UI
oTable.placeAt("content");
</script>
<script type="text/javascript" src="cordova.js"></script>
<title>Hello World</title>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
5.プロジェクトへのファイルのコピー:
cordova -d prepare ios
6.XCodeでemployeeプロジェクトを開き、iOSシミュレータで実行します.
小結:これがHTML 5を使って開発されたメリットで、Cordovaを通じてWebアプリケーションをさまざまな携帯電話プラットフォームに簡単に移行することができます.