OnsenUI と Google AJAX Feed API で Blog Reader 作ってみた

phi phi on Onsen UI, google api

OnsenUI と Google AJAX Feed API を使えば
たった数十行のコードで Blog Reader なんかも作れちゃいます.

思いつきで作ってみたら, わりかし実用的な感じになったので よかったら参考にしてみてください.

全部コードも載っけています.

Runstant Demo

まずは今回作ったやつの紹介です. Runstant Lite で作ってあるので, 直接コードイジったりして遊んでみてください.

http://goo.gl/h8H7mw

Code

HTML

<ons-page>~</ons-page> で Home と Entry それぞれの画面を定義しています.

Home 画面では, AngularJS 使って entries 分だけリピートでリスト表示しています.
Entry 画面では, Home で押した Entry のデータを受け取って詳細表示しています.

    <ons-navigator title="Navigator" var="myNavigator">

      <!--ホーム-->
      <ons-page ng-controller="HomeCtrl">
        <ons-toolbar>
          <div class="center">Phiary Viewer</div>
        </ons-toolbar>

        <ons-scroller>
          <ons-list>
            <!-- リスト表示 -->
            <ons-list-item class='item' modifier='chevron' ng-repeat='entry in entries' ng-click='open(entry)'>
              <ons-row>
                <ons-col>
                  <h2 class='title'>{{entry.title}}</h2>
                  <p class='description'>{{entry.contentSnippet}}</p>
                </ons-col>
              </ons-row>
            </ons-list-item>
          </ons-list>
        </ons-scroller>

      </ons-page>

    </ons-navigator>

    <!-- エントリー -->
    <ons-template id="entry.html">
      <ons-page ng-controller="EntryCtrl">
        <ons-toolbar>
          <div class="left">
            <ons-back-button>Back</ons-back-button>
          </div>
          <div class="center">Entry</div>
        </ons-toolbar>

        <div class='entry'>
          <h2 class='title'>
            <a href='{{entry.link}}' target='_blank'>{{entry.title}}</a>
          </h2>
          <div class='content' ng-bind-html='content'></div>
        </div>
      </ons-page>
    </ons-template>

CSS(LESS)

less 使っちゃってますが,
ちょっとパディングやら色合いやらを調整しただけです.

.navigation-bar {
  background: #2a2a2a;
  border-bottom: 1px solid rgba(0,0,0,.0);

  .navigation-bar__center, .navigation-bar__title {
    color: #ccc;
  }
}

.item .title {
  margin: 0px;
  padding: 0px;
  font-size: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item .description {
  margin: 0rem 0rem 1rem 0rem;
  padding: 0px;
  font-size: 0.8rem;
  line-height: 1.1rem;
}

.entry {
  margin: 0px;
  padding: 10px;

  font-size: 0.8rem;

  h2.title {
    font-size: 1.4rem;
    border-bottom: none;
  }

  h2 {
    margin: 0px;
    font-size: 1.2rem;
    border-bottom: 1px solid #aaa;
  }

  h3 {
    font-size: 1.0rem;
  }

  a {
    text-decoration: none;
    color: hsl(220, 80%, 60%);
  }

  img {
    max-width: 100%;
  }

  pre {
    background: white;
    padding: 5px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    overflow: auto;
  }
}

.entry .title {
  margin: 0px;
  font-size: 1.4rem;
}

JavaScript

js 側は, まず HomeCtrl で, Google AJAX Feed API 経由で
本ブログの rss フィードを取得しています.

取得したフィードの entries$scope.entries に代入することで エントリーのリスト表示を行っています.

$timeout で囲うのを忘れないように!!

var RSS = 'http://phiary.me/rss';  
google.load("feeds", "1");

ons.bootstrap()  
  .controller('HomeCtrl', function($scope, $timeout) {
    // rss feed を取得
    google.setOnLoadCallback(function() {
      var feed = new google.feeds.Feed(RSS);
      feed.setNumEntries(-1);
      feed.load(function(result) {
        $timeout(function() {
          // スコープにセットアップ
          $scope.entries = result.feed.entries;
        });
      });
    });

    // 
    $scope.open = function(entry) {
      myNavigator.pushPage('entry.html', {
        entry: entry,
      });
    };
  })
  .controller('EntryCtrl', function($scope, $sce) {
    var page = myNavigator.getCurrentPage();
    $scope.entry = page.options.entry;
    $scope.content = $sce.trustAsHtml($scope.entry.content);
  })
  ;

Reference