Movable Type + Monaca で記事一覧アプリを作る

スマホアプリの開発用フレームワーク「Monaca」と、CMSソフト「Movable Type」を組み合わせて、ハイブリッドアプリを作ってみます。今回作成するアプリは、以下の資料を参考に、ほぼ同じ仕様で作ってみました。

https://www.slideshare.net/AsialCorp/ui-onsen-ui2wordpress

## Movable Type とは

シックス・アパートが開発・販売する、商用のCMS・ブログソフトです。
https://www.sixapart.jp/movabletype/

## Monaca とは

アシアルさんが開発・提供する、スマホアプリ開発用の統合環境。Apache Cordova を内包し、ハイブリッドアプリを開発できます。

https://ja.monaca.io/

## Onsen UIとは

モバイルアプリ開発に特化した、UIコンポーネントの集まり。iOSとAndroid 両対応。Apache v2 ライセンスを採用したオープンソース・ソフトウェア。「ons-**」という、独自タグを組み合わせてインターフェースを開発していく。

https://ja.onsen.io/


## 記事一覧アプリの仕様

* Movable Type で公開されているブログ記事を、スマホアプリに一覧表示する。
* リンクをクリックすると、公開されている記事を閲覧できる

という、シンプルな仕様で作ります。

Monaca デバッガーで動作を確認するところまでを記述します。


## Movable Type の準備

適切なライセンスを元に準備。ライセンスごとの違いはこちらです。
https://www.sixapart.jp/movabletype/license/index.html

開発者登録を行うことで、開発者ライセンスを利用できます。
https://www.sixapart.jp/inquiry/movabletype/developer.html

インストール手順はこちら
https://www.movabletype.jp/documentation/mt6/installation/mt-wizard.html

Movable Type for AWS には無料プランがあります。MT for AWS の設定方法はこちら
https://www.sixapart.jp/movabletype/aws/how-to-use.html


## Monaca の準備

Monaca のスタート画面からアカウントを作成して始めます。

https://ja.monaca.io/register/start.html

ライセンスの種類は以下の通り
https://ja.monaca.io/pricing.html


## Monaca のプロジェクト作成

[こちらの資料](https://www.slideshare.net/AsialCorp/ui-onsen-ui2wordpress) を元に、新しいプロジェクトを作成します。

![monaca_1.png](https://qiita-image-store.s3.amazonaws.com/0/83767/5c956ae3-3ceb-d28f-1088-dfbedc14773f.png)

「新規プロジェクトの作成」をクリック

![monaca_2.png](https://qiita-image-store.s3.amazonaws.com/0/83767/70e6b674-23e6-b97d-142e-1613a5c90af5.png)

プロジェクトの雛形を選択。今回は「ONSEN UI V2 JS Minimum」をえらぶ

![monaca_3.png](https://qiita-image-store.s3.amazonaws.com/0/83767/3b9190c6-31ec-dae4-1b60-5ad244909b76.png)



プロジェクト名を指定

![monaca_4.png](https://qiita-image-store.s3.amazonaws.com/0/83767/da317c63-3b74-fcfb-c7b4-39fde85b9696.png)

プロジェクトの作成が完了。


## index.htmlの編集

index.htmlを以下の内容に差し替えます。


```html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="app.js"></script>
</head>
<body>

  <ons-navigator page="list.html" id="navi"><ons-navigator>
 
  <ons-template id="list.html">
    <ons-page id="listPage">
      <ons-toolbar>
        <div class="center">ブログ記事一覧</div>
      </ons-toolbar>
      <ons-list>
      </ons-list>
    </ons-page>
  </ons-template>

    
</body>
</html>
```


app.jsの作成

index.html と同ディレクトリに「app.js」というファイルを作成し、以下のコードを貼り付けます。Movable Type の Data API のURLは、お使いの環境に合わせてURLを書き換えます。ブログのID番号は、取得したい [Movable Type のブログID](https://www.movabletype.jp/faq/confirm-blog-id.html)を指定します。

```js
$.ajax('http://your-mt/mt-data-api.cgi/v3/sites/ブログのID番号/entries').then(function(json){

  let data = '';

  for(let i=0; i < json.items.length ; i++){

   let mydate = new Date(json.items[i].date);  
   let mm = mydate.getMonth() + 1;
   let dd = mydate.getDate();
   let permalink = json.items[i].permalink;
   let title = json.items[i].title;

   let list =  `
     <ons-list-item>
       <ons-row>
         <ons-col width="70px">
           ${mm}月${dd}日
         </ons-col>
         <ons-col>
           <a href="${permalink}"> ${title}</a>
         </ons-col>
       </ons-row>
     </ons-list-item>
  `
  data += list;

  }

  $('ons-list').append(data);

});
```


## デバッガーによる確認

Monacaデバッガーを使って、動作を確認します。

<img width="320" alt="monaca_5.png" src="https://qiita-image-store.s3.amazonaws.com/0/83767/38008743-6743-85c5-d196-3006cc02f894.png">

ブログ記事の一覧が取得できていることがわかります。

<img width="320" alt="monaca_6.png" src="https://qiita-image-store.s3.amazonaws.com/0/83767/b1a804ec-1afb-e138-c3a6-b2244cba5bb5.png">

リンクをクリックすると、公開されている記事へ移動します。

## app.jsで行っていること

Movable Type の Data APIを通して、ブログ記事一覧のJSONデータを取得し、Monaca のアプリで閲覧できるようjQueryを利用して加工しています。

Data APIは、Movable Type が提供するREST APIです。
https://www.movabletype.jp/developers/data-api/

記事一覧を取得するエンドポイントを利用すると、公開済みの記事のデータが取得できます。
https://www.movabletype.jp/developers/data-api/v3-reference.html#entries
https://www.movabletype.jp/developers/data-api/v3-reference.html#entries-entries-get

記事一覧のJSONデータは[items]という配列に格納されています。
このため今回は、記事の個別データを取得するために、Data APIの返り値［JSON］の中にある items[番号]の各プロパティ、という指定で取得しています。

各記事のタイトルは以下のプロパティで取得しています。

```js

json.items[i].title
```

Data APIを通じて取得した、記事の公開日はISO8601形式です。
記事の月日データを個別に取得するため、Date オブジェクトを使ってインスタンスを生成して、月と日の数字を個別に取得しています。JavaScriptにおける月データは、0から始まるため、+1しました。

```js

   let mydate = new Date(json.items[i].date);  
   let mm = mydate.getMonth() + 1;
   let dd = mydate.getDate();
```