m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

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;
  }]);
})();

実行

f:id:m_shige1979:20141120002935p:plain

f:id:m_shige1979:20141120002951p:plain

f:id:m_shige1979:20141120003002p:plain

※画面初期表示時に自動でRSSを読み込む方法が必要かも

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');

おわり…