自分も今ではjavascriptとObjective-Cばかり書いているけれど、学生の頃にはPHPやperlでプログラムを書いてた。ちょうど、今のソフトバンクモバイルの前のボーダフォンの前のJ-PHONEという会社がカメラがついているケータイを初めて出したころ。シャープの栄光はここから始まった。いまではどんなケータイにもカメラがついているけど、出た頃はみんなケータイにカメラがついてるからってどうしろというんだ、と思ってた。数字はよく覚えてないけど、そのカメラは30万画素とかで96×72ピクセル、できあがるJPGファイルのサイズが10KBもないようなものだった。

ある日La Hortensia Azulのサイトで、画像つき掲示板みたいなのを作りたい、という話があった。そのころは今では過去のものになりつつあるMovableTypeみたいな伝統的ブロギングプラットホームもなかったので(あった？)、そういうものなしにサイトをデジカメ写真+テキストで更新しようと思ったらHTML+FTPで何とかしなければいけなくて結構な手間をかけないとできなかった。そのときに、その何に使うのかよくわからないケータイのカメラで写真を撮ってメールで送ることで、画像付き掲示板が作れるんじゃないかと思った。ケータイならHTML+FTPと違って誰でも使えるし。

これはいいんじゃないかと思って、後でヤプース！という、ケータイで写真を添付してメールで送ればサイトが更新される、というサービスを作った。今はどこのブログにもついている機能だけど、当時は大塚日記とあともうひとつ、なんだったっけ… 忘れちゃったけど自分の知ってる限りではふたつしかなかった。昔の話だから。

そういうサービスをやっていたので、ケータイではひたすら写真を撮っていた。今は自宅のベッドと職場の机との間を行ったり来たりしているだけだけど、その頃は学生だったのでおかねさえあればわりといろいろなところに行けた。行ったところで気になったものがあれば写真で撮って送っていた。初めて終電を逃したときに、この状況をリアルタイムでサーバに遅れるのに気がついたときには興奮した。今自分で書いていて、そんなあたりまえのことで、と思ったけど。今ならTwitterで普通にやってることもそのころやろうと思うとなかなか難しかった。誰も自分が常に見ているべきタイムラインなんてものも持っていなかったから書いたところで見てもらえなかったし。今なら誰でも、つまらないミーティングの隅に座っているときは”ミーティングがつまらない”とTwitterにpostする。それと同じように、自分もどんなときでも写真を撮ってpostしたいときには写真を撮ってpostしたかった。ミーティング中とか関係ないのと同じように。でもやっぱり電車の中で撮ったりすると周りの人が気にする。自分は何も撮ったらまずいものを撮ってるわけじゃないからわざわざ気にしないでほしい。だからケータイを買い換えたらまずバラしてスピーカをはずして音が出ないようにしてた。一度だけ、いつものようにスピーカを外してガワを閉じたら電波が入らなくなっていて焦ったことがあって、それ以来面倒になってやめちゃったけど。その電波が入らなくなるかと思ったケータイの構造の複雑さにびびったのもある。

そのころにライフスライスを知った。最近はTwitter上で子煩悩パパっぷりをみせつけてくれるヒマナイヌのkawaiさんの作品。細かいコンセプトとかは知らないんだけれど、10分に一度自動的に写真を撮ってくれるデジカメで(30分だったかも)、あとでPCに繋いで写真を取り出して並べればその日一日が見えてくる、というもので、それだけでもうロガーの血が流れている人にはたまらないデバイスだ。自分がライフスライスのことを知ったときにはもうライフスライスは手に入らなかった。なんでも記録しておきたくてしょうがない人が世の中にはわりといて、そしてそれはだいたい男なので記録することに執着するのは男だけなのだと思う。とにかくずっとライフスライスのようなものがほしかった。

3年か4年前、ボーダフォンのV702NK/V702NK2(Nokia6630)でならpythonでアプリが書けて、当然のようにカメラを操作できて写真が撮れることを知ったときにはすぐにヤフオクで落札してきてマイライフスライスを作った。しかも、なぜかアプリからだとシャッター音が出なかった。日本独自仕様だったのかな。6630はヤフオクで買ってもライフスライスよりもかなり高かったけど、そのぶん格段に画質がいいしMMCカードを刺せたのでいくらでも写真を撮れてさらにBluetoothまで繋がるというハイテクライフスライスを作れた。そのpythonコードも写真もどこかにいってしまって見つけられないけど、わりと面白かった。ただ、自分的にはやっぱりリアルタイムでサーバに送りたかった。今見たものは今送りたい。でもボーダフォンのパケット定額プランは、アプリのパケット通信は定額の枠外だったので、とてもリアルタイムにサーバに送ることなんでできなかった。

