feed.xml

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Blog Name</title>
  <subtitle>Blog subtitle</subtitle>
  <id>http://blog.url.com/</id>
  <link href="http://blog.url.com/"/>
  <link href="http://blog.url.com/feed.xml" rel="self"/>
  <updated>2013-12-12T23:34:00Z</updated>
  <author>
    <name>Blog Author</name>
  </author>
  <entry>
    <title>Android で意図された順序の JSON を Ti.Netwrok.HTTPClient で送信してみよう</title>
    <link rel="alternate" href="/blog/2013/12/13/titaniumadventcalendar2013.html"/>
    <id>/blog/2013/12/13/titaniumadventcalendar2013.html</id>
    <published>2013-12-12T23:34:00Z</published>
    <updated>2013-12-12T23:34:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;こちらは &lt;a href="http://www.adventar.org/calendars/78"&gt;Titanium™ Advent Calendar 2013&lt;/a&gt; 用の記事になります。
余談ですが、企画された &lt;a href="https://twitter.com/astronaughts"&gt;@astronaughts&lt;/a&gt; さんと、最近 Facebook で友達になりました。
やったね！&lt;/p&gt;

&lt;h3 id="section"&gt;はじめに&lt;/h3&gt;
&lt;p&gt;ぼくもちょこっとポエムを書かせてもらうと、今年は自分にとって大きな大きな 1 年でした。
JavaScript で iOS / Android アプリが書けちゃうなんて！と、ゆるい気持ちで使い始めたのですが、なんと会社まで立ち上げて Titanium 三昧でございます（最近はモジュールばかり書いていますけど）。
人生どうなるかわかりませんね。&lt;/p&gt;

&lt;h3 id="section-1"&gt;それでは本題に&lt;/h3&gt;

&lt;p&gt;外部ウェブサービス API へ POST する際、JSON の中身が意図されている順序で送信しないと受け付けられない場合があります。
AWS S3 へ直接ファイルをアップロードする場合等がそれですね。&lt;/p&gt;

&lt;p&gt;iOS の場合は &lt;code&gt;Ti.Network.HTTPClient&lt;/code&gt; の &lt;code&gt;send()&lt;/code&gt; メソッドで意図されている順序の JSON を渡せばその順序で送信されますが、Android の場合そうはいきません。
&lt;a href="https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/network/src/java/ti/modules/titanium/network/TiHTTPClient.java#L1095"&gt;Titanium&lt;/a&gt; のソースコードを見てみると、Android の &lt;code&gt;send()&lt;/code&gt; メソッドは &lt;code&gt;HashMap&lt;/code&gt; で受け取っているため JSON の順序が保持されていません。
&lt;code&gt;LinkedHashMap&lt;/code&gt; であれば保持されるそうで、この問題は起きないのですがいつかこちらに切り替わるのでしょうか（期待できません）。&lt;/p&gt;

&lt;p&gt;と、言うわけで、意図した通りの順序の JSON を送信する方法を探ってみましょう。
ここでは S3 へ直接ファイルをアップロードする方法を例にあげます。&lt;/p&gt;

