Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード Twitter

2014-10-31

独立してから第3四半期目の実績まとめ

3ヶ月ごとにフリーランスとしてやらせていただいたお仕事をまとめています。

とくに会計年度を定めてるわけじゃなくて、3ヶ月ごとに書いてて3回目なので「第3四半期目」と題しました。時期的には2014年8月〜10月です。


概要

ざっくり書いておくと、こんな感じです。


【新規】

  • SmartDrive
    • 車とスマートフォンをつなぐデバイスとアプリをつくっているスタートアップ
  • 書籍の執筆
    • iOS × BLE の技術書
    • konashiの開発者、松村礼央さんとの共著
  • 海外書籍のレビュー
    • とある海外出版社のiOS 8 技術書のレビュアー
  • 1〜数人日の作り切りアプリ開発数件
  • 講演、登壇いくつか
  • iOS8-Sampler
    • 個人でやってるOSSプロジェクト
    • GitHub Trendingでrepository/developer部門両方で1位に!

【継続】

  • WHILL
    • 10月、制作したiOSアプリがリリース!
  • Moff
    • 10月に一般販売開始!
  • 真鍋大度さんとのお仕事:music for the deaf
    • 8/13 横浜パラトリエンナーレの特別イベントとして、プレゼンテーション(ライブパフォーマンス)を実施

SmartDrive

9月ぐらいからiOSアプリを手伝い始めました。


会社やプロダクトの詳細はこちらを。


車の OBD2(On Board Diagnosis second generation)端子に挿せるデバイスから、BLEでスマホに走行データを送り、データ解析して付加価値を提供するプロダクト/サービスです。


f:id:shu223:20141104123751j:image:w600


僕が参加した時点である程度アプリもデバイスも実証実験ができるぐらいにはできあがってましたが、ソースコードがまだリーン的(←誤用)だったので、未実装機能を実装しつつ関連部分をリファクタリングしていくような感じで関わり始めました(たとえば、初日はissueに対応しつつ肥大化していたストーリーボードを切り分けるところから着手)。


継続的にお手伝いすることになったのは WHILL、Moff 以来なので、結構久しぶりの新規クライアント、という感があります。


書籍執筆

10月ぐらいから、iOS × BLE の技術書を書き始めました。konashi の開発者、松村礼央さんとの共著です。


実は3月ぐらいにはお話をいただいていたのですが、「(僕より詳しい人が山ほどいる中で、)なぜ自分が書くのか?」というところと、前著を書くのがめちゃめちゃ大変だった(他の仕事を全部断って5ヶ月間かかりっきり)というトラウマ(?)もあってなかなか乗りきれずにいました。


特に、なぜ書くのか?というところでは、

  • 上原さんが書けばそれでみんな幸せなのでは?
  • "Getting Started with Bluetooth Low Energy" の翻訳本が出ればそれで幸せなのでは?
  • そもそも既刊の『iOS 5 プログラミングブック』『iPhoneアプリ開発 エキスパートガイド iOS 6 対応』『上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7 編』で結構網羅されてるのでは?


上を目指すプログラマーのためのiPhoneアプリ開発テクニック iOS 7編
加藤 寛人 西方 夏子 藤川 宏之 鈴木 晃 高丘 知央
インプレスジャパン
売り上げランキング: 1,885


iPhoneアプリ開発エキスパートガイド iOS 6対応
加藤 寛人 藤川 宏之 高丘 知央 西方 夏子 吉田 悠一 関川 雄介
インプレスジャパン
売り上げランキング: 16,950


iOS5プログラミングブック
インプレスジャパン (2012-08-23)
売り上げランキング: 25,214


・・・というあたりで相当悶々としてました。いや何しろ自分のBLE関連知識の多くは 上原さんのブログ やFacebookグループで勉強させてもらったものだし。。


で、そんな煮え切らない気持ちのままあれよあれよと半年ほど経ってしまったころ、編集の方が共著者として松村さんにお話を通してきてくれて、ある日のミーティングで一気に自分の中でストンと「自分が書くべき理由」が腹落ちしました。


自分の1年ほど前を振り返ってみると、連載ドリブンで勉強しよう、と『iOSアプリと連携させて使えるデバイスたち:連載|gihyo.jp … 技術評論社』という連載をgihyoさんに企画提案し、BLEとか意識せずiOSと繋がるガジェットという理由だけで購入した konashi を第1回に取り上げたところから始まって、これまたBLEとか意識せず関わった iBeacon 案件があって、これまたBLEとか意識せず関わったとある新規ウェアラブルデバイス案件がありそこからBluetoothについて勉強し始め、・・・WHILLの話が来て、Moffの話が来て・・・


まぁなんというか、自分は BLE とか関係なく、ただただ「iOSと連携する外部デバイスの分野って何か楽しそう」ってところから始まって、つくりたい欲求ドリブンで調べているうちに必然的に BLE について知識がついてきたのであって、そういう切り口/順序で書くのであれば、他の関連書籍がありながらも僕が書く余地もありそうだなと。


あと、松村さんは konashi というハードをつくった人で、僕も WHILL, Moff, SmartDrive, 真鍋さんとのピリピリデバイス と多くハードウェアプロジェクトにiOSエンジニアとして実際に手を動かして関わっていて、そのあたりでも何か宿るものはあるんじゃないかと。


というわけで今は迷いなくバリバリ書いております。上原さんや小林先生やIRKitの大塚さんにも査読いただく予定です。電子版同時リリースはいろいろ大変そうですが編集の方を通してがんばって交渉していく所存です。無事出版されたらよろしくお願いいたします!


WHILL

今年の4月から週末を中心にじわじわとつくってきたアプリが、ついに10月にリリースされました!


f:id:shu223:20141017083349p:image:w600


WHILLなしでも試せます。詳細はこちら:


申請の日はWHILLの新オフィス@鶴見に泊まりこみで作業しました。


(WHILLの新オフィス@鶴見。どでかい倉庫的な建物の中にメンバーみんなで組み立てたプレハブ)


Moff

9月にKickstarter支援者向けリリース、10月一般リリース。最近はお仕事的に新展開になってきましたが書いていいか先方にまだ確認できてないのでそのお話はまた今度。


ちなみに WHILL も Moff も、トップのピコーンピコーンするアニメーションは拙作のオープンソースライブラリ "Pulsing Halo" を使用しております。


f:id:shu223:20141104132131g:image:left

f:id:shu223:20141104132209g:image:left




music for the deaf

横浜パラトリエンナーレでの、SOUL FAMILY × 真鍋大度 + 石橋素 + 照岡正樹 + 堤修一 名義での展示・ライブパフォーマンス。


f:id:shu223:20140814072957j:image:w500


経緯や当日の様子などの詳細はこちらに。


海外書籍のレビュー

iOS8-Samplerを出したおかげか、とある出版社から iOS 8 の技術書のレビュー依頼が届きました。


iOS 8 と題してるのにスクショが Xcode 5(iOS 8 は要Xcode 6)だったり、最初のサンプルが UIAlertView(iOS 8 では deprecated)だったりして前途多難な感じでしたが、ちゃんとフィードバックに書いたのできっとそのあたりは直されて良い本になっているのではないでしょうか。


そしてどうにかこうにか全7章のフィードバックを返し終えたタイミングで、出版社側の担当者より退職のお知らせ。自分がレビュアーとして記載されるかどうかは謎です。。とりあえず英語で書籍を読む練習にはなったので、良い経験にはなりました。


iOS8-Sampler

詳細はこちらに。


GitHub の Trending で 1 位になりました!


f:id:shu223:20141104141630j:image:w600


Trending の 1 位になるのは、iOS7-Sampler、AnimatedTransitionGalleryに続く3つ目です。スター数は11/4現在約2,100。


オープンソース活動で収益ゼロですが、このブログは海外にはリーチしないので、グローバルに自分のエンジニアとしてのポジションをつくっていくにはこういう投資は必要だなーと思ってある程度時間を割いてでも(=収益になる仕事を減らしてでも)やることにしています。