それで、そんな自分から言わしてもらえれば、teitenはもったい。せっかく、やっと、いろんな人があきらめてきたものが今すべてそろっているのに、なぜカメラを固定しなければいけないのか。iPhoneアプリであれば通信も定額、カメラも使いたい放題、AppStoreで販売もできる。審査パスできるのか知らないけど。とにかく、長年の夢であったリアルタイムライフスライス、自分が今、目にしているものを同時に多数の人に見せることができる環境があるのに、なぜカメラが自分が見ている方向ではなく、自分を向いているのか。自分はそれが許せなかった。だからNorio Nomuraさんのiphonetestのコードを夏ライオン for iPhoneの裏側にくっつけて暇をつぶせるようにして、自動的に写真をteitenに送り込むものを作った。ゴールデンウィークの終わりくらい。いまならそんなことしなくてもnotificationでいけるのかもしれない。

これで自分のteitenは自分の外にあるカメラではなく、自分というカメラのteitenになった。自分は一度目にしたものはもう自分のものだと思ってる。もちろん、学生の頃に盗撮、というほどではないけれど、盗撮だと言われかねないことをやっていたから、何人も、その承諾なしに、みだりにその容ぼう・姿態を撮影されない自由を有し、警察官が、正当な理由もないのに、個人の容ぼう等を撮影することは、憲法一三条の趣旨に反し許されないという判例があるのは知ってる。でももうみんないつだってケータイを持っていて、そのカメラがCCDの電荷をメモリに移動させているかどうかなんてわからない。自分みたいなどうしても記録を残したいロガーがアプリをつくって常にバックグラウンドでカメラに写ったものをメモリに書き込み続けているかもしれない。だから自分は逆にいつだって、人が持っているケータイは自分を撮影してるんじゃないか、と思って怯えている。思ってないけど。たまに姿勢がいい人が顔の真正面までケータイを持ち上げて見ているときにはそう思う。あのケータイは俺のことを撮影している、と。iPhoneはストラップをつけるのがめんどうだったから、地面ばっかり写ってたけど、Nokiaの6630でやっていたときはストラップで首から下げていて使っていた。そのNokiaのケータイの裏でずっとpythonのコードが写真を撮影してメモリに書き込み続けているけれど、そのことはメニューにあのpythonの気持ちのよくないヘビのアイコンが出ていて、それがなんかよくわかんないスクリプトを実行していて、そのスクリプトはカメラからデータを読み出してメモリに書き込みまくっている、ということは、pythonのコードが読めないとわからない。そう思うと、ケータイのカメラが動いていないなんて誰にわかるだろうか？動いていないように見えても実は裏でアプリがカメラに写ったデータをflickrにアップロードしまくってるかもしれない。

Memory Plus 生ログ – 気紛 – きまぐれ -を読んでくれたら、最先端のちょっとおかしいロガーたちはそのようなことを当たり前のように考えて(奇異の目で見られることをも厭わずに)やっているっていうのもわかる。

だから、少し前にTumblrに流れてきたanalog | 赤の他人の醜態を写メする悪意のない人々の恐ろしさを読んだときも、この話自体は犯罪で捕まるけれど(電車内で高校生の足を撮影していた人が有罪になっていて、その判決文によれば相手に羞恥を覚えさせることがいけないのだ。泥酔している男が羞恥するのかには議論の余地もあるが)、話はそう単純でもないと思った。この投稿はtumblrに誰かがquoteしているのをdashboardで読んで知った。その誰かにtumblrの他の人が書いたコメントは、無理な合理化をしようとするものも多かったが、自分はperiscopeさんが書いていた日本の社会は、すでに各個人に記録端末が行きわたっているの部分に共感を覚えた。

前述の何人も、その承諾なしに、みだりにその容ぼう・姿態を撮影されない自由を有し、警察官が、正当な理由もないのに、個人の容ぼう等を撮影することは、憲法一三条の趣旨に反し許されないという判例を根拠に、監視カメラの合法性を問う声もある。警察が設置する監視カメラはともかく、商店街などが設置する監視カメラは法的にはきわどいので、犯罪捜査に協力するためのみに映像を利用するということになっていると4年ほど前に読んだ(警視庁のPDF資料だった気がするが見つけられなかった)。しかし、全自動で常に周囲を撮影することが容易になった結果、全自動で撮影することを前提にしたサービスが生まれてきている。

