imthinker::net

ふらふらうぇぶろぐ

Python の virtualenv で作る Titanium 用仮想環境

Titanium CLI や Alloy は全て node.js を基盤として作られています。主観では Titanium 開発者は Mac を使っている人が多く、 Mac で node.js の環境を整えるのに Homebrew を使っている人も多いと勝手に思っています。

Homebrew は非常に使い勝手が良いのですが、様々なソフトウェアやライブラリを Homebrew でインストールして環境を整え、ふと、

brew update && brew upgrade

をやったときに思いがけず node.js がバージョンアップされてしまうことがあります。 node.js を基盤に作られたソフトウェアは node.js のバージョンに依存していることが多く、 Titanium CLI や Alloy もその例に漏れません。つまりは動かなくなってしまいます。今回は node.js の管理を Python の virtualenv を使って行い、想定したシーンに合わせて node.js 環境を切り替える方法を紹介します。

続きを読む

Titanium 3.1 で登場予定の ListView を見てみよう

先月の tiTokyo でもチラリと発表されていましたが、 Titanium 3.1 では TableView に変わるデータ列挙用の UI コンポーネントとして、 ListView というものが登場する予定です。そして、最近の Continuous Builds でその実装が一部始まったようなので早速試してみました。

ListView とは

そもそも ListView とはなんでしょうか?これまで、例えば Twitter クライアントのようなアプリケーションを構築しようと思ったら、 TableView を使って Row の上に様々な View を配置していくスタイルが Titanium では一般的でした。

多目的に使われる TableView ですが、複雑なレイアウトやイベント処理の関係でパフォーマンスに悪い影響を与えることも少なくありませんでした。そこで登場するのが ListView です。 ListView はパフォーマンスにフォーカスを当てて開発が進められています。

テンプレート

ListView の特徴はテーブル上に表示される項目を「テンプレート」という形で予め定義しておける点にあります。これまで、 TableViewRow の上に ImageView を置いて、 Label を置いて…という1つ1つ行っていた処理を簡略化することが可能です。

これは、 Ti.UI.ListViewTemplate というオブジェクトで実装することが可能になるようですが、現在の Continuous Builds では未実装でした。また、今後の仕様変更によって実装されるかどうかも分かりません。

var listTemplate = {
    properties: {
        onDisplayItem: function (e) {
            console.log(e);
        },
        selectedBackgroundColor: "blue",
        height: 44
    },
    events: {},
    childTemplates: [{
        type: "Ti.UI.Label",
        id: "cellLabel",
        properties: {
            color: "#FF3300",
            font: {
                fontFamily: "Helvetica",
                fontSize: 16,
                fontWeight: "bold"
            },
            textAlign: "center",
            width: Ti.UI.FILL,
            height: Ti.UI.SIZE,
            top: 0,
            left: 0
        },
        events: {
            click: function (e) {
                console.log(e);
            }
        }
    }]
};

例えば、このようなオブジェクトリテラルを定義しておくとします。そして、 ListView を定義するときに、これをテンプレートとして取り込むことができます。

var listView = Ti.UI.createListView({
    templates: {
        myTemplate1: listTemplate
    },
    sections: [listSection]
});

テンプレートは複数定義しておいて、 ListView のアイテムを定義するときに使用することができます。上記コードで sections というプロパティを定義し、値に配列、その中に listSection を代入しています。 listSection は以下のようになります。

var listSection = Ti.UI.createListSection({
    headerTitle: "List View Section"
});

TableView では TableView を作ったら、その中に TableViewRow をガシガシ突っ込んでいくスタイルでしたが、 ListView では ListView の中に最低1つの Section を作って、 Section の中にアイテムを入れます。ここでは headerTitle を付けていますが、付けなくても大丈夫です。

Section へのアイテム代入は setItems メソッドで行います。

listSection.setItems([{
    template: "myTemplate1",
    cellLabel: {
        text: "Label text 1",
    }
}, {
    template: "myTemplate1",
    cellLabel: {
        text: "Label text 2",
    }
}]);

予めテンプレートを定義しておいて、そのテンプレートを使ってアイテムを構築し、アイテムをセクションに代入し、セクションを ListView に渡すことでデータを列挙するというのが ListView の仕組みのようです。

デフォルトテンプレート

現在の Continuous Builds はまだ独自のテンプレートが動かないようで、今まで書いたコードは残念ながら動作確認ができていません。 Continuous Builds でビルドすることでエラー無く動作はするものの、テンプレートとして定義している Label が表示されない状態です。

そこで、予め定義されているデフォルトテンプレートを試してみました。以下は動くコードです。これを app.js として保存し、 Continuous Builds で動作させることでスクリーンショットのような動きを見せます。