講演、登壇


↑このスライドは話のとっかかりだけなので、興味のある方はぜひ記事の方もご参照ください。



(インタビュー)


インタビューは結構同じ話をしているところもあるのですが、以下のあたりはこのインタビューで話したのが初めてかなと。


で、当時アメリカに行って2〜3年は帰ってこないつもりだったんで、自宅も引き払って家具も売ったり捨てたりしたんですけど、行ってすぐに帰ってきちゃったんで、奥さんの福島の実家に居候しつつ、用事があるときは都内にウィークリーマンションを借りて、新幹線で往復したりしてて。

でもこういう状況ってそんなに意図的には作り出せないから、どうせなら色んなところで転々としながら仕事をするっていう、昔から憧れていた働き方をやってみようかなと思って。それで沖縄のウィークリーマンションを一ヶ月くらい借りて、フリーランス的に仕事をしようかなと思ったんですけど、お客さんと話してる時に、「遠いんだったら近くの人とやりとりしたいから他に当たってみるかも」って言われて。やっぱり今の自分のレベルだと、遠くの堤さんより近くの誰かのほうがいいレベルなんだなと思って。

例えば真鍋(大度)さんの場合は世界中から依頼がきて、飛行機代出してでも真鍋さんしかいないっていうポジションがあるけど、やっぱり僕はまだ沖縄に行ってる場合じゃないなということを学んで、それでちゃんと腰を据えて、東京に引っ越しして、フリーランスでやりますって思った。それが今年の2月ですね。


__では、フリーランスになって良かったなって思う事はなんですか?

自分の行動が良いことも悪いことも全て跳ね返ってくる事が良いなと一番思っています。

社員一万人以上の会社からカヤック、その後3人くらいのスタートアップに入って、今は一人になって。で、どんどん小さくなって思うのは、僕はどんな少人数で組んでも、他人と何かやると必ずちょっとズレがあって、それをお互い埋めたりするんですけど、それより自分は全部責任とるから好きな様にやらせてくれってほうが楽で、仕事をやるやらない、断る断らないっていうところも全部で自分で決めて全部自分の責任に出来る方が良いですね。そういう状況が好きな人は向いてると思います。


フリーランスは寂しいという人もいますけど、僕は全く逆で、フリーランスになると人に会うことも全部が有機的に繋がってきて、会社員だとやっぱり会社が一枚噛んだりとか、一緒にやろうぜ的なことにはなりにくい。今までよりも人と会うのが楽しくて、寧ろ寂しいというより、交流が増えた。昔はコード書いてたほうがいい、時間が勿体無いって思っていた事もありましたけど。


仕事観・働き方についてとある媒体で連載する話もいただいたのですが、連載するほど体系化できてないし、そんなことよりもっと技術力を積み上げて、もっと手を動かしてプロダクトを世に出していかねば、ということで見送らせていただきました。


1〜数人日の作り切りアプリ開発案件

プロジェクト新規作成から納品まで1〜数人日ぐらいの短期案件をいくつかやらせていただきました。

  • RoadMovieみたいな、細かい動画を撮影してひとつの動画につなげて保存するアプリ、1人日
  • iBeacon で店内領域検出、Core Bluetooth で店員用アプリと通信するデモアプリ、1人日
  • 東京デザイナーズウィーク出展用のシンプルなアプリ、?人日

おわりに

おかげさまでこの3ヶ月も楽しくお仕事させていただきました。とくに直近の10月は、


とツイートしたように、収益/融通性/楽しさ/やりがい/実績が揃ういい働き方ができなたーと。そもそも不安定なフリーランスというポジションなので、再現性のあるものでもなく「今、たまたま」な要素が多いですが。。


次の3ヶ月も楽しみつつがんばりたいと思います!


2014-10-30

【UIScrollView × Autolayout 問題】Appleエンジニア直伝のファイナルアンサー

iPhone6,6Plus サポートとか LaunchScreen.xib とか Size Class とか考えると、もはや Autolayout は必須な感じになってきてます。



で、Autolayout ✕ UIScrollView の例の問題(UIScrollView のサイズを superview との制約で動的に変えるときにその中身も動的に変えたい、ってやつ。こんな雑な説明でもハマったことある人にはわかっていただけるかと・・・)、Apple 公式でこんなドキュメントが出てますが、



"Mixed Approach" とかなんか筋が悪い感じだし、"Pure Auto Layout Approach" とかサンプル見ると Constraint を例のビジュアルなんとかで書いてて正直どっちも真似したくない感。。Xcode 5 時代のドキュメントでちょっと古いし。。


StackOverflow でもあんまりピンとくる回答は見つからないし、UIScrollView はなるべく使わず、ページング的なやつは UIPageViewController とか UITableView とか UICollectionView でやろうみたいな話も見かけました。


もっとストンと腹落ちする解決法ないのかなーと思ってたところに、友人の開発者からこんな記事を教えてもらいました。



Apple エンジニア直伝のシンプルな解決法

WWDC で Apple のエンジニアにやらせてみたところ40分かかったそうです笑


で、その一番のポイントがこれ。


f:id:shu223:20141030074942p:image:w400


UIScrollView の中身のビューに対して、「幅 or 高さの基準にする view について "Equal Widths" or "Equal Heights" となる制約をセットする」というものです。


すごくシンプルな上に、納得感もあります。


やってみた

UIScrollView 直下のビューが

  • 複数ある
  • 幅ピッタリじゃない(space 0 じゃない)

場合も、以下のようにそれぞれ Equal Widths 設定すると、


f:id:shu223:20141030075117j:image:w600


バッチリ意図通りに、幅は縮小されて、高さ方向はスクロールするようになりました。


f:id:shu223:20141030075156g:image



2014-10-17

MoffとWHILLのアプリがリリースされました!その開発裏話など。

iOSアプリ開発者を名乗る者として恥ずかしい話なのであまり自分から積極的に言って来なかったのですが、実はわたくし、2012年末以降、実に2年近く一本もアプリを出せてませんでした


いや、コードはたくさん書いてたんですが、2013年前半はひたすら 書籍執筆とそのサンプルコード作り だったし、後半は SDK をつくってたので、自分の書いたコードが人様のアプリには入ってはいたものの、やはり自分が開発したアプリが出ました!という感はなく。そして2014年になって独立してからも、諸事情でストアに出さないことになったり、プロトタイプやデモまでのお手伝いだったりということが多かったもので。。


で、そんな中、がっつりお手伝いさせていただいたアプリがこの10月に立て続けにリリースとなったのでご報告させていただきます!


裏話、とまでは言えないかもしれませんが、アプリの紹介以外に、開発の経緯とか、働き方とか、技術的なことについても(公開して問題ない範囲で)少し紹介したいと思います。


次世代パーソナルモビリティ『WHILL』

f:id:shu223:20141017084400j:image:w600


昨日ストアに出たばかりの、次世代パーソナルモビリティ WHILL と BLE により連携するアプリです。


f:id:shu223:20140930104709j:image:w500


アプリの機能

f:id:shu223:20141017083349p:image:w600


  • リモートコントロール

ベッドサイドにWHILLを呼び寄せる、介助者が操作する、といったユースケースを想定した機能です。BLEの用途として遠隔操作はベーシックなアイデアですが、WHILLのようにおもちゃサイズではないものがラジコンのように手元のスマホから動かせると、未来感あります。


  • シートのスライドをコントロール

WHILLは乗り降りしやすいようにシートを前後にスライドさせることができるのですが、その操作部はアームの下側にあるので、ベッドなどからWHILLに載る際にはスマホから操作できると便利だそうです。


  • 内部パラメータ設定

パワー、前進速度の最大値、最小値、前進加速度の最大値、最小値、前進減速度の最大値、最小値、後進速度の・・・等々々、19種類におよぶパラメータがあり、これらを自分好みのチューニングにしたいというニーズが非常に強いそうです。100人いれば本当に好みが100人違うそうで、サービスマンが全米を飛び回ってチューニングしてるとコストが莫大になってしまうので、BLE経由で自ら設定変更できるようになっています。