先日ひとまずグーグルの「ストリートビュー」は違法にあたらず–総務省の研究会が見解:ニュース – CNET JapanということになったGoogle Street Viewはその撮影結果が無料で公開されていて公共の福祉に資するのだと抗弁することも可能だろうが、ジェイマジック、画像解析技術で屋外広告を「誰が、いつ、何人見たか」測定する新サービス:ニュース – CNET Japanのようにカメラを設置した側にしか利益のないものも現れている(これは映ったデータをリアルタイムで解析し、撮影データは保存されないから”撮影”にはあたらないのかもしれない)。

最後にteitenのオフィシャルなFlashがサーバに送信しているデータの形式だけ解析したときのこと。はじめてTwitter / IEIRI Kazuma: Shotted: hbkr http://teite …経由でteitenを見たときに、これが自分がずっと求めていたライフスライス記録サービスだと確信した。どうでもいいけどshottedじゃなくてshotだとも思った。だからあのでかいコンピューターに繋がれた可哀想なシベリアンハスキーのようなカメラではなく、自分が見ているものといつもつねに同じものを見ることができるカメラからデータを送り込めるようにする必要があった。はじめはperlでpostするスクリプトを作った。gistにteiten hacksという名前でpostしてるスクリプトだ。

teitenのオフィシャルFlashがアップロードしているデータを少し見てみればわかるんだけど、送信しているデータの最後にh=120&w=160というパラメータがある。この120×160というサイズはteitenで表示される写真のサイズと同じだ。これを見たときに自分はもう終わったようなものだと思った(あとでいかに自分が愚かだったかを知ることになる)。これでteitenに自分が見たもののログを送り込めると。でもteitenはそんなに甘くなかった。160×120で各ピクセルをRGBの順で%02xでフォーマットしてteitenに送信してもどうしても画像が乱れる。アナログのテレビでいう走査線がずれたような画像がアップロードされてしまう。

でも、ここで学生のときにあったなんとか実験第2みたいなののパートナーだったやつから聞いた話が役に立った。彼は実験の間に、ゲームのディスクからデータを読み出してきて、そのどうなっているかわからないデータをうまいこと人間が視覚的に理解できるキャラクタのビットマップに再構成するまでの話をしてくれた。もうteitenのことは忘れよう、諦めかけたときにそのキャラクタを再構成する彼の話を思い出した。キャラクタはたしか格ゲーのキャラだった。画像が規則的にずれるときは画像の幅が間違っている、そう彼は教えてくれた。

自分は改めてteitenのFlashが送信しているデータの数を数えてみた。驚いた。160×120だと19,200ピクセルのはずなのにteitenのFlashは19,481ピクセル分のデータを送信していた。いったいこれはどういうことだろう。それでも自分は19,481という数字はピクセルの数と一致しているはずだと考えて素因数分解してみた。中学校の数学で習う、ひとつの数字をそれ以上余りなく割り算できない整数にまで細かくするやつだ。教科書にも役に立つことは載っている。ただみんなそれが役に立つような場面にいることに気がつかないだけだ。素因数分解は格ゲーのビットマップやteitenの画像がずれて困るときに問題解決の糸口を与えてくれる。

素因数分解の結果を見て自分はすぐに気がついた。19,481は161×121だった。コードを書き直して縦を121ピクセルにしてデータを送り直すとteitenはこちらが送ったつもりの画像を表示するようになった。h=120&w=160はなんなのかとかcolorsのところはもっとバイト数節約できるんじゃないかとかそんな細かいことはどうでもよかった。

数日後、開発者向けに公開されていたiPhoneOS3.0をインストールしたら、いろいろなアドレスが変わったようでinteitenには何も映らなくなった。

というわけでgist: 138764 – GitHubみたいに書けばUIImageをteitenに送りこめるので誰か作ってください。

名前からしてURLに使えない文字をエスケープしてくれることを期待できそうなが名前に反してURLに使えない文字をエスケープしないからです。
Tumblr関連アプリではiviewがはまり、tumbladdictもはまり、tumblr gearもはまった、メールアドレスに+が入っているとログインできないバグの原因は(たぶん)この思わせぶりな名前のメソッドのせいです。実際のところこのメソッドは

(0×20)"#%><[\]^`{|}

しかエスケープしません！つまりRFC2396で使用できない、もしくは予約語となっている文字である

$&+,/:;=?@

をエスケープしてくれない全く使いみちのないメソッドです(たしかにドキュメントにはRFCのことには触れずにただエスケープするとしか書かれてないけど)。

解決策

Google Code SearchでCFURLCreateStringByAddingPercentEscapesを検索するとたくさん出てくる

NSString* encodeURIComponent(NSString* s) {
    return [((NSString*)CFURLCreateStringByAddingPercentEscapes(kCFAllocatorDefault,
        (CFStringRef)s,
        NULL,
        (CFStringRef)@"!*'();:@&=+$,/?%#[]",
        kCFStringEncodingUTF8)) autorelease];
}

