17022013 Ti
スタッフの皆様お疲れ様でした。
後半のセッションが特に面白かったですね。
車情報連携ユニットが楽しそう。発表聞いていて、クルマもスマホと同じ持ち運ぶデバイスなんだなーと思った。電気自動車は充電するしなー。あとVelocityの意味でビッグデータの範疇に入っていくのかな。
最近ご無沙汰のAlloy。WidgetsとThemeが便利そうなので積極的に使っていこうと思った。ちなみに僕の開発環境は
なんだけど、ちょっと前にtylusっていうTSSをStylusで書くモジュールを発見したので使おうと思っている。
さくさく動いていてヤバイ、これは面白そう。Alloyでも動くそうだし。楽しみだ。
13012013 javascript Ti
カメラで写真を取ってデータベースに格納するアプリを作ってみた。スクロールビューで画像が入れ替わるのがよくわからんがひと通りできた。
カメラ用のボタンを押したら内蔵カメラを起動して、写真をファイルに保存したら、パスをデータベースに保存する。
pts = Alloy.Collections.photo cameraButton = Ti.UI.createButton systemButton: Ti.UI.iPhone.SystemButton.CAMERA $.win1.rightNavButton = cameraButton cameraButton.addEventListener 'click', -> Ti.Media.showCamera success: (event) -> now = (new Date).getTime() file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, String.format("%d-%d", now, Math.floor(Math.random() * 1000))) file.write(event.media) photo = Alloy.createModel('photo', { path: file.nativePath }) photo.save() Alloy.Collections.photo.add photo return mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO] pts.fetch() $.index.open()
モデルの定義
exports.definition = { config: { "columns": { "path": "string" }, "adapter": { "type": "sql", "collection_name": "photo" } } }
コレクションの定義をしておく
<Alloy> <Collection src="photo"/> <TabGroup> <Tab id="tab1" title="写真" icon="dark_book.png"> <Window id="win1" title="写真"> <ScrollView id="scroll" dataCollection="photo"> <Require src="photo"/> </ScrollView> </Window> </Tab> <Tab id="tab2"> <Window id="win2"> </Window> </Tab> </TabGroup> </Alloy>
個々の画像
<Alloy> <ImageView image="{path}" width="100%"> </ImageView> </Alloy>
13012013 javascript coffeescript Ti
黒い本の写真アプリをAlloyで作っている。
app/models/photo.jsに
exports.definition = { config: { "columns": { "path": "text" }, "adapter": { "type": "sql", "collection_name": "photo" } } }
とモデルとコレクションを定義しておいて、index.jsで
cameraButton = Ti.UI.createButton systemButton: Ti.UI.iPhone.SystemButton.CAMERA $.win1.rightNavButton = cameraButton cameraButton.addEventListener 'click', -> Ti.Media.showCamera success: (event) -> now = (new Date).getTime() file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, String.format("%d-%d", now, Math.floor(Math.random() * 1000))) file.write(event.media) photo = Alloy.createModel('photo', { path: file.nativePath }) photo.save() Alloy.Collections.photo.add photo return mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]
で、写真の撮影は出来てセーブするときにAlloy.Collections.photo.addメソッドがない（というかAlloy.Collections.photoがundefined）というエラーに悩まされている。
index.xmlにCollectionタグを追加したり、なんかごちゃごちゃやってたらうまくいくようになった。エラーの原因は結局わかってない。
09012013 Ti
ドはまっていたTitanium Studioがやっと動いた。
Titanium Studioの Help -> Titanium Studio -> View LogFileを見てみると
File "osx/3.0.0.v20121127170203/iphone/provisioner.py", line 10, in <module> from OpenSSL import crypto ImportError: No module named OpenSSL
って出ていたのでprovisioner.pyの先頭行が
#!/usr/bin/env python
で、brew経由の/usr/local/bin/pythonを見ていてそっちにOpenSSLがインストールされていないのが原因だった。早速インストールしようとするとgccがないって怒られた。
$ sudo pip install pyOpenSSL gcc-4.2: error trying to exec '/usr/bin/i686-apple-darwin11-gcc-4.2.1': execvp: No such file or directory
これはsof見て解決。
これでmobileprovisionを認識するようになったけれど、今度は
Available developer names: [ERROR] : Unable to find an iOS Developer Certificate for "NAME (NUMBER)"
ってのが出るようになったんだけど、これはTISTUD-2969にあるようにバグらしいのでバージョンをあげればいい。
$ titanium sdk install --branch 3_0_x --default
で最新のバージョンを入れた(3.0.0.v20121127170203 -> 3.0.1.v20130108000206)。Titanium Studioでバージョンを切り替える場合はtiapp.xmlをいじる。
実機に送る場合
titanium build -p iphone -T device -P [UUID] -f -V [NAME]
28122012 work Haskell javascript coffeescript Ti
今年読んだ本で良かったもの。
これはピカイチだった。RWHで停滞感が漂いまくっていた僕のHaskell理解力がかなり上がったのは間違いない。そういえば、最近Haskellしか書いてないなぁと2012年のエントリに付けられたタグを数えたらHaskell 90, Python 70, javascript 44だった。
あとはtwitterで色々教えてもらったりとか、三島Haskell無名関数の会が出来てモチベーションが上がったりとか色々タイミングが良かったということもあるが。来年も引き続きハスケりたい。
型というか、閉じている、自己同型といったイメージは数学ガールが良いかも
自分の仕事にアジャイルな要素を入れたいというのはここ数年ずっと考えていて、やっと来年すこし取り組めそうで嬉しい。
僕のチケット駆動に対する期待は、創薬研究への応用なので、チケット駆動開発の背景にある考え方がぎっしり詰まった本書は、色々な発見や再発見があったり、今の仕事のアナロジーを見つけたりとかなり満足度の高い本だった。
今年システムを少し運用してみて、意識の高低のバラツキを吸収する仕組みとしてゲーミフィケーション的なものも考えて行かないといけないし、受動的な情報伝達手段も考えて行かないといけないなぁと感じた。
（そもそも潜在的に）意識の高いマネジメント層は、能動的に情報アクセスしない研究者層（というより労働者層）が存在することを理解できないので、「そんなのホームに登録しておけばいいだけなんんじゃないか？」なんて言うんだけど、それすら能動的な情報アクセスなんだよなぁ。
デジタルサイネージのようなものにも手を出してみたい。
今年はクライアントサイドのMVCも熱かった。去年Javascriptを勉強してた時には、まさかiPhoneアプリの方に進んでいくとは思わなかったが。
ステートフルJavaScriptはjavascript MVCフレームワークの本でSpine.jsの解説に近い。そしてこの知識はTitanium MobileでJavascriptを使ったiPhoneアプリ開発で役立つ！
AlloyはTitaniumのためのMVCフレームワークでBackbone.jsを使ってつくられている。これを使うとjavascriptを利用してiPhoneアプリとかAndroidアプリが作れちゃうわけだ(下のエントリ参照)。
バージョンあげたら実機転送がうまくいかなくなって、最近は停滞気味ですが、来年はもうちょっと力を入れて取り組みたいと思っている（なんかアプリをリリースしたい）。
それから僕はCoffeeScriptが好きなので使っていますが、他にもNode.jsのテンプレートエンジン(Jade,eco,ejs)なんかも使えるので好みの開発スタイルを探求するためにCoffeeScriptやNode.jsの入門書もあわせて読んでおくとよいかも。
最近Alloy+Emacsで快適に開発していたのだが、ちょっと実機転送したいアプリがあったので久々にTitanium Studioを起動したら思いっきりハマっている。
run iOS deviceすると次の画面が出てきて何を直したらいいのかさっぱり分からん。
そもそも、App IDとプロビジョニングプロファイルをきちんと理解していないからなぁ。ドキュメントをきちんと読んでおかないとダメだな。
あと、そのうち東京のもくもく会にも行ってみたいなぁ。
KitchenSinkでも同じようなことになった。
初回インポートしてApp IDを変更して実機転送したところ初回は
一般設定して
次にcertificatesの設定して
最後にプロビジョニングプロファイルを登録
これで実機転送できる。
しかし二度目の実機転送を行おうとするとPlease add a provisioning profileという画面が出て先に進まなくなる。
Xcodeのコマンドラインツールを再インストールしたら直ったというコメントがあったので、ついでに4.4.1から4.5.2にあげてみたけど変わらず。他のヒトが試したようにTitanium Studioを再インストールしたり、titanium, alloyを最新版にあげてみたけどダメ。
あとは、コメントにあったとおりにpreview version入れてみるくらいだけど、時間切れなので帰ってきたらやる
RC(3.0.0.201211271925)とNightlyBuild(3.1.0.201211271945)入れてみたけど変わらず。
ところで、
すごいHaskellたのしく学ぼう!
数学ガール ガロア理論 (数学ガールシリーズ 5)
チケット駆動開発
幸せな未来は「ゲーム」が創る
ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理
CoffeeScriptファーストガイド モダンJavaScriptによるアプリケーション開発 (NEXTーONE)
サーバサイドJavaScript Node.js入門titanium build -p iphone -T device -P XXXXXX -V "XXX XXXX"
とやってみたけどシミュレータが立ち上がってしまうのはなんでなんだろ？オプションでなにか足りないものがあるのかなぁ、、、
XCodeを使ってみることにした
titanium build -b -f -p iphone -T device -F iphone -P [UUID] -V [NAME]
でapp/build/[application].xcodeprojができているので、それをXCodeで開いて実機を選択してrunすればいい。
これで、KitchenSinkは実機に転送できた。
Alloyで作ったアプリも転送できるんだが、
couldn't find app.js
というエラーが出る。
23112012 javascript iPhone Ti
Titanium Mobile iPhone/Androidアプリ開発入門の簡易RSSリーダーをAlloyで書きなおしてみた
CoffeeScrptで開発する方法については、ここを参照のこと。
軽くハマったのはviewかな。
最初TabGroupにidを設定したら、$.index.openでエラーがでた。
結局$.indexってなんじゃろか？とドキュメントを読んだら解決した。
要するにViewのトップレベルには
のいずれかが必要で、idが明示的に指定されてない場合には、そのファイル名がidとして利用される。
規約に従うことにしたらxmlはシンプルになった。
<Alloy> <TabGroup> </TabGroup> </Alloy>
コントローラーは本の通りに。スタイルとかも全部コントローラーに書いちゃったのでindex.tssはいじってない。
createApplicationTabGroup = -> tab1 = createRSSTab 'Developer Blog', 'http://developer.appcelerator.com/blog/feed' tab2 = createRSSTab 'Q&A', 'http://developer.appcelerator.com/questions/feed/newest' $.index.addTab tab1 $.index.addTab tab2 return createRSSTab = (title, url) -> win = Ti.UI.createWindow title: title tab = Ti.UI.createTab title: title icon: 'KS_nav_views.png' window: win tableView = Ti.UI.createTableView {data:[]} win.add(tableView) win.addEventListener 'open', -> query = String.format "select * from rss where url = '%s'", url Ti.Yahoo.yql query, (res) -> if res.success is false alert("Yahoo YQL error.") return res.data.item.forEach (item) -> tableView.appendRow title: item.title color: '#000' link: item.link hasChild: true return tableView.addEventListener 'click', (event) -> detailWin = Ti.UI.createWindow {title: event.rowData.title, backgroundColor: '#fff'} webView = Ti.UI.createWebView {url: event.rowData.link} detailWin.add(webView) tab.open(detailWin) return return tab createApplicationTabGroup() $.index.open()
18112012 javascript Emacs coffeescript Ti
犬が早朝から吠えたので4時に叩き起こされたが、タイムラインを追いかけていたらAlloy with CoffeeScript のお誘いというこれは！というエントリがあがっていたので、早速誘われてみた。尚、jsとcoffeeは一緒のディレクトリに置いておくのが好みなので@k0sukeyのオリジナルなjmkに変更をくわえてあります。
Titanium Mobile iPhone/Androidアプリ開発入門のストップウォッチを参考にしました。
本書ではui.jsという1つのファイルで完結していますがAlloyのようなMVCフレームワークを使ったほうがコードの見通しは良くなると思います。
$ titanium create stopwatch # 対話でターゲットデバイスやapp-id設定 $ cd stopwatch $ alloy new # alloyのひな形作成 $ alloy generate jmk
stopwatch/app/alloy.jmkを以下のように書きなおす。これでapp/controller のcoffeeファイルはalloy compileでコンパイルされるようになります。
task("pre:compile", function(event,logger) { var wrench = require("wrench"), fs = require("fs"), path = require("path"), controller_root = event.dir.controllers, coffee = require("coffee-script"); wrench.readdirSyncRecursive(controller_root).forEach(function(controller){ if (controller.match("coffee$")) { fs.writeFileSync( path.join(controller_root,controller.replace("coffee", "js")), coffee.compile( fs.readFileSync(path.join(controller_root, controller)).toString(), { bare: true })); } }); }); task("post:compile",function(event,logger){ });
あとは普通に。
app/views/index.xml
<Alloy> <TabGroup> <Tab id="tab1" icon="dark_clock.png" title="ストップウォッチ"> <Window id="window1" title="ストップウォッチ"> <Label id="label"> 00:00:00.000 </Label> <Button id="button"> Start </Button> </Window> </Tab> <Tab id="tab2" icon="dark_info.png" title="使い方"> <Window id="window2" title="使い方"> <WebView url="howto.html"> </WebView> </Window> </Tab> </TabGroup> </Alloy>
/app/styles/index.tss
{"Window": { "barColor": "#000", "backgroundColor": "#000" }, "Tab": { "backgroundColor": "#000" }, "#label": { "color": "#fff", "width": "auto", "height": "auto", "font": { "fontSize": 40, "fontWeight": "bold" } }, "#button": { "color": "#000", "width": 150, "height": 40, "bottom": 30 }}
webview用のhtmlは /app/assets/iphone/howto.htmlに
<html> <head> <title>使い方</title> </head> <body> <h1>使い方</h1>このサンプル は<a href="http://www.amazon.co.jp/dp/479803231X">Titanium Mobile iPhone/Androidアプリ開発入門</a>のストップウォッチのサンプルをAlloyで 書きなおしてみたものです。 <img src="http://ec2.images-amazon.com/images/I/41jDZ5IY01L._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_.jpg"/> </body> 興味を持ったら購入して読んでみるとよいと思いますよ。 </html>
最後にcoffeeをapp/controllers/index.coffeeに
started =false intervalID = null startStopwatch = -> $.label.text = "00:00:00.000" startTime = new Date() _updateTimer = -> u_sec = 1000 u_min = 60 * u_sec u_hour = 60 * u_min now = new Date() diff = now - startTime hour = Math.floor(diff/u_hour) min = Math.floor((diff - hour*u_hour)/u_min) sec = Math.floor((diff - hour*u_hour - min*u_min)/u_sec) msec = diff / u_sec $.label.text = ("0" + hour).slice(-2) + ":" + ("0" + min).slice(-2) + ":" + ("0" + sec).slice(-2) + "." + ("00" + msec).slice(-3) intervalID = setInterval(_updateTimer, 3) return $.button.addEventListener 'click', -> if started clearInterval(intervalID) $.button.title = "Start" started = false else startStopwatch() $.button.title = "Stop" started = true return $.index.open()
Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る$ alloy run
Let's Enjoy!
Alloyのtssの文法ってよく分からんですね。css-modeあててもjs2-modeをあててもエラーばっか吐くし、快適にコーディングできん。
ということでちょっと調べてみた。
Alloyのソースコード探していたらgrammerのとこにtss.pegjsってのがあって、ヘッダを読んでみるとTSS parser based on JSON parserって書いてあったので基本的にはJSONらしい。
それにしては{で始まらないよなぁとソースコードを追いかけていくとcompilerUtilsに
// Add enclosing curly braces, if necessary contents = /^\s*\{[\s\S]+\}\s*$/gi.test(contents) ? contents : '{' + contents + '}';
ってあって、要するに{で始まってない場合ファイルのコンテントを{}で囲むことになっているらしい。それからtssはキー値を""で囲まなくてもいいんだけど、囲んでも別に問題なかったりする。
結論としてはJSONで書いておけば、即時構文チェックとかシンタックスハイライトとか効かせられていいんじゃないかと。
つまり
"Label": { font: {fontSize: 20, fontFamily: "Helvetica Neue"}, color: "#999" }
って書いてるところを、最初から
{"Label": { "font": {"fontSize": 20, "fontFamily": "Helvetica Neue"}, "color": "#999" }}
って書くようにすれば、事前に構文のエラーを潰せて気持ちがいい。
json-modeを使ってみますが、package.elでは入れられないのでgit cloneしてrequireします。javascript-modeを継承しているのでTabの設定なんかはそっちの設定に従う。
次にFlymakeの設定をする。構文チェックにjslintを使うのでインストールしてない場合には
npm install -g jslint
で入れます。
Emacsのほうの設定はこんな感じ。tabはスペース2個分（個人的な好み）にした。それからelectric-pair-modeも入れてるので{},""をよろしくやってくれる。
;; JSON (require 'json-mode) (add-to-list 'auto-mode-alist '("\\.tss$" . json-mode)) (add-hook 'json-mode-hook 'electric-pair-mode) (add-hook 'json-mode-hook '(lambda () (setq js-indent-level 2) )) (when (load "flymake" t) (defun flymake-jslint-init () (let* ((temp-file (flymake-init-create-temp-buffer-copy 'flymake-create-temp-inplace)) (local-file (file-relative-name temp-file (file-name-directory buffer-file-name)))) (list "jslint" (list "--terse" local-file)))) (setq flymake-err-line-patterns (cons '("^\\(.*\\)(\\([[:digit:]]+\\)):\\(.*\\)$" 1 2 nil 3) flymake-err-line-patterns)) (add-to-list 'flymake-allowed-file-name-masks '("\\.tss\\'" flymake-jslint-init))) (load-library "flymake-cursor")
この設定で少し使ってみる。
17112012 javascript Emacs Ti
静岡javaScript勉強会 #2に参加されるみなさんこんにちは、参加されないみなさんもこんにちは。僕は11月のすべての土曜日を留守にして家族の顰蹙を買うという重圧に耐え切れずに早々に離脱してしまいましたので朝からお家でjsってます。
ところで、@tomofの「Backbone.js入門」面白かったですか？よっしゃーいっちょおとうさんもbackbone.jsでウェブアプリケーションつくっちゃうぞーっていう気になりましたか？はいそうですか、そうですよね。ついでに、その勢いでBackbone.jsっぽい開発のノリでiPhoneアプリを開発できたら面白いと思いません？思いますよね。
やりましょう、Alloyで!(孫社長風味でよろしく)
というような内容のエントリです。
Titanium CLIはTitaniumで開発するためのコマンドラインのツールで、AlloyはTitaniumのためのMVCフレームワークですが、両方共Node.jsのv0.8以上がインストールされていればnpmでインストールできるはずです。
npm install -g titanium npm install -g alloy
うまくいかない場合は下のサイトを参考にしてください。
EmacsでもvimでもST2でも好きなモノを使えば良いとおもいますが、僕はEmacs(24)をつかっています。でnxmlモードにzencoding-modeをあててあります。入ってない場合はM-x list-packaegesでzencoding-modeを選んでインストールしたらinit.elに下の内容を追記しておけばいいです。
(add-hook 'sgml-mode-hook 'zencoding-mode) (add-hook 'nxml-mode-hook 'zencoding-mode)
他にはjavascriptの開発用にjs2-modeを入れているのとcoffeeモードにflymakeが効くようにしてありますが今回の内容では必要ありません。
追記121118: CoffeeScriptを使って開発する方法
最初にtitaniumコマンドでプロジェクトの雛形をつくります
$ titanium create Titanium Command-Line Interface, version 3.0.13 Copyright (c) 2012, Appcelerator, Inc. All Rights Reserved. Please report bugs to http://jira.appcelerator.org/ Target platforms: (android,ios,ipad,iphone,mobileweb) iphone App ID: com.example.tabsample Project name: tabsample [INFO] Creating Titanium Mobile application project [INFO] Project 'tabsample' created successfully in 276ms
プロジェクトのディレクトリに移動してalloyの雛形をつくります。
$ cd tabsample/ $ alloy new .__ .__ _____ | | | | ____ ___.__. \__ \ | | | | / _ < | | / __ \| |_| |_( <_> )___ | (____ /____/____/\____// ____| \/ \/ Alloy by Appcelerator. The MVC app framework for Titanium. [INFO] Installed "ti.physicalSizeCategory" module to tiapp.xml [INFO] Installed "ti.alloy" plugin to tiapp.xml [INFO] Deployed ti.alloy compiler plugin to plugins/ti.alloy/plugin.py [INFO] Deployed ti.alloy hooks to plugins/ti.alloy/hooks [INFO] Generated new project at: app
ここからEmacsを使っていきます。まずはapp/views/index.xmlを修正します。中身を全部消してzencodingでさくっと用意します。zencodingはC-returnで起動させて
Alloy>TabGroup>(Tab#tab icon title>Window#window title backgroundColor>Label#lable)*2
みたいにワンライナーで書けるので便利すぎです。
zencodingで大まかにスキャフォールドを用意したら、アトリビュートなんかを設定します。ちなみに画像はここから取ってきてapp/assets/iphone/に起きました。
<Alloy> <TabGroup> <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1"> <Window id="window1" title="Tab 1" backgroundColor="#fff"> <Label id="label1"> I am Window1 </Label> </Window> </Tab> <Tab id="tab2" icon="KS_nav_ui.png" title="Tab 2"> <Window id="window2" title="Tab 2" backgroundColor="#fff"> <Label id="label2"> I am Window2 </Label> </Window> </Tab> </TabGroup> </Alloy>
app/styles/index.tssはLabelの設定だけ。
"Label": { font: {fontSize:20, fontFamily:"Helvetica Neue"}, color: "#999" }
tssにはどのモードをアサインするのがいいのでしょうか？誰か知っていたら教えて下さい。(追記121117 json-modeあててみた)
プロジェクトのトップディレクトリで
$ alloy run
するとシミュレータが立ち上がります。素敵ですね。これで、雛形作ってシミュレータを動かすところまでできました。あとはapp以下を良い感じにいじってイケてるアプリを作るだけですね。
シミュレータが立ち上がるまでに結構待たされるのでストレスを感じますが、それは僕のmacが遅いからですね。はやく買い換えたい。
@k0sukeyにAlloyJadeという素敵なものがあることを教えてもらいました。Jade派の僕としては非常に惹かれるので後で試そうかなと思っています。