Maccle

あとのことを考えてTitaniumでiOSアプリを作る際に気をつけたいこと

約 7 分
あとのことを考えてTitaniumでiOSアプリを作る際に気をつけたいこと

[2012/7/24 追記済み]

今回はごく基本的な自分流メモ。というか、我流の決めごと。

あくまでObjective-Cがメインですが、ライトなアプリならTitanium Mobileってとってもステキで楽チン。
でも作り込むうちに、プロジェクト(ファイル数、ステップ数など)の規模が大きくなってくると、当たり前ですがバグの検知やメンテが恐ろしく面倒になってきます。

そんな行き当たりばったりな作り込みにならないよう、個人開発でもある程度は開発ポリシーを頭の片隅にでも置きながら、しっくりくるルールに定着させていったらいいんではないでしょうか。
というわけで、思いついたものを適当にあげてみます。

ファイルとフォルダのグルーピングルールを決めておく!

私の場合、プロジェクトの “Resources” → “js” フォルダ内に、用途やウインドウ別にフォルダを作ってスクリプトを細分化しています。

例えばこんな感じです。

Resources
└ js
  ├ api (twitter, facebookなど、API連携用)
  ├ lib (ライブラリ用)
  ├ settings (アプリの設定ウインドウ用)
  └ db (データベース関連のスクリプト用)

これら細分化したフォルダに、機能ごとに小分けして分かりやすい名前をつけたjsファイルを入れています。

jsファイルは機能やクラスごとになるべく細分化しておく!

1ファイル内に数千ステップ以上も書いてしまうのも、まぁなくはないですが、多くの関数やクラス、変数などを定義してしまうと後でヒーヒー言う羽目に合いがちです。

一つのjsファイルには、例えばTwitterのOAuth用クラスのみ、Twitterの汎用的なクライアント機能の関数群のみなどに限定してコードを書き、なるべく機能を限定して分かりやすいファイル名でまとめておいてます。

で、他のjsファイルのコード内で細分化したファイル内の関数やクラスがあれば、Ti.include 関数でインクルードして利用します。

Ti.include('../hoge/hoge.js');
var HOGE = require('/hoge/hoge');

Ti.includeの代わりに、require を使う!

Titanium SDK 1.7.以降では、Ti.include で絶対パスが使えるようになったようですが、正常に動作しなかったり未だに相対パスのバグも直っていないみたいです。

なので、外部スクリプトを読み込むには、Ti.include ではなく、サーバーサイドJavaScriptの標準仕様といえるCommonJS準拠のモジュールとして、“require” 関数を使うことが推奨されているようです。
※コメントいただいたhondaさん、ありがとうございます!

requireによる外部JSにまとめたモジュールの読み込み方法は以下が分かりやすくまとめられています。

requireでTitaniumのインクルードパスの問題を解決する
Applications shall be modular and object-oriented using CommonJS modules

宣言個所がわからなくなってしまった!という場合

もし「この関数ってどこに定義したんだっけ??」なんて迷ったときは、その謎の関数、クラス、変数などを呼び出している部分までカーソルを持っていき、「F3」キーを押して、Titanium Studioに宣言個所まで一気に移動してもらいましょう!
もしくは、「右クリック」メニューの「Open Declaration」

自分流のネーミングルールを決めておく!

UI系のオブジェクトの名前は、例えば “[UIオブジェクト名][最初は大文字の続くオブジェクト判別文字列]” で統一してわかりやすく! とか。
[js]var windowPlayer = Ti.UI.createWindow();
var labelSongTitle = Ti.UI.createLabel();
var viewSeekbar = Ti.UI.createView();[/js]

プロジェクト内で使い回す共通の定数と変数をまとめておく!

定数化しておくjsファイルを別途作っておいて、そこにあちこちで使い回すような定数を順次記述しておきましょう!
後で定数の値の変更があった場合も楽です。

もちろん、オリジナルの定数やアプリ内で決まりきった定数もまとめておきます。

例えば、iOSが標準で用意してくれているシステムアイコンは、Titaniumでも全て用意されていますが、記述が長いのでこんな感じでまとめておけば、実際に使う場合に記述が短くて済みます。

requireでモジュールとして読み込む場合
(myConfig.js ※モジュール側)
[js]exports = {
sysBtnAction : Titanium.UI.iPhone.SystemButton.ACTION,
sysBtnCamera : Titanium.UI.iPhone.SystemButton.CAMERA,
interval : 5
};[/js]

(app.jsとか。※読み込む側)
[js]var myConf = require(“myConfig”);

var interval = myConf.interval;

var button = Ti.UI.createButton({
systemButton : myConf.sysBtnCamera
});[/js]

Ti.include で単純にスクリプトをインクルードする場合
(myConfig.js)
[js]const sysBtnAction = Titanium.UI.iPhone.SystemButton.ACTION;
const sysBtnCamera = Titanium.UI.iPhone.SystemButton.CAMERA;
const interval = 5;[/js]

※インクルードする外部JS(この場合、myConfig.js)はスクリプトの先頭で読み込んでおきます。
(app.js)
[js]Ti.include(“myConfig.js”);

var button = Ti.UI.createButton({
systemButton:sysBtnCamera
});[/js]

デフォルトのシステムボタンの一覧はこちら

ステータスバーやらアイコンの光沢加工有無の指定やら

tiapp.xmlをOverviewではなく、XMLの編集モードで開くと、ステータスバーの有無、スタイル、ナビゲーションバーなど、色々な指定ができます。

<!--アプリのアイコン光沢化の可否-->
<prerendered-icon>true</prerendered-icon>
<!--grey, opaque_black(黒), translucent_black(半透明な黒)の3種類-->
<statusbar-style>translucent_black</statusbar-style>
<!--最上部のステータスバーの表示有無-->
<statusbar-hidden>false</statusbar-hidden>
<!--ナビゲーションバーの表示有無-->
<navbar-hidden>false</navbar-hidden>

他にも色々あります。
tiapp.xml参考

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Comments & Trackbacks

  • Comments ( 2 )
  • Trackbacks ( 1 )
  1. 現在はincludeを使ったファイルの分割が非推奨で、Nodeライクなモジュールのrequireが推奨されてる事も、触れた方が良いんじゃないでしょうか。

  2. @ honda:
    ご指摘ありがとうございます。requireの表記も追記させていただきました。(^ ^;

  1. […] あとのことを考えてTitaniumでiOSアプリを作る際に気をつけたいこと | Maccle!今回はごく基本的な自分流メモ。というか、我流の決めごと。 あくまでObjective-Cがメインですが、ライトなアプ […]

Leave A Reply

*

Comment On Facebook