こういう方法が定石のようです。これでもエスケープすべき文字すべてをエスケープすることができるようになります。

こういうCocoaプログラマだったらいまさらみたいな常識、楽して身につける方法ないでしょうか。

特に

due to objectinable contents in tumblr test account.

の、followしてるひとから不適切なコンテンツがreview用のテストアカウントのdashboardに流れてきてrejectされる、というのにはうけました。自分もそういうことがないようにiviewのreview用のテストアカウントは誰もfollowしていません。

自分もiviewを一番はじめにsubmitしたときはApple側の準備不足と自分の間違いとで4回submitしてやっと通りました。アプリをreviewしてもらうためにiTunes Connect(アプリをsubmitするサイトの名前)に繋ぐとアップグレードしていたりするのを見て、むこうも今作ってるんじゃん… ほんとに7/10に立ち上がるのか？と思ったりしてました。

2007.6.28 1回目

reviewするのにテストアカウントが必要だからメールで送ってね、といわれてreject

このときはまだreviewに出すときに記入する項目にテストアカウントというのがありませんでした。

2007.7.3 2回目

はじめにログインしたときに落ちる&新しくアカウントを作ってログインすると落ちるからreject

これはiviewのバグを指摘されてるわけですが、年間99ドルしか払ってないのに新しくアカウントを作ってテストしたりするような手間をかけてレビューをしている、というのに驚きました。逆に考えると、有料のアプリならそれでもいいだろうけれど、Appleの利益にならない無料のアプリを有料のアプリと同じようにAppStoreで配信させてくれる、というのはよく考えると寛大です。

2007.7.6 3回目

AppStore用のprovisioning profileじゃないやつでビルドされてる、といわれてreject

これも単純にこっちのミスですが、そんなのアップロードしたときにサーバでチェックしてrejectしたらこっちもそっちも手間が減ってハッピーじゃんか！と思ったら、いつ頃から間違ったProvisioning profileだとアップロードしたときにエラーを出すように変わっていました。

2007.7.7 4回目

Ready for sale!

こうして見てみると、この頃のレビューのサイクルは速くまわっていて、4回submitしても2週間くらいしかかかっていませんでした。7/10がAppStoreのオープンだったのでそれにあわせてレビューもフル回転させていたのかも。

Reject Database for iPhone Developerに行くと理不尽なreject理由をもっと読むことができます。

アイコン

新しいバージョンではまずアイコンが変わりました。ある日メールを見たらオランダにあるSoflomoという会社のJustus Brunsというひとから”iviewのアイコン作ったげるよ”って書いてある素っ気ないメールが来ていて、なんだこれと思ったけど作ってもらうことにしました。正直なところはじめはtumblrと関係なくなっちゃったしあんまり気に入らなかったけど、今はすごくいいと思ってます。tumblrでreblogするアプリというより、いろんなところのいろんなのをみられるアプリになっているのでreblogアイコンはtumbladdictのようには似合わないのです。

UI

Justus Brunsは熱い男で、アイコンを作ってもらうことにしたら、スカイプのアカウントを教えろ、話がしたい、というので、skypeもいいんだけどJustus Bruns on Vimeoにあるビデオの英語が聞き取れないからメールの方がいい、と言ったのにも関わらず、数日後に熱く語るビデオが送られてきました。わかんないって言ったのにー、と思いながら見たけどやっぱり半分くらいしかわかりません。でもなんか、フリックフリックで動かすのがいい、みたいなことを言っているのはわかりました。
そのときはまだthree20を知らなかったし、だいたいフリックするよりボタン押す方が絶対見やすい、と思っていました。でもまあ試しにやってみるか、と思ってやってみたら、意外と悪くありませんでした。
まえのiviewだと画面の端にあるボタンを押さないといけなかったのでiPhoneを片手で持って使おうとすると、人にぶつかったりすると絶対iPhone落とすような不安なかんじでしか持てなかったのが、フリックだとiPhoneをしっかり手で持っていても動かせて歩きながらでも安心して使えます。あとひとにこんなの作ってますってiviewを見せると必ずフリックして、”こうやっても動かないの？”って言われるし。ボタンの方がいいんだよ！と思うけど、絶対”こんなのiPhoneじゃない”と思われてると思ってました。

でも、寝ながら使うとフリックするのって難しくて、ボタン押す方が楽だったので、歩いてないときには前と同じように使えるようTwitter / Motohiro Takayama: iview で画像をふぁぼるタップ数が3倍に増えてむーんとしているところというのといっしょに次で改善しようと思います。

スライドショー

