Whistle App: A Case Study of Smart-phone Development and Comparison

ホイッスル on Androidがそろそろ50,000ダウンロードに到達しそうなので、記念に(?)ホイッスル on Androidを題材としたレポートをアップしときます。本当はブログに本文をべたーっと貼りたいのですが(検索に引っかかるので）、うまい方法が見つからないので、とりあえずアブストラクトとインデックスだけ貼っておいて、中身はリンク先へ、という形でアップします。興味があればどうぞ(*)。

* 諸事情でノー添削ver.です。文章はかなりroughなので注意。

Whistle App: A Case Study of Smart-phone  Development and Comparison

Abstract

In order to clarify the insight of differences between Android and iPhone applications, this paper first introduces Whistle App, which is a smart-phone application that runs on both devices. And then, using it as a case study, this paper attempts to compare both de-vices in terms of UI components, resource managements, and markets. The other works not directly related to this paper yet helpful to write it are all attached as an appendix.

Index:

1. Introduction

　　a. Background

　　b. Why comparing with a case study

　　c. What's Whistle App

2. Evaluation Environment, Resource, and Collaborators

　　a. Evaluation Environment

　　b. Resources

　　c. Collaborators

3. Comparison

　　a. UI Components

　　　　i. Whistle on Android

　　　　ii. Whistle on iPhone

　　b. Resource Management

　　　　i. Whistle on Android

　　　　ii. Whistle on iPhone

　　c. Market

4. Future Work

5. Conclusion

6. Acknowledgement

7. Reference

Appendix

　　Multi-media Productions of Whistle App

　　Reports on Whistle App

　　Whistle on Titanium Studio

　　Whistle Widget

Body:

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B2FvmcJSggmCZjhmMmUzM2UtZTRlNy00NTY0LWEzOGUtNmNkNGMyN2QyYmU0&hl=en_US

Whistle App in Android Market:
https://market.android.com/details?id=org.sorarier.whistle

Tweet

Titanium Studio:３日で出来るiPhoneアプリ開発環境

噂のTitanium Studioを使って、iPhoneアプリ開発経験の無い僕が３日（金、土、日曜）で出来るところまでやってみました。作った物はImage-based Word Listといって、英語初心者および初級者向けの英単語学習アプリです。

このアプリは、与えられた英単語から、その英単語に関連する画像(flickr API)と定義(Dictionary.com API)、および例文をWeb上から取って来ます(Google Search API)。英単語を学習するモード(Learn)と、復習するモード(Review)、テストするモード(Quiz)の３つがあり、これらのモードを使い分けて、英単語を学習していくことが出来ます。

似たようなコンセプトのアプリとして、LinkedWordという辞書アプリがありますが、僕の作った物は辞書ではなく単語帳アプリです。なので、APIは同じか、もしくは似ている物を使っているはずですが、表示の仕方が異なります。

具体的な動作については、DEMO動画を取ったので、それを見て下さい。バグやら何やらも写っていますが、良いところだけ写すのもどうかと思ったので、取り直しはしていません。

Titanium Studioを使ってみた感想ですが、付属のKichenSinkというサンプルアプリ集がかなり秀逸で、それを参考にして作っていけば、かなりサクサクとアプリを作っていくことができます。また、デフォルトで背景が黒色、文字が白色なのも素晴らしいです。それと、未だ試していまませんが、CUIでも動くようです。これでオープンソースというのだから、驚きです。

TitaniumではAndroidアプリも作れるようなので、今度はアンドロイドアプリをTitanium Studioで作ってみようかと思います。今のところ、ホイッスル on Androidのウィジェット版が欲しいという声をちらほら聞くので、今週末は、その実装をTitaniumでやろうかと考えてます。

Image-based Word Listのソースコード
https://github.com/yasulab/Image-based-Word-List

なお、自作API用に使っている自サーバのメンテナンスコストが大きいので、Image-based Word Listアプリを公開する予定はありません。また、自サーバが動いていないと、WebView（画面下の表示領域）に何も表示されなくなります。

// もし自作APIをGoogle App Engineなどにうまく移植出来たら、公開するかもしれません。

Tweet

How to run your iPhone App on Actual Device with Titanium Studio

iPhoneアプリ開発の未経験者の僕が、Titanium Studioで実機テストをしようとして少し躓いたので、ポイントをまとめておきます。

0. 実機テストに使用するiPhoneアプリを開発。

1. 次のページを参考にProvisioning Profileを作成する。

第9回 デバイスでアプリを動かす

http://gihyo.jp/dev/serial/01/iphone/0009

2. Titanium Studioを開いて、左のペインにある右矢印アイコンをクリックし、iOSデバイスを選択

3. 1.で取得したProvisioning Profileをアップロードする。

4. Finishをクリック。（クリックすると、実機へのインストールが始まります。）

ちなみに、Xcodeを開いた状態で実機へのインストールを開始するとエラーが起こります。一度エラーが起こると、たとえXcodeを閉じて再び実機へインストールしようとしても、同じ場所でエラーが起こります。このときは、キャッシュをクリアしてあげれば良いです。

具体的には、buildファイル内のファイルを全て削除すれば良いです。ここにあるファイルはbuildする度に自動生成されるので、削除しても問題ありません。

Good luck!

Tweet

How to Use Custom Font in Titanium Studio

ちょっとやり方が特殊だったのでメモしておきます。

Titanium Studioのカスタムフォントの使い方：

1. http://www.fontsquirrel.com/などでフォントファイルを取得＆解凍する。

2. 解凍したフォントファイルを/PATH/TO/PROJECT/Resources/に置く。

3. /PATH/TO/PROJECT/build/iPhone/Info.plistをコピーして、

4. /PATH/TO/PROJECT/にコピーしたInfo.plistをペーストする。

5. /PATH/TO/PROJECT/build/iPhone/以下のすべてのファイルを削除。

# 再ビルドでまた自動生成されるので気にしない。
# キャッシュをクリアするようなものです。

6. /PATH/TO/PROJECT/Info.plistを開く。

7. Add Itemをクリックし、”UIAppFonts”と入力。

8. 生成された"UIAppFonts"を右クリック->Value Type->Arrayを選択。

9. "UIAppFonts"の直前にある矢印アイコンをクリックし（フォーカスを移し）、その後同じアイコンを右クリック。

10. Add Rowを選択。

11. Item 0 が生成されるので、そのValueにフォントファイル名（e.g. "comic_zine_ot.otf"）を入力。

12. Titanium Studio内の任意のコンポーネントでカスタムフォントを使用してみる。

例：
var customFontLabel = Ti.UI.createLabel(
{
     text:"Custom Font Test",
     top: 0,
     font:{
          fontSize:60,
          fontFamily:"Comic Zine OT"
     },
     width:"auto",
     textAlign:"center"
});
Titanium.UI.currentWindow.add(customFontLabel);

13. ビルド＆実行してみて、うまく表示されれば成功です。

もしどこかでつまづいたら、次のサイトの動画を参考にすればよいかと思います。

Titanium Mobile: Displaying Custom Fonts

Tweet

Image-based Word List on iPhone with Titanium

昨日、偶然Titaniumに出会ってしまったので、即興でちょっとしたiPhoneアプリを作ってみました。flickr APIと自作API(例文検索API)を使ってますが、まぁ、あんまり期待したほど精度は良くないですね。しかもflickrのAPIはエラーが起きる始末w。

Tweet