WHILL本体なしで試す

もちろんWHILL本体ありきのアプリなのですが、

  • 最初の "WHILL BLE KEY" の入力ダイアログをキャンセルして、
  • CONNECTボタンじゃなくその下の "START WITHOUT WHILL" を選択

することで一通り試してみることはできます。


https://itunes.apple.com/app/id926042487


開発体制

WHILL の CTO 福岡さんが WHILL 本体側(回路設計&ファーム実装)、アプリ側を堤が担当しました。


アプリのデザインはカヤック時代の同僚、おかず にお願いしました。


BLE112 Development Kit

WHILL は BLE チップとして Bluegiga 社の BLE112 を使っています。で、開発で大活躍したのが下記画像の Development Kit で、


f:id:shu223:20140930104801j:image:w400


これはディスプレイ・USBインターフェース・バッテリーボックス・デバッガ・確認用のセンサ等々、BLEモジュールの開発・検証に必要な諸々がボードにビルトインされているので、部品を集めて回路を組んだりしなくても、買ってすぐに BLE モジュールのファームウェア開発を始められるという代物です。


WHILL は物理的にもコスト的にも開発用に本体を何台も用意したりすることは難しいので、基本的にWHILL本体と繋げて動作させるのは実装完了してからの動作確認時ぐらいになってきます。


で、それまではiOSアプリ側は、この Development Kit を WHILL の代わりの接続先として使ってました。WHILL側の福岡さんと gatt.xml を共有しつつ。


参考記事: 【改訂版】BLE112 / 113 の開発環境を Mac に構築する - Over&Out その後


参加の経緯

WHILL を手伝い始めたのはけっこう前で、今年の3月に遡ります。CEO 杉江さんから Facebook Message をいただいたのがきっかけでした。


当時から iOS × デバイスの BLE 連携は一番やりたい分野だったし、WHILLは 500startupsにいたころから プロダクトもチームもリスペクトしてたので、ぜひともやりたいですとがっつり食いつかせていただきました。


で、CTO福岡さんと何回かスカイプミーティングをしたあと、町田の工房に行ってWHILLに乗せてもらい、まずは仕様やその後の開発方法について話し合いつつBLE接続なしのUI/UX共有用アプリをつくり、という感じでゆっくりと手伝い始めました。


