アプリカンブログ

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

jQuery×アプリカンでスマートフォンアプリを開発しよう

スマートフォンアプリを開発する際にはiOSであればObjective-CやSwift、AndroidであればJavaを使うのが基本になっています。しかしちょっとしたアプリを開発するために新しい言語を一から覚え直すというのは大変なことです。

そこでぜひ使って欲しいのがアプリカンになります。HTML5/JavaScript/スタイルシートを組み合わせてWeb技術を使ってアプリ開発が行えます。今回はWebの世界で最も広まっているであろうjQueryを使ってアプリ開発を行う方法を紹介します。アプリはシンプルなタスク管理になります。

ベースのダウンロード

アプリカンのライブラリページよりシンプルをダウンロードします。HTML/JavaScriptが入ったベーシックな構造になっています。ダウンロードしたら解凍します。

f:id:np_promotion:20150217100029p:plain

JavaScriptの用意

今回使っているJavaScriptは以下の3つです。

jQueryもBootstrapもWeb開発の現場ではよく使われていますよね。

スタイルシートの用意

JavaScriptと同じく、今回はBootstrapをベースにします。

  • bootstrap-theme.min.css
  • bootstrap.min.css

さらにWeb Fontを使うのでBootstrapをダウンロードして展開された中にあるfontsディレクトリをそのまま移動します。

基本的な構造

ファイルを配置した結果は次のようになります。

$ tree .
├── applican-config.xml
├── css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css.map
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
├── index.html
├── js
│   ├── applican.js
│   ├── bootstrap.min.js
│   └── jquery-2.1.3.min.js
└── whitelist.xml

HTMLの編集

まずはHTMLを編集します。Bootstrapの書き方に沿って進めます。app.jsはスマートフォンアプリのコードを記述したファイルです。

<!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" />
  </head>
  <body>
    <div class="container">
      <form class="form-task">
        <h2 class="form-task-heading">タスクを追加</h2>
        <label for="inputEmail" class="sr-only">タスク名</label>
        <input type="text" id="task" class="form-control" placeholder="タスク名を入力" required autofocus>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Add Task</button>
      </form>
      <div id="tasks">
    <table class="table table-striped">
      <thead>
        <tr>
          <th></th>
          <th>タスク名</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
      </div>
    </div> <!-- /container -->
    <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/app.js"></script>
  </body>
</html>

画面はこのようになります。

JavaScript

JavaScriptはjQueryの記法そのままですが、アプリカンのデータベースAPIも使っています。タスクをデータベースに保存して再現したり、削除できるようにしています。今回はCoffeeScript(js/app.coffee)で書いています。

初期設定

アプリ立ち上げ時の処理です。devicereadyで処理を行います。アプリカンのデータベースAPIを使ってtaskDBというデータベースを定義します。最初にTASKSというテーブルを作成(既にあればそのまま)し、既存のタスクを検索します。

applican.config.debug の時には結果が1になるので、その場合はタスクの表示処理を行わないようにしています。INSERT/UPDATE/DELETEの場合はexec、SELECTの場合はqueryメソッドになりますので注意してください。

結果を受け取ったらjQueryのeachメソッドで順番に処理を行います。

document.addEventListener("deviceready", onDeviceReady, false);
onDeviceReady = ->
  # 初期処理
  applican_init()
  db = null
  applican.openDatabase 'taskDB', (d) ->
    db = d
    db.exec """
    CREATE TABLE IF NOT EXISTS TASKS (id INTEGER PRIMARY KEY AUTOINCREMENT, task TEXT)
    """, (s) ->
      db.query """
      SELECT id, task FROM TASKS
      """,
      (result) ->
        return true if applican.config.debug
        $.each result.rows, (i, row) ->
          html = """
          <tr>
            <td><input type=\"checkbox\" class=\"task\" value=\"#{row.id}\" /></td>
            <td>#{row.task}</td>
          </tr>
          """
          $("#tasks table tbody").append html
      , (e) ->
        console.log "SELECT failed."
    , (e) ->
      console.log "Table create failed."
  , (e) ->
    console.log "Open database fail"
onDeviceReady()

タスクの追加

次にタスクを追加する処理です。こちらはフォームをsubmitするイベントを監視しています。ここはそのままjQueryを使っています。

# タスクを追加する処理
$(".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) ->
    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 = """
      <tr>
        <td><input type=\"checkbox\" class=\"task\" value=\"#{row.id}\" /></td>
        <td>#{row.task}</td>
      </tr>
      """
      $("#tasks table tbody").append html
    , (e) ->
       console.log "SELECT failed."
       alert e
  e.target.reset()

タスクの削除

最後にタスクを削除する処理になります。こちらはデータベースにDELETE文を流し、その結果が成功したらDOMをremoveしています。

# タスクを削除する処理
$("#tasks table").on 'click', '.task', (e) ->
  e.preventDefault()
  db.exec """
  DELETE FROM TASKS WHERE id = #{$(e.target).val()}
  """, (s) ->
    $(e.target).parents("tr").remove()

動作

こちらが実際に動作させたところになります。

submitやクリックなど、Webで使っていたイベントがそのまま使えますので開発がスムーズにできるはずです。

今回のコードはGitHubにアップロードしています。動作の確認にご利用ください(applican.jsは抜いてありますのでアプリカンのサイトよりダウンロードしてください)。

まとめ

アプリカンを使うことでWebアプリを開発する知識をそのままにスマートフォンアプリを開発できるようになります。ちょっとしたスマートフォン、タブレットアプリであれば新しい言語を習得するよりも早く開発できるはずです。ぜひご利用ください!

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