2. Who am I?
l
l
l
Kenichi Kambara (Twitter @korodroid)
iplatform.org(http://www.iplatform.org/) (Personal)
NTT Software Corporation (Official)
l
Activity(NTT Software as Official)
l
Activity(iplatform.org as Personal)
- Technical Support for Developing
- My Android Apps on Google Play (20+ Apps)
9
10
2
3. Who am I?
l
l
l
l
Kenichi Kambara (Twitter @korodroid)
iplatform.org(http://www.iplatform.org/) (Personal)
NTT Software Corporation (Official)
Activity(iplatform.org as Personal)
9
10
“Sekai Phone”
lReal-Time Translation application
lSupports Only Android (Native App)
lMulti-Screen UX Competition 2013 Excellence Award
3
4. Who am I?
l
l
l
l
Kenichi Kambara (Twitter @korodroid)
iplatform.org(http://www.iplatform.org/) (Personal)
NTT Software Corporation (Official)
Activity(iplatform.org as Personal)
9
10
“XTranslator”
lSimple Translation application
lSupports Cross-Platform
4
5. My session topics
Some tips on developing Cross-Platform Apps
with Web Technologies.
Android, iOS, Firefox OS,
Tizen, Windows Phone...
5
12. The ratio of Mobile Platform?
Android
iOS
Series 40
SymbianOS
Samsung
Unknown
BlackBerry OS
Windows Phone
Other
Stat Counter [Oct 2012 - Oct 2013]
12
13. The ratio of Mobile Platform?
In my App:
Main Target: Android, iOS, FirefoxOS, Tizen
13
14. Native vs. Hybrid vs. Web
Native
Android
Languages Java
Tools
Eclipse
iOS
Hybrid
Objective-C HTML/CSS/JS
HTML/CSS/JS
(PhoneGap)
Xcode
Any Tools
Any Tools
Web site
•Google Play
•App Store
Distribution Google Play App Store
Advantages
Web
Combines
Rich UI & High Performance Fast development Native & Web
14
15. Native vs. Hybrid vs. Web
XTranslator
Sekai Phone
In my App:
My Target: Hybrid (XTranslator) & Native (Sekai Phone)
15
20. Tools
jQuery Mobile
User Interface Framework for Mobile
l
Cross-Platform with HTML5
(Android, iOS, FirefoxOS, Tizen, etc.)
l
Easy to Use
l
Original Mobile UI Components
See also:
Sencha Touch, Kendo UI, Onsen UI…
20
25. Tools
jQuery
A fast, small, and feature-rich JavaScript library
l
Easy to use
l
Useful to simplify code
l DOM traversal and manipulation
l Event handling
l Animation
l Ajax
See also:
zepto.js
25
26. jQuery:Code Example
DOM Traversal & Manipulation
HTML
document.getElementById
(‘translateButton’)
document.getElementById
(‘select-choice-out’)
$(‘#translateButton’)
$('select#select-choice-out')
26
44. PhoneGap:Solution 2
Toast Plugin
Android App
.js
config
.xml
// The case of non-input text
if (value == "") {
ToastCreator.prototype.showToast(showToastSuccess,
showToastFail, 'No Text. Please input text.');
}
return;
}
...
<!-- Toast Plugin -->
<feature name="ToastCreator">
<param name="android-package"
value="org.iplatform.xos.phonegap.ToastCreator"/>
</feature>
44
45. Web & Hardware Collaboration
Even if it is Web app, we can do various things.
45
46. Web-Based App:Problem?
User-defined JS cannot be optimized???
Uncompressed
Maintenance
Minified
Easy
Difficult (Impossible)
Size
Normal
Minimum
Purpose
Debug
Production
46
47. Tools
Closure Compiler
l
A JavaScript optimizing compiler
l
Analyzes JS code, removes dead code and
rewrites and minimizes what's left
l
It is used in many of Google's JavaScript apps
47
48. Web-Based App:Solution
Using Compress Tools
s1.js
s2.js
app.
min.js
// Initialize PhoneGap
function init() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("backbutton", onBackPressed, false);
}
// BackButton Procedure
function onBackPressed() {
navigator.notification.confirm("Do you want to Quit?",
confirmCallback, 'Confirm', 'Cancel, Quit');
}
var aSensor=null;function init()
{document.addEventListener("deviceready",onDeviceReady,!
1);document.addEventListener("backbutton",onBackPressed,!1)}
function onBackPressed(){navigator.notification.confirm("Do you want
to Quit?",confirmCallback,"Confirm","Cancel, Quit")}function
confirmCallback(a){2==a&&navigator.app.exitApp()}
48