/*jslint devel:true */
/*global Titanium */
(function (Ti) {
    "use strict";
    var win, listSection, listTemplate, listView;
    win = Ti.UI.createWindow({
        backgroundColor: "#FFFFFF"
    });

    listSection = Ti.UI.createListSection({
        headerTitle: "List Header Title"
    });

    listView = Ti.UI.createListView({
        sections: [listSection],
        backgroundColor: "#FFFFFF"
    });

    listView.addEventListener("itemclick", function (e) {
        var idx, section, data;
        idx = e.itemIndex;
        section = e.section;
        data = section.getItemAt(idx).properties;
        alert("You clicked \"" + data.title + "\"");
    });

    listSection.setItems([{
        template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
        properties: {
            title: "Default Title",
            subtitle: "Default Sub Title"
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS,
        properties: {
            title: "Settings Title",
            subtitle: "Settings Sub Title"
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS,
        properties: {
            title: "Contacts Title",
            subtitle: "Contacts Sub Title"
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE,
        properties: {
            title: "Subtitle Title",
            subtitle: "Subtitle Sub Title"
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
        properties: {
            title: "Accessory Type None",
            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
        properties: {
            title: "Accessory Type Checkmark",
            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
        properties: {
            title: "Accessory Type Detail",
            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DETAIL
        }
    }, {
        template: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
        properties: {
            title: "Accessory Type Disclosure",
            accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
        }
    }]);

    win.add(listView);
    win.open();
}(Titanium));

f:id:RyuGoo:20130316013407p:plain

f:id:RyuGoo:20130316013442p:plain


どうでしょうか。予め用意されているテンプレートの形に従ってアイテムの表示が変わっていることが分かります。 ListView の addEventListener に itemclick というイベントハンドラを設定していますが、これは新しいハンドラです。

ListView 本体に addEventListener を置いていますが、テンプレートを定義する場合は childTemplates に Label や ImageView などの子テンプレートを定義し、パーツ毎にイベントハンドラを設定できるようなので、本当に細かい設定までできることになりそうです。

最後に

今回は発展途上中の Continuous Builds を使い、さらに発展途上中の API をつまみ食いしてみましたが、久しぶりに TableView のような大きな UI パーツ系に新しい要素が入ってきたので大変楽しいものでした。

現時点でこれを実用しようだなんて間違っても考えてはいけません。絶対に仕様変更があるはずですし、痛い目を見るのは分かっていることです。しかし、新しい API が登場したときに混乱しなくて済むように、事前のキャッチアップはお勧めします。

CODESTRONG!

Titanium もくもく会 Tokyo #6 に行ってきました

先月は tiTokyo があったのでお休みでしたが、今月ももくもく会が開催されました。今回は KDDI 株式会社様のご厚意で会場提供をしていただきました。ありがとうございました。

LT

今回は LT 少なめで、もくもくタイムが多く取られていました。

3分でわかる Kii cloud & TiGPUImageView

@hamasyou さんから Mobile BaaS である Kii Cloud の紹介と、 Titanium モジュールである TiGPUImageView の紹介がありました。 Kii Cloud は Appcelerator の ACS と似たようなもので、用意された API を叩くだけでサーバサイドの機能を実装できるというもの。

Kii Cloud は日本語でもサポートが受けられるという点が ACS とは違うメリットで、 iOS / Android / JavaScript / RESTful API が用意されていて、 Titanium Mobile 用のモジュールに関しては打診中とのことです。楽しみですね。

TiGPUImageView は名前の通り GPU を使う ImageView で、画像に簡単にフィルタ効果をかけられるモジュールです。 iOS シミュレータでデモされていましたが一瞬でフィルタ効果が得られていました。実機でもかなり高速に動作するそうです。 Android も対応しています。

CAN-GW 情報を便利に使うためのラッパー「InfoBox」

@atticatticattic さんから DENSO SmartTech Award に応募したアプリケーションの紹介がありました。車載ネットワークである「CAN」の情報を取得するための Titanium モジュールが DENSO さんから配布されていて、先日までアプリコンテストの募集がありました。

このコンテストに応募したアプリケーションの紹介ですが、アプリケーションを作るのに、モジュールから取得した情報をそのまま使うのは補正などが必要で使いづらかったため、アプリケーションを作る為のラッパーを作りましたというのが今回の趣旨。

これに InfoBox という名前を付けて、 Titanium 製のスマートフォンアプリケーションとウェブコンソールの2本を作られていました。生情報が使いづらいというのは知らなかったのですが、このようなラッパーが登場することで車情報アプリが開発しやすくなりそうです。

次回

次回はリクルート メディアテクノロジーラボ様のご厚意で会場を提供していただき、4月12日にもくもく会を開催予定です。既に ATND がオープンしていますので、参加を希望される方は早めにご登録ください。

CODESTRONG!

Titanium 3.0 と ECMA-262-5

Titanium 3.0 は Alloy とか Alloy とか Alloy が話題になりがちですが、実は ECMA-262-5 互換も大きく進化しています。面倒な書き方で対応していた箇所をスッキリと書けるようになったところもあります。いくつか見てみましょう。

短く書くために CoffeeScript で説明しますが、わざと CoffeeScript 的ではない書き方をしているのでご了承をば。

Object.create

Object.create を使うと継承のようなものを簡単に書く事ができます。

Hoge = -> @name = "Class Hoge"
Hoge::getName = -> "#{@name}!"

例えばこんなクラスっぽい Hoge があって、 Foo で Hoge を継承したい場合、

Foo = -> Hoge.apply @, arguments
Foo:: = Object.create Hoge::,
  greet:  # greet というメソッドを定義する
    value: ->
      "I'm #{@name}! My parent is Hoge."

こんな感じで継承のようなものを書く事ができます。 Object.create は与えられたプロトタイプから渡されたパラメータを持つオブジェクトを生成します。

Object.defineProperty

オブジェクトにプロパティを追加したり、既存のプロパティの属性を変更したりします。

obj = Object.create Object::  # obj = {} 相当
Object.defineProperty obj, "name",
  value: "Titanium Mobile"
  writable: false  # 追記できない
  enumerable: false  # 列挙できない
  configurable: false  # 再設定できない

# 追記できない
obj.name = "Titanium Alloy"
# 列挙できない
Object.keys obj  # []
# 再定義できない
Object.defineProperty obj, "name"
  value: "Appcelerator Cloud Services"

同時に複数のプロパティを操作できる Object.defineProperties というものもあります。

Object.keys

上でチラリと使っていますが、 Object のプロパティ名一覧を配列で取得することが出来ます。 defineProperty で enumerable を false にしているプロパティは列挙されません。

win = Ti.UI.createWindow
  title: "My awesome window"
  backgroundColor: "#FFFFFF"

Object.keys win  # ["title", "backgroundColor"]

Object.seal

オブジェクトを封印するためのメソッドです。封印。かっこいい。でも名前に惑わされてはいけません。封印前に定義したプロパティは変更可能です。また、オブジェクトの再定義は不可能になります。

  • writable: true
  • configurable: false
win = Ti.UI.createWindow
  title: "My awesome window"
  backgroundColor: "#FFFFFF"

# 封印!
Object.seal win
# でも封印前に定義したプロパティは変更できちゃう
win.title = "My super awesome window"  # OK
# 新しいプロパティは定義できない
win.backgroundImage = "beautiful.png"  # NG

Object.freeze

オブジェクトを凍結するためのメソッドです。カッチカチにします。

  • writable: false
  • configurable: false
win = Ti.UI.createWindow
  title: "My awesome window"
  backgroundColor: "#FFFFFF"

# 凍結!
Object.freeze win
# 変えられないよ
win.title = "My super awesome window"  # NG

Object.preventExtensions

オブジェクトに新しいプロパティを追加できないようにします。 Object.seal と異なり、オブジェクトの再定義は可能です。

  • writable: true
  • configurable: true
win = Ti.UI.createWindow
  title: "My awesome window"
  backgroundColor: "#FFFFFF"

Object.preventExtensions win
# プロパティは変更可能
win.title = "My super awesome window"  # OK
# 新しいプロパティは定義できない
win.backgroundImage = "beautiful.png"  # NG

Object.seal, Object.freeze, Object.preventExtensions はどれも新しいプロパティは挿入できないという共通点を持っていて、既存のオブジェクトに対する書き込み権とオブジェクト自体の再定義権をどう設定するのか、という点が異なります。

これらに対応する確認用メソッドに Object.isSeal, Object.isFreeze, Object.isExtensible が用意されています。

Object.getOwnPropertyDescriptor

オブジェクトのプロパティの属性を記述するためのオブジェクトを取得します。

win = Ti.UI.createWindow
  title: "My awesome window"
  backgroundColor: "#FFFFFF"

descObj = Object.getOwnPropertyDescriptor win, "title"
# win.title の writable 属性を false に設定する
descObj.writable = false

Object.getOwnPropertyNames

列挙可能、不可能に関わらず、オブジェクトのプロパティ名、メソッド名を配列で列挙します。列挙可能のプロパティ名だけを取りたい場合は Object.keys で。

obj = Object.create Object::  # obj = {} 相当
Object.defineProperty obj, "name",
  value: "Titanium Mobile"
  writable: false  # 追記できない
  enumerable: false  # 列挙できない
  configurable: false  # 再設定できない

Object.getOwnPropertyNames obj  # ["name"]

Date.toISOString

ISO 形式の日付表現を取得します。

dt = new Date()
dt.toString()  # "Thu Feb 07 2013 22:21:30 GMT+0900 (JST)"
dt.toISOString()  # "2013-02-07T13:21:30.393Z"

Date.now

1970/1/1 00:00 からのミリ秒を取得。 (new Date()).getTime() からの解放。

Date.now()  # 1360243497226

Array.isArray

とてもファニーなメソッドです。 new Array() しちゃった場合も、リテラルで書いた場合もキチンと配列として認識してくれます。

Array.isArray (new Array())  # true
Array.isArray [1,2,3,4,5]  # true

Function.prototype.bind (Android だけ!)

関数内の this から参照させるオブジェクトを決定することが可能です。使い方によっては大変便利なメソッドですが、使えるのは Android だけです。

hoge =
  greet: () ->
    "Hello, #{this.name}!"

bindedHoge = hoge.greet.bind
  name: "Titanium Mobile"
bindedHoge()  # Hello, Titanium Mobile!

Array.prorotype.indexOf

Java の ArrayList を使ったことがある方はご存じかと思います。引数に渡した値が配列に存在している場合、最初に見つけた箇所のインデックスを返します。厳密比較です。

data = [3, 5, 7, 11]
data.indexOf 3  # 0
data.indexOf 7  # 2

Array.prorotype.lastIndexOf

indexOf の後方探索版です。後ろから探索して、見つけた箇所のインデックスを返します。

data = [3, 5, 7, 11, 3, 5, 7, 11]
data.lastIndexOf 3  # 4
data.lastIndexOf 7  # 6

Array.prototype.every

配列の各要素をテストして、全ての要素が合格すれば true が返ってきます。テストは自分で定義します。

data = [3, 5, 7, 11]
test = (val, idx, arr) ->
  if val % 2 == 1
    return true
  else
    return false
data.every test  # true

Array.prototype.some

every が全ての要素をテストして合格したときに true を返すのに対して、 some は1つでも合格したら true が返ります。

data = [2, 4, 7, 6]
test = (val, idx, arr) ->
  if val % 2 == 1
    return true
  else
    return false
data.some test  # true

Array.prototype.forEach

既に使ったことがある方もいると思います。配列の各要素に対して順番にコールバック関数を1回実行します。

data = [3, 5, 7, 11]
data.forEach (val, idx) ->
  console.log "#{idx}: #{val}"

単純な for 文を使ったループよりも遅いことに注意してください。

Array.prototype.map

配列の各要素に対してコールバック関数を実行し、得られた結果の配列を返却します。

data = [3, 5, 7, 11]
mapped = data.map (val, idx) ->
  idx * val * 2
console.log mapped  # [0, 10, 28, 66]

こちらも for 文よりは遅くなります。

Array.prototype.filter

配列の各要素に対してコールバック関数を実行し、結果が true のもののみで構成された配列を返却します。

data = [3, 5, 7, 11, "foo", "bar", {key: "val"}]
filtered = data.filter (val) ->
  return (typeof val == "string" || typeof val == "object")
console.log filtered  # ["foo", "bar", {key: "val"}]

こちらも for 文よりは遅くなります。

Array.prototype.reduce

配列全ての要素に対してコールバック関数を実行し、最後の呼び出し後にコールバック関数の結果を集積したものを返却します。

data = [3, 5, 7, 11, "foo", "bar", {key: "val"}]
reduced = data.reduce (prev, current) ->
  return prev + current
console.log reduced  # "26foobar[object Object]"

Array.prototype.reduceRight

reduce 処理を後方から行います。

data = [3, 5, 7, 11, "foo", "bar", {key: "val"}]
reduced = data.reduceRight (prev, current) ->
  return prev + current
console.log reduced  # "[object Object]barfoo11753"

参考資料

エッセンシャル tiTokyo 2013

f:id:RyuGoo:20130217124536j:plain

Titanium Mobile ユーザ会地雷踏み担当の ryugoo_ です。 Titanium Mobile を開発する Appcelerator 社初の海外カンファレンス、 tiTokyo 2013 が 2013/02/16 に開催されました。私はスタッフとして参加していまして、主に写真を撮っていました。

今回は tiTokyo 2013 を振り返るために、各セッションのエッセンスを抽出し、まとめたいと思います。また、既に素晴らしいまとめを執筆してくださった方もいらっしゃいますので、そちらもご覧ください。


キーノート : Appc CEO, Jeff Haynie

Appc CEO Jeff Haynie 氏の tiTokyo 基調講演より、実際の開発に関連しそうなところをピックアップします。 Titanium 3.1 に注目です。

Titanium 3.0.2 Service Pack

  • 10 の機能追加と 100 のバグ修正を行った。
  • iOS ではロケール毎のスプラッシュスクリーンに対応する
  • Android には SearchView Widget を提供する

Titanium 3.1

  • Q2 2013 にリリース予定
  • Alloy のアシスト機能やデバッグ
  • コードアナライザ (Titanium Code Processor ?)
  • シミュレータを起動したままのコード編集 / 反映ができる「ライブエディット」
  • 動的なデータの取扱に対して TableView よりも適した ListView API
  • より良いパフォーマンス / 新しいビルドシステム

オープンソースモジュールの提供

ロードマップ

  • Blackberry 10 のサポート
  • Tizen のサポート
  • Windows 8 / Windows Phone 8 のサポート

ブランド

  • Titanium ブランドはオープンソース、無償のプロジェクトを指すようになる
    • Appcelerator Cloud Services の無償版は Titanium Cloud になる ?
  • Appcelerator ブランドは商用ブランドとして取り扱う

Titanium 3.1 ではコードの編集と確認がより簡単になるライブエディットや、 TableView API の代替品になるという ListView API が楽しみです。

最後のブランドの部分に関してはさらりと話していましたが、ブランド戦略が明確になりました。 Titanium ブランドは OSS / 無償のものとして、商用に関しては Appcelerator ブランドに統一していくようです。


SOASTA CEO, Tom Lounibos

アプリケーションテスト環境を提供する SOASTA CEO Tom Lounibos 氏のセッション「継続的なテストで高いユーザエクスペリエンスを提供する方法」をピックアップします。

SOASTA 社

  • SOASTA 社はアプリの自動テストを得意とする
  • オフィスは各国にあり、2013年は日本にも作りたい
    • 人員募集 ?
  • 500 を超える企業を顧客に持ち、 15,000 もの開発者・試験者が TouchTest を使っている

SOASTA モバイルテストプラットフォーム

  • モバイルアプリのサービスの質を高める必要がある
  • 「ビルド」→「テスト」→「デプロイ」→「モニタリング」のサイクルを回していく
  • ビルドからテストの段階は「TouchTest」を使って、継続的なテストを行う
  • テストからデプロイの段階は「CloudTest」を使って、パフォーマンスのテストを行う
  • デプロイからモニタリングの段階は「mPluse」を使って、ユーザのモニタリングを行う

ユーザエクスペリエンスに注目する

  • ユーザは満足できていない
  • 将来的に Google Glass のような小さなデバイスも登場する
  • 車のダッシュボード端末もそうだろう

テスト

  • モバイル開発者はテストを自動化する必要がある
    • 機能テスト、ユーザパターンテスト、デバイス、 OS 、キャリア ………
  • Titanium / TouchTest の組み合わせでライフサイクルを作る

継続的インテグレーション

  • 開発する
  • GitHub などのリポジトリにプッシュする
  • Jenkins がチェックアウトしてきてリアルなデバイスに送り実行する
  • TouchTest がテストを走らせる
  • Jenkins がテスト結果を受け取り、合格ならばアプリケーションをパブリッシュする

TouchTest デモ

  • チェスゲームアプリを例にデモをする
  • TouchTest はクラウド上でテストケースを書く事ができる
  • TouchTest アプリケーション上に開発しているアプリの画面が表示される
    • 脱獄する必要なんて無いよ! と何度も言っていた
  • この画面上で行った動作はテストケースとして TouchTest に記録される
  • 記録されたテストケースはあとで簡単にプレイバックすることができる
  • テストケースは複数のデバイスで同時に走らせる事ができる
    • デモでは10台以上のデバイスで同時に走らせているビデオが流れた

Titanium の高速な開発サイクル

  • Titanium を使った継続的インテグレーション
  • TouchTest を使った継続的テスト
  • Crittercism を使ったクラッシュモニタリング
  • これらを使って高速な開発サイクルを維持する

mPulse の紹介

  • mPulse はリアルタイムなアプリモニタリングツール
  • 世界中のどこで、どれぐらいのユーザが使っているのかを可視化することを可能にした
    • デモ画面ではいくつかのグラフと中央に地球が表示されており、使用地点がハイライトする
    • 超かっこよかった

モバイルアプリのテストはコードレベルのユニットテストを Jasmine で行うなどのアプローチがありましたが、回遊テストをクラウドで簡単に実行できるプラットフォームとして、 SOASTA の TouchTest はとても魅力的に思えました。開発から運用までを継続的に行っていくことで質の高い UX を提供することが求められていくでしょう。


DENSO, 武智 俊英

tiTokyo スポンサーである DENSO 社の武智様のプレゼンテーション「つながるクルマの世界」からピックアップします。

DENSO の紹介

  • DENSO は車の部品を作っている
  • ハードウェアだけではなく、自動車専用の IC も作っている
  • QR コードや世界初のカーナビも DENSO が作った

注力点

  • DENSO は「環境」「安全」「快適」「利便」を注力分野としている
    • CO2 排出量の削減
    • 事故ゼロ社会を目指した安全性向上
    • 情報サービスによる快適・利便性の向上
  • 自動車に載せるコンピュータの量は増えている
    • とある高級車では100個ものコンピュータが載っている
  • 予測では 2015 年には車のためのソースコードの行数が1億行を超える勢い
  • ハイブリット車ではエレクトロニクス製品の需要が拡大している
  • DENSO の技術開発方針「いつもの安心、もしもの安全」
    • カラーナイトビジョンによる暗所運転の安全性向上
    • 大画面のヘッドアップディスプレイ
    • ドライバの状況をモニタリングする技術

つながる時代

  • 通信速度が向上することによるエンタメ系サービスの拡大
  • 車に対するスマートフォン技術の応用による新しいサービスの誕生
  • 途切れない通信による安全系の品質向上
  • 車両メーカーは車両情報の公開を行う動きを見せている
  • スマートフォンとの連携が期待される
    • スマートフォンのハードウェア的な仕様変更による接続不可能化
    • スマートフォンのソフトウェア的な仕様変更による使用不可能化
    • これらは問題だ

NaviCon

  • スマートフォンとカーナビをつなぐハブアプリケーション
  • Titanium 用のスマートフォンモジュールは OMM で配布中
  • デモとして iPhone で検索した店の情報などをカーナビに送り込むなどのが行われた
  • iPhone 上の地図をピンチイン / ピンチアウトを行い、カーナビの地図が拡縮される

車におけるスマートフォン連携

  • 運転中でも使いやすいアプリ
  • 移動中の通信環境でも安定して動作する
  • 車で長く使える
  • 簡単な接続動作
  • 車で使いたくなるアプリの提供
    • これらがポイント
  • 車のセンサ情報を使うことで様々なアプリケーションが考えられる

「いつもの安心、もしもの安全」が個人的にツボです。車の情報を使った新しい何か …… を開発者は期待されています。


Appc Platform Evangelist, Ricardo Alcocer

Appcelerator Platform Evangelist の Ricardo Alcocer 氏による Alloy の紹介プレゼンテーション。非常に説明しづらいですが、ピックアップします。

Alloy

  • Alloy は公式の MVC フレームワーク
  • XML と JavaScript で構築していく

テーマ

  • テーマという簡単にUIのデザインを切り替える機能がある
  • themes ディレクトリの中にテーマ名のディレクトリを作り、 TSS を置く
  • config.json 内で使用するテーマ名を記述し、簡単にスタイリングを切り替えられる

ウィジェット

  • ウィジェットはミニアプリケーションのようなもの
  • いろいろなアプリで共通するようなビューや処理をウィジェット化できる
  • ウィジェットは XML 中では Require タグで読み込ませられる
    • これまでの CommonJS モジュールの発展版と考えれば分かりやすい

データバインディング

  • モデルを UI にバインドすることができる
  • モデル は Backbone.js ベース
  • Titanium Studio からモデルを定義することができる
  • モデルの定義ファイルが自動的に DB なども作ってくれるので SQL は書かなくて良い
  • XML 中からモデルへの参照を表す Collectioin タグを書く
  • モデルを定義したときのフィールド名を XML 中に {} 付きで書くとモデルを参照できる

Alloy 1.0 リリースだ!

  • Titanium 3.0 以降でのみ動く
  • SQL アダプタを新しい物にした
  • Titanium Studio のナイトリービルドと組み合わせるとアシスト機能が使える

Alloy の今後は

  • Titanium Studio 3.1.0 で Alloy アプリのデバッグに対応
  • テーマファイルを動的に切り替えできるようにする
    • オンラインからテーマを取得して切り替えもできるようになるらしい
  • モデルの Sync アダプタを書くためのフレームワークを提供
  • ウィジェットでモデルとテーマを使えるように
  • Model - View バインディングの実装を完了させる (現時点ではまだ不十分)

Alloy も 1.0 になりましたが、さらなる追加機能が予定されていて楽しみです。特にオンラインからのテーマ取得と、動的な切り替えは新しい見た目を一部ユーザにテスト配布するときなどに役立つのではないでしょうか。先のテスト話と併せて、迅速な開発と運用をサポートするかもしれませんね。


Lanica Co-Founder, 井口 恒太

Titanium 向けのゲームエンジンである Platino を開発中の Lanica 社共同設立者である 井口 恒太 氏のプレゼンテーション。 Platino エンジンの現状をピックアップします。

Platino エンジン

  • Titanium の上で動く OpenGL ES エンジン
  • 2D / 2.5D ゲームのためのエンジンである
  • イメージスプライト、パーティクル、シェーダー、アイソメトリックエンジン ……
  • Titanium のモジュールとして提供される
  • 今まで通り require 関数で読み込んで GameView というものを作って動かす
  • GameView は独自にマルチタッチに対応している
  • 既存の Titanium View と組み合わせる場合はパフォーマンスに注意が必要だろう
    • "どうしてもチェックボックスを打ち落としたいとか考えない限りは …… "
  • サウンドに関しても独自実装
    • iPhone は OpenAL
    • Android は OpenSL
  • Alloy は使っていないが、モジュールなので読み込ませれば使えるだろう

ブラウザからネイティブの時代

  • 日本のソーシャルゲームはブラウザゲーからネイティブに移行している
  • よりリッチな表現などが求められている

Palatino の価格

  • 無償版と有償版を提供予定
  • 無償版からはシェーダーなどの「明らかにプロ向け」機能をオミットする
  • 有償版は Unity Pro ぐらいの価格で見ておいてもらえれば …… とのこと

Platino は無償版も提供されるということで、今まで通りの Titanium 開発にモジュールを加えるだけでリッチなゲームにも対応するプラットフォームとしてかなりの注目を集めるのではないでしょうか。もしかすると Alloy が上手にプラットフォーム依存を吸収し、 Platino を使うことでマルチプラットフォーム対応のリッチなゲームが簡単に配布できるようになるかもしれません。要注目です。


Titanium Mobile ユーザ会 Q&A

Windows 8 / Windows Phone 8 対応をどうしていくのか

  • Windows 8 プラットフォームはタイルやチャームなどの独自機能がある
  • これらへの対応に注力する必要がある

Alloy と Titanium Classic 、どちらを Appc は推し進めていくのか

  • Alloy はオプション扱いだ
  • Appc 的なベストプラクティスではあるが ……

Alloy Widget や Sync アダプタの公式リポジトリは作らないのか

  • 作る

Alloy の仕様変更が急すぎて辛い

  • Alloy はベータ版だぜ
    • tiTokyo で 1.0 リリースしたけど
  • Backbone.Events は処理コストが高くて取りやめた

Alloy モデル定義時に SQL アダプタ使ってオートインクリメントできる?

  • できる

GREE プラットフォームとか使いたいんだけど、 Ti の仕様上できない

  • Activity 継承するの? それは良くないデザインだな ……
  • 出力されたコードを自分で修正したり、空のクラスを作って対応する必要があるかも

Alloy はオプション (ベストプラクティス) …… つまり、どういうことだってばよ。


懇親会と LT

懇親会では LT や Appc や DENSO からの素敵なプレゼント抽選会がありました。

LT

すいません。数多くて把握し切れていません。私も HERE を発表してきましたが、皆様ゲームやツールを思い思いに作っていて、それを Appc CEO の前で発表できるという素晴らしい機会だったのは間違いありません。個人的には「オコシテ」というサービスが面白かったです。ソウルスクリーム。

抽選会

Appc からは iPad mini 4台! DENSO からはプラズマクラスター発生装置 (発売したて) 3台という太っ腹な抽選会。当選された皆様、誠におめでとうございます。羨ましいです。


終わりに

今回、 tiTokyo にはスタッフとして参加することができました。まずは来場された皆様に厚く、御礼申し上げます。そして今回のイベントをスポンサードしてくださった DENSO スタッフの皆様、コーディネート・準備・撤収を引き受けてくださったユーザ会メンバーの方にも感謝いたします。最後に、このような会の原点となる Titanium Mobile という素晴らしい製品を作ってくださった Appcelerator に感謝いたします。

f:id:RyuGoo:20130217124729j:plain

CODESTRONG!

Alloy 1.0.0 に向けた大幅でサディスティックな変更点

iOS 6.1 に正式対応する Titanium 3.0.2 RC がリリースされました。大きな問題が無ければ Titanium 3.0.2.GA になると思いますが、同時に Alloy 1.0.0.GA もリリース目前で、 Alloy 1.0.0-cr を npm 経由でインストールすることが可能です。

sudo npm -g install alloy@1.0.0-cr

さて、この 1.0.0-cr ですが、 0.3.6 から大幅な変更が加えられています。口汚く個人の意見を述べさせてもらうならば「ふざけんな!」と言いたくなってくるぐらいなのですが、冷静になって、問題となる変更点を示しておきます。

Titanium 3.0 + のみ対応

Alloy 0.3.6 までは Titanium 2.1.x 以降対応でしたが、 Alloy 1.0.0 からは Titanium 3.0 以降のバージョンのみ対応です。 Alloy を使いたい場合は 3.0 に移行してください。

Backbone.Events API がビューとコントローラから削除

これです。これが大問題です。 … 0.3.6 までは Backbone.Events スタイルのイベントハンドリングが可能でした。そうです。過去形です。 1.0.0 では消えました。

View

<Alloy>
  <View>
    <Button id="myButton" title="Click me!" />
  <View>
<Alloy>

Controller

// 0.3.6 までは動く
$.myButton.on("click", function () {
    alert("Hello, world.");
});
// 1.0.0 からはこう書く
$.myButton.addEventListener("click", function () {
    alert("Hello, world.");
});

はい。 addEventListener です。 Backbone.js スタイルのイベントハンドリングが削除されたため、 on / off / trigger を $.id 名形式の参照から使うことはできなくなりました。 addEventListener / removeEventListener / fireEvent を組み合わせてください。

コントローラ内、要素参照の挙動変化

$.addEventListener("eventName", callbackFunction);

このような形で Alloy 直下の要素を直接参照することができなくなりました。 0.3.6 までは上記のコードであれば、 Alloy タグ直下の子要素を指していましたが、無名参照は不可能になりました。もしもコントローラへの参照が欲しければ、

<Alloy>
  <View id="viewName" />
</Alloy>

参照したい要素に ID を付加してください。そして、 $.viewName.addEventListener のようにコントローラから参照してください。

Require した要素のイベントハンドリング

これもまた大きな変更です。 Require で View の中から他の View を参照させた場合、参照元からは参照先の要素に対してイベントハンドリングすることができなくなりました。

例えばこのような2つのビューがあったとします。

index.xml

<Alloy>
  <Window class="container">
    <Require id="home" src="MyView" />
  </Window>
</Alloy>

MyView.xml

<Alloy>
  <View class="container">
    <Label>MyView</Label>
  </View>
</Alloy>

index.js

$.home.addEventListener("click", function () {
    alert("これが動くのは 0.3.6 まで");
});

index.xml は Require タグで MyView を参照しています。 id に home を割り当てているので、 $.home を index コントローラから参照させれば View の参照ができそうです。でもそれは、 0.3.6 までの話。 1.0.0 からは参照元のコントローラでキッチリ制御が必要です。

MyView.xml

<Alloy>
  <View class="container" id="home">
    <Label>MyView</Label>
  </View>
</Alloy>

MyView.js

$.home.addEventListener("click", function () {
    alert("1.0.0 からは参照元でイベントハンドラを書く");
});

先に書いたように、 $.addEventListener を使って Alloy タグ直下の要素への参照が無くなってしまいましたから、ビュー側も参照させる要素に ID を付加する必要があります。

マスタービューのようなものからスレーブビューを参照し、マスター側でイベントを取り回してスレーブに引数を渡し、何らかの処理を行うようなアプリケーションを書いている場合はアプリケーションの設計をやり直さなければならないでしょう。

Alloy CLI から alloy run が削除予定

これは小さな変更ですが、 Alloy CLI の alloy run コマンドが 1.1.0 で削除されます。コマンドライン操作で Alloy を使っている場合は Titanium CLI の titanium build を使えとのことです。

まとめ

Appcelerator のドラスティックでサディスティックな変更にアルファヒトバシラは泣いています。具体的には Alloy の超格好いいサンプルとしても見ることができる @k0sukey さんの tiTokyo アプリが 1.0.0 だと大幅に変更しなくちゃいけなくて泣ける。

アップデート

@k0sukey さんの神対応によって tiTokyo アプリが 1.0.0 に対応しました。

Ti.tokyo.GIG Titanium 新年会 2013 に行ってきました

f:id:RyuGoo:20130127005246j:plain

新年会でいただいた旗の取扱に悩んでいます。改めて手に取ってみると、これがまた大きい…! 横幅は 23inch ディスプレイぐらいあると思います。

本題ですが、 Titanium 新年会 2013 に行ってきました。人数も20名を超えたため、バールデルポポロ赤坂本店を貸し切って開催されました。18時からの開催だったのに、19時からと勘違いをしていて、遅刻しましたが…。

LT

例によって LT してきました。昨日のもくもく会では HERE というサービスについてと、 CoffeeScript と Jade を使って統一感のあるコーディングを Alloy で実現していますというお話をしたのですが、今日は一歩踏み込んで TSS も Stylus を使って書くことで CoffeeScript / Jade / Stylus と、全てインデントが重要なコーディング規則に従って Alloy アプリを書くという話をしてきました。

Alloy でビルド時に Stylus を TSS に変換するための jmk スクリプトは Gist に掲載済みです。 styles ディレクトリに hoge.styl ファイルを置いておくと、ビルド時に hoge.tss が出力されるという仕組みになっています。正直、ただの正規表現のカタマリですが。

使い方は1つだけ注意が必要で、

Label
    width "Ti.UI.FILL"

このように、Ti.UI.FILL や Ti.UI.SIZE など、 Ti. で始まるオブジェクトへの参照を記述するときは、ダブルクオートかシングルクオートで囲う必要があります。一応、 expr に関してもクオートすることで記述できますが、 expr がディスコンなので (´;ω;`)

Lanica Inc, Kota Iguchi さん

新年会のメインイベントは Lanica Inc の井口さんのお話。 Titanium Mobile 向けゲームエンジンである Platino の開発状況や Lanica 社設立の経緯など、充実の内容でお話しいただきました。来月の tiTokyo でもスピーカーとして登壇されますが、その前哨戦としてとても面白かったです。ここだけの話系の内容が多かったので、詳細は tiTokyo などで別途お話しになる機会をお待ちください。

OpenGL はやっておくと良いらしいですよ!

Titanium Mobile って結局どうよ?

新年会の場で色々とお話ししてみると、皆さん、結構 Titanium Mobile に対する思惑が違うんだなぁということが分かりました。妄信的に「Titanium があれば全部解決 ! 」というアプローチの人はいないように思えました。

やっぱり苦手な部分もありますし、ましてやお仕事として Titanium でアプリを作る場合の管理コストなどを考え始めると、常に Titanium でアプリ開発していいとも言えないですよね。

それでも裾野の広さやある程度までの動いて、使える iPhone アプリを作ることができるという点では素晴らしい製品だと思いますし、ここを基点に iOS / Android 共に Objective-C / Java に流れていっても全然良いですよね。

こんな感じの話を結構多くしていたように思います。

tiTokyo よろしくお願いします

2013年2月16日開催の tiTokyo を皆様宜しくお願い申し上げます。私も受付スタッフとして朝8時半から会場に立つ予定です。 Titanium Mobile 自体の知名度向上と、「何ができて、何が難しい」という制約などをキチンと伝えることもユーザ会の一員として必要かなぁと思っています。

そんな制約や Titanium 、 Appcelerator Cloud Services などの質問を直接 Appcelerator の社員に回答していただくチャンスがありますので、是非とも質問フォームから事前質問投稿にご協力ください。

CODESTRONG!