iviewを人に見せたときに必ず言われるののもうひとつが”スライドショーできないの？”でした。だいたいスライドショーなんかはじめに何回かいじって楽しんだらもう使わないいらない機能だと思ってたけど、ひとのうちに遊びに行ったらドックに刺さってるiPhoneでスクリーンセーバーみたいなのがずっと動いてるのを見つけて、なるほどFFFFoundをスクリーンセーバーがわりにずっと流しておしゃれっこを演出っていう見せアプリを狙うのもありかなと思ってつけました。作るの簡単だし。もちろんFFFFoundじゃなくてTumblr dashboardをスライドショーにすることもできます。

キャプション

USのAppStoreのレビューだったかどこかに、なんでキャプション1行しか出ないの、みたいなのがあって、それは自分がUIViewの大きさを動的に変えたりするのに苦手意識を持っていたからだけど自分でフリック実装したらUIViewの大きさを変えるのもHTMLでdivのサイズ変えるのも変わらないくらいにしか難しくないってわかったので最大4行までキャプションが表示させることにしました。地味に気に入ってる新機能です。

Style.comのアプリ

キャプションのところはdubstronicaのひとに教えてもらったStyle.comのアプリみたいにしたかったけどデザインが決まらなかったので現状維持になりました。

このStyle.comのアプリは画像ビュワー系のアプリでは最も完成度が高いので、画像を扱うアプリを作っている方はチェックしておいて損はないです。Chanelのアプリは有名だけど意外と出来が悪いしThree2.0のやつも拡大してフリックしたときに飛んでいってくれないし(ソースはあるから自分で書けばいいけど)、あと地味だけどステータスバー非表示だとナビゲーションバーがずれる(ref. Fullscreen UIView with Status bar and Navigation Bar overlay on the top – Stack Overflow)とか(Three2.0もずれます)そういうしょうもない技術的な問題が全部解決されています。それだけでなく、見ている途中で320×480全面画像広告が出てきたり、そのインプレッションを測っていたり(コードのシンボル見るとそういうのが出てきます)と、アプリのつくりも参考になります。流れてくるコンテンツも、このスーツとこのつ前のスーツなんか違うの？みたいなのとかあったりするような面白さで、さらに解像度も高くて楽しめるいいアプリです。(ref. 『Style.com』はiview好きにおススメしたいiPhoneアプリ｜拝むように弾いてくれ)

(iPhoneOS3.0だとステータスバーとナビゲーションバーが重なって表示されちゃいました)

まとめ

UIが変わって犠牲になったところもありますが、前の方がよかったところ(ボタン+1タップで操作が全部完結するところ、画面を横にできるところ)は再度取り入れていれていこうとおもいます。

あと海外のユーザから、iPhoneに写真を保存しても8枚に2枚しか保存されてない、全然保存されない、というバグがあるといわれてるのですが、自分のiPhoneだと全然起きなくて困っています。もしお手持ちのiPhoneでも起きるようでしたら@kuで教えてください！

その他

iview 0.9 screenshots

ファイル

Httpd.m
Httpd.h
console.html

使い方

JSCocoaのiPhone用インタラクティブコンソールと同じです。

[inspect view tree]を押すと、こういう状態のiPhoneのビュー構造が

Firefox上でHTMLで再現されてこうなります。

ビューのインスタンスがUIImageViewであれば画像が表示され、UILabelやUITextFieldであればテキストが表示されます。

Firebugを使えばビューの階層構造もチェックできます。

このアプリの目玉は、彼等の楽曲がフルレングスで8曲分入っている事でしょう。
wigglin’ bloggin’ » Death Cab for CutieのiPhoneアプリが登場

Death Cab for Cutieがはじめから終わりまで聞ける8曲入りiPhoneアプリを無料でリリースしたっていう話でした。iPhone/iPod touchなしでも、アプリをダウンロードしてきて中身を取り出せば聞けるし、アプリ起動しないと聞けないのって不便なので中身を取り出しましょう。やり方はiPhoneアプリの中身を見る方法とおんなじです。

mp3ファイルだけを取り出す

AppStoreでDeath Cab For Cutieをダウンロードします。ダウンロードしたアプリは ~/Music/iTunes/Mobile Applications に保存されているので、そこからDCfC 1.0.ipaをコピーしててきとうなところに持ってきましょう。拡張子は.ipaだけど実際にはただのzipファイルなので拡張子をzipに変えれば普通に開けます。
開くと中にPayloadというフォルダがあって、その中にアプリの本体DCFC.appが入っています。

これをFinderでパッケージの中身を開くで開けば、アプリから96kbpsのmp3ファイルを取り出せてiPhoneのアプリを動かさなくても聞けるようになります。