&lt;h4 id="tinetworkhttpclient--send--json-"&gt;まずはいつも通り &lt;code&gt;Ti.Network.HTTPClient&lt;/code&gt; で &lt;code&gt;send()&lt;/code&gt; する際に JSON を渡してしてみます&lt;/h4&gt;
&lt;p&gt;file はカメラで撮影した写真のデータ（&lt;code&gt;Ti.Blob&lt;/code&gt;）が格納されており、その他、各変数は S3 へアップロードするために必要な情報となります。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var xhr = Ti.Netwrok.createHTTPClient({
	onload: function(){},
	onerror: function(){}
});
xhr.open(url, 'POST');
xhr.send({
	"key": key,
	"AWSAccessKeyId": AWSAccessKeyId,
	"acl": acl,
	"Content-Disposition": ContentDisposition,
	"Content-Type": ContentType,
	"success_action_redirect": successActionRedirect,
	"x-amz-server-side-encryption": xAmzServerSideEncryption,
	"policy": policy,
	"signature": signature,
	"file": file
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;iOS はこれで問題なくアップロードできます。
key から始まって file まで &lt;code&gt;send()&lt;/code&gt;メソッドへ渡した際、JSON の順序が保持されているからです。
Android の場合は S3 から順序が正しくないとエラーが返却されてきます。
悲しいですね。&lt;/p&gt;

&lt;p&gt;&lt;a href="http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Network.HTTPClient-method-send"&gt;リファレンス&lt;/a&gt;を見てみましょう。
&lt;code&gt;send()&lt;/code&gt; メソッドは &lt;code&gt;Object&lt;/code&gt; / &lt;code&gt;String&lt;/code&gt; / &lt;code&gt;Ti.Filesystem.File&lt;/code&gt; / &lt;code&gt;Ti.Blob&lt;/code&gt; を指定することができます。
上記の例では JSON、つまり、&lt;code&gt;Object&lt;/code&gt; ですね。&lt;/p&gt;

&lt;h4 id="android--http-"&gt;Android で順序を保持したデータを渡すには HTTP リクエストの中身を自分で記述していきます&lt;/h4&gt;

&lt;p&gt;早速 JSON から離れますが &lt;code&gt;String&lt;/code&gt; で送信してみます。&lt;/p&gt;

&lt;p&gt;送信データを自前で記述する場合はいくつかのお作法があります。
ファイルを送信するのでリクエストヘッダは &lt;code&gt;Content-Type: multipart/form-data&lt;/code&gt; となります（JSON で渡した場合は &lt;code&gt;Ti.Blob&lt;/code&gt; が入っていると、このヘッダを勝手につけてくれます）。
さらに送信する内容一つずつに自前で区切りのサインを付けていかないとなりません。
下記の例では &lt;code&gt;boundary&lt;/code&gt; という変数で用意しております。
こちらは任意の文字列となりますが、頭に必ず &lt;code&gt;--&lt;/code&gt; を付けてください。
例ではタイムスタンプを &lt;code&gt;Ti.Utils.md5HexDigest()&lt;/code&gt; しています。
また、一番最後の区切りには末尾にも &lt;code&gt;--&lt;/code&gt; が必要となります。
改行コード（&lt;code&gt;\r\n&lt;/code&gt;）も自分で記述しないといけません。
とても面倒ですね…。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;// 区切り文字
var boundary = Ti.Utils.md5HexDigest('' + Date.now());

// 写真を Ti.Stream で開いて Ti.Buffer 化
var stream = Ti.Stream.createStream({
	mode : Ti.Stream.MODE_READ,
	source: file
});
var buffer = Ti.Stream.readAll(stream);
stream.close();

// 送信データを文字列で組み立てる
var data = '--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="key"\r\n\r\n' +
	key + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="AWSAccessKeyId"\r\n\r\n' +
	AWSAccessKeyId + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="acl"\r\n\r\n' +
	acl + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="Content-Disposition"\r\n\r\n' +
	ContentDisposition + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="Content-Type"\r\n\r\n' +
	ContentType + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="success_action_redirect"\r\n\r\n' +
	successActionRedirect + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="x-amz-server-side-encryption"\r\n\r\n' +
	xAmzServerSideEncryption + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="policy"\r\n\r\n' +
	policy + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="signature"\r\n\r\n' +
	signature + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="file"; filename="image.jpg"\r\n' +
	'Content-Type: binary/octet-stream\r\n\r\n' +
	buffer.toString() + '\r\n' + // Ti.Buffer を文字列化
	'--' + boundary + '--\r\n';

// 送信
var xhr = Ti.Netwrok.createHTTPClient({
	onload: function(){},
	onerror: function(){}
});
xhr.open(url, 'POST');
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.send(data);
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;写真データのファイルを &lt;code&gt;Ti.Stream&lt;/code&gt; で開いて、&lt;code&gt;readAll()&lt;/code&gt; で全て読み込んで &lt;code&gt;Ti.Buffer&lt;/code&gt; にし、&lt;code&gt;toString()&lt;/code&gt; で文字列化しています。
これでどうでしょうか。&lt;/p&gt;

&lt;p&gt;アップロードは成功しますが、画像ファイルの &lt;code&gt;Ti.Buffer&lt;/code&gt; を &lt;code&gt;toString()&lt;/code&gt; するとゴミが付くらしく、ファイルが壊れてしまいます（自前のサーバにアップロードしたファイルをバイナリエディタで開いて正常な画像と比較して確認しました）。
これでは意味がありませんね。&lt;/p&gt;

&lt;p&gt;メールをプログラムから送信したことがある方は、似たような記述をしますのでピンときたかと思います。
&lt;code&gt;Ti.Buffer&lt;/code&gt; が &lt;code&gt;toString()&lt;/code&gt; すると壊れてしまうのなら、&lt;code&gt;Ti.Blob&lt;/code&gt; なファイルを &lt;code&gt;Ti.Utils.base64encode().toString()&lt;/code&gt; し、&lt;code&gt;Content-Transfer-Encoding: base64&lt;/code&gt; を付けて Base64 で送れば良いじゃない、と。
こんな感じですかね。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;	'Content-Disposition: form-data; name="file"; filename="image.jpg"\r\n' +
	'Content-Type: binary/octet-stream\r\n' +
	'Content-Transfer-Encoding: base64\r\n\r\n' +
	Ti.Utils.base64encode(file).toString() + '\r\n' +
	'--' + boundary + '--\r\n';
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;…そもそも &lt;code&gt;Content-Transfer-Encoding&lt;/code&gt; は&lt;a href="https://forums.aws.amazon.com/thread.jspa?threadID=108144"&gt;メール用&lt;/a&gt;なんですね。
もちろん S3 はこのヘッダを受け付けてくれませんので、テキストファイルとしてアップロードされてしまいます。&lt;/p&gt;

&lt;p&gt;それではどうするのか。&lt;/p&gt;

&lt;h4 id="send--tiblob-"&gt;&lt;code&gt;send()&lt;/code&gt; メソッドに &lt;code&gt;Ti.Blob&lt;/code&gt; として送信データを渡します&lt;/h4&gt;

&lt;pre&gt;&lt;code&gt;// 区切り文字
var boundary = Ti.Utils.md5HexDigest('' + Date.now());

// 送信データを Ti.Buffer で組み立てる
data = Ti.createBuffer({
	value: '--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="key"\r\n\r\n' +
	key + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="AWSAccessKeyId"\r\n\r\n' +
	AWSAccessKeyId + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="acl"\r\n\r\n' +
	acl + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="Content-Disposition"\r\n\r\n' +
	ContentDisposition + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="Content-Type"\r\n\r\n' +
	ContentType + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="success_action_redirect"\r\n\r\n' +
	successActionRedirect + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="x-amz-server-side-encryption"\r\n\r\n' +
	xAmzServerSideEncryption + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="policy"\r\n\r\n' +
	policy + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="signature"\r\n\r\n' +
	signature + '\r\n' +
	'--' + boundary + '\r\n' +
	'Content-Disposition: form-data; name="file"; filename="image.jpg"\r\n' +
	'Content-Type: binary/octet-stream\r\n\r\n'
});

// 写真を Ti.Stream で開いて Ti.Buffer 化し、送信データへ追加
stream = Ti.Stream.createStream({
	mode : Ti.Stream.MODE_READ,
	source: file
});
data.append(Ti.Stream.readAll(stream));
stream.close();

// 最後の区切り文字を追加
data.append(Ti.createBuffer({
	value: '\r\n--' + boundary + '--\r\n'
}));

// 送信
var xhr = Ti.Netwrok.createHTTPClient({
	onload: function(){},
	onerror: function(){}
});
xhr.open(url, 'POST');
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.send(data.toBlob());
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;これでどうでしょう。
見事ファイルも壊れずアップロードすることができました。&lt;/p&gt;

&lt;p&gt;ザックリと何をしているかというと、&lt;code&gt;Ti.Buffer&lt;/code&gt; として送信データを作って、最後に &lt;code&gt;toBlob()&lt;/code&gt; で &lt;code&gt;Ti.Blob&lt;/code&gt; 化して送信しています。
正直、何を書いているのか、わけがわからなくなりますね。&lt;/p&gt;

&lt;h4 id="html-"&gt;最後にHTML のフォームに例えてみましょう&lt;/h4&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;form action="url" method="post" enctype="multipart/form-data"&amp;gt;
	&amp;lt;input type="hidden" name="key" value="key"&amp;gt;
	&amp;lt;input type="hidden" name="AWSAccessKeyId" value="AWSAccessKeyId"&amp;gt;
	&amp;lt;input type="hidden" name="acl" value="acl"&amp;gt;
	&amp;lt;input type="hidden" name="Content-Disposition" value="ContentDisposition"&amp;gt;
	&amp;lt;input type="hidden" name="Content-Type" value="ContentType"&amp;gt;
	&amp;lt;input type="hidden" name="success_action_redirect" value="successActionRedirect"&amp;gt;
	&amp;lt;input type="hidden" name="x-amz-server-side-encryption" value="xAmzServerSideEncryption"&amp;gt;
	&amp;lt;input type="hidden" name="policy" value="policy"&amp;gt;
	&amp;lt;input type="hidden" name="signature" value="signature"&amp;gt;
	&amp;lt;input type="file" name="file"&amp;gt;
	&amp;lt;input type="submit" value="send"&amp;gt;
&amp;lt;/form&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;HTML だととても簡単ですね！&lt;/p&gt;

&lt;h3 id="section-2"&gt;〆&lt;/h3&gt;
&lt;p&gt;少々コードが煩雑になってしまうのであまりオススメできませんが、どうしてもという方はこちらの方法で送信することができます。
ぼくは早く &lt;code&gt;LinkedHashMap&lt;/code&gt; にならないかと、首を長くして待っております（まったく期待できません）。&lt;/p&gt;

&lt;h3 id="section-3"&gt;14日目の方&lt;/h3&gt;
&lt;p&gt;&lt;a href="https://twitter.com/h5y1m141"&gt;@h5y1m141&lt;/a&gt; さんです。
ACS ネタ、楽しみですね！&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Titanium で DKLiveBlur を使おう</title>
    <link rel="alternate" href="/blog/2013/09/02/tidkliveblur.html"/>
    <id>/blog/2013/09/02/tidkliveblur.html</id>
    <published>2013-09-02T08:22:00Z</published>
    <updated>2013-09-02T08:22:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;みなさま、iOS7 対応いかがでしょうか？
ぼくはいま作っている趣味アプリを iOS7 風な見た目にするべくがんばっている最中です。&lt;/p&gt;

&lt;p&gt;さて、今回は &lt;a href="https://github.com/k0sukey/TiDKLiveBlur"&gt;TiDKLiveBlur&lt;/a&gt; のご紹介です。&lt;/p&gt;

&lt;p&gt;&lt;img src="/images/blog/TiDKLiveBlur.png" alt="TiDKLiveView" /&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/kronik/DKLiveBlur"&gt;DKLiveBlur&lt;/a&gt; という、スクロールできるビューの背景画像へ、スクロールさせると動的に曇ったような、スリガラス効果を加えてくれるライブラリを Titanium でも利用できるようにしたモジュールです。
これで iOS7 風なビューを作ることができますね！&lt;/p&gt;

&lt;p&gt;それでは簡単な使い方をご説明します。
このモジュールはソースコード内で require する必要はありません。
tiapp.xml の &amp;lt;module&amp;gt; に記述するだけで Ti.UI.TableView と Ti.UI.ListView にスリガラス効果を提供します。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;modules&amp;gt;
    &amp;lt;module platform="iphone"&amp;gt;be.k0suke.tidkliveblur&amp;lt;/module&amp;gt;
&amp;lt;/modules&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Ti.UI.TableView を例にしてみましょう。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var tableView = Ti.UI.createTableView({
	backgroundBlurImage: '/background.png',
	glassColor: '#fff', // optional, default #fff
	data: [
		{ title: 'row0' },
		{ title: 'row1' },
		{ title: 'row2' },
		{ title: 'row3' },
		{ title: 'row4' },
		{ title: 'row5' },
		{ title: 'row6' },
		{ title: 'row7' },
		{ title: 'row8' },
		{ title: 'row9' }
	]
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Ti.UI.TableView（Ti.UI.ListView）に backgroundBlurImage と glassColor というプロパティが指定できるようになります。
backgroundBlurImage にはスリガラス効果を加えたい背景画像を指定してください（backgroundImage と同じように、リモートの画像を指定することはできません）。
glassColor は色を指定できます。
デフォルトは白ですが、Titanium で指定できるカラーコードならなんでも指定することができますので、色々お試しください。&lt;/p&gt;

&lt;p&gt;一点注意が必要で、ある程度のデータ数がないとスクロールできる縦幅が発生しないので、データ数が少ない場合スリガラス効果が発生しないでスクロールが終了してしまう可能性があります。
Ti.UI.TableView であれば、setContentInsets メソッドで top のマージンをある程度確保してあげれば、良い感じに効果が発生するかと思います（現時点での最新版 SDK3.1.2.GA で Ti.UI.ListView の setContentInsets は残念ながら未実装です）。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;tableView.setContentInsets({
	top: 400,
	right: 0,
	bottom: 0,
	left: 0
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;というわけで、DKLiveBlur を Titanium で使えるようにするモジュールのご紹介でした。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Titanium で ISRefreshControl を使おう</title>
    <link rel="alternate" href="/blog/2013/08/22/tiisrefreshcontrol.html"/>
    <id>/blog/2013/08/22/tiisrefreshcontrol.html</id>
    <published>2013-08-22T07:30:00Z</published>
    <updated>2013-08-22T07:30:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;Titanium で Pull-to-Refresh、イベント処理（scroll / dragend）やフラグ管理が面倒ですよね。
最近だと &lt;a href="https://twitter.com/FokkeZB"&gt;@FokkeZB&lt;/a&gt; さん作の &lt;a href="https://github.com/FokkeZB/nl.fokkezb.pullToRefresh"&gt;nl.fokkezb.pullToRefresh&lt;/a&gt; が Alloy の Widget として使えて、ずいぶん便利になってきています。&lt;/p&gt;

&lt;p&gt;ただ、やっぱり iOS6 から使える、UIRefreshControl が使いたいところです。
びよーんって伸びて無駄に引っ張りたくなっちゃいます。
Titanium でも使いたくて UIRefreshControl したくて&lt;a href="https://github.com/k0sukey/TiExtendView"&gt;モジュール&lt;/a&gt;を書いたりしましたが、iOS6 のみなのがネックでした。&lt;/p&gt;

&lt;p&gt;&lt;img src="/images/blog/TiISRefreshControl.png" alt="TiISRefreshControl" /&gt;&lt;/p&gt;

&lt;p&gt;そこで &lt;a href="https://github.com/ishkawa/ISRefreshControl"&gt;ISRefreshControl&lt;/a&gt; の力を借りてしまおうということです。
これは iOS4 / iOS5 でも UIRefreshControl の様に振る舞ってくれる、素敵なライブラリです。
何としてでも Titanium で使いたいところです。&lt;/p&gt;

&lt;p&gt;と、言うわけで、&lt;a href="https://github.com/k0sukey/TiISRefreshControl"&gt;TiISRefreshControl&lt;/a&gt; を書きました。
それでは簡単な使い方をご説明します。
このモジュールはソースコード内で require する必要はありません。
tiapp.xml の &amp;lt;module&amp;gt; に記述するだけで Ti.UI.TableView と Ti.UI.ListView に Pull-to-Refresh を提供します。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;modules&amp;gt;
    &amp;lt;module platform="iphone"&amp;gt;be.k0suke.tiisrefreshcontrol&amp;lt;/module&amp;gt;
&amp;lt;/modules&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Ti.UI.TableView を例にしてみましょう。以下のコードだけで簡単に Pull-to-Refresh の挙動を実現することができます。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var tableView = Ti.UI.createTableView({
	data: [
		{ title: 'row0' },
		{ title: 'row1' },
		{ title: 'row2' },
		{ title: 'row3' },
		{ title: 'row4' },
		{ title: 'row5' },
		{ title: 'row6' },
		{ title: 'row7' },
		{ title: 'row8' },
		{ title: 'row9' }
	]
});

tableView.addEventListener('refreshstart', function(){
	setTimeout(function(){
		tableView.refreshFinish();
	}, 5000);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;では、実際にデータを取得してからの処理はどうでしょうか。
Alloy のデータバインディングとあわせてご覧ください。&lt;/p&gt;

&lt;h2 id="view"&gt;View&lt;/h2&gt;

&lt;pre&gt;&lt;code&gt;&amp;lt;Window&amp;gt;
	&amp;lt;ListView id="lists" defaultItemTemplate="list"&amp;gt;
		&amp;lt;Templates&amp;gt;
			&amp;lt;ItemTemplate name="list"&amp;gt;
				&amp;lt;Label bindId="name" class="name"/&amp;gt;
			&amp;lt;/ItemTemplate&amp;gt;
		&amp;lt;/Templates&amp;gt;

		&amp;lt;ListSection id="section" dataCollection="lists" dataTransform="doTransform"&amp;gt;
			&amp;lt;ListItem template="list" name:text="{name}"/&amp;gt;
		&amp;lt;/ListSection&amp;gt;
	&amp;lt;/ListView&amp;gt;
&amp;lt;/Window&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id="controller"&gt;Controller&lt;/h2&gt;

&lt;pre&gt;&lt;code&gt;var lists = Alloy.Collections.lists;

function doTransform(model) {
	return model.toJSON();
}

$.lists.addEventListener('refreshstart', function(){
	lists.fetch({
		success: function(){
			$.lists.refreshFinish();
		},
		error: function(){
			$.lists.refreshFinish();
		}
	});
});

$.index.addEventListener('open', function(){
	$.lists.refreshBegin();
});

$.index.open();
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;ウィンドウである $.index を開くと同時に Ti.UI.ListView の refreshBegin メソッドを実行します。
このメソッドは、ListView を引っ張る挙動をコードから実行してくれます。
データの受信が完了したら refreshstart イベントが発火すると lists コレクションのフェッチが実行されます。
データの受信が成功失敗にかかわらずインジケータを消してあげないといけませんので、success / error 両方で refreshFinish メソッドを実行します。&lt;/p&gt;

&lt;p&gt;というわけで、簡単に UIRefreshControl を Titanium で使えるようにするモジュールのご紹介でした。
他にも細かなメソッドやイベントがありますので、詳しくは &lt;a href="https://github.com/k0sukey/TiISRefreshControl"&gt;GitHub の README&lt;/a&gt; をご覧ください。&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Alfred と Dash の連携で Titanium API ドキュメントを見よう</title>
    <link rel="alternate" href="/blog/2013/07/18/titanium-in-alfred-and-dash.html"/>
    <id>/blog/2013/07/18/titanium-in-alfred-and-dash.html</id>
    <published>2013-07-17T23:30:00Z</published>
    <updated>2013-07-17T23:30:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;最近教えていただいて、すごく捗るようになったのでご紹介します。
今までは &lt;a href="http://docs.appcelerator.com/titanium/latest/"&gt;Appcelerator の公式サイト&lt;/a&gt;を読むことが多かったのですが、ネット環境がない場所では見ることさえできなくて困っていました。
Sublime Text 2 でオフラインアクセスできるプラグインを作ったりもしましたが、どうにも見辛い…。&lt;/p&gt;

&lt;p&gt;たまたま参加した &lt;a href="http://talknote.me/vol8/event/"&gt;TalkNote × Frontrend&lt;/a&gt; で、JavaScript のドキュメントは &lt;a href="http://kapeli.com/dash"&gt;Dash&lt;/a&gt; で簡単にオフラインで見ることができますよ、しかも &lt;a href="http://www.alfredapp.com/"&gt;Alfred&lt;/a&gt; と連携すると捗りますよとお聞きしました。
普段から Titanium で JavaScript を書いていますので、これは良いことを聞いたと早速設定していたら… Titanium もあったー！と、いうことなのです。&lt;/p&gt;

&lt;p&gt;&lt;img src="/images/blog/2013-07-18/dash-hud.png" alt="dash-hud" /&gt;&lt;/p&gt;

&lt;ol&gt;
  &lt;li&gt;
    &lt;p&gt;まずは Alfred と Dash をインストールしましょう。これがないと始まりません。
Dash は有償ですが、たまに出てくる広告付きで無償のまま利用できます&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Dash を起動して、Downloads の中から Appcelerator Titanium x.x.x をダウンロードします。
この状態で、すでに Dash 単体で Titanium の API ドキュメントが閲覧可能です
（Alloy な方はついでに BackboneJS と UnderscoreJS もダウンロードしておくと更に捗りますね）。
Automatically download and install updates にチェックをしておくと、ドキュメントがバージョンアップした時勝手に更新してくれて便利です
&lt;img src="/images/blog/2013-07-18/dash-download.png" alt="dash-download" /&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;Alfred を起動して、Preferences から Fetures → Web Search を選択し、右下にある Add Custom Search をクリックします。
Search URL は画像の通り入力してください。
Title は他のものとあわせてあります。
Keyword はお好みのもので。
ぼくの場合はいつも無意識でタイプする、おなじみの「ti」ですね
&lt;img src="/images/blog/2013-07-18/alfred-setting.png" alt="alfred-setting" /&gt;&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;p&gt;以上で完了です。
おもむろにホットキーで Alfred を呼び出し、「ti window」と入力してエンターを叩いてください。
冒頭のスナップショットのように、Dash が表示されましたか？
ダメだった方は 3. の設定を見なおしてみてください
&lt;img src="/images/blog/2013-07-18/alfred-dash.png" alt="alfred-dash" /&gt;&lt;/p&gt;
  &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;余談ですが、ぼくは Dash の表示を HUD モードにしています。
コードを書きながら、調べたい時に Dash でドキュメントを表示→エディタに戻る→きれいサッパリ Dash がいなくなっている。
この、コーディングをじゃまされない感が本当に快適で、そろそろ Dash にお金を支払おうと思っているところでした
（HUD モードは、Dash の General → Window style から変更することができます）&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Titan になりました</title>
    <link rel="alternate" href="/blog/2013/07/11/titan.html"/>
    <id>/blog/2013/07/11/titan.html</id>
    <published>2013-07-11T07:49:00Z</published>
    <updated>2013-07-11T07:49:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;みなさまこんにちは。
本日は特別なご挨拶をさせていただきます。
この度、Titanium Titans の一員に加えさせてもらえることになりました（&lt;a href="http://developer.appcelerator.com/devlink/profile/1233606"&gt;DevLink のプロフィールページ&lt;/a&gt;をご覧ください）。&lt;/p&gt;

&lt;p&gt;思い起こせば私が Titanium Mobile と出会ってからもうすぐ、2 年と半年を迎えようとしております。
飽きっぽい性格の私がここまで一つの技術を追い続けてこられたのも、Titanium Mobile 自体が面白いこともさることながら、日本の Titanium コミュニティが最高だということです。&lt;/p&gt;

&lt;p&gt;Titan の名に恥じぬよう、微力ながら引き続き Titanium コミュニティへ貢献して参りますので、今後ともよろしくお願いいたします！&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>iOS のプリセットサウンドを鳴らそう</title>
    <link rel="alternate" href="/blog/2013/06/24/ios.html"/>
    <id>/blog/2013/06/24/ios.html</id>
    <published>2013-06-24T05:01:00Z</published>
    <updated>2013-06-24T05:01:00Z</updated>
    <author>
      <name>Article Author</name>
    </author>
    <content type="html">&lt;p&gt;&lt;a href="/blog/2013/06/23/ticameraview.html"&gt;TiCameraView&lt;/a&gt; の副産物で iOS のプリセットサウンドを鳴らすモジュールを作りました。
そもそも Titanium Mobile で API が用意されていると思ったのですがありませんでした。
このモジュールのソースコードは GitHub にありますのでご自由にお使いください。
&lt;a href="https://github.com/k0sukey/TiSystemSound"&gt;k0sukey/TiSystemSound&lt;/a&gt;&lt;/p&gt;

&lt;h3 id="section"&gt;使い方&lt;/h3&gt;
&lt;p&gt;&lt;a href="https://github.com/k0sukey/TiSystemSound/blob/master/example/app.js"&gt;example/app.js&lt;/a&gt; をビルドすると、このモジュールで鳴らすことのできるすべてのサウンドを Ti.UI.TableView で表示＆確認できます。
モジュールを require したら &lt;code&gt;play()&lt;/code&gt; するだけです。
簡単ですね。
&lt;small class="muted"&gt;typo があるかもしれませんので、発見したらぜひご連絡ください。&lt;/small&gt;&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;var TiSystemSound = require('be.k0suke.tisystemsound');
TiSystemSound.play(TiSystemSound.NEW_MAIL);
&lt;/code&gt;&lt;/pre&gt;

&lt;h3 id="section-1"&gt;プロパティとメソッド&lt;/h3&gt;

&lt;h3 id="section-2"&gt;プロパティ&lt;/h3&gt;
&lt;p&gt;ありません。&lt;/p&gt;

&lt;h3 id="section-3"&gt;メソッド&lt;/h3&gt;

&lt;h4 id="play"&gt;play&lt;/h4&gt;
&lt;p&gt;プリセットサウンドを再生します。
TiSystemSound.&lt;code&gt;NEW_MAIL&lt;/code&gt; / &lt;code&gt;MAIL_SENT&lt;/code&gt; / &lt;code&gt;VOICEMAIL&lt;/code&gt; / &lt;code&gt;RECEIVED_MESSAGE&lt;/code&gt; / &lt;code&gt;SENT_MESSAGE&lt;/code&gt; / &lt;code&gt;ALARM&lt;/code&gt; / &lt;code&gt;LOW_POWER&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED1&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED2&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED3&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED4&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED5&lt;/code&gt; / &lt;code&gt;SMS_RECEIVED6&lt;/code&gt; / &lt;code&gt;TWEET_SENT&lt;/code&gt; / &lt;code&gt;ANTICIPATE&lt;/code&gt; / &lt;code&gt;BLOOM&lt;/code&gt; / &lt;code&gt;CALYPSO&lt;/code&gt; / &lt;code&gt;CHOO_CHOO&lt;/code&gt; / &lt;code&gt;DESCENT&lt;/code&gt; / &lt;code&gt;FANFARE&lt;/code&gt; / &lt;code&gt;LADDER&lt;/code&gt; / &lt;code&gt;MINUET&lt;/code&gt; / &lt;code&gt;NEWS_FLASH&lt;/code&gt; / &lt;code&gt;NOIR&lt;/code&gt; / &lt;code&gt;SHERWOOD_FOREST&lt;/code&gt; / &lt;code&gt;SPELL&lt;/code&gt; / &lt;code&gt;SUSPENSE&lt;/code&gt; / &lt;code&gt;TELEGRAPH&lt;/code&gt; / &lt;code&gt;TIPTOES&lt;/code&gt; / &lt;code&gt;TYPEWRITERS&lt;/code&gt; / &lt;code&gt;UPDATE&lt;/code&gt; / &lt;code&gt;USSD&lt;/code&gt; / &lt;code&gt;SIMTOOLKITCALLDROPPED&lt;/code&gt; / &lt;code&gt;SIMTOOLKITGENERATEBEEP&lt;/code&gt; / &lt;code&gt;SIMTOOLKITNEGATIVEACK&lt;/code&gt; / &lt;code&gt;SIMTOOLKITPOSITIVEACK&lt;/code&gt; / &lt;code&gt;SIMTOOLKITSMS&lt;/code&gt; / &lt;code&gt;TINK&lt;/code&gt; / &lt;code&gt;CT_BUSY&lt;/code&gt; / &lt;code&gt;CT_CONGESTION&lt;/code&gt; / &lt;code&gt;CT_PATH_ACK&lt;/code&gt; / &lt;code&gt;CT_ERROR&lt;/code&gt; / &lt;code&gt;CT_CALL_WAITING&lt;/code&gt; / &lt;code&gt;CT_KEYTONE2&lt;/code&gt; / &lt;code&gt;LOCK&lt;/code&gt; / &lt;code&gt;UNLOCK&lt;/code&gt; / &lt;code&gt;TOCK&lt;/code&gt; / &lt;code&gt;BEEP_BEEP&lt;/code&gt; / &lt;code&gt;RINGER_CHANGED&lt;/code&gt; / &lt;code&gt;PHOTO_SHUTTER&lt;/code&gt; / &lt;code&gt;SHAKE&lt;/code&gt; / &lt;code&gt;JBL_BEGIN&lt;/code&gt; / &lt;code&gt;JBL_CONFIRM&lt;/code&gt; / &lt;code&gt;JBL_CANCEL&lt;/code&gt; / &lt;code&gt;BEGIN_RECORD&lt;/code&gt; / &lt;code&gt;END_RECORD&lt;/code&gt; / &lt;code&gt;JBL_AMBIGUOUS&lt;/code&gt; / &lt;code&gt;JBL_NO_MATCH&lt;/code&gt; / &lt;code&gt;BEGIN_VIDEO_RECORD&lt;/code&gt; / &lt;code&gt;END_VIDEO_RECORD&lt;/code&gt; / &lt;code&gt;VC_INVITATION_ACCEPTED&lt;/code&gt; / &lt;code&gt;VC_RINGING&lt;/code&gt; / &lt;code&gt;VC_ENDED&lt;/code&gt; / &lt;code&gt;DTMF_0&lt;/code&gt; / &lt;code&gt;DTMF_1&lt;/code&gt; / &lt;code&gt;DTMF_2&lt;/code&gt; / &lt;code&gt;DTMF_3&lt;/code&gt; / &lt;code&gt;DTMF_4&lt;/code&gt; / &lt;code&gt;DTMF_5&lt;/code&gt; / &lt;code&gt;DTMF_6&lt;/code&gt; / &lt;code&gt;DTMF_7&lt;/code&gt; / &lt;code&gt;DTMF_8&lt;/code&gt; / &lt;code&gt;DTMF_9&lt;/code&gt; / &lt;code&gt;DTMF_STAR&lt;/code&gt; / &lt;code&gt;DTMF_POUND&lt;/code&gt; / &lt;code&gt;LONG_LOW_SHORT_HIGH&lt;/code&gt; / &lt;code&gt;SHORT_DOUBLE_HIGH&lt;/code&gt; / &lt;code&gt;SHORT_LOG_HIGH&lt;/code&gt; / &lt;code&gt;SHORT_DOUBLE_LOW&lt;/code&gt; / &lt;code&gt;MIDDLE_9_SHORT_DOUBLE&lt;/code&gt; から選択してください。&lt;/p&gt;

&lt;h3 id="section-4"&gt;参考にさせていただいたサイト&lt;/h3&gt;
&lt;ul&gt;
  &lt;li&gt;&lt;a href="http://iphonedevwiki.net/index.php/AudioServices"&gt;AudioServices - iPhone Development Wiki&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</content>
  </entry>
</feed>