cordovaでシンプルなRSSリーダー
まじしょぼい
とりあえず、外部のjsonデータってどうやって取るの?ということをやりたかったので
準備
インストール
cordova create sample1 com.example.sample1 Sampleapp1 -d cd sample1/ cordova platform add android
プラグイン追加
ordova plugin add org.apache.cordova.inappbrowser
環境
- onsen-ui
※サンプルのwwwのデータをそのままコピーしておく
実装
index.html
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>My App</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/app.css"/> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> <script> ons.ready(function() { }); </script> <style> .item { padding: 10px; line-height: 1; } .item-thum { background-color: #ccc; width: 50px; height: 50px; border-radius: 4px; } .item-title { font-size: 15px; font-weight: 500; } .item-desc { font-size: 14px; color: #666; line-height: 1.3; margin: 4px 0 0 0; padding: 0 30px 0 0; } .item-label { font-size: 12px; color: #999; float: right; } </style> </head> <body ng-controller="AppController"> <ons-navigator> <ons-page> <ons-toolbar> <div class="center">RSS Reader</div> </ons-toolbar> <ons-list-item modifier="chevron" ng-click="feedLoad()"> <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon> Feed Load </ons-list-item> <ons-list> <ons-list-item modifier="chevron" class="item" ng-repeat="rssitem in rsslist" ng-click="showDetail($index)"> <ons-row> <ons-col> <header> <span class="item-title">{{rssitem.title}}</span> </header> </ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </ons-navigator> </body> </html>
app.js
(function(){ 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope, $data) { $scope.feedLoad = function(){ var _res = $data.feedRead("http://m-shige1979.hatenablog.com/feed"); var _title = ""; var _list = []; _res .success(function(_data, status, headers, config) { _title = _data.responseData.feed.title; _list = _data.responseData.feed.entries; $scope.rsslist = _list; }) .error(function(_data, status, headers, config) { //alert("ng:" + _data); //return _list; }); } $scope.showDetail = function(index) { var item = $scope.rsslist[index]; var ref = window.open(item.link, '_blank', 'location=yes'); }; }); module.factory('$data', ['$http', function($http) { var data = {}; data.feedRead = function(url){ var _url = url; var _res = $http.jsonp('http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(_url)); //alert(_res); return _res; }; return data; }]); })();
RSSの取得
XMLのデータを解析してjsonのオブジェクト形式にする必要があるので、「http://ajax.googleapis.com/ajax/services/feed/load」を使用
var _res = $http.jsonp('http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=50&callback=JSON_CALLBACK&q=' + encodeURIComponent(_url));
ブラウザへ移動して表示
※ordova plugin add org.apache.cordova.inappbrowserを実行していないとただしく実行できない
ブラウザへ画面を展開
var ref = window.open(item.link, '_blank', 'location=yes');
おわり…