Google+ もご覧ください
ユーザーアイコン

Ti Weekly Clips++

Pixate Freestyle for iOS試用レポート&Titanium周りで知っておくべきニュース!

Donayama

Pixate Freestyle for iOS試用レポート&Titanium周りで知っておくべきニュース!

News - SDKアップデートやイベントなどのニュース

Updating to Android 22.6.1 Tools

3月18日に公開されたAndroid Tools 22.6.1にバグがあるようで、Titaniumに限らずコマンドラインからのAVD作成ができなくなっているようです。22.6.2で修正されるようなので、アップしないようにという告知。

■勉強会リマインダー

Tips & Topics - ノウハウや技術紹介、解説記事

Titaniumもくもく会 #17に参加しました - TitaniumMobile勉強記

@h5y1m141さんによるLT紹介と参加レポート。

Titanium もくもく会 #17 でLTやって来ました。 - kazurof weblog

こちらはkazurofさんのLT紹介&レポート記事。

APIドキュメントの罠はありますよね…。あとAlloy時代はbuildの中を消すんじゃなくて、resourcesを消すべきですよね、確かに。

Quick Tip: Use the Titanium CLI to find details about your configuration

CLIの情報表示オプションを使って、トラブル解決に繋げようというtips記事。

RapidDev: Titanium development at the speed of light! - YouTube

Matt AppersonさんによるRapidDevの解説動画。

Snippet for a better alert | TiDev

alertを上書きして、titleやボタン名を指定できるようにするハック。confirmについてはすでにAlloyのビルドイン関数でそのようになっているみたいですね。

GitHub Watch - モジュールやサンプルコードの情報

Pixate/Titanium-PixateFreestyle

Pixate Freestyle for iOSをTitaniumから使うためのモジュール。

FokkeZB/gittio

何度か紹介している、パッケージレポジトリであるgitTioからモジュールやWidgetをダウンロードしてくることが出来るパッケージ管理ツール。

IsCoolEntertainment/titanium-request

nodeのrequestのような記述が行えるCommonJSモジュール。

CaffeinaLab/Trimethyl

Alloyに組み込むためのベンリモジュール集。認証,イベント管理,コントローラのスタック管理,MapViewユーティリティ,HTTPRequest,NewRelic,通知,ソーシャル共有(Twitter/Facebook/Mail...)などの処理が任意に読み込めるようになっています。

appersonlabs/TiCalabash

Cucumberのスマートデバイス向け実装CalabashをTitaniumで用いるためのCLIプラグイン。Android、iOSの両対応です。

smclab/TiAlternativeProgressBar

Android向けのプログレスバーモジュール。

sendgrid/ti.sendgrid

AppceleratorのRicardo Alcocerさんが作っていたSendGrid用モジュールが公式に採用されたようです。

MadRocket/com.madrocket.ti.slidemenu

スライドメニューを実現するAlloy Widget。デモアプリはこちら→MadRocket/slidemenu-demo

いくつめか分からない状態ですが(^^;)

xtity/TiYukkuri

いわゆる「ゆっくり」を再生するためのiOSネイティブモジュール。といっても音声アセットはレポジトリに入っていないので、持ってこないとだめみたいですね。

Spotlight - 小さな特集記事

今回の特集はオープンソース化されたPixateであるFreestyleをTitaniumから用いることができるPixate Freestyle for iOSの試用レポートをお送り致します。

Pixate Freestyleは画面内のViewや部品に対してCSSでスタイル指定を行えるというミドルウェアです。もともと有償ソフトウェアでしたが、2014年2月19日にオープンソース化され名前もPixate Freestyleと改められました。Freestyle自体はiOSとAndroidの両対応ですが、今回紹介するモジュールは残念ながら現時点ではiOSのみの対応となっています。

まずはインストールですが、すでにビルド済みのファイルが公開されているので、Releases · Pixate/Titanium-PixateFreestyleから最新版をダウンロードして、使用するプロジェクトのルートに展開します。

プロジェクトの例
プロジェクトの例

つづいて、tiapp.xmlにモジュール使用の設定をします。

GitHubのレポジトリのドキュメントではcom.pixate.frameworkと書いていますが、これはtypoなので次のようにcom.pixate.freestyleとするのが正解です。(旧Pixateのモジュールの記述がそのまま流れているためですね)

<modules>
    <module platform="iphone">com.pixate.freestyle</module>
</modules>

また同じくtiapp.xmlのinfo.plistに関する記述に以下の内容を追加します。

<ios>
    <plist>
        <dict>
            <key>PXTitanium</key>
            <true/>
        </dict>
    </plist>
</ios>

これを準備して、app.jsに次のような記述をしましょう。

var win = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

var label = Titanium.UI.createLabel({
    text: 'ラベル', top: '40%',width:'50%'
});

var button = Titanium.UI.createButton({
    title:'ボタン', top: '55%',width:'50%'
});

win.add(label);
win.add(button);

win.open();

実行するとこんな感じです。

実行例1
実行例1

次にResourcesフォルダにdefault.cssを追加し、次のように記述してみましょう。

label {
    color            : red;
}
button {
    color            : #446620;
    background-color : linear-gradient(#87c44a, #b4da77);
    border-width     : 1px;
    border-color     : #84a254;
    border-radius    : 10px;
    font-size        : 15px;
    font-weight      : bold;
}

実行結果は次のようになります。(labelの表示位置は微妙な感じですね)

実行例
実行例

このようにグローバルに設定するだけではなく、CSSなのでID指定やクラス指定ができます。

var win = Titanium.UI.createWindow({  
    backgroundColor:'#fff',
    styleId :'myView'         // ID指定
});

var label = Titanium.UI.createLabel({
    text: 'ラベル', top: '40%',width:'50%',
    styleCSS: 'color: green'  // インライン指定
});

var button = Titanium.UI.createButton({
    title:'ボタン', top: '55%',width:'50%',
    styleClass:'button2'      // クラス指定
});

win.add(label);
win.add(button);

win.open();
label {
    color            : red;
}
button {
    color            : #446620;
    background-color : linear-gradient(#87c44a, #b4da77);
    border-width     : 1px;
    border-color     : #84a254;
    border-radius    : 10px;
    font-size        : 15px;
    font-weight      : bold;
}

#myView {
    background-color: linear-gradient(#000000, #f2f4f6);
}

.button2{
    font-size        : 30px;
}

.button2:highlighted {
  background-color: linear-gradient(blue,yellow);
  border-radius: 20;
  color: red;
}

これを実行すると次のようになります。(:highlightedについてはクリック時の挙動になります)

実行例3
実行例3

ちなみにAlloyにおいてもstyleIdstyleClassstyleCSS属性を指定することで有効になります。

<Alloy>
    <Window class="container">
        <Label id="label" styleId="myLabel" onClick="doClick">Hello, World</Label>
        <Button id="button" styleCSS='background-color: blue; color: white;' onClick="doClick">Click Me</Button>
    </Window>
</Alloy>

通常のTitaniumの状態に比べるとやはり若干レスポンスが悪くなりますが、これで表現可能な範囲を把握しておけばWeb表現に近しい開発者にはデザインのイメージがしやすくなるでしょう。

Tiweeklyclips

記事をリクエストする

関連記事

コメント