あとべつにこんなことしなくてもふつうにDeath Cab For Cutie :: Mediaから(違う曲だけど)5曲ダウンロードして聞けるし(おんなじ人が参加してたりする)Postal ServiceはMP3だけでなくPVもダウンロードできますよ！

もともと自分がPostal Serviceから知りました。それはまだ名前がDemocracyだったころのMiroに入っていたTelemusicvisionでDVD画質のsuch great heightsのPVが流れていたのがきっかけ。MiroはFirefoxとおんなじ仕組みをベースにRSSリーダとメディアプレイヤーとBitTorrentが一緒になってるデスクトップアプリでWindows, OSX, Linuxで動きます。ただ自分が使ってたころはちょう重くていまいちだったんですけど、そういうおもしろいプラットホーム上にPVを流しているところが印象に残りました。iPhoneアプリで曲配信、ハイテクつながり、というわけでこれをきっかけにみなさまもどうぞ。

ちょうど日本の名古屋・東京・大阪公演があるそうです(もう、すぐだけど…)。
Death Cab For Cutie / デス・キャブ・フォー・キューティー　最新情報 ワーナーミュージック・ジャパン – Warner Music Japan

今日、帰宅途中に

@shachi @cqa02303 photoアルバムじゃなくて、ftpやhtmlサーバを内臓したカメラアプリっていいんじゃないかと思うですよ
Twitter / fladdict: @shachi @cqa02303 photoアルバ …

というのを読んで、そういえば今すぐ日本の携帯で動かせるウェブサーバ CeHttp – bits and bytesでためした限りはSoftbankだと外からも繋げられたから、もしかしておなじSonftbankならiPhoneもいけるかもー、と思ってためしてみたらいけましたよ！！

JSCocoaのiPhone用インタラクティブコンソールからHTTPサーバ部分だけはがして持ってきて、まずiPhoneのグローバルのIPを確認してからiPhone上でHTTPサーバを組み込んだアプリを起動してFirefoxからADSL経由で繋いだら、ふつうに外側からでも繋がりました。

おそらくiPhoneのアプリは動作している権限の関係でポート80は使えないんですが、ポート38880なんてへんなポートで外側から接続することができました。おそらく全部のポートが繋がるんじゃないでしょうか。

これを利用してHTTPで繋いだ瞬間のカメラの写真を送ってくれるお手軽ライブ(?)カメラとかが作れますよ！

JSCocoaのページからリンクされたので日本語版をこっちにうつしました。

iviewで使っているUIViewのtransformがなかなか思い通りに操れなくて困っていて、だったらアプリにSpiderMonkeyを入れてHTTP経由で通信して試行錯誤できるよにすればいいやとUIMonkeyというのを作り始めたところで、既にそういうのがいくつかあるのをJohn Resig – JavaScript iPhone Appsで知ってショックーというかアホだったのでJSCocoaベースにちょこっと書き直しました。viewの階層構造やサイズを調べるのに便利です。

ファイルのコピー

svn checkout http://jscocoa.googlecode.com/svn/trunk/ jscocoa-read-only

してjscocoa-read-only/JSCocoa/JSCocoaの中身を全部自分のプロジェクトにコピーします。class.jsだけプロジェクトに追加した時に、ただのリソースファイルとして認識してほしいんだけどソースファイルとして認識されてしまうので、いったんclass.gifという名前でプロジェクトに追加して後から名前を変えたらうまくいきました(どうやるのが正しいんでしょう…)。

JSCocoa本体のほかにHTTPサーバのためのHttpd.m, Httpd.h, console.htmlを追加してください。console.htmlはCopy Bundle Reesourcesに入れてアプリケーションに組み込まれるようにしてください。

*_Prefix.pchの修正

JSCocoa用のヘッダファイルを追加します。
今回はインラインでUSE_JSCOCOAをdefineしていますが、デバッグビルドの時だけdefineするようにしたりすればいちいち書き換えたりする手間がなくなります。

#define USE_JSCOCOA 1

#if USE_JSCOCOA
  #define JSCocoa_iPhone
  #include "JavascriptCore.h"
#endif

main.mの修正

JSCocoaのサンプルコードiPhoneTest2とおんなじようにmain.mで初期化します。クラスHttpdは自分で作ったなんちゃってHTTPサーバです(最後参照)。

#if USE_JSCOCOA
	// Fetch JS symbols
	[JSCocoaSymbolFetcher populateJavascriptCoreSymbols];

	// Load iPhone bridgeSupport
	[[BridgeSupportController sharedController] loadBridgeSupport:[NSString stringWithFormat:@"%@/iPhone.bridgeSupport", [[NSBundle mainBundle] bundlePath]]];
	// Load js class kit
	id c = [JSCocoaController sharedController];
	[c evalJSFile:[NSString stringWithFormat:@"%@/class.js", [[NSBundle mainBundle] bundlePath]]];

	[[[Httpd alloc] initWithPort:38880] autorelease];
