ã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãããã¯éçºã®æªæ¥ã§ã¯ãªãããã§ã«ååšããŠããŸãã çŸåšã12å人ãã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ã䜿çšããŠããŸããããã®æ°ã¯åžžã«å¢å ããŠããŸãïŒ
ãŠã£ãããã£ã¢ ïŒã ããã«ãã¢ãã€ã«ããã€ã¹ã®æ°ã¯å°çäžã®äººã
ã®æ°ãè¶
ããã§ãããã ã¢ãã€ã«ããã€ã¹ã®æ°ã®å¢å çãå€ãããªãå Žåã2017幎ãŸã§ã«51å人ãã¢ãã€ã«ããã€ã¹ã䜿çšããããšã«ãªããŸãã
ã¢ããªã±ãŒã·ã§ã³éçºè
ãšããŠã®ç§ãã¡ã«ãšã£ãŠãã¢ãã€ã«ãŠãŒã¶ãŒã«éèŠãããã°ãã¢ãã€ã«ãŠãŒã¶ãŒãèæ
®ããŠã¢ããªã±ãŒã·ã§ã³ãéçºããããšãéèŠã§ãã AngularJSã¯ãAngularJSããŒã ãšã³ãã¥ããã£ã®äž¡æ¹ãäœæããã¢ãã€ã«ãµããŒããå®è£
ããŠããŸãã
ãã®èšäºã§ã¯ãã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ã®éçºã§èªè
ã«äœéšãæäŸããããã«ã2ã€ã®ç°ãªãæ¹æ³ã§äœæ¥ããŸãã
ã¬ã¹ãã³ã·ãWebã¢ããªã±ãŒã·ã§ã³
AngularJSã§ã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãäœæããæãç°¡åãªæ¹æ³ã¯ãããªãã¿ã®ãæ°ã«å
¥ãã®ããŒã«ã§ããHTMLãšCSSã䜿çšããŠãAngularJSã䜿çšããŠå®å
šã«æ©èœããã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãäœæããããšã§ãã AngularJSã¢ããªã±ãŒã·ã§ã³ã¯ãã§ã«HTMLã«åºã¥ããŠããããããããžã§ã¯ãã®ããŸããŸãªããã€ã¹ãšããåãããããã®ã¢ãŒããã¯ãã£ãéžæã§ããŸãã
çžäºäœçš
ãã¹ã¯ãããã¢ããªã±ãŒã·ã§ã³ã®å Žåã
ng-click
ãã£ã¬ã¯ãã£ããªã©ã䜿çšããã¢ããªã±ãŒã·ã§ã³ãšã®å¯Ÿè©±ã¯ãã§ã«å©çšå¯èœã§ãã
AngularJSããŒãžã§ã³1.2.0以éãããæ°ããã¢ãžã¥ãŒã«
ngTouch
ãããã§ãã¢ãã€ã«ããã€ã¹ãšå¯Ÿè©±ã§ããããã«
ngTouch
ã ãã®ã©ã€ãã©ãªã¯ãAngularJSã®ã³ã¢ã«ã¯çµã¿èŸŒãŸããŠããŸãããã€ã³ã¹ããŒã«ããå¿
èŠããããŸãã
èšçœ®
ngTouchã¯ããã€ãã®æ¹æ³ã§ã€ã³ã¹ããŒã«ã§ããŸãã ãã®ã¢ãžã¥ãŒã«ãã€ã³ã¹ããŒã«ããæãç°¡åãªæ¹æ³ã¯ã
angle.orgããããŠã³ããŒãããããš
ã§ã ã
ããŠã³ããŒããã€ã¢ãã°ã§è¿œå æ©èœãèŠã€ããŠãããŠã³ããŒãããŒãžã«ç§»åããng-touch.jsãã¡ã€ã«ãã¢ããªã±ãŒã·ã§ã³ã§å©çšå¯èœãªä»»æã®å Žæã«ããŠã³ããŒãããŸãã
代ããã«ãBowerã䜿çšããŠangle
angular-touch
ãã€ã³ã¹ããŒã«ã§ããŸãã
$ bower install angular-touch --save
ãããã«ããŠãããã®ã©ã€ãã©ãªãžã®ãªã³ã¯ãindex.htmlãã¡ã€ã«ã«è¿œå ããå¿
èŠããããŸãã
<script src="/bower_components/angular-touch/angular-touch.js"></script>
æåŸã«ãã¢ããªã±ãŒã·ã§ã³ã®äŸåé¢ä¿ãšããŠ
ngTouch
ãæ¥ç¶ããå¿
èŠããããŸãã
angular.module('myApp', ['ngTouch']);
ããã§ãngTouchã©ã€ãã©ãªã䜿çšã§ããŸãã
ngTouch
ã¢ãã€ã«ãã©ãŠã¶ã¯ãã¯ãªãã¯ããŒã¹ã®ã€ãã³ããããªã¬ãŒãããšãããã¹ã¯ãããã®å¯Ÿå¿ãããã©ãŠã¶ãšã¯å€å°ç°ãªãåäœãããŸãã ã¢ãã€ã«ãã©ãŠã¶ã¯ãã¯ãªãã¯ã®ã¢ã¯ã·ã§ã³ãæ€åºããåŸã300ããªç§åŸ
æ©ããŸãããŸãã¯ãç»é¢äžã§ããã«ã¯ãªãã¯ãããªã©ãçºçãããå¿
èŠã®ããç¹å®ã®ã€ãã³ããæ±ºå®ããåã«ãããã«ã€ããŠäœããåŸ
ã¡ãŸãã ãã®é
å»¶ã®åŸããã©ãŠã¶ã¯
click
ã€ãã³ããçºçãã
click
ã
ãã®é
å»¶ã«ãããã¢ããªã±ãŒã·ã§ã³ã®åå¿ãé
ããªãå ŽåããããŸãã
click
ã€ãã³ããåŠçãã代ããã«ã
touch
ã€ãã³ããåŠçããŠãããåé¿ããå¿
èŠããããŸãã
æåã®ã¯ãªãã¯ãçºçãããšããã©ãŠã¶ã¯click
ã€ãã³ãã®çºçãé
ãããæ¬¡ã®ã¢ã¯ã·ã§ã³ãåŸ
ã¡click
ã ngTouch
ããã®ã¢ã¯ã·ã§ã³ãèªåçã«åŠçããŸãããã®çµæã
ng-click
ãã£ã¬ã¯ãã£ãã¯ãã¢ãã€ã«ãã©ãŠã¶ã§ããã¹ã¯ããããã©ãŠã¶ãšåãããã«æ©èœããŸãã
<button ng-click="save()">Save</button>
ngTouch
ã¯ãã¹ã¯ã€ããã£ã¬ã¯ãã£ããšãã2ã€ã®æ°ãããã£ã¬ã¯ãã£ãã远å ããŸãã ãããã®ãã£ã¬ã¯ãã£ãã«ãããç»é¢ã®å·Šç«¯ãŸãã¯å³ç«¯ã«åãããããŠãŒã¶ãŒã®æã®åãã远跡ã§ããŸãã ãŠãŒã¶ãŒãžã§ã¹ãã£ã远跡ããå Žåã«äŸ¿å©ã§ããããã«ãããã®ã£ã©ãªãŒå
ã®æ¬¡ã®åçããŸãã¯ã¢ããªã±ãŒã·ã§ã³ã®æ¬¡ã®éšåã«ã¹ã¯ããŒã«ããããšã«ãªããŸãã
ngSwipeLeft
ãã£ã¬ã¯ãã£ãã¯ããŠãŒã¶ãŒã®æã®å³ããå·Šãžã®åãã远跡ãã
ngSwipeRight
ãã£ã¬ã¯ãã£ãã¯ãæã®å·Šããå³ãžã®åãã远跡ããŸãã
ngSwipe *ãã£ã¬ã¯ãã£ãã®åªããæ©èœã®1ã€ã¯ãã¯ãªãã¯ãåããªã©ã®ããŠã¹ã€ãã³ãã ãã§ãªããã¿ããããã€ã¹ã§ãæ©èœããããšã§ããngSwipeLeft
ããã³
ngSwipeRight
ã䜿çšããã®ã¯ç°¡åã§ãã ããšãã°ãé»åã¡ãŒã«ã¡ãã»ãŒãžã®ãªã¹ãããããäžè¬çãªMailboxAppã¢ãã€ã«ã¡ãŒã«ã¯ã©ã€ã¢ã³ãã®ããã«ãåã¬ã¿ãŒã§äœ¿çšå¯èœãªã¢ã¯ã·ã§ã³ã衚瀺ãããšããŸãã
ã¹ã¯ã€ããã£ã¬ã¯ãã£ããšã¡ãã»ãŒãžãªã¹ãã䜿çšããŠããã®æ©èœãç°¡åã«å®è£
ã§ããŸãã ã¡ãã»ãŒãžã®ãªã¹ãã衚瀺ãããšããç¹å®ã®æ¹åãžã®ãŠãŒã¶ãŒãžã§ã¹ãã£ã®è¿œè·¡ããªã³ã«ããŠããã®ã¡ãŒã«ã¡ãã»ãŒãžã®å¯èœãªã¢ã¯ã·ã§ã³ã衚瀺ããŸãã
ã¡ãŒã«ã¡ãã»ãŒãžã®ã¢ã¯ã·ã§ã³ã衚瀺ããå Žåãå察æ¹åã«åãããããŠãŒã¶ãŒãžã§ã¹ãã£ã®è¿œè·¡ãæå¹ã«ããŸãããã®å Žåã以åã«è¡šç€ºãããã¢ã¯ã·ã§ã³ãé衚瀺ã«ããŸãã
<ul> <li ng-repeat="mail in emails"> <div ng-show="!mail.showActions" ng-swipe-left="mail.showActions=true"> <div class="from"> : <span>{{ mail.from }}</span> </div> <div class="body"> {{ mail.body }} </div> </div> <div ng-show="mail.showActions" ng-swipe-right="mail.showActions=false"> <ul class="actions"> <li><button></button></li> <li><button></button></li> </ul> </div> </li> </ul>
å
ã®èšäºã®ãããµã€ãã§å®éã®äŸãèŠãããšãã§ããŸãã$ã¹ã¯ã€ããµãŒãã¹
$swipe
ã䜿çšããŠãæèŠã¢ãã¡ãŒã·ã§ã³ã®ããã»ã¹ã埮調æŽã§ããŸãã
$swipe
䜿çšãããšãã€ãã³ããä¿çããã³ãã©ãã°ããæœè±¡åããŠãããé«ãã¬ãã«ã®åäœã«ã§ããŸãã
$swipe
ã¯ãåäžã®
bind()
ã¡ãœããããããŸãã
bind()
ã¡ãœããã¯ãã¢ã¯ã·ã§ã³ãã¢ã¿ããããããªããžã§ã¯ããšã4ã€ã®ã€ãã³ããã³ãã©ãŒãæã€ãªããžã§ã¯ããåãå
¥ããŸãã
ãããã®ã€ãã³ããã³ãã©ãŒã¯ãããšãã°
{ x: 200, y: 300 }
ãªã©ã®ãªããžã§ã¯ãã®åº§æšãå«ããã©ã¡ãŒã¿ãŒã§åŒã³åºãããŸãã
ãããã®4ã€ã®ã€ãã³ããã³ãã©ãŒã¯ãã€ãã³ããã³ãã©ãŒãå®çŸ©ããŸãã
å§ãã
mousedown
ãŸãã¯
touchstart
ã€ãã³ãã
touchstart
ãããšã
start
ã€ãã³ããçºçããŸãã ãã®ã€ãã³ãã®åŸã
$swipe
ãµãŒãã¹ã¯
touchmove
ããã³
mousemove
ãã³ãã©ãŒãã»ããã¢ããããŸãã 誀ã£ãããªã¬ãŒãé²ãããã«ããã®ã€ãã³ãã¯ãåèšç§»åè·é¢ãç¹å®ã®æå°å€ãè¶
ããåŸã«ã®ã¿çºçããŸãã
åèšç§»åè·é¢ããã®æå°å€ãè¶
ãããšã次ã®2ã€ã®ã¢ã¯ã·ã§ã³ã®ãããããå®è¡ãããŸãã
- åçŽãªãã»ãããæ°Žå¹³ãªãã»ããããã倧ããå Žåããã©ãŠã¶ã¯
scroll
ã€ãã³ããçºçããscroll
ã - æ°Žå¹³æ¹åã®ãªãã»ãããåçŽæ¹åããã倧ããå Žåãã¢ã¯ã·ã§ã³ã¯ã¿ãããžã§ã¹ãã£ãšèŠãªããã
move
ããã³end
ã€ãã³ãã¯ãžã§ã¹ãã£ãããã«è¿œè·¡ããããã«äœ¿çšãããŸã
åã
move
ã€ãã³ãã¯
mousemove
touchmove
ãŸãã¯
touchmove
åŸã«çºçã
mousemove
ã¯ã
$swipe
ãµãŒãã¹ããŠãŒã¶ãŒã®ã¢ã¯ã·ã§ã³ããžã§ã¹ãã£ãŒã§ãããšå€æãããã®ãžã§ã¹ãã£ãŒããŸã å®äºããŠããªãå Žåã®ã¿ã§ãã
çµãã
end
ã€ãã³ãã¯ãåã«çºçãã
move
ã€ãã³ãã®åŸã«
touchend
ãŸãã¯
mouseup
ã€ãã³ãã
touchend
ããåŸã«çºç
move
ãŸãã
åãæ¶ã
cancel
ã€ãã³ãã¯ã
touchcancel
ã€ãã³ããçºçããåŸããŸãã¯
start
ã€ãã³ããçºç
start
åŸãããŒãžãã¹ã¯ããŒã«ãéå§ãããšãã«çºçããŸãã
ããã䜿çšããŠãããšãã°ããžã§ã¹ãã£ãŒã䜿çšããŠã¹ã©ã€ããŒãå¶åŸ¡ã§ãããã£ã¬ã¯ãã£ããäœæããç»é¢ã«è¡šç€ºãããã¹ã©ã€ããå¶åŸ¡ã§ããŸãã ã¢ãã€ã«ããã€ã¹ã§ãžã§ã¹ãã£ãåŠçããã«ã¯ã
$swipe
ãµãŒãã¹ã䜿çšããŠãç¬èªã®ããžãã¯ãä»ããŠãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ã€ã¹ã¬ã€ã€ãŒã衚瀺ããŸãã
angular.module('myApp') .directive('mySlideController', ['$swipe', function($swipe) { return { restrict: 'EA', link: function(scope, ele, attrs, ctrl) { var startX, pointX; $swipe.bind(ele, { 'start': function(coords) { startX = coords.x; pointX = coords.y; }, 'move': function(coords) { var delta = coords.x - pointX;
è§åºŠãžã§ã¹ãã£ãŒãšã¿ããã¹ã¯ãªãŒã³ãžã§ã¹ãã£ãŒ
Angular-gestures
ã¯ãAngularJSã¢ããªã±ãŒã·ã§ã³ã§ã¿ãããžã§ã¹ãã£ãåŠçã§ããåå¥ã®è§åºŠã¢ãžã¥ãŒã«ã§ãã éåžžã«äººæ°ããããå®çžŸã®ãã
hammer.jsã©ã€ãã©ãªã«åºã¥ããŠããŸãã
hammer.jsã©ã€ãã©ãªã¯ãäžè¬çãªã¿ããã¹ã¯ãªãŒã³ã€ãã³ãã§ããå€ãã®ã€ãã³ããæäŸããŸãã
- ã¿ãã
- ããã«ã¿ãã
- ã¹ã¯ã€ã
- ãã©ãã°
- ãã³ã
- å転
angular-gestures
ã©ã€ãã©ãªã䜿çšãããšãAngularJSãã£ã¬ã¯ãã£ããä»ããŠãããã®ã€ãã³ãã䜿çšã§ããŸãã ããšãã°ããããã®ãã£ã¬ã¯ãã£ãã¯ãã¹ãŠäœ¿çšå¯èœã«ãªããŸãã
- hmDoubleTap
- hmDragStart
- hmDrag
- hmDragUp
- hmDragDown
- hmDragLeft
- hmDragRight
- hmDragEnd
- hmHold
- hmPinch
- hmPinchIn
- hmPinchOut
- hmRelease
- hmRotate
- hmSwipe
- hmSwipeUp
- hmSwipeDown
- hmSwipeLeft
- hmSwipeRight
- hmTap
- hmTouch
- hmTransformStart
- hmTransform
- hmTransformEnd
è§åºŠãžã§ã¹ãã£ãŒãã€ã³ã¹ããŒã«ãã
angular-gestures
ã©ã€ãã©ãªãã€ã³ã¹ããŒã«ããã«ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ã¡ã€ã³ããŒãžã§ãgestures.jsãã¡ã€ã«ïŒãŸãã¯gestures.min.jsïŒãå«ããã ãã§ãã
GitHubãªããžããªããGestures.jsãçŽæ¥ããŠã³ããŒãããããããã«Bowerã䜿çšã§ããŸãã
Bowerã䜿çšããŠ
angular-gestures
ãã€ã³ã¹ããŒã«ããã«ã¯ã次ã®ã³ãã³ãã䜿çšããŸãã
$ bower install --save angular-gestures
æåŸã«ãAngularã¢ããªã±ãŒã·ã§ã³ã®Angular
angular-gestures
äŸåé¢ä¿ãèšå®ããå¿
èŠããããŸãã
angular.module('myApp', ['angular-gestures']);
è§åºŠãžã§ã¹ãã£ãŒã®äœ¿çš
ãšããããAngularãžã§ã¹ãã£ãŒã¯æ¬åœã«äœ¿ããããã§ãã ãžã§ã¹ãã£ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ä»ã®ãã£ã¬ã¯ãã£ããšåãããã«äœ¿çšã§ããAngularãã£ã¬ã¯ãã£ãã§ãã
ãŠãŒã¶ãŒããã©ãã®ã£ã©ãªãŒã®åçãå転ãçž®å°ãæ¡å€§ã§ããããã«ããå¿
èŠããããšããŸãã Hammer.jsã©ã€ãã©ãªã䜿çšããŠãå¿
èŠãªãžã§ã¹ãã£ãŒãåŠçã§ããŸãã
ãã®äŸã§ã¯ãç»é¢ã®ã¿ããã«å¿ããŠã©ã³ãã ã·ãããèšå®ããŸãã ãããå®è£
ããããã«ãä»åã¯
hm-tap
ãã£ã¬ã¯ãã£ãã䜿çšããŠã次ã®HTMLã³ãŒããäœæããŸããã
<div id="photowrapper"> <div class="cardProps" hm-tap="tapped($event)"> <div class="tradingcard"> <img src="/img/ari.jpeg" alt="" /> <span>Ari</span> </div> <div class="tradingcard"> <img src="/img/nate.jpeg" alt="" /> <span>Nate</span> </div> </div> </div>
ãã®HTMLã§ã¯ããããã
hm-tap
ãã£ã¬ã¯ãã£ããããã§äœ¿çšãããŠãããšããäºå®ã
hm-tap
ã°ãèªåã«ãšã£ãŠæ°ãããã®ã¯äœãèŠã€ãããŸããã ãã®
angular-gestures
ãã£ã¬ã¯ãã£ãã¯ãç»åãããã¯ãããšãã«æ©èœããŸãã
Hammer.js
ãã£ã¬ã¯ãã£ãã¯è§åºŠåŒã§æ©èœããããã颿°ãåŒã³åºããŠãã®äžã§ããŸããŸãªã¢ã¯ã·ã§ã³ãå®è¡ã§ããŸãïŒããšãã°ã
ng-click
ãšåãïŒãããã«ã
Hammer.js
èšå®ã§æ©èœã§ããŸãã
äžèšã®äŸã§ã¯ã
$scope
ã§
tapped()
ãšããŠå®çŸ©ããã颿°ãåŒã³åºããŸããã ãã®é¢æ°ã®ã³ãŒãã¯æ¬¡ã®ãšããã§ãã
$scope.tapped = function($event) { var ele = $event.target; var x = Math.floor(Math.random() * 200) + 1, y = Math.floor(Math.random() * 100) + 1, z = Math.floor(Math.random() * 6) + 1, rot = Math.floor(Math.random()*360)+1; $(ele).css({ 'transform': "translate3d("+x+"px,"+y+"px,"+z+"px)" + "rotate("+rot+"deg)" }); }
angular-gestures
ã©ã€ãã©ãªã¯ãç¹å¥ãª
$event
åŒæ°ãä»ããŠã€ãã³ããªããžã§ã¯ããžã®ã¢ã¯ã»ã¹ãæäŸããŸãã
target
ã€ãã³ãããããã£ïŒ
$event.target
ïŒã䜿çšããŠããŠãŒã¶ãŒãã¯ãªãã¯ããèŠçŽ ãšãèŠçŽ ã䜿ã£ãŠããŸããŸãªããªãã¯ãå®è¡ããããšã§ã倢äžã«ãªããããšãã§ãããšãã倿ããŸãã
å
ã®èšäºã®ãããµã€ãã§å®éã®äŸãèŠãããšãã§ããŸããCordovaã䜿çšãããã€ãã£ãã¢ããª
Cordoveã¯ããã€ãã£ãã³ãŒãã®ä»£ããã«æšæºã®Web APIã䜿çšããŠã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãäœæã§ãããç¡æã§äœ¿çšã§ãããªãŒãã³ãœãŒã¹ãã¬ãŒã ã¯ãŒã¯ã§ãã ããã«ãããObjective-CãŸãã¯JavaïŒããããiOSãŸãã¯AndroidçšïŒã§èšè¿°ãã代ããã«ãHTMLãJavaScriptãCSSãAngularJSã䜿çšããŠã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãèšè¿°ã§ããŸãã

Cordovaã¯JavaScript APIãä»ããŠãã€ãã£ãããã€ã¹ãžã®ã¢ã¯ã»ã¹ãæäŸããŸããããã«ãããããã€ã¹ããã®ããŒã¿ã®åä¿¡ãã«ã¡ã©ã®äœ¿çšãªã©ãããã€ã¹åºæã®æäœãå®è¡ã§ããŸãã ãã©ã°ã€ã³ãµããŒãã䜿çšããŠæ§ç¯ãããŠããããããªãŒãã£ãªããã€ã¹ã«ã¢ã¯ã»ã¹ãããããŒã³ãŒããã¹ãã£ã³ãããããããã®ãã©ã°ã€ã³ãªã©ãå°éå®¶ãäœæããããŸããŸãªCordovaãã©ã°ã€ã³ãå©çšã§ããŸãã
Cordovaã䜿çšããå©ç¹ã®1ã€ã¯ãã¢ãã€ã«ç°å¢ããµããŒãããããã«äœæãããAngularJSã³ãŒããåå©çšã§ããããšã§ãã ãã¡ãããããã䜿çšãããšãããã©ãŒãã³ã¹ããã€ãã£ãã³ã³ããŒãã³ããžã®çŽæ¥ã¢ã¯ã»ã¹ãªã©ãããã€ãã®åé¡ãçºçããŸãã
èšçœ®
Cordovaãã£ã¹ããªãã¥ãŒã·ã§ã³ã¯
npm
ããã±ãŒãžãšããŠé
åžãããããã
npm
ã䜿çšããŠã€ã³ã¹ããŒã«ããå¿
èŠããããŸãã
npm
ã€ã³ã¹ããŒã«ãããŠããªãå Žåã¯ã
node
ã€ã³ã¹ããŒã«ãããŠãããã©ããã確èªããŠãã ããã NodeJSã®ã€ã³ã¹ããŒã«ã«ã€ããŠã¯
ããæ¬¡ã®ã¹ããããã®ç« ããèªã¿ãã ããã
$ npm install -g cordova

Cordovaããã±ãŒãžã«ã¯ãã¢ããªã±ãŒã·ã§ã³ãäœæããããã®ãžã§ãã¬ãŒã¿ãŒãå«ãŸããŠãããCordovaã§äœ¿çšã§ããããã«ããŸãã
Cordovaã®äœ¿çšãéå§ãã
Cordovaã®äœ¿çšã¯ç°¡åã§ãã ãžã§ãã¬ãŒã¿ãŒã䜿çšããŠãCordovaã¢ããªã±ãŒã·ã§ã³ã®éå§ç¹ãäœæããŸãã ã¢ããªã±ãŒã·ã§ã³ãGapAppãšåŒã³ãŸãã
ãžã§ãã¬ãŒã¿ãŒã¯3ã€ã®ãã©ã¡ãŒã¿ãŒã§åäœããŸãïŒ
- project-directoryïŒå¿
é ïŒ-ã¢ããªã±ãŒã·ã§ã³ãäœæããããã£ã¬ã¯ããªã
- package-id-ãããžã§ã¯ãIDïŒéãã¡ã€ã³ã¹ã¿ã€ã«ã®ããã±ãŒãžåïŒ
- name-ããã±ãŒãžåïŒã¢ããªã±ãŒã·ã§ã³åïŒ
$ cordova create gapapp io.fullstack.gapapp "GapApp"
gapapp
ãã£ã¬ã¯ããªã¯ãããã±ãŒãžèå¥å
io.fullstack.gapapp
ãšãããžã§ã¯ãå
GappApp
䜿çšããŠããã®è¡ïŒæåã®ãã©ã¡ãŒã¿ãŒã§å®çŸ©ïŒã«äœæãããŸãã

CordovaããŒã ã¯ããããã©ã°ã€ã³ã«åå²ãããããéçºããªããã©ãããã©ãŒã ãæ¥ç¶ããå¿
èŠã¯ãããŸããïŒä»ã®ãã©ãããã©ãŒã ããµããŒãããããã®éçºã容æã«ãªããŸãïŒã ããã¯ããµããŒãããäºå®ã®ãã©ãããã©ãŒã ããããžã§ã¯ãã«æç€ºçã«è¿œå ããå¿
èŠãããããšãæå³ããŸãã
ãããžã§ã¯ãã®äœæ¥ãç¶ããã«ã¯ã次ã®ããã«ãã£ã¬ã¯ããªã«ç§»åããå¿
èŠããããŸãã ããã«ã³ãã³ããå®è¡ããå¿
èŠããããŸãïŒ
$ cd gapapp/
iOSçšã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŸãïŒããã»ã¹ã¯ä»ã®ãã©ãããã©ãŒã ã§ãåãã§ãïŒã iOSãã©ãããã©ãŒã ã远å ããã«ã¯ã次ã®Cordovaã³ãã³ãã䜿çšããŠããããžã§ã¯ãã«ãã®ãµããŒãã远å ããã ãã§ãã
$ cordova platform add ios
次ã®ã³ãã³ããæ©èœããã«ã¯ãiOS SDKãšXcodeãã€ã³ã¹ããŒã«ãããŠããããšã確èªããå¿
èŠããããŸãã
developer.apple.comããiOS SDKãšXcodeãããŠã³ããŒãã§ããŸãã
å¿
èŠãªãã®ããã¹ãŠã€ã³ã¹ããŒã«ããããç°¡åãªã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãã
$ cordova build ios
çŸåšãAppleéçºè
ã®ããŒã«ã«ã¯ããã€ãã®å°é£ããããããŒã«ã«iOSã·ãã¥ã¬ãŒã¿ãŒã§åäœããããã«ã¢ããªã±ãŒã·ã§ã³ã調æŽããå¿
èŠããããŸãã
platforms
ãã£ã¬ã¯ããªãèŠã€ããã¢ããªã±ãŒã·ã§ã³ã®ãã£ã¬ã¯ããªã«è¡ããŸãããã ãã®äžã«ã¯ã以åã«åŒã³åºããã
platform add
ã³ãã³ãã«ãã£ãŠäœæããã
ios
ãã£ã¬ã¯ããªããã
platform add
ã

Xcodeã§ã以åã«äœæãããããžã§ã¯ããéããŸãã Xcodeã®äžéšã«ãããã©ãããã©ãŒã èå¥åã«simããªã¹ããããŠããããšã確èªããŠãã ããã

å®è¡ãã¯ãªãã¯ããŸãã
ãã®åŸãã·ãã¥ã¬ãŒã¿ã§Cordovaã¢ããªã±ãŒã·ã§ã³ã®éå§ã衚瀺ãããŸãã

Cordovaã䜿çšããéçºããã»ã¹
Cordovaã«ã¯ãApache Foundationã«ãã£ãŠæ¿èªãããPhoneGapãããžã§ã¯ããå«ãŸããŠããŸãã ãã®ãããžã§ã¯ãã«ã¯ãäœæããå±éãŸã§ãã¢ããªã±ãŒã·ã§ã³ãšå¯Ÿè©±ããããã«äœ¿çšããã³ãã³ãã©ã€ã³ããŒã«ãå«ãŸããŠããŸãã
ãã©ãããã©ãŒã
çŸæç¹ã§ã¯ãã¢ããªã±ãŒã·ã§ã³ãäœæãããã©ãããã©ãŒã ã远å ããŠããŸãïŒãã®å Žåã¯iOSïŒã
Cordoveã¢ããªã±ãŒã·ã§ã³ã®å Žåã䜿çšå¯èœãªãã©ãããã©ãŒã ã®ãªã¹ãã¯ã䜿çšããéçºç°å¢ã«ãã£ãŠç°ãªããŸãã Macã§ã¯ã次ã®ãã©ãããã©ãŒã ãå©çšå¯èœã§ãã
- iOS
- Android
- ãã©ãã¯ããªãŒ10
- Firefox OS
Windowsã§ã¯ã次ã®ãã©ãããã©ãŒã åãã«éçºã§ããŸãã
- Android
- Windows Phone 7
- Windows Phone 8
- Windows8
- ãã©ãã¯ããªãŒ10
- Firefox OS
ã©ã®ãã©ãããã©ãŒã ãå©çšå¯èœã§ã€ã³ã¹ããŒã«ãããŠããããç¥ãããå Žåã¯ã
platforms
ã³ãã³ããå®è¡ããŠä»¥äžã確èªããå¿
èŠããããŸãã
$ cordova platforms ls
ãã©ãããã©ãŒã ã远å ããã«ã¯ã
platform add
ã³ãã³ãã䜿çšã§ããŸãïŒäžèšã§è¡ã£ãããã«ïŒã
$ cordova platform add android
ãã©ãããã©ãŒã ã®1ã€ãåé€ããã«ã¯ã
rm
ãŸãã¯
remove
ã³ãã³ãã䜿çšã§ããŸãã
$ cordova platform rm blackberry10
ãã©ã°ã€ã³
Cordovaã¯ã¢ãžã¥ãŒã«ã«åºã¥ããŠäœæãããããããã©ã°ã€ã³ã·ã¹ãã ã䜿çšããŠè¿œå æ©èœã远å ã§ããŸãã ãã©ã°ã€ã³ããããžã§ã¯ãã«
plugin add
ããã«ã¯ã
plugin add
ã³ãã³ãã䜿çšã
plugin add
ã
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git
plugins ls
ã䜿çšããŠãã€ã³ã¹ããŒã«ãããŠãããã©ââã°ã€ã³ã®ãªã¹ãã衚瀺ã§ããŸãã
$ cordova plugins ls [ 'org.apache.cordova.geolocation' ]
æåŸã«ã
plugin rm
ã³ãã³ãã䜿çšããŠ
plugin rm
ã€ã³ãåé€ã§ããŸãã
$ cordova plugins rm org.apache.cordova.geolocation
ãããžã§ã¯ãæ§ç¯
ããã©ã«ãã§ã¯ãCordovaã¯ãããžã§ã¯ãã®ããŒã ãã£ã¬ã¯ããªã«ãã
www
webãã¡ã€ã«ãã©ã«ããŒã«ãããžã§ã¯ãã¯ã€ã€ãã¬ãŒã ãäœæããŸãã Cordovaã¯ãããžã§ã¯ãããã«ããããšãã«ããããã®ãã¡ã€ã«ããã©ãããã©ãŒã åºæã®ãã£ã¬ã¯ããªã«ã³ããŒããŸãã
ã¢ããªã±ãŒã·ã§ã³ããã«ãããã«ã¯ãå¥ã®Cordovaã³ãã³ã
build
ãå®è¡ããå¿
èŠããããŸãã
$ cordova build
ãã«ããããã©ãããã©ãŒã ãæå®ããã«ããã®ããŒã ã¯ãããžã§ã¯ãã§å©çšå¯èœãªãã¹ãŠã®ãã©ãããã©ãŒã çšã®ã¢ããªã±ãŒã·ã§ã³ããã«ãããŸãã æå®ãããã©ãããã©ãŒã ã«ã€ããŠã®ã¿ããã®ç¯å²ããããžã§ã¯ãã®æ§ç¯ã«å¶éã§ããŸãã
$ cordova build ios $ cordova build android
build
ã³ãã³ããå®è¡ãããšãç¹å®ã®ãã©ãããã©ãŒã ã«å¿
èŠãªã³ãŒããã€ã³ã¹ããŒã«ãããããšãä¿èšŒãããããããã®åŸãã¢ããªã±ãŒã·ã§ã³ãã³ã³ãã€ã«ã§ããŸãã åºæ¬çã«ããã®ã¡ãœããã§ã¯ã
cordova prepare && cordova compile
æºåã¡ãœãããšåãããšãè¡ã
cordova prepare && cordova compile
ã
ãšãã¥ã¬ãŒã·ã§ã³ãšå®è¡
Cordovaã«ã¯ããšãã¥ã¬ãŒã¿ãŒãå®è¡ããŠãããã€ã¹äžã®ã¢ããªã±ãŒã·ã§ã³ã®èµ·åãã·ãã¥ã¬ãŒãããæ©èœããããŸãã ãã¡ãããããã¯ãå¿
èŠãªãšãã¥ã¬ãŒã¿ãŒãéçºç°å¢ã«ã€ã³ã¹ããŒã«ããã³æ§æãããŠããå Žåã«ã®ã¿å®è¡ã§ããŸãã
å¿
èŠãªãšãã¥ã¬ãŒã¿ãŒãéçºç°å¢ã§æ§æãããŠããå ŽåãCordovaãä»ããŠå®è¡ããã¢ããªã±ãŒã·ã§ã³ãã€ã³ã¹ããŒã«ã§ããŸãã
$ cordova emulate ios
iOSã®å Žåãéçºç°å¢ã§ç°å¢ãšãã¥ã¬ãŒã¿ãŒãæ§æãããŠããªãå Žåã¯ãXcodeã䜿çšããŠãããžã§ã¯ããã»ããã¢ããããå¿
èŠããããŸãïŒä»¥åãšåæ§ïŒã
äžèšã®ãã¹ãŠã§ã¯ãªãã
run
ã³ãã³ãã䜿çšããŠç¹å®ã®ããã€ã¹ã§ã¢ããªã±ãŒã·ã§ã³ãå®è¡ããããšãã§ããŸãã
run
ã³ãã³ãã¯ãããã€ã¹ãèŠã€ãããªããã¢ã¯ã»ã¹ã§ããªãå Žåã«ãããã€ã¹ãŸãã¯ãšãã¥ã¬ãŒã¿ãŒã§ã¢ããªã±ãŒã·ã§ã³ãèµ·åããŸãã
$ cordova run ios
éçºäž
ã¢ããªã±ãŒã·ã§ã³ã«å€æŽãå ããããšã¯éåžžã«é¢åãªããã»ã¹ã«ãªãå¯èœæ§ããããŸãããã¢ããªã±ãŒã·ã§ã³ã®ä»»æã®éšåã«å€æŽãå ããã«ã¯ããããã®å€æŽãå®éã«èŠãããã«åã³ã³ãã€ã«ããå¿
èŠããããŸãã Webã¢ããªã±ãŒã·ã§ã³ã®éçºããã»ã¹ãé«éåããããã«ã
serve
ã³ãã³ãã䜿çšããŠããŒã«ã«ãµãŒããŒãæ§æãã
www
ãã©ã«ããŒãããã©ãŠã¶ãŒã«ã¢ããªã±ãŒã·ã§ã³ã®ããŒã«ã«ããŒãžã§ã³ãè¿ãããšãã§ããŸãã
$ cordova serve ios Static file server running at => http://0.0.0.0:8000/ CTRL + C to shutdown
次ã«ãWebãã©ãŠã¶ãŒã䜿çšããŠã次ã®URLã«ã¢ã¯ã»ã¹ããŸãã
localhost:8000/ios/www/index.html
localhost:8000/ios/www/index.html
www
ãã©ã«ããŒã®å
容ã¯HTTPçµç±ã§ãµãŒããŒããæäŸããããããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããŠããã®äžã«å ãããããã¹ãŠã®å€æŽã远跡ã§ããŸãã
ã¢ããªã±ãŒã·ã§ã³ã«å€æŽãå ããããåæ§ç¯ããã ãã§ãã
$ cordova build ios

Cordovaã®è§åºŠãµãŒãã¹
Cordovaã¢ããªã±ãŒã·ã§ã³ã®æºåãæŽããããã€ã¹ãæ¥ç¶ããããã¹ãŠã®æºåãæŽããšãCordovaã¯ãã©ãŠã¶ãŒã§
deviceready
ã€ãã³ãã
deviceready
ãŸãã
Angularã§ã¯ã
deviceready
ã€ãã³ãã
deviceready
åŸãè§åºŠã¢ããªã±ãŒã·ã§ã³ãéå§ãããããã®ããã«ã¢ããªã±ãŒã·ã§ã³ã®ããžãã¯ã§promiseãªããžã§ã¯ããæäœã§ããŸãã
deviceready
ã€ãã³ãã®åŸã«ã¢ããªã±ãŒã·ã§ã³ãèµ·åããã«ã¯ãæåã§äœæ¥ãéå§ããããã®ãã³ãã©ãŒãã€ã³ã¹ããŒã«ããå¿
èŠããããŸãã
ngular.module('myApp', []); var onDeviceReady = function() { angular.bootstrap( document, ['myApp']); } document.addEventListener('deviceready', onDeviceReady);
deviceready
ã€ãã³ãã
deviceready
åŸã«ã¢ããªã±ãŒã·ã§ã³ãèµ·åããã«ã¯ã
deviceready
ã䜿çšããŠ
deviceready
ã€ãã³ãããªãã¹ã³ããä»£æ¿æ¹æ³ã䜿çšããããšãã
deviceready
ãŸãã
deviceready
ã€ãã³ãã®ãªãã¹ã³ãæ
åœããAngularã¢ãžã¥ãŒã«ãäœæããŸããã
deviceready
ã€ãã³ãããªãã¹ã³ãããã®ã€ãã³ãã®çºçåŸã«çŽæã解決ãããµãŒãã¹ã䜿çšããŸãã
angular.module('fsCordova', []) .service('CordovaService', ['$document', '$q', function($document, $q) { var d = $q.defer(), resolved = false; var self = this; this.ready = d.promise; document.addEventListener('deviceready', function() { resolved = true; d.resolve(window.cordova); });
次ã«ãã¢ãžã¥ãŒã«ã®äŸåé¢ä¿ãšããŠ
fsCordova
ãã€ã³ã¹ããŒã«ããå¿
èŠããããŸãã
angular.module('myApp', ['fsCordova'])
CordovaService
ã䜿çšããŠãCordovaã®äœæ¥æºåãã§ããŠãããã©ããã倿ããããã«äŸåããããžãã¯ãå®è¡ã§ããŸãã
angular.module('myApp', ['fsCordova']) .controller('MyController', function($scope, CordovaService) { CordovaService.ready.then(function() {
è§åºŠãæå¹ã«ãã
ã裞ã®ãCordovaã¢ããªã±ãŒã·ã§ã³ã§ã¯ã
js/index.js
ãã
javascript
ãã¥ãŒãé衚瀺ããã³è¡šç€ºããpure
javascript
ã®ã¿ããµããŒããããŠããŸãã
ãã®ããã»ã¹ã«Angularãå«ããããšã¯éåžžã«ç°¡åã§ãã ã¢ããªã±ãŒã·ã§ã³ãçµäºãããŸã§ãCDNã䜿çšãã代ããã«ãå¿
èŠãªã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³ã«çŽæ¥å«ããŸããCDNã¯èšèšããã»ã¹äžã«äžå¿
èŠãªåé¡ãåŒãèµ·ããå¯èœæ§ããããŸãã
ããè€éãªã€ã³ã¹ããŒã«ããã»ã¹ã«Bowerã䜿çšã§ããŸãããçŸæç¹ã§ã¯ã
angular.js
ãã¡ã€ã«ããããžã§ã¯ãã«è¿œå ãã
angular.js
ã§ãã
Angularã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããã«ã¯ããã®ã³ã³ããŒãã³ããanglejs.orgããããŠã³ããŒãããã¢ããªã±ãŒã·ã§ã³ããã¢ã¯ã»ã¹å¯èœãªãã©ã«ããŒã«ä¿åããå¿
èŠããããŸããããå§ããwww/js/vendor/angular.js
ãŸãããããå®äºããããAngularã¢ããªã±ãŒã·ã§ã³ã®éçºãéå§ã§ããŸããjavascriptãã¡ã€ã«ãã«å«ããå¿
èŠããããŸãwww/index.html
ã <script type="text/javascript" src="js/vendor/angular.js"></script>
ããã§ããã¹ãŠã®ã³ã³ãã³ãjs/index.js
ãAngularã¢ããªã±ãŒã·ã§ã³ã«çœ®ãæããŠãéåžžã®æ¹æ³ã§äœæ¥ã§ããŸããéçºããã»ã¹
ã¢ããªã±ãŒã·ã§ã³ããã«ãããããæ¬¡ã®ããã»ã¹ã䜿çšã§ããŸãã- ããŒã«ã«ãµãŒããŒãå®è¡ããŸãïŒ
cordova serve [platform]
ïŒ - ã¢ããªã±ãŒã·ã§ã³ãç·šéãã
- ã¢ããªã±ãŒã·ã§ã³ãåæ§ç¯ããŸãïŒ
cordova build [platform]
ïŒ
ãã®ãµã€ã¯ã«ã¯ããé¢åã§ãããã¢ããªã±ãŒã·ã§ã³ã®ç·šéããã»ã¹ã§äœãããå¿
èŠããããã説æããŠããŸããã¢ããªã±ãŒã·ã§ã³ãCordovaã«äŸåããªãå Žåã¯ãã·ãã¥ã¬ãŒã¿ãŒã®å€éšã§ããã©ãŠã¶ãŒã§çŽæ¥ïŒããšãã°ãã¯ãã ã§ïŒç·šéã§ããŸãããã®å Žåãã¢ããªã±ãŒã·ã§ã³ãåæ§ç¯ããã³åãããã€ãã代ããã«ãã¢ããªã±ãŒã·ã§ã³ã®äœæã«åãçµãããšãã§ããŸããä»åŸã®ng-bookïŒAngularJSã®å®å
šãªæ¬ã«ã¯ãã¢ãã€ã«éçºããã»ã¹ã«é¢ããããå
æ¬çãªæ
å ±ãå«ãŸããŠããŸããã¢ãã€ã«ããã€ã¹ã«è¡ãå Žæããªãããšã¯æããã§ãããangularã¯éåžžã«åŒ·åãªãã¬ãŒã ã¯ãŒã¯ã§ããããŠãŒã¶ãŒåãã®ã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ãäœæããäžã§ãã§ã«ä¿¡ããããªãã»ã©é ããŸã§é£ããŠè¡ã£ãŠãããŸãããã§ã«èŠãããã«ãã¢ãã€ã«ã€ã³ã¿ãŒãã§ã€ã¹ããµããŒãã§ããAngularJSã䜿çšããŠãã€ãã£ãã¢ããªã±ãŒã·ã§ã³ãäœæããããšãã§ããŸãã