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

アプリカンブログ

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

アプリカンとjQuery Mobileでスマートフォンアプリを作ろう

前回の記事ではjQueryを使ってアプリカンでスマートフォンアプリを開発する方法について紹介しました。そんなjQueryをさらにスマートフォン、タブレット向けに最適化したのがjQuery Mobileです。機能が豊富である一方、動作が若干重たいという欠点はありますが、画面遷移やビューの管理などハイブリッドアプリとして必要な機能を備えた強力なライブラリです。

今回はそのjQuery Mobileとアプリカンを組み合わせて簡単なアプリ開発を行ってみたいと思います。題材としては前回と同じくタスク管理になります。

全体のファイル構成

jQuery Mobileの場合、JavaScriptのライブラリだけでなくUIについても提供されています。jQuery Mobileの公式サイトからダウンロードし、必要なファイルを配置します。

スタイルシート周りで必要なのは以下の2つのファイルです。

JavaScriptは次のファイルになります。

これらを読み込んだHTMLファイルが次のようになります。

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="UTF-8">
    <title>タスク管理デモ</title>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
  </head>
  <body>
    <div data-role="page" id="testpage">
    <div data-role="header">
      <h1>タスク管理デモ</h1>
    </div><!-- /header -->
    <div class="ui-content" role="main">
      <form class="form-task">
        <div class="ui-field-contain">
          <input type="text" name="task" id="task" value="" data-clear-btn="true" placeholder="タスク">
          <input type="submit" id="submit-1" value="Send">
        </div>
      </form>
      <div class="ui-field-contain tasks">
        <fieldset data-role="controlgroup">
        </fieldset>
      </div>
    </div><!-- /content -->
    </div><!-- /page -->
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <script src="js/applican.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

jQuery MobileのUIに合わせてHTML構造を記述しています。表示すると次のようになります。

JavaScriptの処理

JavaScriptの処理についてはデスクトップ版の時と大きくは変わりません。まずdevicereadyのタイミングで初期化を行います。以下はCoffeeScriptで書いたコードです。

document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady = ->
  applican_init()
  db = null
  console.log("Ready")
  applican.openDatabase 'taskDB', (d) ->
    db = d
    db.exec """
    CREATE TABLE IF NOT EXISTS TASKS (id INTEGER PRIMARY KEY AUTOINCREMENT, task TEXT)
    """, (s) ->
      console.log "Table create successful"
      db.query """
      SELECT id, task FROM TASKS
      """,
      (result) ->
        return true if applican.config.debug
        $.each result.rows, (i, row) ->
          html = """
          <div class=\"ui-checkbox\">
            <label for=\"checkbox-v-#{row.id}\" class=\"ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off\">#{row.task}</label>
              <input type=\"checkbox\" name=\"checkbox-v-1a\" id=\"checkbox-v-#{row.id}\" class=\"task\" value=\"#{row.id}\">
          </div>
          """
          $(".tasks fieldset").append html
      , (e) ->
        console.log "SELECT failed."
    , (e) ->
      console.log "Table create failed."
  , (e) ->
    console.log "Open database fail"
onDeviceReady()

アプリカンのデータベースAPIを使ってtaskDBを開きます。そしてTASKSテーブルを作成し、既存のデータがあれば表示処理を行っています。各タスクのHTMLコードはjQuery Mobileに合わせています。

次にタスクの追加処理です。

$(".form-task").on 'submit', (e) ->
  e.preventDefault()
  return false if $("#task").val() == ""
  name = $("#task").val()
  sql_safe_name = name.replace("'", "''")
  db.exec """
  INSERT INTO TASKS (task) values ('#{sql_safe_name}')
  """, (result) ->
    console.log "INSERT successful."
    db.query """
    SELECT id, task FROM TASKS ORDER BY id desc LIMIT 1
    """, (rows) ->
      if applican.config.debug
        row = id: 1, task: name
      else
        row = rows.rows[0]
      html = """
      <div class=\"ui-checkbox\">
        <label for=\"checkbox-v-#{row.id}\" class=\"ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off\">#{row.task}</label>
          <input type=\"checkbox\" name=\"checkbox-v-1a\" id=\"checkbox-v-#{row.id}\" class=\"task\" value=\"#{row.id}\">
      </div>
      """
      $(".tasks fieldset").append html
    , (e) ->
       console.log "SELECT failed."
       alert e
  e.target.reset()

こちらは入力されたタスク名でTASKSテーブルにINSERT処理しています。その処理が成功すれば、テンプレートを使ってタスク一覧に追加しています。

最後にタスクのチェックボックスを追加した時の処理です。

$(".tasks").on 'click', '.task', (e) ->
  e.preventDefault()
  db.exec """
  DELETE FROM TASKS WHERE id = #{$(e.target).val()}
  """, (s) ->
    $(e.target).parents("div.ui-checkbox").remove()
  , (e) ->
    consoole.log e

TASKSテーブルから該当データを削除し、処理が成功すればDOMからも削除しています。

実際の動作

実際の動作は次のようになります。

今回のコードはGitHubにアップロードしてあります(applican.jsは除いています)。動作を確認される際の参考にしてください。

アプリカンにアップロード

HTML/JavaScript/スタイルシートのコードができあがったら、それらをZipファイルに圧縮してアプリカンの管理画面でアップロードします。

アップロードが成功したら、アプリカンシミュレータを使って動作させてみましょう(iOS版Android版)。

アプリカンの管理画面の操作についてはこちらの記事を参考にしてください。

まとめ

jQuery Mobileを使うとjQueryの開発効率を活かしつつ、さらにスマートフォン向けのWebアプリケーションならではの機能(画面デザイン、操作性)を得られるようになります。アプリカンはUIやライブラリ、フレームワークを自由に選択できますのでjQuery Mobileを使ってスマートフォンアプリを開発したいと言う時にはぜひ使ってみてください。

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