火曜日, 2月 17, 2015

Firefox OS WoTハッカソンに参加してきた

2/14-15に行われたFirefox OS WoTハッカソンに参加してきました。

申し込んだ時点で70名の募集のところ既にいっぱいで、補欠でしたが数日でキャンセルが何人か出て、繰り上がりで参加出来ることになりました。
終わった今、改めて見てみたら50位ぐらいまで繰り上がっていたので、こういうのは諦めたら駄目ですね。

アイディア出し

初日は企画コンセプトやWoTの概要説明から始まり、アイディア出し&チーム決め。
最終的には、以下にまとめられているものを作ったわけですが、
http://fabble.cc/dobogo/pitagoraxsugoroku
いきなり「要件定義」に書いているような立派な案が出たわけではなく、お菓子を食べつつ、光らせたいとか、NFCを使いたいという、使いたいものベースで、だらだらとホワイトボードに書き付けていました。
途中でゲーム的なものや動きのあるものが作りたいという流れになり、すごろくというアイディアと、ピラゴラ装置というアイディアが発生。それらを組み合わせた「いろんな仕掛けのあるすごろく」になっていきました。
当初、そのすごろくはFx0を持った人間が歩き回るという話になっていましたが、どこかのタイミングでロボット(この時点ではふぉくすけの存在は無く、車に乗せたFx0)に移動させるというアイディアが出てきて「すごろく」と「ロボット」の二本立てとなりました。
最終的に、今回はインパクト重視で「ロボット」に注力し、すごろくは余力があったらという方針になりました。
ふぉくすけが採用された経緯が記憶からすっぽり抜けていますが、他のチームの方から、ふぉくすけのヌイグルミをお借りして、ふぉくすけロボという具体的なゴールが昼食前には完成しました。

設計と実装

ロボットの方針が出たあたりで、ざっくりとどういうモジュールが必要かと、それぞれの間のやり取りの図を書き、それを元に役割分担をしました。私はhttpd.jsを使って、Fx0内で動くサーバーの実装を担当しました。
ふぉくすけロボは、足と尻尾はmbedで制御されているのですが、その指示はFx0からHTTPで、mbed側のサーバに飛ばしています。私が作ったのは、リモコン側からのリクエストをそのままmbedに飛ばす、一種のリバースプロキシというわけです。
とりあえずリモコン担当の方、mbed担当の方と、ざっくり必要そうなAPIを相談し実装。
mbedが制御しない、表情制御については、並行で作られている表情プログラムを呼び出す事になるので、一旦呼び出し口だけを用意しておきました。

実装そのものは大したことが無いのですが、テストが大変でした。ひとまずFx0にインストールしてみて動かしてみたのですが、デバッガにソースが出てこない。console.logも出てこない(確か)。
仕方がないので、FirefoxのWebIDEからシミュレータを起動して、そこでテストしようとするも、バージョン2.1以降(unstable)でないとやはりソースが出てこない。
やっとデバッガにソースが出たと喜んだものの、コールバック内のブレイクポイントは機能しないという状況でした。Flame(fxos ver3.0?)をお借りして試してみたところ、シミュレータと同様の状態だったため、console.logでプリントデバッグで進めました。

また、初日はネットワーク環境が不安定で、テスト用の無線LANになかなか繋げられず、mbed側サーバーとの疎通が安定して出来るようになったのは2日目になってからでした。
今回のハッカソンはWoTがテーマになっていますが、実際のWoTの現場でも、安定したネットワークの確保は課題になると思います。

もう一つ大変だったのは、現状のhttpd.jsのパスHandler機能、要するに静的ファイル配信の機能がFx0でしか動作しないことでした。リモコンは静的なHTML+JSで書かれているので、これをロボット側のFx0から配信しようとしたのですが、シミュレータやFlameでは動作せず、しばらくたってFx0で試して、初めて機能する事を確認しました。

そんな新しい端末やOSらしいトラブルに見舞われながらも、何とかかんとか、ふぉくすけロボを完成させることができました。

デモ

完成したふぉくすけロボですが、mbed側は、mbed + 無線LANモジュール + モーター*3という構成のため、非常に電気を使うようです。さらに、それを乾電池だけで動かしているため、下手に動かすとデモが出来ない恐れがありました。
それでも、デモの数分間、ふぉくすけロボは頑張ってくれて、おかげさまでARM賞もいただけました。

Firefox OSに対する感想

Firefox OSは使う分には、特に問題無いレベルにあると思います。少なくともFx0やFlameは、スマートフォンとして普段使うのに必要十分な動作をしていました。
開発環境も、若干使いづらいところはあるものの、今後改善していくだろうし、何よりWeb技術でアプリが作れるという特性は、潜在的な開発者数が、AndroidやiOS以上に存在しているという事を示しています。httpd.jsは普通のアプリにはまず使われないと思われるので、今回ほどの苦労はしないはずです。