(当時のブログ記事:独立して最初の3ヵ月間にやったお仕事のまとめ - Over&Out その後


で、その後も基本的に毎週土曜日、でも福岡さんが忙しかったり出張だったりすると中止になるので、だいたい月に3人日ぐらいのペースで開発を進めてきました。


TV出演

アプリだけWBSに出演したこともあります。



ウェアラブルなおもちゃ『Moff』

Moff は、Kickstarter 向け出荷が先月だったので実はそのときにはアプリはもう出ていたのですが、正式に 10/15 に発売になりました!



お子さんのいらっしゃる iOS な方々はぜひお買い求めいただけると嬉しいです。Amazon電子玩具部門で妖怪ウォッチに次ぐ2位の人気だそうです。(僕も甥っ子達へのプレゼント用に2つ買いました)


こういうおもちゃです↓↓↓↓


コンテンツについて

刀でキンキンやりあったりボクシングでボコボコするのも楽しいのですが、なんといっても Drum が楽しいです。



自分の中心軸から左の方に向いて腕を振る(ドラムスティックを振る感じで)とハイハットとスネアが、右に向いて振るとタムが鳴ります。で、上の方で振るとクラッシュシンバルが鳴ると。子供からも(その演奏姿を観る)親御さんからもすごく評判がいいそうです。


ちなみに、最初に入っているコンテンツは13個ですが、いま審査に出しているバージョンから、追加コンテンツの配信機能(一定の条件でダウンロードできるようになる)がつきます!


開発体制

iOSアプリのバージョン1.1.0(審査中)までに関しては、CTO米坂さんと僕とで実装しています。もちろん、ハード、サーバーサイド、デザイン、ジェスチャ認識アルゴリズム開発等々含めるともっと多くの人が関わっています。(が、どの辺りまで書いてよいか要確認なので控えておきます)


参加の経緯

とあるミートアップでCTO米坂さんが声をかけてくれたのがきっかけでした。ちょうどその数日前に「Kickstarterで2日間で目標調達額を達成!」というニュースをFacebookで見かけて興味を持っていたところだったので、こちらも全力で食いつき、GW明けから開発に参加させていただきました。


こちらは最初2週間ぐらい集中して入ってアプリの基本形をつくった後、その後は開発内容やフェーズに応じて週2〜3ペースでお手伝いさせていただいてます。


おわりに

書いてて気付いたのですが、どちらも「CTOとがっつり一緒に開発」というところが共通してるなーと。

  • 開発にまつわる諸々が技術的なことも含め共有できて、
  • プロダクトへの愛と責任があって、
  • その場で即断する裁量がある

方と一緒にやれる場合に自分はいい関係が築けることが多いのかなと。(もちろん今後これ以外にもいろんなパターンがあるとは思いますが)


そんなわけで、WHILL と Moff とそのアプリとフリーランスiOSエンジニアの堤を今後ともよろしくお願いします!


2014-10-14

一泊二日のopenFrameworksセミナーに参加してきました


先週末、『デジタルアートセミナー#3 openFrameworksで学ぶ、クリエイティブ・コーディング』という一泊二日のセミナーに参加してきました。(※参加者のTLでは「oFセミナー」という呼称の方が一般的でした)


自分にとっての openFrameworks (以下 oF)は、 去年真鍋さんと仕事したいがために少しかじってみた ものの、さらっと基礎をなでただけで結局一度も実案件で使うことも自分で何かつくってみることもなかった、という程度の縁しかありません。


それでも参加したのは、講師陣と内容がすごく興味深かったからです。


2014年の今に boost ライブラリについてがっつり2時間半教えてくれるセミナーはなかなかないだろうし、iOS 8 から CIKernel が追加されて GLSL で Core Image のカスタムフィルタをつくれるようになった ので、GLSL についてプロ中のプロから直接学べるなら是非ともという感じだし、プロジェクションマッピングは流行り始めてから数年経つけど自分ではやったことないので要素技術とかポイントは把握しておきたいし、映像制作ソフトの連携や映像解析の話も興味ある分野だったり。


つまるところ oF 抜きにしても今回のセミナー内容は自分にとって学びたい内容ばかりだったので、募集開始直後1分以内ぐらいに全力で応募した次第です。


で、実際に参加してみた結果、期待以上でした。「これが聞けただけでも参加した甲斐があった!」と思った話が何度あったことか。これで宿泊費込みで1.5万円は安すぎるので、次回あったら10万円でも参加したいというレベルです。(実際に講師/TAの方々に正規フィーを払ったらそれでも済まないだろうけど。。)


では以下、それぞれのセッションについて。


セッション1 : C++テクニック(boostライブラリの使い方)

講師 : 堀口淳史、藤本直明

openFrameworksを本格的に使う上で避けて通れないC++のテクニックを学びます。

今回は、boostライブラリの使い方について学びます。


oF も C++ も初心者レベルだったので参加前はついていけるか不安だったのですが、基礎の基礎からじっくり丁寧に解説してくれて、libstdc++ と libc++ の違い とか、「oFで動くMacのboostバイナリ」をコンパイルするためのビルドオプションがどういう理由で決まってくるのかとか、あとboostの使い方自体も、非常に勉強になりました。


詳細な講義メモはこちらにあります。


セッション2: Shaderテクニック(GLSL)

講師 : 藤本直明、神田竜、他

GLSL(Shader)と呼ばれるOpenGLの機能を解説し、それを応用した映像表現を学びます。今回は、3Dを中心としたシェーディング手法を中心に解説していきます。


冒頭に書きましたが、iOS 8 から CIKernel で自前フィルタを GLSL で書けるようになったし、GPUImage とかで自前フィルタ追加したい場合もシェーダを自分で書ける必要があるしで、わりと以前から自分の中でシェーダはちゃんと勉強したい項目のひとつでした。


で、やっぱりこのセッションも超勉強になりました。


自分が興味があったところはフラグメントシェーダ(ピクセルシェーダとも呼ばれる)のあたりで、よく分かってなかった Vertex Shader とかのあたりもすごく腹落ちしたし、ライティングについても ライトの種類から拡散光の求め方まで順序立てて教えてもらえて、これまた勉強したいと思っていた3Dプログラミングの勉強もできた感じです。


f:id:shu223:20141011213048j:image:w600


詳細な講義メモはこちらにあります。


セッション3: 自己紹介&ショートセッション

講師/TA陣が自分の案件とその中で使ってる技術Tipsを紹介してくれるセッション。流れ解散制で、自分は深夜2時に退室したのですが、実に深夜3時半までセッションは続いたそうです。


オフレコな話が多かったので詳細レポートはできませんが、「あの案件の裏側はこうなってたのか!!!」みたいな話が盛りだくさんでこれまた勉強になりすぎる内容でした。


あと、みなさん技術+デザインとか演出のセンス+アイデアがすごくて、iOSしかできない自分はより精進せねば・・・と改めて思ったのでした。


セッション4: プロジェクションマッピング

openFrameworksでのプロジェクションマッピングの基礎を学び、実際に数名ずつのグループで簡単な制作を行います。 また、エッジブレンディングやメッシュワープなど、実践的なプロジェクションマッピングを行う上でのテクニックについても紹介します。


個人的にはあまりプロジェクションマッピングにはそんなに興味がなくて、そしてやったこともなく、でもすごい流行ってるのでちょっと気になる、ちょっと自分で体験してみたりはしたい・・・みたいな存在だったので、まさにうってつけのセッションでした。


f:id:shu223:20141012125651j:image:w600


講義メモ:


このセミナー全体を通して感じたことですが、プロジェクションマッピング(とかAR)は、もはや興味があるとかないとかのレベルじゃなくて、リアルな場での表現手段としてもはや当たり前なものになってるんだなーと。「これはプロジェクションマッピングの作品です」みたいな感じじゃなくて、演劇の背景だったり、TVのスタジオで世界観をつくる使い方だったりで表現のいち手法になってる感じ。


セッション5: openFrameworksと映像制作ソフトの連携

ライゾマ比嘉さんのセッション。


AfterEffectsやCinema4Dなどの映像ソフトとopenFrameworksを連携させる映像制作手法の紹介を行います。 (AfterEffectsやCinema4D、Ableton Live、Adobe Premiereなどをお持ちの方は、持参して頂けると手元で試せるのでよいかもしれません)


受講前は、「AfterEffects持ってないなー」「Cinema4Dって何??」ぐらいの感じだったのですが、動画内のサッカーボールのトラッキングを After Effects でやって、そのキーフレームを取り出すことでいかにも映像解析がすごい的に見せる みたいな方法は目からウロコで感動しました。


f:id:shu223:20141013174310j:image:w600


あと、ofxPDF というアドオンで、PDFベクタ形式のデータを読み取ってアウトラインを順番に取り出してアニメーション表示するやつは、すごくいい感じなので iOS ネイティブにも移植しようかと。Xcode 6 の Asset Catalog でも PDF ベクター形式をサポート したので、PDF 形式自体が iOS 界隈で一般的になってきそうだし。


f:id:shu223:20141013174237j:image:w400


講義メモ:


セッション6: 映像解析によるインタラクション

openFrameworksとOpenCV(ofxOpenCV、ofxCv)を組みあわせることで、映像を用いたインタラクティブな表現の可能性が大きく拡がります。このセッションでは、実例を紹介しながら映像とのリアルタイムなインタラクションの手法を探ります。

田所先生のイントロ、ひつじさんのオプティカルフロー+ドロネー変換、ライゾマ登本さんによるアドバンストな話、の豪華3本立て構成でした。


動画の中から、人間の目ではわからないような微細な変化を検出するアルゴリズム EVM(Eulerian Video Magnification)、トラッキングしながらリアルタイムに学習もしていく TLD(Tracking Learning Detection)アルゴリズム等々、非常に勉強になりました。


f:id:shu223:20141013191301j:image:w600

(EVMの処理フロー)


講義メモ:


あと、講義の後に、登本さんにとあるライゾマ案件のしくみについて直接聞いてみたところ、自分が用意してた答えとは全然違ってて、聞かないとわからなかったであろう方法だったので、それもほんと質問してよかったなと。


おわりに

最高でした!主催のみなさま、講師のみなさま、TAのみなさま、セミナーハウスのみなさまどうもありがとうございました!!


2014-10-13

【oFセミナーメモ5】映像解析

デジタルアートセミナー#3 openFrameworksで学ぶ、クリエイティブ・コーディング』の最終セッション『映像解析によるインタラクション』のメモです。

openFrameworksとOpenCV(ofxOpenCV、ofxCv)を組みあわせることで、映像を用いたインタラクティブな表現の可能性が大きく拡がります。このセッションでは、実例を紹介しながら映像とのリアルタイムなインタラクションの手法を探ります。


田所先生のイントロ、ひつじさんのオプティカルフロー+ドロネー変換、ライゾマ登本さんによるアドバンストな話、の3本立て構成でした。


過去のセッションのレポートはこちら。


田所先生のイントロ

講義資料: Session 6: 映像解析によるインタラクション


オプティカル・フロー

映像内の物体の動きを、ベクトル場で表したもの


f:id:shu223:20141013191045j:image:w500


2種類のアルゴリズム
  • Gunner Farneback

- 密なオプティカルフロー

- ofxCv::FlowFarneback

  • Pyramidal LK

- 疎な特徴集合に対するオプティカルフロー

- ofxCv::FlowPyrLK


ひつじさん

講義資料: オプティカルフローを使ったモーショングラフィックス生成|ひつじ|note



ダンサーさんの踊っている映像を使用して、それをリアルタイムにカットアップしながらオプティカルフローを使ったグラフィックを載せているというプログラムです。


  • YCAMのダンサーの映像にオプティカルフローをかける・・・特徴点を抽出
  • ofxDelaunay ドロネー変換

ドロネー図 - Wikipedia


f:id:shu223:20141013191122p:image


登本さん

Kinectで3Dモデリング

キャリブレーション

  • Kinect3台
  • それぞれのカメラの位置がわかってない
  • そのままだと 2.5d
  • 光る玉を3台のKinectから見える位置で振る
    • kinectのcolorの方で見ると、暗い部屋との対比で、簡単に中心位置を割り出せる
  • カメラ位置の推定に、OpenCV の estimateAffine3D を使用

ofxEvm

Eulerian Video Magnification

動画の中から、人間の目ではわからないような微細な変化を検出する


Eulerian Video Magnification - YouTube


EVMのアルゴリズム

f:id:shu223:20141013191301j:image:w600

(上記動画内の解説図)


論文と MATLAB
  • 論文のコードは MATLAB で公開されてることが多い
  • EVM も MATLAB でコードが公開されてる
  • MATLAB が使われるのは、その世界ではみんな使ってるので、referされやすいから。Pythonも増えてきた。
  • MatLabからのC++エクスポート機能はつかってない。自分でC++で書き直している。

SVGでAR
  • カメラを固定して、映っている対象物の頂点の位置を示したSVGファイル をつくる
  • → その位置に別の映像をオーバーレイするとAR的なことができる
  • CameraCalibrate3D を使用 する
  • 最終的なテクスチャをズームしたり変位させたり回転させたりすることでカメラが動いてるっぽくも見える

TLD Tracker

Tracking Learning Detection



ofxTldTracker

  • ライセンスはLGPL

OpenCV 3.0 にTLDアルゴリズムのとラッカーが追加される

404 Not Found の TrackerTLD


【oFセミナーメモ4】openFrameworksと映像制作ソフトの連携

デジタルアートセミナー#3 openFrameworksで学ぶ、クリエイティブ・コーディング』のライゾマ比嘉さんのセッション『openFrameworksと映像制作ソフトの連携』のメモ。

講師 : 比嘉了

AfterEffectsやCinema4Dなどの映像ソフトとopenFrameworksを連携させる映像制作手法の紹介を行います。


講義資料はこちらで公開されています。markdown形式。


過去のセッションのレポートはこちら。


事例紹介

(ダンスのやつ。動画メモし忘れました)

  • 手と頭につけてるマーカーで軌跡を書く
  • 他の部分は動的生成ではなく、CINEMA 4Dであらかじめ用意していたもの

Illustratorとの連携:ofxPDF

ベクタデータのうち、SVGよりPDFの方がロードが10倍ぐらい速いことがあったので、それからはPDFを使っている。そのPDFをoFで取り扱うアドオン。


普通に描画
ofxPDF pdf;
pdf.loadPDF("tiger.pdf");
pdf.draw();

テキストアニメーション

f:id:shu223:20141013174237j:image:w400

(アニメーションの途中の様子です)


void draw()
{
    float app_time = ofGetElapsedTimef();
    float animation_time = fmodf(app_time, 2) / 2.;
    
    cout << "app_time: = " << app_time << ", animation_time: " << animation_time << endl;
    
    ofSetColor(0);
    
    // PDFのパスを順番に取り出して ofPolyline で描画する
    for (int i = 0; i < pdf.getNumPath(); i++)
    {
        ofPath& path = pdf.getPathAt(i);
        
        vector<ofPolyline>& polys = path.getOutline();
        for (int k = 0; k < polys.size(); k++)
        {
            ofPolyline poly = polys[k];
            
            poly = poly.getResampledByCount(100);
            
            int target_size = poly.size() * animation_time;
            poly.resize(target_size);
            
            poly.draw();
        }
    }
}

順番に見ていくと、


1. パスを取り出す

ofPath& path = pdf.getPathAt(i);

2. パスのアウトラインを取り出す

vector<ofPolyline>& polys = path.getOutline();

ofPolyline がベクタで得られる


3. ofPolylineをリサイズしながら描画する

for (int k = 0; k < polys.size(); k++)
{
    ofPolyline poly = polys[k];

    poly = poly.getResampledByCount(100);

    int target_size = poly.size() * animation_time;
    poly.resize(target_size);

    poly.draw();
}

各アウトラインが、長さ0から元の長さに戻っていく。


After Effects との連携:ofxAfterEffectsKeyframeParser

サッカーのボールの軌跡を追う

AEにはそういう機能が入っている: tracker

-> キーフレームとして入る

-> ofxAfterEffectsKeyframeParser で読む


f:id:shu223:20141013174310j:image:w600


画像解析不要!


Cinema 4Dとの連携:ofxAlembic

https://github.com/perfume-dev/ofxAlembic

  • メッシュアニメーション
  • パーティクル
  • polyline
  • カメラワーク

などが読み書きできる


f:id:shu223:20141013174340j:image:w600

f:id:shu223:20141013174400j:image:w600

(それぞれ ofxAlembic に付属のサンプルを実行したもの。アニメーションします)


2014-10-12

【oFセミナーメモ3】プロジェクションマッピング

デジタルアートセミナー#3 2日目の最初のセッションは、プロジェクションマッピングについて。


講師 : 藤本直明、他

openFrameworksでのプロジェクションマッピングの基礎を学び、実際に数名ずつのグループで簡単な制作を行います。 また、エッジブレンディングやメッシュワープなど、実践的なプロジェクションマッピングを行う上でのテクニックについても紹介します。


過去のセッションのレポートはこちら。


プロジェクションマッピングとは

プロジェクションマッピングじゃないもの・・・マッピングしてなくて、ただプロジェクションしてるだけのものとか

プロジェクションマッピング事例

3D Projection Mapping promoting The Tourist in Dallas - YouTube


マッピングソフト

ofxQuadWarp

シンプルなマッピングのアドオン。4つの頂点を動かすとその矩形に合わせて映像をwarp処理してくれる。


f:id:shu223:20141012125640j:image:w600

(頂点調整前)


f:id:shu223:20141012125651j:image:w600

(頂点調整後)


使い方
// 画像読み込み
img.loadImage("quad_warp_kittens.png");

// 位置とサイズを取得
int x = (ofGetWidth() - img.width) * 0.5;       // center on screen.
int y = (ofGetHeight() - img.height) * 0.5;     // center on screen.
int w = img.width;
int h = img.height;

// FBO確保
fbo.allocate(w, h);

// 画像のrectを ofxQuadWarp にセット
warper.setSourceRect(ofRectangle(0, 0, w, h));              // this is the source rectangle which is the size of the image and located at ( 0, 0 )

// 4つの頂点の初期座標を ofxQuadWarp にセット
warper.setTopLeftCornerPosition(ofPoint(x, y));             // this is position of the quad warp corners, centering the image on the screen.
warper.setTopRightCornerPosition(ofPoint(x + w, y));        // this is position of the quad warp corners, centering the image on the screen.
warper.setBottomLeftCornerPosition(ofPoint(x, y + h));      // this is position of the quad warp corners, centering the image on the screen.
warper.setBottomRightCornerPosition(ofPoint(x + w, y + h)); // this is position of the quad warp corners, centering the image on the screen.

// セットアップ&ロード
warper.setup();
warper.load(); // reload last saved changes.

Quad Warp事例

トラッキングしてプロジェクション

YouTube


講義資料: プロジェクションマッピング実例と応用|ひつじ|note

車に再帰性反射材のマーカーを付けて、車の位置をトラッキングしながらその周りで映像が展開するという演出です。車のトラッキングには、6台のoptiTrackを15mの高さから吊り下げてセンシングをしています。


optiTrackとは赤外線による光学式モーションキャプチャで、複数台を連携させて高い精度とfpsでマーカーの位置が取得できるデバイスです。


車にマッピングしたくないので、車には白い光をあてて、プロジェクションを逃がしてやる。

再帰性反射材のマーカーを3つ載せて、OptiTrack でトラッキング

  • ラジコンでテスト
  • マーカー付きステッキでテスト

OptiTrackの処理が速く、プロジェクターの処理が追いつかない ので、進行方向にちょっと進ませた場所に投影(講義資料の、『レイテンシ補完』参照)


ジオラマに投影

https://www.youtube.com/watch?v=SRCVKciy-zI


複数のプロジェクタで投影する

エッジブレンディング

プロジェクタ間のキャリブレーション

Mac の [設定] > [ディスプレイ] > [カラー] > [補正]

ディスプレイキャリブレータ・アシスタントが起動する

薄目で林檎マークが溶け込むポイントで、全プロジェクタを調整する


メッシュワープ

Quad Warp みたいに4点だけじゃなくて、もっと多くのポイントでwarpできる・・・曲面への投影


https://www.youtube.com/watch?v=xqrJrqcqFBQ


  • 使用したoFアドオンは非公開
  • OpenGL の命令を直叩きで実装してある

MappaMok

  • カメラで撮影した画像と3Dモデルを合わせる
    • さまざまなパターンをプロジェクタから投影 → カメラで撮影

参考リンク: Kyle McDonaldの「光の演習」ワークショップ@SUPER FLYING TOKYOに参加してきました - Over&Out その後


2014-10-11

【oFセミナーメモ2】 GLSL(Shader)テクニック

セッション1「C++テクニック」(boostライブラリの使い方)のメモ に続いて、セッション2 のメモです。


セッション2 : Shaderテクニック

講師 : 藤本直明、神田竜、他

GLSL(Shader)と呼ばれるOpenGLの機能を解説し、それを応用した映像表現を学びます。今回は、3Dを中心としたシェーディング手法を中心に解説していきます。


GLSLとは

  • OpenGLと一緒につかうシェーディング言語
  • シェーディング: 3DCGの見た目を決める
    • 光源の計算
    • 陰影の計算
    • ピクセルの計算
  • C言語っぽい見た目
  • グラボで並列処理
    • CPUで処理するよりも高速

ofShader

  • oFではofShaderを使う
  • 適用部分をbeginとendで挟む
  • oFからパラメータも渡せる
mShader.load("test.vert", "test.frag", "test.geom");
mShader.begin();

mShader.setUniform1f("rad", 10);

mVbo.draw(GL_POINTS, 0 , NUM);
mShader.end();

GLSLの種類

処理順に、

  • Vertex shader
  • Geometry shader
  • Fragment shader

Vertex Shader

頂点座標の変換

  • 頂点をうねうねさせる
  • ライティングのための準備

Geometry Shader

頂点の数の増減

  • 法線の方向にヒゲを生やす
  • ポリゴンを分割する
    • LOD (Level of Detail)・・・カメラの近くは繊細に、遠くは荒くても良い、みたいな動的に頂点数を増減する、みたいな使い方

省略可能


Fragment Shader

最終的な色を決める

  • ライティング
  • いらない部分を破棄する
  • ポストエフェクト

"tea pot discard glsl" で画像検索すると、ティーポットをFragment Shaderで処理した例が見れる


ピクセルシェーダとも呼ばれる


フラグメントシェーダを使ったポストエフェクト

講義資料:

ピクセルシェーダ on ofxPostGlitch|ひつじ|note


ofxPostGlitch

使用手順
  • addons フォルダに入れる
  • shader が入ってるフォルダ(shaders_pg)を、プロジェクトフォルダ配下の bin/data 直下に入れる
    • shaderは実行時に読み込まれるため、バイナリのデータフォルダに入れる必要がある

ofApp.h

#include "ofxPostGlitch.h"
ofxPostGlitch postGlitch;
ofFbo buffer;

ofApp.cpp

void ofApp::setup(){

    buffer.allocate(1024, 768);     // バッファ確保
    
    postGlitch.setup(&buffer);      // fboのポインタを渡す
}
void ofApp::draw(){
    
    // FBOに円を描画
    buffer.begin();
    ofClear(0, 0, 0);
    ofSetColor(255, 0, 0);
    ofCircle(100, 100, 100);
    buffer.end();

    // エフェクト選択
    postGlitch.setFx(OFXPOSTGLITCH_INVERT, ofGetKeyPressed());

    // エフェクトをかける
    postGlitch.generateFx();

    // FBOの内容を画面に描画
    buffer.draw(0,0);
}

setFxの引数を変えればエフェクトが変わる

postGlitch.setFx(OFXPOSTGLITCH_GLOW, ofGetKeyPressed());

ofxPostGlitchType一覧(ヘッダより)

enum ofxPostGlitchType{
	OFXPOSTGLITCH_CONVERGENCE,
	OFXPOSTGLITCH_GLOW,
	OFXPOSTGLITCH_SHAKER,
	OFXPOSTGLITCH_CUTSLIDER,
	OFXPOSTGLITCH_TWIST,
	OFXPOSTGLITCH_OUTLINE,
	OFXPOSTGLITCH_NOISE,
	OFXPOSTGLITCH_SLITSCAN,
	OFXPOSTGLITCH_SWELL,
	OFXPOSTGLITCH_INVERT,
	OFXPOSTGLITCH_CR_HIGHCONTRAST,
	OFXPOSTGLITCH_CR_BLUERAISE,
	OFXPOSTGLITCH_CR_REDRAISE,
	OFXPOSTGLITCH_CR_GREENRAISE,
	OFXPOSTGLITCH_CR_REDINVERT,
	OFXPOSTGLITCH_CR_BLUEINVERT,
	OFXPOSTGLITCH_CR_GREENINVERT
};

円にかけてみた例:

f:id:shu223:20141011214001j:image:w500

(左がOFXPOSTGLITCH_TWIST、右がOFXPOSTGLITCH_SWELL)


フラグメントシェーダ

// 1ピクセルごとにこの処理が行なわれる
void main (void)
{
    // 自分の座標を取得
	vec2 texCoord = vec2(pos.x , pos.y);
    
    // 画像内のその座標における色を取得
	vec4 col = texture2DRect(image,texCoord);;
    
    // 反転させる
	col.r = 1.0 - col.r;
	col.g = 1.0 - col.g;
	col.b = 1.0 - col.b;
    
    // 反転後の色を適用
	gl_FragColor = col;
}

`gl_FragColor` に突っ込んだ色( vec4 構造体)が最終的な色になる。


GLSLのバージョンについて

  • oF上でさくっと動かせるバージョンは120と150
  • oFのサンプル、vboMeshDrawInstancedExample のシェーダを見ると、バージョン120と150の違いがわかる
#version 120
#version 150

  • 言語の仕様が全然違う
    • 最後 `gl_FragColor` につっこむのは120の仕様
    • ofxPostGlitch は120ベース

oFで150を使う場合は、

#define USE_PROGRAMMABLE_GL 1

をヘッダで定義する


(あとで追記)パーティクルにテクスチャを貼る

聞くだけで精一杯だったのであとで追記します。


oFでのシェーディング

固定機能シェーダ
  • OpenGLに元々入っている
  • フラットシェーディング
  • グローシェーディング
  • ライティング

- ofLightとofMaterial


プログラマブルシェーダ
  • 自分でプログラムでシェーディングを記述できる
  • 固定機能シェーダの内容をすべて実現できる(が、全部自分で書かなければならない。大変。)
  • vertex shader

ライトの種類

(配布pdfがすごく詳しいので、メモは省略)


f:id:shu223:20141011212906j:image:w400

(この画像はoFのサイトにあったもの)


サンプル:multiLightExample

examples/gl/multiLightExample


球の解像度

ofSetSphereResolution(128);

f:id:shu223:20141011212822j:image:w500


128だからツルツル、10とかにすると荒くなる


f:id:shu223:20141011213048j:image:w500


解像度落として、smoothlightingをオフにすると、

ofSetSmoothLighting(false);
ofSetSphereResolution(10);

-> フラットシェーディング


法線ベクトルの求め方

ポリゴンの2つの辺の外積を計算する

ofVec3f c = a.crossed(b);

// 単位ベクトルにする
c.normalize();

拡散光の求め方

物体の法線とライト方向の内積から、拡散光が計算できる

float c = a.dot(b);

※固定機能シェーダを使う場合にはOpenGLが計算してくれるので、自分で計算する必要はない


グローシェーディング

球のシェーディングとかのときに、 滑らかな曲面を表現するために、隣り合う平面の法線を平均したものをそれぞれの面の法線とする 方法


oF の `ofSetSmoothLighting` をオンにした状態


【oFセミナーメモ1】 boostライブラリの使い方

デジタルアートセミナー#3 openFrameworksで学ぶ、クリエイティブ・コーディング』という一泊二日のセミナーに参加しています。


最終的なまとめは最後に書くとして、とりいそぎ本日受けたセッションのメモを載せていきます。


セッション1 : C++テクニック

講師 : 堀口淳史、藤本直明

openFrameworksを本格的に使う上で避けて通れないC++のテクニックを学びます。

今回は、boostライブラリの使い方について学びます。


環境

  • MacOS X 10.9.5
  • Xcode 6.1 GMAIL.COM seed 2
  • oF osx 0.8.4
  • boost 1.56.0

boostとは

  • C++の高度で便利なライブラリ
  • oFにpocoってのがもともと入っている
    • pocoとは設計思想が違う
    • boostはテンプレートを駆使
    • STLと違ってC++の開発環境に始めから入っていない
  • boostで書かれた過去の資産を利用できるようになる
  • ヘッダだけインクルードして使うライトな使い方もある
    • 正規表現とかはコンパイルしないと使えない
  • 自分でコンパイルしてMac環境で動かすのがなかなかハードルが高い

課題

  • oFは32ビットバイナリ、boostは普通にインストールすると64ビットバイナリ
  • oFとboostを同時に利用しようとすると、それぞれlibstdc++, libc++を使おうとしててこのあたりがリンクエラーとかの問題になる

「oFで動くMacのboostバイナリ」をどう作るか?


解決策

  • oFを64bitバイナリとしてコンパイルするのは簡単ではない

→ boost のコンパイル時に x86 を address-modelに `32_64` を指定する


  • oFはlibstdc++利用前提、libc++を利用するとコンパイルできない
  • boost はlibstdc++でもlibc++でもコンパイルできる

→ boost のコンパイル時に cxxflags と linflags に `-stdlib=libstdc++` を指定する


libstdc++とlibc++

  • libstdc++は GCCと共に開発される古くから使われている標準ライブラリ
    • GPLライセンス
  • libc++は LLVM/Clangと共に開発された新しい標準ライブラリ
    • MIT ライセンスと UIUC ライセンス

(2014.10.13追記)libstdc++のライセンスについては、コメント欄より下記のようにご指摘いただきました。

libstdc++のライセンスがGPLというのは少し誤解を招いてしまいかねないです。

というのも、libstdc++は特別な条項(GCC Runtime Library Exception)が追加されているからです。これにより、libstdc++を使用するアプリケーションを作成しても、それを公開する際にGPLを適用する必要がありません。その点で、通常のGPLとは大きく異なります。


oFで手っ取り早く使う

  • poco/include/ 配下に boost フォルダのヘッダを丸ごとつっこんじゃえば、パスが通ってるので、ヘッダだけならすぐに使えるようになる(行儀悪い)
  • shared pointer とかはそのまま使える

スマートポインタ

普通のポインタ
ofImage * mTestImage;
mTestImage = new ofImage( "test.jpg" );
delete mTestImage;

new したら delete が必要。


スマートポインタの場合(ofPtr は oF のスマートポインタ)

ofPtr < ofImage > mTestImageSP;
mTestImage = ofPtr< ofImage >( new ofImage( "test.jpg" ) );

delete不要。


boostだと、

boost::shared_ptr< ofImage >

って感じでスマートポインタを使える


スマートポインタに NULL 代入はできないので、

mTestImageSP.reset();

で内部でデストラクタが呼ばれて NULL と同じ状態になる。( `if (mTestImageSP)` でfalseになる)


boostインストール

https://github.com/toolbits/boost_1_56_0_xcode610_universal_binary

boost_libstdc++.dmgを解凍

  • ヘッダだけを使う場合は、includeのフォルダをパス通ってるとこにコピーする
  • libはコンパイル済みのバイナリ
    • Xcode6, MacOS X 10.9で動くようにコンパイルしたもの
  • 一番よく入れるのが、`/usr/local`
    • OS標準以外のあとから追加したライブラリとかを置く場所として(macでは)よく使われる
cd /user/local
open .

この配下にコピー


サンプルプロジェクト

サンプルを動かしつつ、boostの機能を紹介。

https://github.com/toolbits/of_plus_boost_2014seminar


サンプル1: boosted

両端のスペースをカットする文字列処理。ヘッダの機能だけ使用。

boost::algorithm::trim()
void ofApp::setup(){
    std::string str;
    
    str = " Hello boost ";
    std::cout << str << std::endl;
    
    boost::algorithm::trim(str);
    std::cout << str << std::endl;
}

サンプル2: boost_algorithm

文字列処理のサンプル。これらもヘッダだけで可能。


両端の空白を削除

boost::algorithm::trim(str);

カンマで文字列を分割

boost::algorithm::split(vec, str, boost::is_any_of(","));
for (it = vec.begin(); it != vec.end(); ++it) {
    std::cout << *it << std::endl;
}

分割した各文字列の両端の空白を削除

for (it = vec.begin(); it != vec.end(); ++it) {
    boost::algorithm::trim(*it);
}
for (it = vec.begin(); it != vec.end(); ++it) {
    std::cout << *it << std::endl;
}

各文字列を|を区切りにして連結

str = boost::algorithm::join(vec, "|");

文字列の置き換え

boost::algorithm::replace_all(str, "|", " / ");

文字列を置き換えた結果を返す

str = boost::algorithm::replace_first_copy(std::string("C++ source code"), "C++", "boooooooooooooooost");

サンプル3: boost_regex

正規表現のサンプル。これは要バイナリ。このサンプルが動けばboostの全機能が使えるということ。

※プロジェクトに libboost_regex.a が追加されている


boost::regex regex("[^/]+?\\.o$");
boost::match_results<std::string::const_iterator> result;

見つかった項目をすべて表示

std::string::const_iterator bit;
std::string::const_iterator eit;
bit = str.begin();
eit = str.end();
while (boost::regex_search(bit, eit, result, regex)) {
    std::cout << "match = " << result.str() << std::endl;
    bit = result[0].second;
}

見つかった項目をすべて置換

str = boost::regex_replace(str, regex, "********.o");

※ofUtilsに同様の文字列処理機能もあるので一度眺めておくと良い


サンプル4: boost_format_lexical_cast

数値を文字列にキャスト。ヘッダだけでOK。


番号で指定された通りに値を文字列化

str = (boost::format("%1% %2% %3%") % 1 % "abc" % 3.14).str();

printf のフォーマット文も利用可能

str = (boost::format("%06X (hex)") % 12648430).str();
str = (boost::format("%d (dec)") % 0xDEADBEEF).str();

lexical_cast を利用した整数から文字列への変換

str = boost::lexical_cast<std::string>(141421356);
std::cout << str << " (string)" << std::endl;
std::cout << "---- ---- ---- ----" << std::endl;

lexical_cast を利用した文字列から整数への変換

ival = boost::lexical_cast<int>(str);

lexical_cast を利用した文字列から実数への変換

str = "0.12345";
dval = boost::lexical_cast<double>(str);

lexical_cast を利用した不正な文字列から実数への変換

str = "0.12???";
try {
    dval = boost::lexical_cast<double>(str);
}
catch (boost::bad_lexical_cast& e) {
    dval = NAN;
}

サンプル5: boost_thread

スレッドをつくる

  • libboost_system.a
  • libboost_thread.a

サンプル6: boost_mutex

変数へのアクセスを排他にするためのmutex

  • libboost_system.a
  • libboost_thread.a
boost::mutex _mutex;
// カウント変数を増加
_mutex.lock();
++_count;
_mutex.unlock();
// カウント値を取得
_mutex.lock();
count = _count;
_mutex.unlock();
// lock() / unlock() の替わりに lock_guard を利用しても同じ
boost::lock_guard<boost::mutex> guard(_mutex);

// カウント変数を減少
--_count;

サンプル7: boost_lock

shared_mutex を使うと、マルチスレッド処理において、read/writeをいい感じにロックしてくれる。

boost::shared_lock<boost::shared_mutex> rlock(_mutex);

書き込みロック(unique_lock)は1つのスレッドからだけ取れる

// カウント変数を増加
{
    boost::unique_lock<boost::shared_mutex> wlock(_mutex);
    
    ++_count;
}

読みこみロック(shared_lock)は何スレッドからでもとれる

boost::shared_lock<boost::shared_mutex> rlock(_mutex);
ofColor color;

// カウント値を表示
color.setHsb(abs(_count) % 255, 255, 255);
ofBackground(color);
ofDrawBitmapString((boost::format("%1%") % _count).str(), 10, 50);

2014-10-02

Xcode 6 時代のマルチデバイス対応 〜Size Classとベクター画像〜

とあるお仕事で、iPad をサポート(= Universal 化)してほしいという要望があり、せっかくなので iPhone 6 / 6 Plus (4.7 / 5.5 inch スクリーン)もサポートしようってことで、新しい Xcode 6 の新しい仕組みである Size Class を使って複数画面対応を行ないました。あと、同じく Xcode 6 から Asset Catalog でベクター形式がサポートされるようになったので、こちらもトライしてみました。


で、そのときに学んだ諸々の断片的なメモです。勘違いもあるかもしれないのでその際は優しくご指摘いただけますと幸いです。


※ちなみに Size Class やベクター形式画像の使用は iOS 8 以上縛りではありません。単に Xcode 6 の新機能というだけなので。


Size Class の前提知識をつける

「Size Classsとは」ってところを学ぶには、クラスメソッドさんの下記記事が日本語、図解入りでとてもわかりやすいです。


Size Class 機能を使って複数画面サイズ対応する手順のチュートリアル動画。英語ですが、音声なしでもわかりやすいです。Xcodeのプレビュー機能を駆使するのめちゃめちゃ大事。


シーン別 Size Class の指定方法

AutoLayout を Size Class ごとに指定する

もっとも基本的な Size Class の用法。IB の Size Inspector で設定します。


f:id:shu223:20141002091213j:image:w200


UIコンポーネントを Size Class ごとに指定する

後述しますが、ある UIコンポーネントの一部プロパティだけ Size Class ごとに変えたい、UICollectionView のレイアウトだけ変えたい、ってなると、そのコンポーネントのオブジェクト自体を Size Class ごとに使い分けることになります。


で、こちらは IB の Attributes Inspector で設定します(わかりにくい!)


f:id:shu223:20141002091234j:image:w200


ちなみに、IBAction は困らないのですが、IBOutlet は IB 上の1つのオブジェクトとしか接続できないのでちょっと困りました。僕は結局コードから subviews をたどって取得するようにしましたが、もっといい方法があるかもしれないです。


UIコンポーネントのプロパティを Size Class ごとに指定する

たとえば AutoLayout で iPad 用のとある UIButton のサイズを大きめに設定したとすると、その titleLabel のフォントも大きくしたい ということになってきます。


で、これを IB 上でプレビューしながら設定したい、となると結局、上記の「UIコンポーネントを Size Class ごとに指定する」で対応するしかないかと。


(2014.10.30追記)各コンポーネントのフォントにも Size Class ごとの指定ができます


この小っちゃい + をクリックすると、


f:id:shu223:20141030080831j:image:w300


こんな感じで Size Class ごとに設定できます。


f:id:shu223:20141030080900j:image


UICollectionView のレイアウトを Size Class ごとに指定する

iPad、全然サイズ感違うので、UICollectionView の UICollectionViewFlowLayout (もしくは、UICollectionViewLayout を継承する何らかのレイアウト)を別々に指定したい、ってことになると思います。


で、結論から言うと、自分は UICollectionView を Size Class ごとにつくる ことで対応しました。上述の「UIコンポーネントを Size Class ごとに指定する」方法です。Storyboard の該当 CollectionView 上でカスタムセルを定義していた場合は、それも自ずと作り直すことになります。


UITableView のセルの高さを Size Class ごとに指定する

UITableViewのセルの高さも、それ自体を IB から Size Class ごとに指定することはできないので、IB上で Size Class ごとにオブジェクトをつくる・・・のは面倒なので、 UITraitCollection で Size Class を判定し、それに合わせたセルの高さを heightForRow のデリゲートメソッドで返すことにしました。


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    // iPadかどうかの判定
    BOOL isPad = NO;
    if ([self respondsToSelector:@selector(traitCollection)]) {
        
        isPad = self.traitCollection.horizontalSizeClass == UIUserInterfaceSizeClassRegular;
    }
    else {
        isPad = UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
    }
    
    return isPad ? 160.0 : 80.0;
}

