【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する

今回は、Onsen UI + Angular JSを使用して、WordPressのWP REST APIを利用してons-carouselに記事を表示する方法を紹介します。

Monacaデバッガーの結果です。
左右にスワイプすると、WordPressのWP REST APIを利用して取得した最新のブログ記事5件分のタイトルとサムネイルが切り替わります。

下記URLをブラウザ上で入力すると、JSON形式の配列の内容が表示されます。

http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5

この情報をもとにサムネイルとタイトル、リンク先URLを取得してons-carousel-itemを生成します。
ons-carousel-itemをタップすると、外部ブラウザで該当するリンク先URLを開き、記事を表示します。
※コード内のhttp://xxx.yyy.zzz/をご自身のWordPressのURLに変更して実行してください。

WordPressのブログをアプリ化する場合、オフラインで表示することができないので、オンラインで取得したブログ記事をDBなどに保存する必要があります。
また、記事内に広告が組み込まれている場合、収益が発生しても無効になる可能性が高いので注意が必要です。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    "use strict";
    var app = ons.bootstrap("myApp", ["onsen"]);
    app.controller("indexController", ["$scope", "$http", "$q", function ($scope, $http, $q) {
      $scope.posts = [];
      $scope.dotIndex = 0;
      ons.ready(function () {
        $scope.getPosts().then(function (res) {
          $scope.posts = angular.copy(res.data);
        }, function (err) {
console.log(err);
        });
      });
      // WordPressの記事を5件取得
      $scope.getPosts = function () {
        var def = $q.defer();
        var param = {
          method: "GET",
          url: "http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5",
        };
        $http(param).then(function (res) {
          def.resolve(res);
        }).catch(function (res) {
          def.reject(res);
        });
        return def.promise;
      };
      $scope.setDotIndex = function (e) {
        $scope.dotIndex = e.activeIndex;
      };
      $scope.setDotCheck = function (index) {
        return (index == $scope.dotIndex) ? "navidot-check" : "";
      };
      $scope.showBlog = function (url) {
        window.open(url, "_system", "location=no");
      };
    }]);
  </script>
  <style>
    .carousel-base {
      position: relative;
    }
    .navigation-base {
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      height: 10px;
      text-align: center;
    }
    .navigation-base > div {
      display: table;
      border-collapse: separate;
      border-spacing: 8px 0;
      margin: 0 auto;
    }
    .navidot {
      display: table-cell;
      border: 1px solid #fff;
      border-radius: 6px;
      width: 10px;
      height: 10px;
      background-color: rgba(255,255,255,0);
    }
    .navidot-check {
      background-color: rgba(255,255,255,1);
      transition-duration: 0.3s;
    }
    .image-base {
      position: relative;
      width: 100%;
      height: 200px;
    }
    .image-base img {
      position: absolute;
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 100%;
    }
    .title-base {
      position: absolute;
      display: block;
      padding: 6px 12px;
      top: 130px;
      bottom: 0;
      left: 0;
      right: 0;
      color: #FFF;
      background-color: rgba(0,0,0,0.5);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  </style>
</head>
<body>
  <ons-page ng-controller="indexController">
    <ons-toolbar>
      <div class="center">テスト</div>
    </ons-toolbar>
    <div class="carousel-base">
      <ons-carousel var="myCarousel" ons-postchange="setDotIndex($event)" swipeable auto-scroll overscrollable style="height: 200px;">
        <ons-carousel-item ng-repeat="post in posts" ng-click="showBlog(post.link)">
          <div class="image-base">
            <img src="{{ post._embedded['wp:featuredmedia'][0].source_url }}">
            <div class="title-base">{{ post.title.rendered }}</div>
          </div>
        </ons-carousel-item>
      </ons-carousel>
      <div class="navigation-base">
        <div>
          <div ng-repeat="post in posts" class="navidot" ng-class="setDotCheck($index)"></div>
        </div>
      </div>
    </div>
  </ons-page>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

<!DOCTYPE HTML>

<html>

<head>

"use strict";

var app = ons.bootstrap("myApp", ["onsen"]);

app.controller("indexController", ["$scope", "$http", "$q", function ($scope, $http, $q) {

$scope.posts = [];

$scope.dotIndex = 0;

ons.ready(function () {

$scope.getPosts().then(function (res) {

$scope.posts = angular.copy(res.data);

}, function (err) {

console.log(err);

});

// WordPressの記事を5件取得

$scope.getPosts = function () {

var def = $q.defer();

var param = {

method: "GET",

url: "http://xxx.yyy.zzz/wp-json/wp/v2/posts?_embed&per_page=5",

};

$http(param).then(function (res) {

def.resolve(res);

}).catch(function (res) {

def.reject(res);

});

return def.promise;

};

$scope.setDotIndex = function (e) {

$scope.dotIndex = e.activeIndex;

};

$scope.setDotCheck = function (index) {

return (index == $scope.dotIndex) ? "navidot-check" : "";

};

$scope.showBlog = function (url) {

window.open(url, "_system", "location=no");

};

}]);

</script>

<style>

.carousel-base {

position: relative;

}

.navigation-base {

position: absolute;

left: 0;

bottom: 10px;

width: 100%;

height: 10px;

text-align: center;

}

.navigation-base > div {

display: table;

border-collapse: separate;

border-spacing: 8px 0;

margin: 0 auto;

}

.navidot {

display: table-cell;

border: 1px solid #fff;

border-radius: 6px;

width: 10px;

height: 10px;

background-color: rgba(255,255,255,0);

}

.navidot-check {

background-color: rgba(255,255,255,1);

transition-duration: 0.3s;

}

.image-base {

position: relative;

width: 100%;

height: 200px;

}

.image-base img {

position: absolute;

margin: auto;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: auto;

max-width: 100%;

height: auto;

max-height: 100%;

}

.title-base {

position: absolute;

display: block;

padding: 6px 12px;

top: 130px;

bottom: 0;

left: 0;

right: 0;

color: #FFF;

background-color: rgba(0,0,0,0.5);

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

}

</style>

</head>

<body>

<ons-page ng-controller="indexController">

<ons-toolbar>

</ons-toolbar>

<ons-carousel var="myCarousel" ons-postchange="setDotIndex($event)" swipeable auto-scroll overscrollable style="height: 200px;">

<ons-carousel-item ng-repeat="post in posts" ng-click="showBlog(post.link)">

<div class="title-base">{{ post.title.rendered }}</div>

</div>

</ons-carousel-item>

</ons-carousel>

<div>

</div>

</ons-page>

</body>

</html>

【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する

【Monaca】Onsen UI 選択したons-list-itemを削除する

【Monaca】Onsen UI v2.10.10 アップデートの注意点

2024年4月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

【Monaca】Onsen UIとWordPressのWP REST APIを利用してons-carouselに記事を表示する

Recommended Posts

【Cordova】cordova-plugin-local-notificationプラグインの通知clickイベントが発火しない場合の対処方法

【Cordova】ビルド時にgradleの「journal-1.lock」ファイルロックが発生した場合の対処方法

【Cordova】Onsen UIのons-tabを中央に寄せる方法 その２

【Cordova】Onsen UIのons-tabを中央に寄せる方法その２