アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

ブログをアプリ化してみよう(その1 フィードを一覧表示する)

世の中はどんどんアプリ化の流れになっています。スマートフォンからWebサイトにアクセスすることもできますが、アプリにすることで継続的なアクセスが跳ね上がると言われています。さらにアプリならではの魅力としてプッシュ通知があります。

そこで今回は既存のWebサイト(ブログ)アプリ化する流れについてステップを踏んで紹介します。まず今回はブログのフィードを読み込んで一覧表示するところからはじめてみましょう。

必要なもの

今回はこちらのアプリカンブログをベースに話を進めます。

使う技術、ライブラリ

  • HTML5
  • JavaScript
  • jQuery
  • Bootstrap

今回はBootstrapのテーマBootflatを使います。

アプリカンでプロジェクトを作成

まずアプリカンにユーザ登録し、プロジェクトを作成します。アプリカンのユーザ登録はこちらから進められますので登録をお願いします。

そして登録したユーザID/パスワードでログインしたら、プロジェクトを作成します。

f:id:moongift:20150623092629p:plain

今回はブログアプリとしました。対象デバイスは「Universal」と「Android」を選択しています。

f:id:moongift:20150623092656p:plain

登録が終わったら下のような画面が表示されます。

f:id:moongift:20150623092717p:plain

下にスクロールすると各種ライブラリというリンクがあるのでクリックします。

f:id:moongift:20150623092738p:plain

開いたウィンドウでシンプルというのをダウンロード&解凍します。

f:id:moongift:20150623092759p:plain

解凍すると次のようなファイル構成になっているはずです。

f:id:moongift:20150623092811p:plain

Bootflatをダウンロードする

次にBootflatをダウンロードします。これはBootstrap3をベースにしたテーマで、フラットなUIなのでよりスマートフォンアプリ風になります。

f:id:moongift:20150623092822p:plain

ダウンロードしたファイルを解凍すると次のようなファイル構成になっています。この中の js/fonts/css を先ほどダウンロードしたwebフォルダの中に入れてください。

index.htmlを編集する

では実際にコードを書いていきます。 www/index.html を編集します。まず先ほど設置したJavaScript/スタイルシートファイルを読み込みます。

<head>
  <!-- 追加ここから -->
  <link href="css/bootstrap.min.css" rel="stylesheet" />
    :
  <script type="text/javascript" charset="utf-8" src="js/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/app.js"></script>
  <!-- 追加ここまで -->
</head>

js/app.jsはまだありませんのでこの後、作成します。

bodyタグの中は次のようにします。

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2>アプリカンブログ</h2>
        <div class="row">
          <table class="table entries">
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

今回はこの table.entries の中にブログの記事タイトルを一覧にします。

js/app.js の編集

では最後に js/app.js を編集します。まだファイルはありませんので新規作成してください。まずデバイスが準備できた段階でdevicereadyを実行します。

var onDeviceReady = function() {
  // デバイスの準備ができた時に呼ばれます。
};

document.addEventListener("deviceready", onDeviceReady, false);

そして、この中で処理を書くのですが、今後のコードの見通しを考えてappというオブジェクトを定義したいと思います。

var app = {
  debug: applican.config.debug,
  init: function () {
  }
};
var onDeviceReady = function() {
  app.init();
};

applican.config.debug ですが、これがtrueの場合はデスクトップで実行している場合になります。falseはアプリカンアプリ、またはアプリカンシミュレータ(後述)で使っている場合になります。

そして app.init() という処理で初期化を行っています。処理内容は次のようになっています。

var app = {
  url: "http://tech-blog.applican.com/feed",
  debug: applican.config.debug,
  init: function() {
    if (this.debug) {
      var me = this;
      $.ajax("/feed").then(me.feed.success).fail(me.feed.error);
    } else {
      applican.http.get(this.url, {}, this.feed.success, this.feed.error);
    }
  },
  :
};

