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

悪あがきプログラマー

悪あがきを続けていきたい技術と書評なブログです。トレタでiOSエンジニアやってます。

スマートフォン向けHTML5生成プログラミング言語「mobl」使ってみた!

HTML5

スマートフォン向けHTML5生成プログラミング言語の「mobl」を使ってみました。
これは凄いぞ!スマートフォン向けHTML5生成プログラミング言語「mobl」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ


環境設定は最新のEclipseを落としてきて、Eclipseから「Install new software」するだけで始められます。


で、このマニュアルにあるTodoアプリを作ってみました。
Hydra - Job ‘mobl:master:manual’ build 882758
HTML5のローカルストレージにタスクを登録、編集、削除、検索が出来るアプリです。


こんな感じです。
ローカルデータベースにちゃんと値が入っているのも確認できると思います。
f:id:y_koh:20110207001639p:image


iPhoneで見るとこんな感じ。
f:id:y_koh:20110207001640p:image
ただiPhoneからだと何故か日本語が使えず、タスクを登録しても画面には表示されませんでした。
モバイル様開発環境なのに。。


まだちょろっとしか触れてませんがHTMLもCSSも書くことなく、
こういったアプリを作れてしまうのは魅力的ですね。
まだまだ発展途上な感じはありますが今後とも注目していきたいです。


以下ソースになります。
ソースは下記3ファイルだけです。
moblという独自言語なのですがコンパクトなので比較的わかりやすいと思います。

  • todo.mobl:メイン処理
  • model.mobl:エンティティ定義
  • config.mobl:タイトル等の設定ファイル


todo.mobl

application todo

import mobl::ui::generic
import model

screen root() {
  header("Tasks") {
    button("Add", onclick={ addTask(); })
  }
  group {
    list( t in Task.all() order by date desc) {
      item { taskItem(t) }
    }
  }
  button("Search", onclick={ search(); })
}

control taskItem(t : Task) {
  checkBox(t.done, label=t.name)
  contextMenu {
    button("Delete", onclick={
      remove(t);
    })
    button("Edit", onclick={
      editTask(t);
    })
  }
}

screen addTask() {
  var newTask = Task()
  
  header("Add") {
    backButton()
    button("Add", onclick={
      newTask.date = now();
      add(newTask);
      screen return;
    })
  }
  group {
    item { textField(newTask.name, placeholder="Task name") }
  }
}

screen editTask(t : Task) {
  header("Edit") {
    button("Done", onclick={ screen return; })
  }
  group {
    item { textField(t.name, placeholder="Task name") }
    item { textField(t.description, placeholder="Task description") }
  }
}

screen search() {
  var phrase = ""
  
  header("Search") { backButton() }
  searchBox(phrase, placeholder="Search term")
  group {
    list(t in Task.searchPrefix(phrase)) {
      item { taskItem(t) }
    }
  }
}


mode.mobl

module model

entity Task {
  name        : String (searchable)
  description : String (searchable)
  done        : Bool
  date        : DateTime
}


config.mobl

configuration

debug
title "Todo"