がぶちゃんの日記

札幌からフルリモートCTO

Titanium+CoffeeScript+Guard+Vim環境できたよー!

20111011 追記

node.jsをインストールしないと.coffee内の日本語が.jsにコンパイルされた後に欠落する問題がありました。

brew install node.js

で、node.jsをインストールすることをおすすめします。
Homebrewは https://github.com/mxcl/homebrew/wiki/installation を参考に簡単にインストールできます。

もう生JSは触れない

Titaniumでロジックを書いていて生JSの非力さに絶望していたところ、CoffeeScriptのことを思い出して食わず嫌いで触ってなかったので試しにCoffeeScriptを触ってみたら壮絶良かったので、もうTitaniumもCoffeeScriptで書こうと思いました。

Guardで自動コンパイル

CoffeeScriptコンパイルすることでJavaScriptソースコードが吐き出されるので、いちいちコンパイルしなきゃいけないけど、そこは自動コンパイルしたいところ。

GuardでTitanium+CoffeeScriptの開発を快適に | ひげろぐを参考に、自動コンパイル環境が作れます。

Node.jsはいらない

よくCoffeeScriptをインストールするためにNode.jsをインストールしましょうというエントリーを見るけど、上記の方法であればNode.jsをインストールする必要はありません。

Growlで通知

Growlは既にインストールしていたのでgrowlnotifyだけ追加でインストールしたかったのだけどローカルでExtrasの下にあるというgrowlnotifyを探したんだけど見つからなかった(そもそも配布物にしか入ってない?)のでGrowl - DownloadsからGrowl-1.2.2.dmgをダウンロードして、ダブルクリックしてExtrasの下にありました。

もちろん、Growlをインストールしていない人はGrowl本体もインストールしましょう。

CoffeeScriptVimで書く

Titanium StudioはCoffeeScriptを書くことなんて想定してないわけで、Titanium StudioでCoffeeScriptを書くことは何のメリットもないので使いやすいエディタで書くのが吉だと思い、普段慣れているVimで書くことに。

Vimを最新に

しばらくVimをアップデートしてなかったのとvim-pathogenを使ってみたかったのでMac OSXでのvim環境整理。.vimrcやらオヌヌメPlug inやらまとめ。 - ( ꒪⌓꒪) ゆるよろ日記を参考にVimを入れなおすことに。

vim-pathogenを入れる

https://github.com/tpope/vim-pathogen のInstallationを参考にvim-pathogenを入れて、.vimrcに以下を追加

call pathogen#infect()

あとは、~/.vim/bundle以下にVimプラグインを入れるだけでOK。いやーこれでVimプラグインがすっきり整理できますねー。

vim-coffee-scriptを入れる

VimCoffeeScriptプラグインを教えて頂いたのでvim-coffee-scriptを入れる。

$ cd ~/.vim/bundle
$ git clone https://github.com/kchmck/vim-coffee-script.git

これでひとまずVimCoffeeScriptを書いて自動コンパイルする環境までできました。

だいぶいい感じ、だいぶいい感じなんだけどTitanium APIが長いので補完が欲しいところ...探しても探しても見つからなかったけどTwitterで教えて頂きました。ありがとうございます!

titanium-vimを入れる

ということで教えていただいたtitanium-vimを入れる。

$ cd ~/.vim/bundle
$ git clone https://github.com/pekepeke/titanium-vim.git

すると、おおおおおお、補完できるううう!!!


さらに自動補完させる

neocomplcacheというVimプラグインを入れると自動補完してくれるようになります。

$ cd ~/.vim/bundle
$ git clone https://github.com/Shougo/neocomplcache.git

設定は以下を参考に、設定項目が多いのですが一度目を通して把握しておくことをお勧めします。

yuroyoroさんの.vimrcも参考になります。

ちなみに、とにかく試したいという方は以下を.vimrcにどうぞ。

" neocomplcache settings
" http://vim-users.jp/2010/10/hack177/
" http://vim-users.jp/2010/11/hack185/
" http://vim-users.jp/2011/01/hack193/

" Disable AutoComplPop.
let g:acp_enableAtStartup = 0
" Use neocomplcache.
let g:neocomplcache_enable_at_startup = 1
" Use smartcase.
let g:neocomplcache_enable_smart_case = 1
" Use camel case completion.
let g:neocomplcache_enable_camel_case_completion = 1
" Use underbar completion.
let g:neocomplcache_enable_underbar_completion = 1
" Set minimum syntax keyword length.
let g:neocomplcache_min_syntax_length = 3
let g:neocomplcache_lock_buffer_name_pattern = '\*ku\*'

" Define dictionary.
let g:neocomplcache_dictionary_filetype_lists = {
    \ 'default' : '',
    \ 'vimshell' : $HOME.'/.vimshell_hist',
    \ 'scheme' : $HOME.'/.gosh_completions'
        \ }

" Define keyword.
if !exists('g:neocomplcache_keyword_patterns')
    let g:neocomplcache_keyword_patterns = {}