this.debug(開発環境か否か)をもって、AjaxかアプリカンのHTTP GETを使うかを判定しています。デスクトップで開発している時にはapplican.http.getは期待した動きになりません。そのため、ローカルに用意したfeedというファイルを読み込むようにしています。ファイルの内容はブログのフィード(今回は http://tech-blog.applican.com/feed の内容)をそのまま保存しています。

そしてそれぞれ成功時には feed.success、失敗時には feed.error を呼ぶようにしています。その処理は次のようになっています。

feed: {
  success: function (feed) {
    var feed = $(feed);
    entries = feed.find("entry").map(function() {
      entry = $(this);
      return {
        title: entry.find("title").text(),
        url: entry.find("link").attr("href"),
        published: entry.find("published").text(),
        summary: entry.find("summary").text(),
        categories: entry.find("category").map(function() {
          return $(this).attr("term");
        })
    }
    });
    app.render(entries);
  },
  error: function (err) {
    console.log(err);
  }
}

success(取得成功時)の処理はフィードの内容をそのままjQueryに渡しています。

var feed = $(feed);

こうすることで通常のHTMLのようにfindやeachなどのメソッドが使えるようになります。そして、entryタグごとに処理を実行しています。Atomフィードの場合はentryですが、RSSフィードの場合はitemになりますので、両方に対応する場合は feed.find("entry,item") のようになるでしょう。そしてデータをJavaScriptのハッシュに変換しています。

entry = $(this);
return {
  title: entry.find("title").text(),
  url: entry.find("link").attr("href"),
  published: entry.find("published").text(),
  summary: entry.find("summary").text(),
  categories: entry.find("category").map(function() {
    return $(this).attr("term");
  })
}

この変換処理を行った後、データを描画する app.render にデータを渡しています。

app.render(entries);

ではこの app.render 処理はどのようなことをしているかと言うと、

render: function (entries) {
  entries.each(function () {
    $(".entries").append($("<tr><td>"+this.title+"</td></tr>"));
  });
}

といった形でテーブルタグに対してタイトルを並べて表示しています。

ここまでの処理でフィードを取得して一覧表示するまでが完了になります。 js/app.js は以下のようなコードになります。

var app = {
  url: "http://tech-blog.applican.com/feed",
  debug: applican.config.debug,
  init: function() {
    if (this.debug) {
      var me = this;
      $.ajax("/feed").then(me.feed.success).fail(me.feed.error);
    } else {
      applican.http.get(this.url, {}, this.feed.success, this.feed.error);
    }
  },
  render: function (entries) {
    entries.each(function () {
      $(".entries").append($("<tr><td>"+this.title+"</td></tr>"));
    });
  },
  feed: {
    success: function (feed) {
      console.log(this);
      var feed = $(feed);
      entries = feed.find("entry").map(function() {
        entry = $(this);
        return {
          title: entry.find("title").text(),
          url: entry.find("link").attr("href"),
          published: entry.find("published").text(),
          summary: entry.find("summary").text(),
          categories: entry.find("category").map(function() {
            return $(this).attr("term");
          })
        }
      });
      app.render(entries);
    },
    error: function (err) {
      console.log(err);
    }
  }
}

var onDeviceReady = function() {
  app.init();
};
document.addEventListener("deviceready", onDeviceReady, false);

index.htmlは次のようになります。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="js/applican.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/html5shiv.js"></script>
<script type="text/javascript" charset="utf-8" src="js/respond.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/site.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
    <h2>アプリカンブログ</h2>
    <div class="row">
      <table class="table entries">
      </table>
    </div>
      </div>
    </div>
  </div>
</body>
</html>

コンテンツをアップロードする

ではいよいよ編集したコードをアプリカンにアップロードしてみたいと思います。まず作業していたwebディレクトリをZipで圧縮します。そして圧縮したファイルをアップロードします。

f:id:moongift:20150623092848p:plain

アップロードしたら、コンテンツの公開を選択し、公開します。

f:id:moongift:20150623092906p:plain

このようにアップロード履歴にデータが表示されればOKです。

f:id:moongift:20150623092922p:plain

アプリカンシミュレータで実行する

次に行うのはアプリカンシミュレータを使って実機での動作確認になります。iOS版Android版がありますので、必要な方をダウンロード&インストールしてください。

そしてアプリカンシミュレータを起動して、予め登録してあるユーザID/パスワードでログインします。そうすると作成したプロジェクトが一覧表示されますので、今回作ったブログアプリを実行してみましょう。

f:id:moongift:20150623092937p:plain

このようにブログの記事タイトルが一覧表示されれば完了になります。


いかがでしょうか。アプリカンを使えば既存のWebサイトをアプリ化するのも簡単です。次回以降、こちらのアプリをさらに作り込んでみましょう。

アプリカン | アプリ開発支援プラットフォーム