なお、上記コードは、画面の向きが Portrait であることを前提としています。また、iOS 7 には `traitCollection` プロパティがないので、従来の方法(UI_USER_INTERFACE_IDIOM)で iPad スクリーンかどうかを判定しています。


xib と Size Class

xib は AutoLayout とかは普通に指定できますが、Size Class ごとの指定ができません(よね??Xcodeは操作方法知らないだけで実はできるとかがよくある。。)


自分は、スクロールビューに動的に貼るビューとか、再利用したいビューとかは xib でインターフェースをつくってそこから生成するということを結構よくやるのですが、Size Class の指定ができないってことで、それらを Storyboard に移し替えました。で、その関係で、あんまり使ってなかった `childViewController` とかも使うようになりました。


(2014.10.2追記)コメント欄より xib でも Size Class 使えますよという情報をいただいて改めて確認してみたところ、File Inspector で [Use Size Classes] にチェックを入れ忘れてただけで、普通に使えました。


(2014.10.6追記)Asset Catalog と Size Class

Asset Catalog でも Size Class ごとに画像を登録できます。


f:id:shu223:20141006073205j:image:w500


IB だけで Size Class で複数画面対応しようとすると上述したように「オブジェクト自体をSize Classごとにつくる」ということをしないといけなくなる場合があって、それやると Constraint がカオスになるので、これはこれで便利です。例えば UIButton に指定する画像を使い分けたいときとか。