また今回はFirefoxOSの端末としてFx0を使うことが、ある種の縛りとしてあったのですが、他のチームの発表を見ると、Fx0ではなくOpen Web Boardを主にしたものもいくつかあり、スマートフォン以外の応用可能性が、Firefoxには十分あるように思います。

ふぉくすけロボの発展

ふぉくすけロボはその動きをリモコンに頼っていたわけですが、リモコンからは単にHTTPでリクエストを飛ばしているだけです。つまりロボのFx0にHTTPに投げられる存在であれば、何であれふぉくすけロボを操作出来るわけです。
今回作れなかったすごろく側ですが、センサーとHTTPクライアントを埋めた壁、床を作ることで、すごろくがふぉくすけを動かす仕組みなんかが作れると、わけがわからなくて良いと思います。

それと懇親会の最後で、ふぉくすけが出た状態のFx0をお面のようにしたのですが、カメラAPIと組み合わせて、任意の顔をお面にするアプリが作れるなあと考えていました。
問題はFx0もFlameも持っていないことなわけですが。
今後機会があれば作りたいです。

金曜日, 1月 23, 2015

天丼屋さんを教える

今回教えたのは天丼屋さんの場所。 平日でもお昼には行列が出来るくらい有名で、一度行ったことがあるけど確かにおいしかった。 駅から少し離れているのが難点で、今回道を聞かれたおじいさんも、駅から歩いてきて、なかなか辿り着けずに不安だった様子。 道沿いにあるので、見逃すことは無いはず。

木曜日, 1月 22, 2015

CarthageでGPUImageをSwiftから使う

CarthageでGPUImageをSwiftから使う

XCodeで何かを作ろうとした場合、標準のframework以外のフレームワークを導入したくなります。
Objective-Cな時代にはCocoaPodsを使うのが定石だったようですが、Swift時代にはどうしたらよいのか、調べていたところCarthage(カルタゴ)というものが存在している事を知りました。

https://github.com/Carthage/Carthage

備忘録代わりに、Carthageを使ってGPUImageを使ったアプリケーションを作成してみます。Carthageの使い方の説明を主とするため、アプリケーション自体は、GPUImageのSimpleSwiftVideoFilterExampleをそのまま用います。

https://github.com/BradLarson/GPUImage/tree/master/examples/iOS/SimpleSwiftVideoFilterExample

0. 前提

この記事はYosemite 10.10.1、XCode 6.1.1の環境で確認しています。
Carthageは0.4.0を使いました。
実機確認する場合、実機とiOS Developer Programへの登録が必要となります。

1. Carthageのインストール

CarthageのREADME.mdを読めば分かりますが、pkgファイル、Homebrew、makeの3通りの方法でインストール出来ます。
私はHomebrewでbrew install carthageしました。
2015-01-19時点で、Homebrew経由でインストールされるのは0.4.0でした。
pkg版は0.5.2まで上がっており、いろいろ機能が追加されているようですが、今回の場合は0.4.0の機能でも問題ありません。

2. XCodeプロジェクトを作る

ベースとなるXCodeプロジェクトを作ります。
XCodeを開き、”File -> New -> Project…”を選択し、”iOS -> SingleView Application”を選んで、Nextを押します。
次の画面でLanguageにSwiftを、DevicesにiPhoneを選びます。
他の項目は適当に入力してください。
Nextを押すと、プロジェクトの保存場所を選択すると、新しいプロジェクトが作られ、XCodeに表示されます。

3. Cartfileの作成

Cartfileを作成します。Cartfileは利用したいframeworkを記述したファイルです。npmのpackage.json、mvnのpomです。

作成したプロジェクトのディレクトリの*.xcodeprojと同じ階層に、Cartfileという名前のテキストファイルを作成し、以下のように記述します。

git "https://github.com/BradLarson/GPUImage.git" == 0.1.6

==の部分には他にも~>>=が使えます。バージョンはsemverで解決されるそうです。
対象となるリポジトリがgithubの場合、以下のような指定も出来ます。

github "BradLarson/GPUImage" == 0.1.6

4. 外部フレームワークのビルド

ターミナルで、プロジェクトのディレクトリに移動します。
その位置でcarthage updateを実行すると、対象のgitリポジトリからソースコードがプロジェクトディレクトリ下の”Carthage/Checkouts/”以下にコピーされます。
その後、ビルドが実行され、生成物がプロジェクトディレクトリ下の”Carthage/Build”以下に出力されます。

5. 外部フレームワークをプロジェクトに追加

XCodeのプロジェクトのTARGETSのGeneralタブにある、”Linked frameworks and Libraries”に、”Carthage/Build/iOS/GPUImage.framework”をドラッグアンドドロップします。