#endif

リンクするライブラリの追加

JSCocoaは関数呼び出しにlibffiを使っているので、プロジェクトの設定を開いてOther linker flagsに-lffiを追加します。

CGAffineTransformの追加

JSCocoaの中にiPhoneでだけ使われる構造体を定義しているiPhone.bridgesupportというXMLファイルがあります。これにCGAffineTransformを追加します(CGAffineTransformを使わないのであれば必要ありません)。

せっかくXMLファイルなのに構造体メンバを"で区切ってしかもそれを実体参照で書くという酷い仕様。下の行をてきとうにCGSizeを定義している下くらいに追加します。

<struct name='CGAffineTransform' type='{CGAffineTransform=&quot;a&quot;f&quot;b&quot;f&quot;c&quot;f&quot;d&quot;f&quot;tx&quot;f&quot;ty&quot;f}'
type64='{CGAffineTransform=&quot;a&quot;d&quot;b&quot;d&quot;c&quot;d&quot;d&quot;d&quot;tx&quot;d&quot;ty&quot;d}' />

ヘッダファイルからマシンフレンドリーな形式で生成して実行時コストを下げるか、ヒューマンフレンドリーにして手で書きやすくするかどっちかにするべきだと思います。

ブラウザで接続

そうしたらあとはアプリをふつうに起動すれば http://localhost:38880/ でアプリの中のJSCocoaに接続できるので、好きなタイミングでブラウザからJSCocoaにjsのコードを送り込んでアプリを操作できます。

以下iviewでLifeの写真を表示してのテスト。

JSCocoaではObjective-Cのクラス名、メソッド名でjsからもアクセスできるので、UIApplication.sharedApplicationからアプリ内のオブジェクトにアクセスできます。

メインウインドウのアルファを0.2に変えると


背景が透けて、暗くなります。

CGAffineTransformで横に3倍引き延ばしてちょっと右に100ピクセルずらすと



こうなります。

こういう試行錯誤や、使ったことのないクラスを触ってみるときに、Objective-Cのコードの上でやろうと思ったら毎回コンパイルし直す必要があるので時間がかかりますがjavascriptからできると細かい調整がすごく楽です。

View Tree Walk

takuma104さんが前に

iPhoneにWindowsでいうSpy++みたいなのがほしい。viewの階層構造がわかるやつ。
Twitter / takuma mori: iPhoneにWindowsでいうSpy++みたいな …

と言われていたのを思い出して、UIApplication.sharedApplication.subviewsからviewを列挙してjavascriptオブジェクトとしてみられるようにしてみました。HTMLで視覚的に再構築できればベストなんですけど、とりあえずFirebugのコンソールで値を確認できるようにしてみました。inspect view treeのリンクをクリックすると下の画面みたいにしてviewの階層構造を見ることができます。

JSCocoa感想

JSCocoaがNSArrayを自動的にjavascriptの配列として扱ってくれるのですが、これがあんまりうまくいってないみたいでlengthの値が入ってなかったりするとか、そういう微妙に変なところを配慮してあげればわりと使えそうなかんじでした。
自分が普段SpiderMonkeyにどっぷり浸かっているのでunevalがないとかE4Xがないとか分割代入できないとかもありましたがそうでなければふつうにjavascriptです。

I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa via John Resig – JavaScript iPhone Apps. I abandoned my project and rewrited my codes on JSCocoa.

Now it works on the top of JSCocoa. It’s very helpful especially for inspecting the hierarchy of the view tree or size of the views etc.

How to setup

Follow the steps below to setup JSCocoa interactive console.

Copy the files

First of all, you need to check out JSCocoa files.

svn checkout http://jscocoa.googlecode.com/svn/trunk/ jscocoa-read-only

After checking out complete, copy all of files existing under jscocoa-read-only/JSCocoa/JSCocoa and import them into your project.

I got into trouble on importing class.js. XCode take it as an source file which is need to be compiled while I want to treat it as a simple resource file. I solved this problem by renaing it as class.gif, import it to the project, and rename it again as class.js(please tell me the right way to do that if you know).

In addition to JSCocoa files, you need some files for the console. Please download and import them to your project. Httpd.m, Httpd.h, console.html.
Please remember to console.html add to the list of Copy Bundle Reesources to ensure the files is copied into your aplication binary file.

Add header files to *_Prefix.pch

JSCocoa requires some header files.
Open your *_Prefix.pch file and add some lines below.