ただ僕が試してみたところ、何かやり方が悪かったのか、うまく適用されなかったので、さっさとあきらめて、その上のプルダウンにある、デバイス(Idiom)ごとに Asset を登録する方法で iPhone / iPad の画像使い分けを行ないました。


Asset Catalog のベクター形式サポート

ここから Asset Catalog のベクター形式の話。いろいろとわかりやすい記事が出ています。


あと、WWDC の "What's new in Interface Builder" セッション動画も参考になります。


要点だけ書くと、

  • Xcode 6 の Asset Catalog ではベクター形式の画像をサポート
  • 2x, 3xとか複数リソースを登録する必要がなくなる(1ファイルだけでOK)
  • SVG ではなく PDF 形式

ベクター形式サポートに関するよくある誤解

よくあるというか、僕が誤解してただけなんですが、このベクター形式サポートは、


アプリ内で どんな大きさで使っても奇麗に描画されるものではない ということです。


どういうことかというと、プロジェクトに入れるのはベクタ形式でも、ビルドする際にラスタライズされる *1ので、アプリ実行時に使用されるのは結局ビットマップ形式 ということです。


なので、普通に拡大したらジャギります。ベクター的に使いたいときにはSVGとかを(Asset Catalog じゃないところで)プロジェクトに追加して、今まで通り UIBezierPath とか CGPath で描画しましょう。(このベクタ描画については、拙著にも書いてあります)


