読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

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

アプリカンとサーバサイドを連携させよう

スマートフォンアプリというのは単体で使えるものは多くありません。大抵、サーバサイドの仕組み(Web API)と合わせて開発するかと思います。

最近ではWeb APIのフォーマットとしてJSONを使って送受信することが多いかと思います。アプリカンでもJSONを使えばサーバサイドの連携がとても簡単にできます。

ということで今回はサーバサイドとアプリカンとの連携について紹介します。サーバサイドには普段よく使われるWordPressを使うことにします。

WordPressにプラグインを追加

今回はWordPressにJSON REST APIを追加します。このプラグインはWordPressの情報を取得できるJSON Web APIを追加してくれます。

HTMLファイル

まずは投稿の一覧を表示するWeb APIを使います。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">
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
    <title>Sample</title>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">WordPress Demo</a>
        </div>
      </div>
    </nav>
    
    <div class="container-fluid main">
    </div>


    <!-- インデックス用のテンプレート -->
    <script type="text/template" id="index">
      <div class="row">
    <div class="col-md-12">
    <% for (var i = 0; i < posts.length; i++) { post = posts[i]; %>
      <div class="row post" data-post-id="<%= post.ID %>">
        <div class="col-md-12">
              <h3><%= post.title %></h3>
          <%= post.excerpt %>
        </div>
          </div>
        <% } %>
    </div>
      </div>
    </script>
    <script type="text/javascript" charset="utf-8" src="js/applican.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/underscore-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/backbone-min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/backstack-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>
  </body>
</html>

フレームワークとしてBackbone、jQuery、Bootstrapを使っています。この手のWeb開発で慣れたライブラリを使えるのがアプリカンをはじめとするハイブリッドアプリのメリットだと思います。

コードを書く

サーバから記事一覧を取得して表示する部分のスクリプトは次のようになります。

# applican_init()
deviceReady = ->
  FirstView = undefined
  stackNavigator = undefined
  FirstView = Backbone.View.extend(
    events:
      "click .post": "btnNext_clickHandler"
    getArticles: ->
      dfd = $.Deferred()
      $.ajax
        url: "http://example.com/?json_route=/posts"
        dataType: "jsonp"
        jsonp: "_jsonp"
      .then (posts) ->
        dfd.resolve (posts)
      .fail (err) ->
        console.log(err)
      dfd.promise()
    render: ->
      me = this
      @getArticles().then (posts) ->
        me.posts = posts
        compiled = _.template($("#index").html())
        me.$el.html compiled(posts: posts)
      this
    btnNext_clickHandler: (event) ->
      id = $(event.target).parents(".post").data("post-id")
      post = _.filter(@posts, (post) ->
        post.ID == id
      )[0]
      s = new SecondView
      s.post = post
      stackNavigator.pushView s
      return
  )
  stackNavigator = new BackStack.StackNavigator(el: ".main")
  stackNavigator.pushView FirstView, {}, new BackStack.NoEffect
document.addEventListener("deviceready", deviceReady, false);

処理内容としては BackStack というBackboneでアプリ風画面遷移を可能にするライブラリに対してビューを追加します(pushView)。そうするとrenderが呼ばれますので記事一覧を取得(getArticles)を実行し、その結果をHTMLに描画しています。

記事取得(getArticles)は以下のようになっています。

getArticles: ->
  dfd = $.Deferred()
  $.ajax
    url: "http://example.com/?json_route=/posts"
    dataType: "jsonp"
    jsonp: "_jsonp"
  .then (posts) ->
    dfd.resolve (posts)
  .fail (err) ->
    console.log(err)
  dfd.promise()

Ajaxは非同期処理になるのでPromiseを使って処理しています。この処理だけであれば、

getArticles: ->
  $.ajax
    url: "http://example.com/?json_route=/posts"
    dataType: "jsonp"
    jsonp: "_jsonp"

としても良いでしょう。取得したデータを加工して次の処理に渡す場合はPromiseを使う方が分かりやすいかと思います。こうして処理した結果が次の画像です。

記事一覧

イベントとして記事をクリックした時に詳細を表示するようにしています。

FirstView = Backbone.View.extend(
  events:
    "click .post": "btnNext_clickHandler"
  btnNext_clickHandler: (event) ->
    id = $(event.target).parents(".post").data("post-id")
    post = _.filter(@posts, (post) ->
      post.ID == id
    )[0]
    s = new SecondView
    s.post = post
    stackNavigator.pushView s
    return

記事詳細を表示する

クリックした記事のIDを取得して、その記事をSecondViewで描画しています。SecondViewは以下のようになっています。

SecondView = Backbone.View.extend
  post: null
  events:
    "click .previous": "btnPrev_clickHandler"
  getComments: ->
    me = this
    dfd = $.Deferred()
    $.ajax
      url: me.post.meta.links.replies
      dataType: "jsonp"
      jsonp: "_jsonp"
    .then (posts) ->
      dfd.resolve (posts)
    dfd.promise()
  render: ->
    me = this
    @getComments().then (comments) ->
      compiled = _.template($("#post").html())
      me.$el.html compiled(post: me.post, comments: comments)
  btnPrev_clickHandler: (event) ->
    slide = undefined
    slide = new BackStack.SlideEffect(direction: "rigth")
    stackNavigator.popView slide
    return

SecondViewは受け取った記事について描画しつつ、記事のコメントを取得して描画しています。テンプレートは以下になります。

<script type="text/template" id="post">
  <div class="row">
    <div class="col-md-12">
      <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 戻る</a></li>
      </ul>
      <h2><%= post.title %></h2>
      <%= post.content %>
      <h3>コメント</h3>
      <% for (var i = 0; i < comments.length; i++) { comment = comments[i]; %>
        <div class="row">
          <strong><%= comment.author.name %></strong><br />
          <%= comment.content %>
        </div>
      <% } %>
    </div>
  </div>
</script>

実際に表示を行った例は下の画像になります。

投稿詳細


Web APIを使うことでAjaxやapplican.http.get/applican.http.postを用いてサーバサイドとの連携は容易に可能です。特にWordPressをサーバサイドにすると基本的な認証、記事の投稿、画像アップロード、検索、カテゴリやタグでの記事絞り込みといったCMS機能が揃っているため容易にアプリカンとの組み合わせで活用できます。ぜひ参考にしてください!

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