#define USE_JSCOCOA 1

#if USE_JSCOCOA
  #define JSCocoa_iPhone
  #include "JavascriptCore.h"
#endif

Of course, you can define USE_JSCOCOA in the project settings instead of hard coding in the pre-compiled header.

Add some codes to your main.m

Initializing JSCocoa in the same way that of iPhoneTest2 which is distributed with JSCocoa.
Class Httpd is a so-called http server which is implemented in Httpd.m and Httpd.h.

#if USE_JSCOCOA
	// Fetch JS symbols
	[JSCocoaSymbolFetcher populateJavascriptCoreSymbols];

	// Load iPhone bridgeSupport
	[[BridgeSupportController sharedController] loadBridgeSupport:[NSString stringWithFormat:@"%@/iPhone.bridgeSupport", [[NSBundle mainBundle] bundlePath]]];
	// Load js class kit
	id c = [JSCocoaController sharedController];
	[c evalJSFile:[NSString stringWithFormat:@"%@/class.js", [[NSBundle mainBundle] bundlePath]]];

	[[[Httpd alloc] initWithPort:38880] autorelease];
#endif

Add libffi

JSCocoa using libffi to call Objective-C functions.
OPen your project settings and add -lffi to Other linker flags.

Add CGAffineTransform(If you need)

iPhone.bridgesupport which defines the structures used by only iPhone SDK. If you want to manipulate CGAffineTransform through JSCocoa, add the difinition of CGAffineTransform to the file.

iPhone.bridgesupport is a XML file, but it’s too annoying to write it by hand. You have to separate the members with ". I think it would be nice to generate the file in machine-friendly format to decrease the run-time CPU cost or to make it more human-friendly format to allow humans to write it by hand easily.

Add this definition below to around the next line of that defines CGSize.

<struct name='CGAffineTransform' type='{CGAffineTransform=&quot;a&quot;f&quot;b&quot;f&quot;c&quot;f&quot;d&quot;f&quot;tx&quot;f&quot;ty&quot;f}'
type64='{CGAffineTransform=&quot;a&quot;d&quot;b&quot;d&quot;c&quot;d&quot;d&quot;d&quot;tx&quot;d&quot;ty&quot;d}' />

Connect to JSCocoa through browser

Just launching your application in the iPhone simulator and now you can connect to JSCocoa which resides in it.
Open http://localhost:38880/ and you can send any javascript code to manipulate your application through JSCocoa at any time.

I’ll show you some tests with iview and a photo from Life magazne.

JSCocoa allows you to access Objective-C classes and methods. So you can access the objects in your iPhone application through UIApplication.sharedApplication.

Now change the alpha value of the main window.


the background of the main window become transparent and the screen gets black(because background color is black).

Streching Y-axis three times and moving by 100pxices.

Writing in Objective-C consumes huge amount of time that using the classes you are not familiar with, adjusting animation parameters and so on. Bacause it have to be compiled. But with JSCocoa, You don’t need to compiled it, and you can bedone it thorugh trial and error without recompile. It’s very nice.

View Tree Walk

takuma104(who is a developper of Natsu Lion for iPhone that is a swift, neat, open-source twitter client) said on twitter,

iPhoneにWindowsでいうSpy++みたいなのがほしい。viewの階層構造がわかるやつ。
Twitter / takuma mori: iPhoneにWindowsでいうSpy++みたいな …

It means “I need a tool for iPhone like Spy++ of Windows. Shows me hierarchy of the views”.

I remember the tweet and write small code that enumerates all views from UIApplication.sharedApplication.subviews. You can see the geometric values through Firebug console by clicking the inspect view tree link. I think its more useful if it reconstructs the hierarchy in the same visual HTML elements(but not implemented at this time).

My impression of JSCocoa

JSCocoa is very useful After I got familiar with some weird behaviours like that javascript array object which is auto translated from NSArray by JSCocoa does not have length.

and if you unfortunately have get used to SpiderMonkey like me, it makes hard javascript coding on JSCocoa which is based on JavaScriptCore of WebKit that does not have uneval, E4X, destructuring assignment and so on.
yes, i know its not JSCocoa’s fault. it’s my fault who get used to the features only in SpiderMonkey =)

Great thanks for people behind JSCocoa.

ImageMagickのインストール。

sudo port install ImageMagick

縦方向だけ微妙に中心からずれているので -6 で補正。

convert Picture\ 1.png -gravity Center -crop 320x480+0-6 p1.png

さらにそれを半分にしたければ

convert Picture\ 1.png -gravity Center -crop 320x480+0-6 -size 160x p2.png

これが

こうなって

半分になる。

参考

ImageMagick、正方形のサムネイルを作成する – FAX