endif
let g:neocomplcache_keyword_patterns['default'] = '\h\w*'

" Plugin key-mappings.
imap <C-k>     <Plug>(neocomplcache_snippets_expand)
smap <C-k>     <Plug>(neocomplcache_snippets_expand)
inoremap <expr><C-g>     neocomplcache#undo_completion()
inoremap <expr><C-l>     neocomplcache#complete_common_string()

" SuperTab like snippets behavior.
"imap <expr><TAB> neocomplcache#sources#snippets_complete#expandable() ? "\<Plug>(neocomplcache_snippets_expand)" : pumvisible() ? "\<C-n>" : "\<TAB>"

" Recommended key-mappings.
" <CR>: close popup and save indent.
inoremap <expr><CR>  neocomplcache#smart_close_popup() . "\<CR>"
" <TAB>: completion.
inoremap <expr><TAB>  pumvisible() ? "\<C-n>" : "\<TAB>"
" <C-h>, <BS>: close popup and delete backword char.
inoremap <expr><C-h> neocomplcache#smart_close_popup()."\<C-h>"
inoremap <expr><BS> neocomplcache#smart_close_popup()."\<C-h>"
inoremap <expr><C-y>  neocomplcache#close_popup()
inoremap <expr><C-e>  neocomplcache#cancel_popup()

" AutoComplPop like behavior.
"let g:neocomplcache_enable_auto_select = 1

" Shell like behavior(not recommended).
"set completeopt+=longest
"let g:neocomplcache_enable_auto_select = 1
"let g:neocomplcache_disable_auto_complete = 1
"inoremap <expr><TAB>  pumvisible() ? "\<Down>" : "\<TAB>"
"inoremap <expr><CR>  neocomplcache#smart_close_popup() . "\<CR>"

" Enable omni completion.
autocmd FileType css setlocal omnifunc=csscomplete#CompleteCSS
autocmd FileType html,markdown setlocal omnifunc=htmlcomplete#CompleteTags
autocmd FileType javascript setlocal omnifunc=javascriptcomplete#CompleteJS
autocmd FileType python setlocal omnifunc=pythoncomplete#Complete
autocmd FileType xml setlocal omnifunc=xmlcomplete#CompleteTags

" Enable heavy omni completion.
if !exists('g:neocomplcache_omni_patterns')
    let g:neocomplcache_omni_patterns = {}
endif
let g:neocomplcache_omni_patterns.ruby = '[^. *\t]\.\w*\|\h\w*::'
"autocmd FileType ruby setlocal omnifunc=rubycomplete#Complete


すると、おおおおおお、自動補完できるううう!!!(画像使い回し)

これでVim+CoffeeScript+Guardで自動コンパイルされるので、Titanium Studioで実行してiOSシミュレータでテストできるわけですが、ビルド実行もコマンドラインでやりたいですよねー?

TitaniumプロジェクトのビルドとiOSシミュレータの起動をコマンドライン

以下のbuilder.pyがコマンドラインでビルドなどができるコマンドです。

$ /Library/Application\ Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py
builder.py <command> <version> <project_dir> <appid> <name> [options]

available commands: 

  install       install the app to itunes for testing on iphone
  simulator     build and run on the iphone simulator
  distribute    build final distribution bundle
  xcode         build from within xcode
  run           build and run app from project folder

長いのでaliasを設定します。

vim ~/.zshrc
# Titanium builder
alias ti='/Library/Application\ Support/Titanium/mobilesdk/osx/1.7.2/iphone/builder.py'
source ~/.zshrc

で、Titaniumプロジェクトのルートディレクトリで以下のコマンドを実行すると、ビルドしてiOSシミュレータが起動します。

ti run .

ただ、この方法だとリビルドして再度iOSシミュレータで確認したい場合は、Ctrl-Cで終了して、再度コマンドを実行する必要があります。バックグラウンドで実行して、うんぬんかんぬんといろいろ挑戦していたのですが、ゾンビが残ったりして上手くいきませんでした。。。iOSシミュレータを再起動せずにリビルドしたアプリを確認できると嬉しいのですが、Titanium Studioでも同様にiOSシミュレータは再起動するのでiOSシミュレータ的に無理なのかな?教えて!エライ人!

あわせて読みたい

Vimテクニックバイブル ?作業効率をカイゼンする150の技

Vimテクニックバイブル ?作業効率をカイゼンする150の技

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

Titanium Mobileで開発するiPhone/Androidアプリ (Smart Mobile Developer)

Titaniumはバージョンアップが速いのですが著者さんが精力的に補完稿PDFを以下で公開されています。また、wikiページのUIカタログ、APIカタログは、Titanium開発で非常に助かるページです。僕も開発しながらこのページをよく見ています。

http://code.google.com/p/titanium-mobile-doc-ja/

ということで、TitaniumでiOS/Androidアプリ開発はCoffeeScript+Guard+Vim環境でやっていくことにしました。もう生JSは触れない。