ベクター画像のサイズ

大きめに書き出すといい、という情報もありますが、1x サイズで書き出す (つまり所望のポイントサイズ)というのが正しいです。ビルド時にラスタライズ、つまり 2x, 3x サイズのビットマップ形式の画像を生成してくれます。


大きめに書き出すといい、というのは上述の、拡大して使用するとジャギる、ということに端を発する誤解かと思いますが、それは本来あるべきサイズより拡大して用いるからであって、そういう場合はその拡大した状態でのサイズを本来あるべきサイズ(1x サイズ)として指定すればいいのであって、大きめサイズを指定するということではないかと。(わかりにくい文章ですみません)


あと困ったのが、Illustrator で書き出したサイズと、Asset Catalog に入れたときのサイズが合わないという問題。こちらの解決方法は今のところ不明・・・


その他複数画面対応に関連するメモ

謎の「-16」

Xcode 6 で AutoLayout を設定しまくってると必ずぶちあたる、「両端にぴったり 0 でAutoLayout設定しようとすると現れる、謎の "-16"」問題。下記記事で、その正体、対処法が解説されています。


6/6 Plus に最適化される条件

ご存知の通り、既存アプリに何も修正をいれない状態で 6 / 6 Plus で実行すると単純に拡大されるだけです。では、何を条件としてそれが 4.7inch, 5.5inch 最適化モード(※単純拡大されなくなった状態)に切り替わるのか、のメモです。


  • Launch 画像を登録する

Asset Catalog で、4.7inch, 5.5inch 用の Launch 画像を入れると、それぞれに最適化されたものとして描画されるようになります。


  • Launch Screen Fileを指定する

起動画面を Storyboard でつくれるようになった、っていうアレです。そういう Storyboard をプロジェクトに含めるだけならセーフ、[General] > [App Icons and Launch Images] > [Launch Screen File] でその Storyboard を指定すると 4.7, 5.5 対応が必要になります。


  • Asset Catalog への 3x 画像の登録

は、トリガにはなりませんでした。


6 Plus で表示してみると、普通にその 3x 画像が適用されましたが、単純拡大のまま。




*1:WWDC のセッション "What's new in Interface Builder" 参照

2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2018 | 02 |