Ti Weekly Clips 2013年総集編(後編その1)
Titanium™ Advent Calendar 2013、22日目を担当する@donayamaです。
先週に続いて、Ti Weekly Clipsの総集編をお送りしたいと思います。というか、編集もままなっていない状態ですが、まずはTips & Topicsまとめを…。GitHub Watchまとめは昼ぐらいにお送りします。(追記)後編その2はこちら
Tips&Topics 2013年カテゴリ別まとめ
Alloy
Alloy // Speaker Deck
Fokke ZandbergenさんによるAlloyの概要説明スライドClearly Innovative » Blog Archive » Titanium Quickie: A Simple Integration of Alloy and Wordpress JSON Plugin
WordPressのREST APIを利用したAlloyのREST連携事例紹介Clearly Innovative » Blog Archive » Titanium Quickie: A Simple Integration of Alloy and Kinvey
AlloyからKinveyというBaaSサービスを利用するための解説YY Digital | Testing Alloy with Jasmine and TiShadow
JasmineとTiShadowを使ってAlloyアプリのテストを行おうというネタTutorial: Titanium using PHP and Alloy to Connect a Remote Database
DBとの対話とJSONで結果を返すバックエンドはPHPで記述して、あとはAlloyでフロントを書くというチュートリアルSkypanther Studios – Breakpoint debugging an Alloy app
TiStudioでAlloyなアプリのデバッグするとき、ブレイクポイントをしかける手順についてalloy.jmk for Alloy use with TiShadow
AlloyでTiShadowするときのjmkファイル設定例Alloy Views » Community Questions & Answers » Appcelerator Developer Center
Alloyでサイドメニューを実現するGetting FontAwesome icons as Titanium Window BackButtonTitle
Alloyで「戻る」ボタンにFontAwesomeアイコンを使うAlloy - SplitWindow with navgroups in master and detail
AlloyでSplitWindowを用いるAndroid Holo Actionbar Alloy Sample Based on ideas by https://github.com/hoyo/ActionBarSample/tree/master/app
AndroidのActionbarをAlloyで使うAlloy constants and helpers for non-Alloy Titanium projects.
Alloyと非Alloyの両対応をするCommonJSモジュールを作るHacktastic Portrait to Landscape TSS swticher for TiAlloy
デバイス方向を変えた際に縦横のTSSを切り替えるActionBarの設定変更をするとメニューが表示されなくなる #Titanium #Android - Qiita [キータ]
Alloy上でActionBarをいじってると、ちょっとした罠にはまるようですBind existing model | Fokke Zandbergen
Alloyで既存のModelをバインドするDutch Mobile Conference 2013 | Fokke Zandbergen
Dutch Mobile Conference 2013というイベントでのAlloyの紹介Clearly Innovative » Blog Archive » Alloy ListView & Facebook Friends
AlloyでListViewを使うExtending the animation.js Alloy builtins
Alloy組み込みアニメーションにslideInエフェクトを追加する例Simple build configuration file for Titanium Mobile Alloy to remove unimportant log calls if build type is production
alloy.jmkであまり重要でないログ出力を抑制する方法Clearly Innovative » Blog Archive » Quick Way to work with Models and Alloy in Appcelerator Titanium
Alloy Model入門Styleable Alloy widgets | Fokke Zandbergen
Widgetをtssファイルで外部から表現コントロールするYY Digital | A Case for Jade with Alloy
JadeつかってAlloyのViewを記述する。2013年のTiIconicFont + Alloy | Selfkleptomaniac
イマドキのTiIconicFontの使用方法について。Using Alloy’s new BuildLog | Fokke Zandbergen
AlloyのBuildLogというコマンドをフックするGenerate non-retina images | Fokke Zandbergen
Alloyのビルド時フックにRetinaリソースから非Retinaなものを単純変換をかけるGenerate your strings.xml | Fokke Zandbergen
Alloy 1.2から搭載されたCLIオプションextra-i18nの解説Mobile App Tutorial: Backbone Models Database with Titanium Alloy
AlloyでBackboneを介してDB操作するチュートリアルHide titlebar on Android launch/splash screen
AndroidのAlloyアプリ起動時において、タイトルバーを表示しないようにするtipsTitanium CLI × Alloy × CoffeeScript × Jade で作るiPhoneアプリのお話 | メモ帳代わりのブログ
SAP for Mobile: Appcelerator - Titanium Alloy & Gateway | SCN
SAPのサイトに掲載されているAlloyのチュートリアルResizing Elements for Different Screen Sizes in Appcelerator Titanium Alloy | Kinetic Media
ViewのXMLから生成されたAlloyのUIを生成後にリサイズ・移動するというtipsCross-platform UI | Fokke Zandbergen
AlloyでクロスプラットフォームUIなViewを構成するためにラッパーモジュールをかませるIntroducing ti-i18n | Fokke Zandbergen
Alloyで今後非推奨になるextract-i18n
を代替するAlloy 1.3.0: pre:load | Fokke Zandbergen
Alloy 1.3.0から追加されたフックイベントpre:load
を使えば、これまで(pre:compile
イベントのとき)画像リソースの自動的なリサイズ処理をappとresourcesの両方にしないと正しい挙動にならなかったのに対して、resoucesへのコピー前にpre:load
が動くのでappだけに処置をすればよくなって便利!ということですGoogle Maps SDK for iOS を Titanium Mobile の Alloy で使う - Qiita [キータ]
AlloyでView系のネイティブモジュールを使う例ChatWork API を使って情報収集アプリを作ろう!(アプリ解説編) | チャットワーククリエーターズブログ
ChatWork APIを活用したAlloyアプリ解説TiMedibaAdのAlloy向けサンプル – 某通信会社営業マンの開発日誌
Alloyで表示系ネイティブモジュールを使うときにどうするのかという事例
UI
creapps / TiModalWindowAnimation / source / — Bitbucket
ちょっと変わったModalWindow表示時のアニメーション演出方法Titanium で TableViewRow 長押しイベント - imthinker.net | Titanium Mobile をメインにふらふらと
longpressイベントをtouchXXXXイベントの組み合わせで実現するComplex Navigation in Titanium, Part 2 | Sunfish Empire LLC: Mobile Solution Provider
iOS/Androidで互換共用できるNavigationGroup的挙動を実現するSkypanther Studios – Titanium graphs with a WebView
WebView上にグラフを描画Simple Layout Tricks with Titanium Appcelerator
verticalレイアウトとTi.UI.FILL、Ti.UI.SIZEを活用してレイアウトをするチュートリアルCommonJS Module for Titanium that allows you to create gradient filled Labels (note: iOS only)
グラデーション背景色を設定したLabelを実現するCommonJSモジュール例。iOS専用。アプリのUIデザインはズルいデザインテクニックを活用しよう! - TitaniumMobile勉強記
いわゆるズルいデザインをTiのUI配置に使おうというものExtending ScrollableView with focus and blur listeners | Baboon Media Blog
Quick Tip: Cross-platform TableView Lazy Loading « Appcelerator Developer Center
TableViewで遅延ロードを実現するためのtipsアイコンやボタンをタッチした時にTableViewが奥に引っ込むようにアニメーションする方法 - TitaniumMobile勉強記
Customising the ScrollableView in Titanium Oodles Technologies
ScrollableViewに前後ページめくりの矢印を追加するコード例TitaniumでTabGroupを使ってる状態でナビボタンの背景色を変更する方法 - TitaniumMobile勉強記
FlatUIっぽくナビゲーションバーを描画するための方法Interactive Charts in Appcelerator Titanium « Appcelerator Developer Center
HighCharts.jsを利用したチャート表示TableView Header Zoom | benCoding.com
TableViewのヘッダ部をスクロールしたときに引き延ばし表示を行うTitanium Mobile で iOS 7 専用のスプラッシュ画像を設置する - imthinker::net
tiapp.xml
にinfo.plist
に関する記述を行うことでiOS 7のスプラッシュスクリーンに対応するという手順の解説ListViewに配置した特定のラベルの値を更新するやり方 - TitaniumMobile勉強記
ListViewの特定Rowの値を更新するためにはupdateItemAt
を使うTip: keyboardToolbars and iOS 7 | TiDev
iOS7でtextfield.keyboardToolbarColor
をした場合にSystemButtonの色が微妙になってしまう問題(tintColorが設定されていないため)があり、そのための対策としてToolbarオブジェクトを(barColorとtintColorのそれぞれを指定し)キチンと作ってからTextFieldに割り当てる方法が書かれています。Titaniumで実施したiOS7対応 – Sawalog
既存アプリのiOS7対応に向けた適用箇所まとめSlide Menus – iOS & Android | TiDev
スライドメニューを実現するためのモジュール類あれこれ
JavaScript
Using the Luhn Algorithm in Titanium « benCoding.com 別にTiに限った話ではないのですが、CommonJSモジュール化されたMOD-10アルゴリズムによるチェックサム演算の方法をまとめた記事。
Titanium 3.0 と ECMA-262-5 - imthinker::net
Titanium 3.0になり、いろいろJavaScriptの処理系としての実装も強化されているようですGenerating GUIDs in JavaScript | benCoding.com
JavaScriptオンリーでGUIDを生成する。used promises with Appcelerator Titanium @see http://documentup.com/kriskowal/q/
Ti上で非同期処理を同期的に実現するためのPromiseの使い方
iOS
TitaniumでiOSアプリを作るための準備 | Developers.IO
いまどきのTiにおけるHello WorldQuick example of registering a URLScheme in a Titanium app using the TiApp.xml without info.plist file. Just add the following into your TiApp.xml (I put it under the tag. Works on Android and iOS.
TiApp.xmlだけでURLスキーム実現する
Android
Overview (Titanium Android Java API)
TitaniumのJavaネイティブモジュールを触るときに書かせない内部APIのJavaDocCreating a Foursquare-style ActionBar on Android using Appcelerator Titanium | Make It So!
4sqっぽいActionBarを作る方法Titanium + BlueStacksでAndroid開発 | Selfkleptomaniac
PC上でAndroidアプリを実行できるBlueStacksを利用してTiでビルドしたアプリを実行してみる
Titanium + VMware(Android x86)でAndroidアプリ開発 | Selfkleptomaniac
Android x86でアプリ実行を試みるというConfiguring Appcelerator Titanium to Use Intel x86 Images « Appcelerator Developer Center
Androidのx86エミュレータを使用するQuick Tip: Increase the storage size of your Android Emulator « Appcelerator Developer Center
AVDのストレージ割当を変更するisis re-direct: Test Titanium Android App on emulator using Intel x86 Atom System Image
x86エミュレータを使ったデバッグなどでのハマりどころについての手順と解説@rafaelks: How to use custom Holo Theme in Android with Titanium Mobile
Android上でHoloテーマを使うためのtipsWhen doing console.log on Android, get the output on the Terminal.
Androidでのデバッグ中ログをterminalに吐き出すためのadbコマンドのパラメータの振り方&パイプの掛け方isis re-direct: Titanium SDK をMIPS 対応にする(研究中)
MIPSなAndroid端末上でTitanumアプリを動かすためのあれこれCustom Android Action Bar and Holo Themes in Titanium - adampaxton.com
ActionBarのホロテーマの実現方法についてのまとめAndroid System Info Module | Appcelerator Titanium Tutorial
Andoridのシステム情報を取得するモジュールがMarketplaceで扱われているようですTwitter / d_o_locker: JNIを使わないrhinoでは関係なかった話だが、v8では...
こんな罠がv8ランタイムでは存在するらしいですGenymotion (旧 AndroVM) を Titanium Mobile で使ってみる - Qiita [キータ]
TiでAndroid開発を進めるうえで鬼門のひとつがエミュレータの速度問題。x86VMで動かす〜ネタはこれまでいろいろありましたが、こんどはGenymotionというツールを使うパターンです。快適そうですね![Titanium]APKのサイズを小さくする方法 | UCHIDAK.NET
ビルド時にいろんなものをつけてくるapkのダイエット方法ムーンシャイン・プロジェクト開発ブログ » iPhone向けに作られたTitaniumアプリのAndroid対応で気をつけること
Pull To Refresh for Android | Fokke Zandbergen
AndroidでPull to Refreshを行うデモInspecting layouts on Android | Fokke Zandbergen
iOSでいうところのRevealに相当することをAndroid+Titaniumでやるにはという解説TitaniumのClassicな開発スタイルでActionBarの設定方法に意外とハマった - TitaniumMobile勉強記
API階層が初期からのものと中盤以降に発生したもののアンマッチ問題はイライラしますよねA cross platform navigation group « Appcelerator Developer Center
NavigationGroupっぽい動きをAndroidでも実現する[俺メモ]新しいTitanium SDK がでたらやること - Qiita [キータ]
Android開発時のバッドノウハウ+Genymotion対応を潤滑にするためのSDKパッチを当てるという手順Using Android’s ActionBar « Appcelerator Developer Center
AndroidのActionBarに関するチュートリアルAppcelerator Titanium Tutorial: ACS Push Notification using GCM
Google Cloud Messaging for Androidを用いてACSのプッシュ通知Android Module Development - Part 3 | Appcelerator Titanium Tutorial
Androidのネイティブモジュールを開発するUsing Genymotion’s Android emulator with Titanium | Fokke Zandbergen
継続ビルドからTitanium 3.2をインストールして、GenyMotionでのAndroid開発をしようという記事。TitaniumでAndroid向けのMapModule動作させるのにとても苦労したのでその振り返り - TitaniumMobile勉強記
TitaniumでのAndroid開発のハマりどころとその対策について、分かりやすくまとめられていますAndroid Module Development - Part 5 | Appcelerator Titanium Tutorial
Androidでのネイティブモジュールの作り方連載の第5回目Styling Action bar in Android Titanium | Vizteck Solutions
Android Action Bar Style Generatorを用いてAndroidのActionBarのスタイル変更を行う手順説明Skypanther® Studios – Custom app names in Android projects
AndroidのManifest定義でtiapp.xmlの記述とは異なる任意のアプリケーション名を設定する方法。Using GCM for Android Push Notifications with ACS | TiDev
ACSでGCMプッシュ通知を行うためのチュートリアル
テスト
Titanium+jasmineでの非同期通信のテストの書き方が意外と難しかったのでハマりどころと対処方法についてまとめてみました - TitaniumMobile勉強記
jasmineでの非同期通信テストについての試行錯誤について順を追ってご説明されています。なぜハマるのか、どう解決したのかというのが系統だっているため、非常によく分かりました。Ti.Network.HTTPClientを少し機能拡張しながらjasmineの使い方について学ぶ-part1 - TitaniumMobile勉強記
Ti.Network.HTTPClientを少し機能拡張しながらjasmineの使い方について学ぶ-part2 - TitaniumMobile勉強記
tijasmine (jasmine BDD for Appcelerator Titanium) turns 1.0.0
Unit testing in Titanium Appcelerator and Alloy: Testing commonjs modules | Coding pie
Unit testing in Titanium Appcelerator and Alloy: Testing models | Coding pie
Unit testing in Titanium Appcelerator and Alloy: Testing controllers | Coding pie
モジュール
k0sukey.tumblr (RevealをTitaniumでも)
iOSのネイティブUIを動的に状況をみたりプロパティ変更が出来るRevealをTitaniumでも動作させるためのチュートリアルk0sukey.tumblr (TiAppirater を i18n するよ!)
評価ページへの案内をするTiAppiraterが通常のTiの国際化の方法だとうまいこと動かないようなので、@k0sukeyさんがパッチ版をフォークされたようです。Customize alerts on iOS apps in Titanium using CustomAlert Module | Vizteck Solutions
カスタム化できるアラート表示を行えるiOS向けのネイティブモジュールがmarketplaceで提供されているようで、その解説記事。
本体ハック
Titanium iOS adding isFile and isDirectory to the SDK « benCoding.com
Ti本体をハックしてパス名がファイル・ディレクトリに該当するかどうかの判断をするメソッドを追加Adds
keyboardType
andhintText
to PLAIN_TEXT_INPUT AlertDialog
Ti本体をハックしてAlertDialogの入力欄にkeyboardTypeとhintTextを追加
環境構築/開発環境/ツール
Creating Keyboard Shortcuts for Switching Tabs in Titanium Studio « benCoding.com
タブ切り替えのショートカットキーを割り当てようというネタTitanium CLIで実機転送するコマンド - kaz_konno's blog: walkthisway
コマンドラインから実機転送するためのパラメータ指定方法Optimizing Titanium Studio and Sublime Text 2 layout for Alloy | With Titanium
3ペインの画面構成にしてAlloy開発に最適化しようというTi StudioとSublimeの画面例の紹介Tutorial for Linux | How-to Install Appcelerator Titanium Studio on Ubuntu 13.10 Saucy 64bit Step-by-Step
UbuntuでTitanium Studioを動作させるためのインストール手順まとめTutorial for Linux | How-to Install Appcelerator Titanium Studio on Linux Mint 13/14/15/16 64bit Easy Guide
LinuxでTitanium Studioを動かすためのチュートリアルTitanium-Pixate Module
PixateをTitaniumから使うためのモジュールについての解説YY Digital | Introducing TiShadow Appify
TiShadowを組み込んだ形で単一アプリとして実機テストできるようにTitanium build plugins, hooks, and commands in SDK 3.x.x | Apperson Labs
Tiのプロジェクトビルド時にフックを掛けかたについて。Titanium - Sublime Text 2 で TiShadow を command+B で run できるようにする - Qiita [キータ]
Titanium Workflow: Maximize your productivity | UNBOUNDED.IO
CLI w/ zsh、TiShadow、Ti Inspector、b2i、Sublime or WebStormという組み合わせで開発する。TaffyDB – A lightweight JSON-based database for your app « Appcelerator Developer Center
内蔵型のJSONデータベースであるTaffyDBの使い方Appcelerator Users: You Can Now Easily Add New Relic to Your Titanium Studio Apps! - New Relic blog
サーバやアプリケーションのパフォーマンス統計サービスNew RelicをTitaniumなアプリ(iOS/Android)で利用するためのチュートリアルTitanium Mobile を実務的に使うための開発環境の整え方(2) - 実務で使えるTitaniumテクニック - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
Jasmineによるテスティング、TiShadowを用いた迅速な実機デプロイEnhance your Titanium workflow by using Git
Gitを活用したTitanium開発ワークフローに関する解説記事TiShadow for Titanium Development – Part I | Oliva Labs Blog、Part 2、Part 3
TiShadowでのTitanium開発チュートリアル記事OS X Mavericks と Titanium Studio - imthinker::net
OS Xの最新版MavericksでのTitanium Studioの挙動についてのまとめ。Apple版のJavaSDKを入れないとダメだそうで。既存のEclipseにTitanium Studioをインストールする方法(for windows) | クオリア企画開発 iPhoneアプリやWEBシステム
日本語化するとQ&Aとかで地味に会話が通じなかったりするんで、その点さえ自己解決できるのならTiShadow 2.3.0 - Alloy now a first class citizen | TiDev
TiShadow 2.3.0がリリース。これまでalloyについてはビルド後のリソースを使う形でしたが、tishadowコマンド一発でalloyのビルドも含めてできるように。
ACS/BaaS
Using ACS as a back-end for your App « Appcelerator Developer Center
ACSのチュートリアル記事久しぶりにTitaniumのワークショップをやりました - TitaniumMobile勉強記
ワークショップ「JavaScriptでスマフォアプリ開発を学ぼう」基礎編:ACSと連携させた位置情報処理という資料も公開されています。
Node.ACS
Consuming Web Services « Appcelerator Developer Center
Node.ACSによる独自のWebサービス実装を行うためのチュートリアル連載。Building a custom front-end to ACS using Node.ACS [Part 1] « Appcelerator Developer Center
Building a custom front-end to ACS using Node.ACS [Part 2] « Appcelerator Developer Center
Appcelerator Node.ACS Financial Stock Watch List « Appcelerator Developer Center
TiとNode.ACSを用いた株価表示ツールのチュートリアルBuilding websites with Node.ACS // Speaker Deck
AppceleratorのPaaSであるNode.ACSでWebサイトを作ろうというスライドQuick tip: Auto restarting your Node.ACS apps
Nodemonを用いて、Node.ACS製のアプリを自動再起動させるためのtipsNode.ACS SOAP Web Service Integration
Node.ACSでSOAPなWebサービスとのやりとりを実現するというチュートリアル記事
その他
Debug messages improved « Forge Titanium
Printデバッグ用のモジュールとその使い方について。Inspecting SQLite databases on Android and iOS - Tony Lukasavage
シミュレータ、実機とまたがってテストする際に中身を検証しづらいSQLiteデータベースについて、基本からデバイスプラットフォーム別の解説をされています。Embedding a YouTube video in Titanium
TiアプリにYouTubeの動画を埋め込む方法っていっても動画部分のurlをWebViewにたたきこむという、ひたすらに直球な方法ですね。Using Custom Titanium Modules for Performance
パフォーマンスを求めるためにボトルネックの箇所にネイティブモジュールをあてこもうというネタ。Tiの良さとのトレードオフになるので、その辺のコントロールは難しいですね…。TiQiita ver1.1をリリースしました。 - TitaniumMobile勉強記
ImageViewのリモート画像取得処理でハマるというパターン。これは切り分けが難しい。Callbacks in Appcelerator Titanium modules - The Disco Blog
ネイティブモジュールでコールバック関数を用意するCodebird for Appcelerator Titanium. Using the Twitter API 1.1
TiでTwitter API 1.1叩くにはどうするの?というサンプルTitanium SDK 3.1.0 対応で色々大変だったというメモ | Hiro Fukami's Blog
(平時は特段問題なくても)躓くと大変で、しかも連発というTiの罠…。アップデート情報もReadmeには記載がなくて、JIRAを見ないと書いてないっていうケースもありますしね。こういうアウトプットして頂けるのは大変助かります。Titanium3.x で Titanium Cloud Services+Facebookアカウントの連携機能が思いのほか難しかったのでまとめてみた - TitaniumMobile勉強記
Alfred と Dash の連携で Titanium API ドキュメントを見よう / Socketbase blog
[Titanium]TabGroupの外装を色々触ってみる | UCHIDAK.NET
Ti 3.0以降で標準サポートされたTabGroupの装飾プロパティ群の解説。Debugging Titanium Apps with Chrome DevTools - Titanium Ninja
Chromeインスペクタ機能を使ってTiのデバッグが出来てしまうというツールTiInspectorの解説Automata: Conway's "Game of Life" using Appcelerator Titanium - Tony Lukasavage
Tiつかってライフゲームを実行する。URL schemes for iOS and Android (1/2) | Fokke Zandbergen
アプリ間連携などで必要になるアプリ独自のスキーマを設定するための方法URL schemes for iOS and Android (2/2) | Fokke Zandbergen
URLスキームを使ったアプリ起動のtipsTrademark Policy | Appcelerator Inc.
ロゴも含めた各種商標についての使用ガイドラインCreating Titanium Mobile Modules Using CommonJS
Picasa Web Albumにアクセスするためのライブラリを題材にしたチュートリアルベースのCommonJSモジュールの書き方Smarter image paths | Fokke Zandbergen
画像リソースのパスごとの位置づけと+αのtipsSetting up Urban Airship | Fokke Zandbergen
Urban Airshipを用いたプッシュ通知Integrating Facebook SSO On The iPhone Using Titanium | Make It So!
AddOn化されたFacebook認証をiOSで用いるチュートリアルChariTi – an open-source mobile framework for charities
チャリティ目的にしたアプリをTitanium開発するためのフレームワークChariTiの紹介Share Our Ideas – Titanium Locale Module for Both (Android and iOS)
動的にlocaleを変更することができるフリーのネイティブモジュールがiOS/Android向けにmarketplaceで提供されています。Titanium and Estimotes :: Getting Started | TiDev
iBeaconな装置であるところのEstimotesをTiから使うためのチュートリアル。Titanium and Estimotes :: Proximity | TiDevという記事も。