次にBuild Phasesタブの左上にある”+”を押し、”New Run Script Phase”を選びます。
Shell欄の下の”Type a Script or …”と書いてある欄に、/usr/local/bin/carthage copy-frameworksと入力し、”Input Files”に$(SRCROOT)/Carthage/Build/iOS/GPUImage.frameworkと入力します。

ここまででCarthageを使って、frameworkを導入するという作業は終わりました。後はコードを書いていくだけです。

6. コードを書く

ここからはCarthageとは関係なく、GPUImageViewの使い方になります。
最初にMain.storyboardを開き、ViewのCustom ClassをGPUImageViewに変更します。

次にViewController.swiftの内容を、SimpleSwiftVideoFilterExampleのそれと同じにします。

https://raw.githubusercontent.com/BradLarson/GPUImage/master/examples/iOS/SimpleSwiftVideoFilterExample/SimpleSwiftVideoFilterExample/ViewController.swift

7. 実行する

iPhoneに転送して実行してみましょう。

8. 感想

他言語における依存性解決ツールに比べると、やっていることは単純ですが、XCodeというGUIが大前提のツールと共存させようとすると、これが正解な気がします。
CocoaPodsとは違い、ソースのダウンロードとビルド以上の事は一切行わないところも、個人的には好感が持てます。
Bridging Headerもいらないので、これからは積極的に使っていき、かつ自分でライブラリを書くときも、*.frameworkを吐くように作ろうと思います。

水曜日, 12月 24, 2014

bingから画像をダウンロードしてMacの壁紙に設定するツールをGoで書いた

bingから画像をダウンロードしてMacの壁紙に設定するbinggoというツールをGoで書きました。

https://github.com/kmtr/binggo

go get github.com/kmtr/binggoでインストール出来ます。

なぜ書いたのか

私はbingのトップページの画像が大好きで、Windowsの壁紙はBingデスクトップを使って、毎日bingの画像が設定されるようにしています。 ですが、残念ながらBingデスクトップのMac版は存在していません。 無いのであれば作るしかないということで、書いてみました。 ちなみに同じことを考える人はそれなりにいるようで、Pythonやbash、Automatorによる同様のツールがすでに存在しています。 ただインストールが面倒であったり、私の環境での動作が不安定だったりと不満があったので、自分で書いてみました。

なぜGoなのか

Goが好きだからというのが最大の理由です。

前々からGoには少し触っていたのですが、Go Conference 2014 autumnに参加して自分の中のGo熱が高まり、何か書きたいけど丁度良いネタが無いかと考えていたところ、bingに「今日の画像をダウンロード」という機能が追加され、Goで書いてみようと思いつきました。 ただ機能が単純なのでchannelどころかgoroutineすら使わなかった(使うまでもなかった)のが少し残念でした。

おまけ

bingの過去画像が欲しい場合は、Bing Homepage Galleryが便利です。

土曜日, 7月 12, 2014

gulp-coffeekupを作りました

CoffeeKupというcoffee-scriptのソースコードがそのままテンプレートになるテンプレートライブラリがあります。
どういう意味かは、公式サイトのデモを見ればなんとなく分かるかとおもいます。

coffeekup.org

テンプレート言語としてはなんとなくjadeっぽいので、coffee-scriptを知らない人でも使うのは難しくないはずです。テキストをいちいちクォートしているあたりにcoffee-scriptそのものを使っている感が見て取れるかと思います。

さて、これを静的HTMLの生成に使おうとしたのですが、CLIなコマンドは提供されているもののうまく動作せず、gulp経由でやってみようかと思ったら、今時にしては珍しくgulpプラグインがありませんでした(検索力不足かも)。
想像ですが、サーバサイドでレンダリングするために利用する事がメインで、静的HTML出力はあまり力を入れていないのかな?
ということでgulpプラグインを書いてみました。

https://github.com/kmtr/gulp-coffeekup

手元ではとりあえず、動作を確認しています。

(テンプレート言語がcoffee-scriptそのものである利点って何か実はよく分かっていない)

火曜日, 6月 10, 2014

丁目番地を聞かれたのでiPhoneで道案内

今年は道案内の回数が多い気がする。 今回は家の近所で、丁目番地指定で道を聞かれた。 分かるわけが無いので、すぐにiPhoneを使用。 目的地はもう少し歩いたところだったのでそれを伝える。 年配の二人連れだったけど、無事辿り着けただろうか。

水曜日, 3月 05, 2014

都庁への入り方

都庁、北庁舎外の中央公園側をふらふらしていたら、外国人カップルに英語で話しかけれられる。 都庁の中に入りたいが入り口が見つからないらしい。 あのあたり、ガラス張りで中に入れそうな雰囲気はあるのだけど、入るにはぐるっと回る必要がある。 聞く方はなんとかなるが、話せないのでついてくるようにジェスチャーして誘導。 若干適当な扱いだったかもしれないけど「アリガト」と言われたのでよしとしよう。 「Follow me.」 ぐらいは言えば良かったかな。